updating game colors

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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -78,8 +78,8 @@
<script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script> <script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script>
<script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script> <script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-DOsCnBty.js"></script> <script type="module" crossorigin src="/assets/index-Bxy0t7bb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-iL5XsC62.css"> <link rel="stylesheet" crossorigin href="/assets/index-CZM8e4sR.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
@@ -316,7 +316,7 @@ module.exports = {
id: GAME_ID, id: GAME_ID,
title: 'Most items', title: 'Most items',
description: 'Scan as many different known objects as possible.', description: 'Scan as many different known objects as possible.',
themeColor: { r: 16, g: 185, b: 129 }, themeColor: { r: 255, g: 145, b: 71 },
createInitialState, createInitialState,
normalizeState, normalizeState,
activate, activate,
@@ -301,7 +301,7 @@ module.exports = {
id: GAME_ID, id: GAME_ID,
title: 'Scan quest', title: 'Scan quest',
description: 'Scan one or two requested objects in order.', description: 'Scan one or two requested objects in order.',
themeColor: { r: 34, g: 211, b: 238 }, themeColor: { r: 255, g: 150, b: 252 },
createInitialState, createInitialState,
normalizeState, normalizeState,
activate, activate,
@@ -319,7 +319,7 @@ module.exports = {
id: GAME_ID, id: GAME_ID,
title: 'Scans per second', title: 'Scans per second',
description: 'Count every scan for five minutes and save the world record.', description: 'Count every scan for five minutes and save the world record.',
themeColor: { r: 245, g: 158, b: 11 }, themeColor: { r: 72, g: 245, b: 66 },
createInitialState, createInitialState,
normalizeState, normalizeState,
activate, activate,
@@ -154,35 +154,36 @@ function Leaderboard({ players, ownPlayer }) {
const hasOwnPoints = ownPlayer && Number.isFinite(ownPlayer.totalPoints); const hasOwnPoints = ownPlayer && Number.isFinite(ownPlayer.totalPoints);
return ( return (
<div className="space-y-1"> <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 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 px-1 py-0.75">
<div className="surface px-1 py-0.75"> <div className="min-w-0">
<p className="text-xs text-neutral-400">Your points</p> <p className="text-xs font-semibold text-neutral-300">Your points</p>
<p className="text-lg font-semibold leading-tight text-neutral-50"> <p className="truncate text-[0.7rem] text-neutral-400">
{hasOwnPoints ? ownPlayer.totalPoints : 0} {ownPlayer?.rank ? `Rank ${ownPlayer.rank}` : 'No rank yet'}
</p> </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> </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>
</div> </div>
); );
} }
export default function BarcodeGamesPanel() { export default function BarcodeGamesPanel() {
const { state, connectionState, voteForGame } = useBarcodeGameState(); const { state, connectionState, voteForGame } = useBarcodeGameState();
const [pendingGameId, setPendingGameId] = useState(null); const [pendingGameId, setPendingGameId] = useState(null);