aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/routes/golf/play
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/routes/golf/play')
-rw-r--r--frontend/src/routes/golf/play/App.tsx132
-rw-r--r--frontend/src/routes/golf/play/GameState.ts8
-rw-r--r--frontend/src/routes/golf/play/apps/Connecting.tsx8
-rw-r--r--frontend/src/routes/golf/play/apps/Failed.tsx8
-rw-r--r--frontend/src/routes/golf/play/apps/Finished.tsx27
-rw-r--r--frontend/src/routes/golf/play/apps/Gaming.tsx18
-rw-r--r--frontend/src/routes/golf/play/apps/Starting.tsx6
-rw-r--r--frontend/src/routes/golf/play/apps/Waiting.tsx8
8 files changed, 118 insertions, 97 deletions
diff --git a/frontend/src/routes/golf/play/App.tsx b/frontend/src/routes/golf/play/App.tsx
index f95f2a0..0e650c9 100644
--- a/frontend/src/routes/golf/play/App.tsx
+++ b/frontend/src/routes/golf/play/App.tsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
-import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { useDebouncedCallback } from 'use-debounce';
-import Connecting from './apps/Connecting.tsx';
-import Waiting from './apps/Waiting.tsx';
-import Starting from './apps/Starting.tsx';
-import Gaming from './apps/Gaming.tsx';
-import Finished from './apps/Finished.tsx';
-import Failed from './apps/Failed.tsx';
-import type { GameState } from './GameState.ts';
+import { useState, useEffect } from "react";
+import useWebSocket, { ReadyState } from "react-use-websocket";
+import { useDebouncedCallback } from "use-debounce";
+import Connecting from "./apps/Connecting.tsx";
+import Waiting from "./apps/Waiting.tsx";
+import Starting from "./apps/Starting.tsx";
+import Gaming from "./apps/Gaming.tsx";
+import Finished from "./apps/Finished.tsx";
+import Failed from "./apps/Failed.tsx";
+import type { GameState } from "./GameState.ts";
type Props = {
gameId: number;
@@ -15,36 +15,49 @@ type Props = {
};
type WebSocketMessage =
- { type: 'connect' }
- | { type: 'prepare'; data: { problem: string } }
- | { type: 'ready' }
- | { type: 'start'; data: { startTime: string } }
- | { type: 'finish'; data: { yourScore: number | null; opponentScore: number | null } }
- | { type: 'score'; data: { score: number } }
- | { type: 'code'; data: { code: string } }
- | { type: 'watch'; data: { problem: string; scoreA: number | null; codeA: string; scoreB: number | null; codeB: string } }
+ | { type: "connect" }
+ | { type: "prepare"; data: { problem: string } }
+ | { type: "ready" }
+ | { type: "start"; data: { startTime: string } }
+ | {
+ type: "finish";
+ data: { yourScore: number | null; opponentScore: number | null };
+ }
+ | { type: "score"; data: { score: number } }
+ | { type: "code"; data: { code: string } }
+ | {
+ type: "watch";
+ data: {
+ problem: string;
+ scoreA: number | null;
+ codeA: string;
+ scoreB: number | null;
+ codeB: string;
+ };
+ };
export default ({ gameId, playerId }: Props) => {
// const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${playerId}/`;
const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${playerId}/`;
- const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(socketUrl);
+ const { sendJsonMessage, lastJsonMessage, readyState } =
+ useWebSocket<WebSocketMessage>(socketUrl);
- const [gameState, setGameState] = useState<GameState>('connecting');
+ const [gameState, setGameState] = useState<GameState>("connecting");
const [problem, setProblem] = useState<string | null>(null);
// in seconds
const [timeLeft, setTimeLeft] = useState<number | null>(null);
useEffect(() => {
- if (gameState === 'starting' && timeLeft !== null) {
+ if (gameState === "starting" && timeLeft !== null) {
const timer = setInterval(() => {
- setTimeLeft(prevTime => {
+ setTimeLeft((prevTime) => {
// `prevTime` is not null because `timeLeft` is not null.
prevTime = prevTime!;
if (prevTime <= 1) {
clearInterval(timer);
- setGameState('gaming');
+ setGameState("gaming");
return 0;
}
return prevTime - 1;
@@ -57,59 +70,82 @@ export default ({ gameId, playerId }: Props) => {
const [score, setScore] = useState<number | null>(null);
- const [result, setResult] = useState<{ yourScore: number | null, opponentScore: number | null } | null>(null);
+ const [result, setResult] = useState<{
+ yourScore: number | null;
+ opponentScore: number | null;
+ } | null>(null);
const onCodeChange = useDebouncedCallback((data) => {
- sendJsonMessage({ type: 'code', data });
+ sendJsonMessage({ type: "code", data });
}, 1000);
useEffect(() => {
if (readyState === ReadyState.UNINSTANTIATED) {
- setGameState('failed');
- } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
- if (gameState !== 'finished') {
- setGameState('failed');
+ setGameState("failed");
+ } else if (
+ readyState === ReadyState.CLOSING ||
+ readyState === ReadyState.CLOSED
+ ) {
+ if (gameState !== "finished") {
+ setGameState("failed");
}
} else if (readyState === ReadyState.CONNECTING) {
- setGameState('connecting');
+ setGameState("connecting");
} else if (readyState === ReadyState.OPEN) {
if (lastJsonMessage !== null) {
- if (lastJsonMessage.type === 'prepare') {
+ if (lastJsonMessage.type === "prepare") {
const { problem } = lastJsonMessage.data;
setProblem(problem);
- sendJsonMessage({ type: 'ready', data: {} });
- } else if (lastJsonMessage.type === 'start') {
+ sendJsonMessage({ type: "ready", data: {} });
+ } else if (lastJsonMessage.type === "start") {
const { startTime } = lastJsonMessage.data;
const startTimeMs = Date.parse(startTime);
- setTimeLeft(Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)));
- setGameState('starting');
- } else if (lastJsonMessage.type === 'finish') {
+ setTimeLeft(
+ Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)),
+ );
+ setGameState("starting");
+ } else if (lastJsonMessage.type === "finish") {
const result = lastJsonMessage.data;
setResult(result);
- setGameState('finished');
- } else if (lastJsonMessage.type === 'score') {
+ setGameState("finished");
+ } else if (lastJsonMessage.type === "score") {
const { score } = lastJsonMessage.data;
setScore(score);
} else {
- setGameState('failed');
+ setGameState("failed");
}
} else {
- setGameState('waiting');
- sendJsonMessage({ type: 'connect', data: {} });
+ setGameState("waiting");
+ sendJsonMessage({ type: "connect", data: {} });
}
}
}, [readyState, lastJsonMessage]);
return (
<div>
- <h1>Game #{gameId} (playerId #{playerId})</h1>
+ <h1>
+ Game #{gameId} (playerId #{playerId})
+ </h1>
<div>
- {gameState === 'connecting' ? (<Connecting gameId={gameId} playerId={playerId} />)
- : gameState === 'waiting' ? (<Waiting gameId={gameId} playerId={playerId} />)
- : gameState === 'starting' ? (<Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />)
- : gameState === 'gaming' ? (<Gaming gameId={gameId} playerId={playerId} problem={problem} score={score} onCodeChange={onCodeChange} />)
- : gameState === 'finished' ? (<Finished gameId={gameId} playerId={playerId} result={result!} />)
- : (<Failed gameId={gameId} playerId={playerId} />)}
+ {gameState === "connecting" ? (
+ <Connecting gameId={gameId} playerId={playerId} />
+ ) : gameState === "waiting" ? (
+ <Waiting gameId={gameId} playerId={playerId} />
+ ) : gameState === "starting" ? (
+ <Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />
+ ) : gameState === "gaming" ? (
+ <Gaming
+ gameId={gameId}
+ playerId={playerId}
+ problem={problem}
+ score={score}
+ onCodeChange={onCodeChange}
+ />
+ ) : gameState === "finished" ? (
+ <Finished gameId={gameId} playerId={playerId} result={result!} />
+ ) : (
+ <Failed gameId={gameId} playerId={playerId} />
+ )}
</div>
</div>
);
diff --git a/frontend/src/routes/golf/play/GameState.ts b/frontend/src/routes/golf/play/GameState.ts
index 28cf91b..7a1de5c 100644
--- a/frontend/src/routes/golf/play/GameState.ts
+++ b/frontend/src/routes/golf/play/GameState.ts
@@ -1 +1,7 @@
-export type GameState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed';
+export type GameState =
+ | "connecting"
+ | "waiting"
+ | "starting"
+ | "gaming"
+ | "finished"
+ | "failed";
diff --git a/frontend/src/routes/golf/play/apps/Connecting.tsx b/frontend/src/routes/golf/play/apps/Connecting.tsx
index 594a291..9207089 100644
--- a/frontend/src/routes/golf/play/apps/Connecting.tsx
+++ b/frontend/src/routes/golf/play/apps/Connecting.tsx
@@ -4,9 +4,5 @@ type Props = {
};
export default (_props: Props) => {
- return (
- <div>
- 接続中です......
- </div>
- );
-}
+ return <div>接続中です......</div>;
+};
diff --git a/frontend/src/routes/golf/play/apps/Failed.tsx b/frontend/src/routes/golf/play/apps/Failed.tsx
index 6ea56e6..6ea9b81 100644
--- a/frontend/src/routes/golf/play/apps/Failed.tsx
+++ b/frontend/src/routes/golf/play/apps/Failed.tsx
@@ -4,9 +4,5 @@ type Props = {
};
export default (_props: Props) => {
- return (
- <div>
- エラー
- </div>
- );
-}
+ return <div>エラー</div>;
+};
diff --git a/frontend/src/routes/golf/play/apps/Finished.tsx b/frontend/src/routes/golf/play/apps/Finished.tsx
index 9922e07..bad7526 100644
--- a/frontend/src/routes/golf/play/apps/Finished.tsx
+++ b/frontend/src/routes/golf/play/apps/Finished.tsx
@@ -1,30 +1,27 @@
type Props = {
gameId: number;
playerId: number;
- result: { yourScore: number | null, opponentScore: number | null };
+ result: { yourScore: number | null; opponentScore: number | null };
};
export default ({ result }: Props) => {
const { yourScore, opponentScore } = result;
const yourScoreToCompare = yourScore ?? Infinity;
const opponentScoreToCompare = opponentScore ?? Infinity;
- const resultText = yourScoreToCompare === opponentScoreToCompare ? '引き分け' : (yourScoreToCompare < opponentScoreToCompare ? 'あなたの勝ち' : 'あなたの負け');
+ const resultText =
+ yourScoreToCompare === opponentScoreToCompare
+ ? "引き分け"
+ : yourScoreToCompare < opponentScoreToCompare
+ ? "あなたの勝ち"
+ : "あなたの負け";
return (
<>
+ <div>対戦終了</div>
<div>
- 対戦終了
- </div>
- <div>
- <div>
- {resultText}
- </div>
- <div>
- あなたのスコア: {yourScore ?? 'なし'}
- </div>
- <div>
- 相手のスコア: {opponentScore ?? 'なし'}
- </div>
+ <div>{resultText}</div>
+ <div>あなたのスコア: {yourScore ?? "なし"}</div>
+ <div>相手のスコア: {opponentScore ?? "なし"}</div>
</div>
</>
);
-}
+};
diff --git a/frontend/src/routes/golf/play/apps/Gaming.tsx b/frontend/src/routes/golf/play/apps/Gaming.tsx
index 27488e3..ffabfa6 100644
--- a/frontend/src/routes/golf/play/apps/Gaming.tsx
+++ b/frontend/src/routes/golf/play/apps/Gaming.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
type Props = {
gameId: number;
@@ -14,18 +14,14 @@ export default ({ problem, onCodeChange, score }: Props) => {
};
return (
- <div style={{ display: 'flex' }}>
- <div style={{ flex: 1, padding: '10px', borderRight: '1px solid #ccc' }}>
- <div>
- {problem}
- </div>
- <div>
- {score == null ? 'Score: -' : `Score: ${score} byte`}
- </div>
+ <div style={{ display: "flex" }}>
+ <div style={{ flex: 1, padding: "10px", borderRight: "1px solid #ccc" }}>
+ <div>{problem}</div>
+ <div>{score == null ? "Score: -" : `Score: ${score} byte`}</div>
</div>
- <div style={{ flex: 1, padding: '10px' }}>
+ <div style={{ flex: 1, padding: "10px" }}>
<textarea
- style={{ width: '100%', height: '100%' }}
+ style={{ width: "100%", height: "100%" }}
onChange={handleTextChange}
/>
</div>
diff --git a/frontend/src/routes/golf/play/apps/Starting.tsx b/frontend/src/routes/golf/play/apps/Starting.tsx
index 1c8fadd..ae77853 100644
--- a/frontend/src/routes/golf/play/apps/Starting.tsx
+++ b/frontend/src/routes/golf/play/apps/Starting.tsx
@@ -7,9 +7,7 @@ type Props = {
export default ({ timeLeft }: Props) => {
return (
<>
- <div>
- 対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。
- </div>
+ <div>対戦相手が見つかりました。{timeLeft} 秒後にゲームを開始します。</div>
</>
);
-}
+};
diff --git a/frontend/src/routes/golf/play/apps/Waiting.tsx b/frontend/src/routes/golf/play/apps/Waiting.tsx
index 8112c22..306978e 100644
--- a/frontend/src/routes/golf/play/apps/Waiting.tsx
+++ b/frontend/src/routes/golf/play/apps/Waiting.tsx
@@ -4,9 +4,5 @@ type Props = {
};
export default (_props: Props) => {
- return (
- <div>
- 対戦相手が現れるのを待っています......
- </div>
- );
-}
+ return <div>対戦相手が現れるのを待っています......</div>;
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-04 21:14:32 +0000