Skip to content

Commit

Permalink
releasef alts on ladder and activity leaderboard
Browse files Browse the repository at this point in the history
  • Loading branch information
Sammers21 committed Mar 11, 2024
1 parent c8b1a98 commit 985c071
Show file tree
Hide file tree
Showing 5 changed files with 260 additions and 252 deletions.
10 changes: 7 additions & 3 deletions frontend/src/components/AltsTable/Row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,25 @@ interface IProps {
onRowOver?: (record: any | null) => void;
bgColor?: string;
shouldHighlight?: boolean;
altHighlight?: boolean;
}

const Row = ({
record,
columns,
shouldHighlight,
altHighlight,
bgColor,
onRowOver,
}: IProps) => {
const bgClass = shouldHighlight ? "rgb(21, 128, 61, 0.25)" : "";

const href = window.location.href
let bgClass = shouldHighlight ? "rgb(21, 128, 61, 0.25)" : altHighlight ? "rgb(96, 165, 250, 0.25)" : '';
if(href.indexOf("ladder") > -1 || href.indexOf("shuffle") > -1) {
bgClass = altHighlight ? "rgb(96, 165, 250, 0.25)" : '';
}
const renderDefaultCell = (value: string) => {
return <Typography variant="h6">{value}</Typography>;
};

return (
<TableRow
onMouseEnter={() => onRowOver && onRowOver(record)}
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/AltsTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,26 @@ const Table = ({
const rowsComponent = useMemo(() => {
function renderRow(record: IActivityRecord, index: number) {
let shouldHighlight;
let altHighlight;
if (diff === record) {
shouldHighlight = true;
altHighlight = true;
} else {
shouldHighlight =
diff && record.diff
? record.diff.last_seen === diff.diff?.last_seen &&
record.diff.won === diff.diff.won &&
record.diff.lost === diff.diff.lost
: false;
altHighlight = record && diff && record.pethash && diff.pethash ? diff.pethash === record.pethash : false;
}
return (
<Row
key={index}
record={record}
columns={columns}
shouldHighlight={shouldHighlight}
altHighlight={altHighlight}
onRowOver={onRowOver}
/>
);
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/DataTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ interface IProps {
data: Record<BRACKETS, string> | undefined;
}

const DataList = ({ data: statistic }: IProps) => {
const DataList = ({ data: statistics }: IProps) => {
const { region = REGION.eu, bracket = BRACKETS['3v3'] } = useParams();
const activity = getActivityFromUrl();
const [searchParams] = useSearchParams();
Expand Down Expand Up @@ -69,9 +69,8 @@ const DataList = ({ data: statistic }: IProps) => {
selectedSpecs={selectedSpecs}
onSpecsChange={setSelectedSpecs}
bracket={bracket}
statistic={statistic}
statistics={statistics}
/>

<Table
loading={loading}
totalPages={totalPages}
Expand Down
166 changes: 83 additions & 83 deletions frontend/src/components/TableFilter/index.tsx
Original file line number Diff line number Diff line change
@@ -1,83 +1,83 @@
import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { isEmpty } from 'lodash';

import { Button } from '@mui/material';
import Spec from './Spec';
import CutOffRating from './CutOffRating';

import { CRESTS_AND_SPECS } from '@/constants/filterSchema';

interface IProps {
selectedSpecs: string[];
onSpecsChange: (specs: string[]) => void;
bracket: string;
statistic: any;
}

const TableFilter = ({ selectedSpecs, onSpecsChange, bracket, statistic }: IProps) => {
const navigate = useNavigate();
const location = useLocation();
const [filtersShown, setFiltersShown] = useState(selectedSpecs.length > 0);

const toggleFilterShown = () => {
setFiltersShown(!filtersShown);
};

const resetFilters = () => {
navigate(location.pathname);
onSpecsChange([]);
};

const handleSpecsSelect = (newSpecs: string[]) => {
if (newSpecs.length === 0) {
resetFilters();
} else {
navigate(location.pathname + '?specs=' + newSpecs.join(','));
onSpecsChange(newSpecs);
}
};

return (
<div className="bg-[#030303e6] px-4 sm:px-8">
<div className="flex items-center justify-between pt-2 sm:pt-6 pb-0">
<CutOffRating statistic={statistic} bracket={bracket} />
<Button className="!px-8 !text-white !bg-[#1F2937]" onClick={toggleFilterShown}>
Filters
{!isEmpty(selectedSpecs) && (
<div className="flex justify-center items-center absolute w-6 h-6 -top-2 -right-2 bg-[#1769aa] text-[#fff] rounded-full text-xs">
{selectedSpecs.length}
</div>
)}
</Button>
</div>

<div className={filtersShown ? 'visible rounded p-4 mt-4 bg-[#1f2937] bg-opacity-25' : 'invisible h-0 min-h-0 overflow-hidden'}>
<div className="flex flex-wrap justify-center gap-8">
{Object.entries(CRESTS_AND_SPECS).map(([crestId, specs]) => {
return (
<Spec
crestId={crestId}
specs={specs}
handleSpecsSelect={handleSpecsSelect}
selectedSpecs={selectedSpecs}
/>
);
})}
</div>

<div className="flex justify-end pt-4">
<Button
className="!px-8 !bg-[#991b1b] !bg-opacity-50 !text-white"
disabled={isEmpty(selectedSpecs)}
onClick={resetFilters}
>
Reset Filters
</Button>
</div>
</div>
</div>
);
};

export default TableFilter;
import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { isEmpty } from 'lodash';

import { Button } from '@mui/material';
import Spec from './Spec';
import CutOffRating from './CutOffRating';

import { CRESTS_AND_SPECS } from '@/constants/filterSchema';

interface IProps {
selectedSpecs: string[];
onSpecsChange: (specs: string[]) => void;
bracket: string;
statistics: any;
}

const TableFilter = ({ selectedSpecs, onSpecsChange, bracket, statistics: statistic }: IProps) => {
const navigate = useNavigate();
const location = useLocation();
const [filtersShown, setFiltersShown] = useState(selectedSpecs.length > 0);

const toggleFilterShown = () => {
setFiltersShown(!filtersShown);
};

const resetFilters = () => {
navigate(location.pathname);
onSpecsChange([]);
};

const handleSpecsSelect = (newSpecs: string[]) => {
if (newSpecs.length === 0) {
resetFilters();
} else {
navigate(location.pathname + '?specs=' + newSpecs.join(','));
onSpecsChange(newSpecs);
}
};

return (
<div className="bg-[#030303e6] px-4 sm:px-8">
<div className="flex items-center justify-between pt-2 sm:pt-6 pb-0">
<CutOffRating statistic={statistic} bracket={bracket} />
<Button className="!px-8 !text-white !bg-[#1F2937]" onClick={toggleFilterShown}>
Filters
{!isEmpty(selectedSpecs) && (
<div className="flex justify-center items-center absolute w-6 h-6 -top-2 -right-2 bg-[#1769aa] text-[#fff] rounded-full text-xs">
{selectedSpecs.length}
</div>
)}
</Button>
</div>

<div className={filtersShown ? 'visible rounded p-4 mt-4 bg-[#1f2937] bg-opacity-25' : 'invisible h-0 min-h-0 overflow-hidden'}>
<div className="flex flex-wrap justify-center gap-8">
{Object.entries(CRESTS_AND_SPECS).map(([crestId, specs]) => {
return (
<Spec
crestId={crestId}
specs={specs}
handleSpecsSelect={handleSpecsSelect}
selectedSpecs={selectedSpecs}
/>
);
})}
</div>

<div className="flex justify-end pt-4">
<Button
className="!px-8 !bg-[#991b1b] !bg-opacity-50 !text-white"
disabled={isEmpty(selectedSpecs)}
onClick={resetFilters}
>
Reset Filters
</Button>
</div>
</div>
</div>
);
};

export default TableFilter;
Loading

0 comments on commit 985c071

Please sign in to comment.