1
Fork 0

Add scoreboard

This commit is contained in:
Steffo 2025-01-07 17:25:16 +01:00
parent 473d715960
commit 5ed7e82e51
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
4 changed files with 101 additions and 0 deletions

View 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}
/>
)
}

View file

@ -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;
}

View file

@ -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

View 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>
)
}