Skip to content

Commit

Permalink
[feat] New grouped leaderboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reqwey
Reqwey committed Dec 24, 2023
1 parent 1eeeb53 commit acd9c9d
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 81 deletions.
228 changes: 150 additions & 78 deletions client/components/game/LeaderBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import { useTranslation } from 'next-i18next';
import { useState, useEffect } from 'react';
import { Player, LeaderBoardTable, UserData } from '@/lib/types';
import { ColorArr, WarringStates } from '@/lib/constants';
import { ColorArr, MaxTeamNum, WarringStates } from '@/lib/constants';

interface LeaderBoardProps {
players: Player[];
Expand Down Expand Up @@ -48,14 +48,36 @@ export default function LeaderBoard(props: LeaderBoardProps) {
else return null;
};

let leaderBoardData: LeaderBoardData = leaderBoardTable.map((row) => {
return {
let teams = new Array(MaxTeamNum + 1);
leaderBoardTable.forEach((row) => {
if (!teams[row[1]])
teams[row[1]] = {
id: row[1],
armyCount: 0,
landsCount: 0,
players: [],
};
teams[row[1]].armyCount += row[2];
teams[row[1]].landsCount += row[3];
teams[row[1]].players.push({
color: row[0],
username: fetchUsernameByColor(row[0]),
armyCount: row[2],
landsCount: row[3],
};
});
});
teams = teams
.sort((a, b) => b.armyCount - a.armyCount || b.landsCount - a.landsCount)
.map((x) => {
return {
...x,
players: x.players.sort(
(a: any, b: any) =>
b.armyCount - a.armyCount || b.landsCount - a.landsCount
),
};
});

return (
<Box>
<TableContainer>
Expand Down Expand Up @@ -124,84 +146,134 @@ export default function LeaderBoard(props: LeaderBoardProps) {
</TableRow>
</TableHead>
<TableBody>
{leaderBoardData.map((player, index) => (
<TableRow key={index}>
{warringStatesMode && (
<TableCell align='center'>
{WarringStates[player.color]}
{teams.map((team, index) => (
<>
<TableRow key={index + '-' + 0}>
<TableCell
sx={{
display:
gameDockExpand && checkedPlayers && setCheckedPlayers
? ''
: 'none',
}}
>
<Checkbox
defaultChecked={false}
sx={{
width: '1.5rem',
height: '1.5rem',
}}
onChange={(event: any) => {
if (!checkedPlayers || !setCheckedPlayers) return;
if (event.target.checked) {
let newCheckedPlayers = [
...checkedPlayers,
...team.players.map((x: any) => {
return {
team: team.id,
username: x.username,
color: x.color,
} as UserData;
}),
];
console.log(newCheckedPlayers);
setCheckedPlayers(newCheckedPlayers);
} else {
setCheckedPlayers(
checkedPlayers.filter((p) => p.team !== team.id)
);
}
}}
/>
</TableCell>
<TableCell
sx={{
display: gameDockExpand ? '' : 'none',
}}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{'TEAM ' + team.id}
</TableCell>
)}
<TableCell
sx={{
display:
gameDockExpand && checkedPlayers && setCheckedPlayers
? ''
: 'none',
}}
>
<Checkbox
defaultChecked={false}
<TableCell
sx={{
width: '1.5rem',
height: '1.5rem',
display: gameDockExpand ? 'none' : '',
}}
onChange={(event: any) => {
if (!checkedPlayers || !setCheckedPlayers) return;
if (event.target.checked) {
let newCheckedPlayers = [
...(checkedPlayers as UserData[]),
{
username: player.username,
color: player.color,
} as UserData,
];
setCheckedPlayers(newCheckedPlayers);
} else {
setCheckedPlayers(
checkedPlayers.filter((p) => p.color !== player.color)
);
}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
/>
</TableCell>
<TableCell
sx={{
display: gameDockExpand ? '' : 'none',
backgroundColor: ColorArr[player.color],
}}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.username}
</TableCell>
<TableCell
sx={{
display: gameDockExpand ? 'none' : '',
padding: '3px',
backgroundColor: ColorArr[player.color],
}}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
></TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.armyCount}
</TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.landsCount}
</TableCell>
</TableRow>
>
{'T' + team.id}
</TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{team.armyCount}
</TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{team.landsCount}
</TableCell>
</TableRow>

{team.players.map((player: any, j: number) => (
<TableRow key={index + '-' + (j + 1)}>
<TableCell
sx={{
display:
gameDockExpand && checkedPlayers && setCheckedPlayers
? ''
: 'none',
}}
></TableCell>
<TableCell
sx={{
display: gameDockExpand ? '' : 'none',
backgroundColor: ColorArr[player.color],
}}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.username}
</TableCell>
<TableCell
sx={{
display: gameDockExpand ? 'none' : '',
padding: '3px',
backgroundColor: ColorArr[player.color],
}}
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
></TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.armyCount}
</TableCell>
<TableCell
align='center'
onClick={() => {
setGameDockExpand(!gameDockExpand);
}}
>
{player.landsCount}
</TableCell>
</TableRow>
))}
</>
))}
</TableBody>
</Table>
Expand Down
1 change: 1 addition & 0 deletions client/lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export type LeaderBoardTable = LeaderBoardRow[];

export interface UserData {
id?: string;
team?: string;
username: string;
color: number;
}
Expand Down
3 changes: 0 additions & 3 deletions server/src/server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,9 +434,6 @@ async function handleGame(room: Room, io: Server) {
.map((player) => {
let data = room.map.getTotal(player);
return [player.color, player.team, data.army, data.land] as LeaderBoardRow;
})
.sort((a, b) => {
return b[1] - a[1] || b[2] - a[2];
});

let room_sockets = await io.in(room.id).fetchSockets();
Expand Down

0 comments on commit acd9c9d

Please sign in to comment.