feat(frontend): update dependencies

5 files changed, 70 insertions, 53 deletions

diff --git a/frontend/app/components/Gaming/Score.tsx b/frontend/app/components/Gaming/Score.tsx
index b4a415c..ee23a6c 100644
--- a/frontend/app/components/Gaming/Score.tsx
+++ b/frontend/app/components/Gaming/Score.tsx
@@ -6,30 +6,28 @@ type Props = {
 };
 
 export default function Score({ status, score }: Props) {
-	const [displayScore, setDisplayScore] = useState(score);
+	const [randomScore, setRandomScore] = useState<number | null>(null);
 
 	useEffect(() => {
-		let intervalId = null;
-
-		if (status === "running") {
-			intervalId = setInterval(() => {
-				const maxValue = Math.pow(10, String(score ?? 100).length) - 1;
-				const minValue = Math.pow(10, String(score ?? 100).length - 1);
-				const randomValue =
-					Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
-				setDisplayScore(randomValue);
-			}, 50);
-		} else {
-			setDisplayScore(score);
+		if (status !== "running") {
+			return;
 		}
 
+		const intervalId = setInterval(() => {
+			const maxValue = Math.pow(10, String(score ?? 100).length) - 1;
+			const minValue = Math.pow(10, String(score ?? 100).length - 1);
+			const randomValue =
+				Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
+			setRandomScore(randomValue);
+		}, 50);
+
 		return () => {
-			if (intervalId) {
-				clearInterval(intervalId);
-			}
+			clearInterval(intervalId);
 		};
 	}, [status, score]);
 
+	const displayScore = status === "running" ? randomScore : score;
+
 	return (
 		<span className={status === "running" ? "animate-pulse" : ""}>
 			{displayScore}
diff --git a/frontend/app/pages/GolfPlayPage.tsx b/frontend/app/pages/GolfPlayPage.tsx
index c183ac8..49f47f6 100644
--- a/frontend/app/pages/GolfPlayPage.tsx
+++ b/frontend/app/pages/GolfPlayPage.tsx
@@ -1,4 +1,4 @@
-import { Provider as JotaiProvider, createStore } from "jotai";
+import { createStore, Provider as JotaiProvider } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
diff --git a/frontend/app/pages/GolfWatchPage.tsx b/frontend/app/pages/GolfWatchPage.tsx
index 519a030..4f76136 100644
--- a/frontend/app/pages/GolfWatchPage.tsx
+++ b/frontend/app/pages/GolfWatchPage.tsx
@@ -1,4 +1,4 @@
-import { Provider as JotaiProvider, createStore } from "jotai";
+import { createStore, Provider as JotaiProvider } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 404fa2d..53fb62b 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -48,7 +48,10 @@ function BranchVR({ className = "" }: { className?: string }) {
 function BranchVL2({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-3">
 			<div className={`border-r-4 ${className}`}></div>
@@ -63,7 +66,10 @@ function BranchVL2({
 function BranchVR2({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-3">
 			<div className={`border-t-4 ${className}`}></div>
@@ -128,7 +134,10 @@ function BranchH2({
 function BranchL({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-2">
 			<div></div>
@@ -144,7 +153,10 @@ function BranchL({
 function BranchR({
 	score,
 	className = "",
-}: { score: number | null; className?: string }) {
+}: {
+	score: number | null;
+	className?: string;
+}) {
 	return (
 		<div className="grid grid-cols-2">
 			<div
@@ -202,51 +214,58 @@ function getBorderColor(match: TournamentMatch, playerIDs: number[]): string {
 export default function TournamentPage() {
 	usePageTitle(`Tournament | ${APP_NAME}`);
 
+	const params = new URLSearchParams(window.location.search);
+	const game1 = Number(params.get("game1"));
+	const game2 = Number(params.get("game2"));
+	const game3 = Number(params.get("game3"));
+	const game4 = Number(params.get("game4"));
+	const game5 = Number(params.get("game5"));
+	const gamesValid = game1 && game2 && game3 && game4 && game5;
+
+	const pIDs = [
+		Number(params.get("player1")),
+		Number(params.get("player2")),
+		Number(params.get("player3")),
+		Number(params.get("player4")),
+		Number(params.get("player5")),
+		Number(params.get("player6")),
+	];
+	const playersValid = pIDs.every((id) => id);
+
+	const paramsValid = gamesValid && playersValid;
+	const paramsError = !gamesValid
+		? "Missing or invalid game parameters"
+		: !playersValid
+			? "Missing or invalid player parameters"
+			: null;
+
 	const [tournament, setTournament] = useState<{
 		matches: TournamentMatch[];
 	} | null>(null);
-	const [playerIDs, setPlayerIDs] = useState<number[]>([]);
+	const playerIDs = paramsValid ? pIDs : [];
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
 
 	useEffect(() => {
-		const params = new URLSearchParams(window.location.search);
-		const game1 = Number(params.get("game1"));
-		const game2 = Number(params.get("game2"));
-		const game3 = Number(params.get("game3"));
-		const game4 = Number(params.get("game4"));
-		const game5 = Number(params.get("game5"));
-
-		if (!game1 || !game2 || !game3 || !game4 || !game5) {
-			setError("Missing or invalid game parameters");
-			setLoading(false);
+		if (!paramsValid) {
 			return;
 		}
 
-		const pIDs = [
-			Number(params.get("player1")),
-			Number(params.get("player2")),
-			Number(params.get("player3")),
-			Number(params.get("player4")),
-			Number(params.get("player5")),
-			Number(params.get("player6")),
-		];
-
-		if (pIDs.some((id) => !id)) {
-			setError("Missing or invalid player parameters");
-			setLoading(false);
-			return;
-		}
-
-		setPlayerIDs(pIDs);
-
 		const apiClient = createApiClient();
 		apiClient
 			.getTournament(game1, game2, game3, game4, game5)
 			.then(({ tournament }) => setTournament(tournament))
 			.catch(() => setError("Failed to load tournament"))
 			.finally(() => setLoading(false));
-	}, []);
+	}, [paramsValid, game1, game2, game3, game4, game5]);
+
+	if (paramsError) {
+		return (
+			<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+				<p className="text-red-500">{paramsError}</p>
+			</div>
+		);
+	}
 
 	if (loading) {
 		return (
diff --git a/frontend/app/shiki.bundle.ts b/frontend/app/shiki.bundle.ts
index 22b0ce2..aeec5a0 100644
--- a/frontend/app/shiki.bundle.ts
+++ b/frontend/app/shiki.bundle.ts
@@ -5,8 +5,8 @@ import type {
   HighlighterGeneric,
 } from '@shikijs/types'
 import {
+  createBundledHighlighter,
   createSingletonShorthands,
-  createdBundledHighlighter,
 } from '@shikijs/core'
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
 
@@ -23,7 +23,7 @@ const bundledThemes = {
   'github-light': () => import('@shikijs/themes/github-light'),
 } as Record<BundledTheme, DynamicImportThemeRegistration>
 
-const createHighlighter = /* @__PURE__ */ createdBundledHighlighter<
+const createHighlighter = /* @__PURE__ */ createBundledHighlighter<
   BundledLanguage,
   BundledTheme
 >({