legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

updating game colors

Browse Source
This commit is contained in:
legop3
2026-06-19 03:23:03 -04:00
parent 2f5f18fa6d
commit 302079eadf
8 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/BarcodeGamesPanel/index.jsx
+24 -23
View File
@@ -154,35 +154,36 @@ function Leaderboard({ players, ownPlayer }) {
const hasOwnPoints = ownPlayer && Number.isFinite(ownPlayer.totalPoints);
return (
<div className="space-y-1">
<div className="grid gap-0.5 sm:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
<div className="surface px-1 py-0.75">
<p className="text-xs text-neutral-400">Your points</p>
<p className="text-lg font-semibold leading-tight text-neutral-50">
{hasOwnPoints ? ownPlayer.totalPoints : 0}
<div className="surface grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 px-1 py-0.75">
<div className="min-w-0">
<p className="text-xs font-semibold text-neutral-300">Your points</p>
<p className="truncate text-[0.7rem] text-neutral-400">
{ownPlayer?.rank ? `Rank ${ownPlayer.rank}` : 'No rank yet'}
</p>
{ownPlayer?.rank ? <p className="text-[0.7rem] text-neutral-400">Rank {ownPlayer.rank}</p> : null}
</div>
<div className="surface px-1 py-0.75">
<p className="mb-0.5 text-xs font-semibold text-neutral-300">Leaderboard</p>
{Array.isArray(players) && players.length ? (
<div className="space-y-0.5">
{players.slice(0, 4).map((player, idx) => (
<div key={player.playerKey} className="grid grid-cols-[1.25rem_minmax(0,1fr)_auto] gap-1 text-xs">
<span className="font-mono text-neutral-500">{idx + 1}</span>
<span className="truncate text-neutral-200">{player.nickname}</span>
<span className="font-mono text-neutral-300">{player.totalPoints}</span>
</div>
))}
</div>
) : (
<p className="text-xs text-neutral-500">No points yet</p>
)}
</div>
<p className="font-mono text-xl font-semibold leading-tight text-neutral-50">
{hasOwnPoints ? ownPlayer.totalPoints : 0}
</p>
</div>
<div className="surface px-1 py-0.75">
<p className="mb-0.5 text-xs font-semibold text-neutral-300">Leaderboard</p>
{Array.isArray(players) && players.length ? (
<div className="grid gap-0.5">
{players.slice(0, 4).map((player, idx) => (
<div key={player.playerKey} className="surface-muted grid grid-cols-[1.5rem_minmax(0,1fr)_3rem] items-center gap-0.5 px-1 py-0.5 text-xs">
<span className="font-mono text-neutral-500">{idx + 1}</span>
<span className="truncate text-neutral-200">{player.nickname}</span>
<span className="text-right font-mono text-neutral-200">{player.totalPoints}</span>
</div>
))}
</div>
) : (
<p className="text-xs text-neutral-500">No points yet</p>
)}
</div>
</div>
);
}
export default function BarcodeGamesPanel() {
const { state, connectionState, voteForGame } = useBarcodeGameState();
const [pendingGameId, setPendingGameId] = useState(null);