Add scoreboard
This commit is contained in:
parent
473d715960
commit
5ed7e82e51
4 changed files with 101 additions and 0 deletions
15
holycow_frontend/src/app/board/page.tsx
Normal file
15
holycow_frontend/src/app/board/page.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import {BoardBox} from "@/components/BoardBox"
|
||||
import {PlayerO} from "@/holycow"
|
||||
|
||||
|
||||
export default async function Page() {
|
||||
const resultsResponse = await fetch(`${process.env.BASE_URL}/api/results/`)
|
||||
const results: PlayerO[] = await resultsResponse.json()
|
||||
const ratedPlayers = results.filter(p => p.human_score !== null).toSorted((a, b) => a.human_score - b.human_score).toReversed()
|
||||
|
||||
return (
|
||||
<BoardBox
|
||||
players={ratedPlayers}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -20,3 +20,33 @@ hr {
|
|||
/* TODO: Fix in bluelib */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scoreboard-gold {
|
||||
--bhsl-current-hue: 36deg;
|
||||
--bhsl-current-saturation: 100%;
|
||||
--bhsl-current-lightness: 60%;
|
||||
|
||||
background-color: hsla(36deg 100% 60% / 0.1);
|
||||
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.scoreboard-silver {
|
||||
--bhsl-current-hue: 205deg;
|
||||
--bhsl-current-saturation: 20%;
|
||||
--bhsl-current-lightness: 83%;
|
||||
|
||||
background-color: hsla(205deg 20% 83% / 0.1);
|
||||
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.scoreboard-bronze {
|
||||
--bhsl-current-hue: 24deg;
|
||||
--bhsl-current-saturation: 100%;
|
||||
--bhsl-current-lightness: 62%;
|
||||
|
||||
background-color: hsla(24deg 100% 62% / 0.1);
|
||||
|
||||
font-size: large;
|
||||
}
|
|
@ -21,6 +21,9 @@ export default function Page() {
|
|||
case "report":
|
||||
router.replace(`/${data.user.id}/report`)
|
||||
return
|
||||
case "board":
|
||||
router.replace(`/board`)
|
||||
return
|
||||
default:
|
||||
router.replace(`/none`)
|
||||
return
|
||||
|
|
53
holycow_frontend/src/components/BoardBox.tsx
Normal file
53
holycow_frontend/src/components/BoardBox.tsx
Normal file
|
@ -0,0 +1,53 @@
|
|||
import {PlayerO} from "@/holycow"
|
||||
import classNames from "classnames"
|
||||
|
||||
|
||||
export type BoardBoxProps = {
|
||||
players: PlayerO[]
|
||||
}
|
||||
|
||||
|
||||
export function BoardBox({players}: BoardBoxProps) {
|
||||
return (
|
||||
<div className={"chapter-1"}>
|
||||
<table className={"panel box"}>
|
||||
<caption className={"table-caption-top"}>
|
||||
<h3>
|
||||
Classifica competitiva
|
||||
</h3>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Posizione</th>
|
||||
<th>Giocatore</th>
|
||||
<th>Punti</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{players.map((player, index) => {
|
||||
return (
|
||||
<tr
|
||||
key={player.username}
|
||||
className={classNames({
|
||||
"scoreboard-gold": index === 0,
|
||||
"scoreboard-silver": index === 1,
|
||||
"scoreboard-bronze": index === 2,
|
||||
})}
|
||||
>
|
||||
<td>
|
||||
{index + 1}
|
||||
</td>
|
||||
<td>
|
||||
{player.username}
|
||||
</td>
|
||||
<td>
|
||||
{player.human_score} ★
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Add table
Reference in a new issue