feat(frontend): obtain `problem` from `Game` object instead of `prepare` message's payload

2 files changed, 8 insertions, 10 deletions

diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx
index 43828e6..70c463f 100644
--- a/frontend/app/components/GolfPlayApp.client.tsx
+++ b/frontend/app/components/GolfPlayApp.client.tsx
@@ -11,7 +11,6 @@ import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting";
 type WebSocketMessage = components["schemas"]["GamePlayerMessageS2C"];
 
 type Game = components["schemas"]["Game"];
-type Problem = components["schemas"]["Problem"];
 
 type GameState = "connecting" | "waiting" | "starting" | "gaming" | "finished";
 
@@ -32,8 +31,6 @@ export default function GolfPlayApp({
 
 	const [gameState, setGameState] = useState<GameState>("connecting");
 
-	const [problem, setProblem] = useState<Problem | null>(null);
-
 	const [startedAt, setStartedAt] = useState<number | null>(null);
 
 	const [timeLeftSeconds, setTimeLeftSeconds] = useState<number | null>(null);
@@ -105,8 +102,6 @@ export default function GolfPlayApp({
 			if (lastJsonMessage !== null) {
 				console.log(lastJsonMessage.type);
 				if (lastJsonMessage.type === "player:s2c:prepare") {
-					const { problem } = lastJsonMessage.data;
-					setProblem(problem);
 					console.log("player:c2s:ready");
 					sendJsonMessage({ type: "player:c2s:ready" });
 				} else if (lastJsonMessage.type === "player:s2c:start") {
@@ -148,7 +143,8 @@ export default function GolfPlayApp({
 	} else if (gameState === "gaming") {
 		return (
 			<GolfPlayAppGaming
-				problem={problem!.description}
+				problemTitle={game.problem.title}
+				problemDescription={game.problem.description}
 				onCodeChange={onCodeChange}
 				onCodeSubmit={onCodeSubmit}
 				currentScore={currentScore}
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index fdf0e0c..31927a5 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,7 +1,8 @@
 import React, { useRef } from "react";
 
 type Props = {
-	problem: string;
+	problemTitle: string;
+	problemDescription: string;
 	onCodeChange: (code: string) => void;
 	onCodeSubmit: (code: string) => void;
 	currentScore: number | null;
@@ -9,7 +10,8 @@ type Props = {
 };
 
 export default function GolfPlayAppGaming({
-	problem,
+	problemTitle,
+	problemDescription,
 	onCodeChange,
 	onCodeSubmit,
 	currentScore,
@@ -32,8 +34,8 @@ export default function GolfPlayAppGaming({
 			<div className="mx-auto flex min-h-full flex-grow">
 				<div className="flex w-1/2 flex-col justify-between p-4">
 					<div>
-						<div className="mb-2 text-xl font-bold">TODO</div>
-						<div className="text-gray-700">{problem}</div>
+						<div className="mb-2 text-xl font-bold">{problemTitle}</div>
+						<div className="text-gray-700">{problemDescription}</div>
 					</div>
 					<div className="mb-4 mt-auto">
 						<div className="mb-2">