aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/routes/golf/watch
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/routes/golf/watch')
-rw-r--r--frontend/src/routes/golf/watch/App.tsx111
-rw-r--r--frontend/src/routes/golf/watch/WatchState.ts7
-rw-r--r--frontend/src/routes/golf/watch/apps/Connecting.tsx7
-rw-r--r--frontend/src/routes/golf/watch/apps/Failed.tsx7
-rw-r--r--frontend/src/routes/golf/watch/apps/Gaming.tsx44
-rw-r--r--frontend/src/routes/golf/watch/apps/Waiting.tsx7
6 files changed, 0 insertions, 183 deletions
diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx
deleted file mode 100644
index ac2db23..0000000
--- a/frontend/src/routes/golf/watch/App.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState, useEffect } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
-import Connecting from "./apps/Connecting.jsx";
-import Waiting from "./apps/Waiting.jsx";
-import Gaming from "./apps/Gaming.jsx";
-import Failed from "./apps/Failed.jsx";
-import type { WatchState } from "./WatchState.js";
-
-type Props = {
- gameId: number;
-};
-
-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;
- };
- };
-
-export default function App({ gameId }: Props) {
- // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/watch/`;
- const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/watch/`;
-
- const { lastJsonMessage, readyState } =
- useWebSocket<WebSocketMessage>(socketUrl);
-
- const [watchState, setWatchState] = useState<WatchState>("connecting");
-
- const [problem, setProblem] = useState<string | null>(null);
-
- const [scoreA, setScoreA] = useState<number | null>(null);
- const [codeA, setCodeA] = useState<string | null>(null);
- const [scoreB, setScoreB] = useState<number | null>(null);
- const [codeB, setCodeB] = useState<string | null>(null);
-
- useEffect(() => {
- if (readyState === ReadyState.UNINSTANTIATED) {
- setWatchState("failed");
- } else if (
- readyState === ReadyState.CLOSING ||
- readyState === ReadyState.CLOSED
- ) {
- if (watchState !== "finished") {
- setWatchState("failed");
- }
- } else if (readyState === ReadyState.CONNECTING) {
- setWatchState("connecting");
- } else if (readyState === ReadyState.OPEN) {
- if (lastJsonMessage !== null) {
- if (lastJsonMessage.type === "watch") {
- const {
- problem,
- scoreA: scoreA_,
- codeA: codeA_,
- scoreB: scoreB_,
- codeB: codeB_,
- } = lastJsonMessage.data;
- setProblem(problem);
- setScoreA(scoreA_);
- setCodeA(codeA_);
- setScoreB(scoreB_);
- setCodeB(codeB_);
- setWatchState("gaming");
- } else {
- setWatchState("failed");
- }
- } else {
- setWatchState("waiting");
- }
- }
- }, [readyState, lastJsonMessage]);
-
- return (
- <div>
- <h1>Game #{gameId} watching</h1>
- <div>
- {watchState === "connecting" ? (
- <Connecting gameId={gameId} />
- ) : watchState === "waiting" ? (
- <Waiting gameId={gameId} />
- ) : watchState === "gaming" || watchState === "finished" ? (
- <Gaming
- gameId={gameId}
- problem={problem}
- scoreA={scoreA}
- codeA={codeA}
- scoreB={scoreB}
- codeB={codeB}
- />
- ) : (
- <Failed gameId={gameId} />
- )}
- </div>
- </div>
- );
-}
diff --git a/frontend/src/routes/golf/watch/WatchState.ts b/frontend/src/routes/golf/watch/WatchState.ts
deleted file mode 100644
index 8d9997e..0000000
--- a/frontend/src/routes/golf/watch/WatchState.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type WatchState =
- | "connecting"
- | "waiting"
- | "starting"
- | "gaming"
- | "finished"
- | "failed";
diff --git a/frontend/src/routes/golf/watch/apps/Connecting.tsx b/frontend/src/routes/golf/watch/apps/Connecting.tsx
deleted file mode 100644
index 73d28eb..0000000
--- a/frontend/src/routes/golf/watch/apps/Connecting.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-type Props = {
- gameId: number;
-};
-
-export default function Connecting(_props: Props) {
- return <div>接続中です......</div>;
-}
diff --git a/frontend/src/routes/golf/watch/apps/Failed.tsx b/frontend/src/routes/golf/watch/apps/Failed.tsx
deleted file mode 100644
index 2727663..0000000
--- a/frontend/src/routes/golf/watch/apps/Failed.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-type Props = {
- gameId: number;
-};
-
-export default function Failed(_props: Props) {
- return <div>エラー</div>;
-}
diff --git a/frontend/src/routes/golf/watch/apps/Gaming.tsx b/frontend/src/routes/golf/watch/apps/Gaming.tsx
deleted file mode 100644
index 3f9c195..0000000
--- a/frontend/src/routes/golf/watch/apps/Gaming.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-type Props = {
- gameId: number;
- problem: string | null;
- scoreA: number | null;
- codeA: string | null;
- scoreB: number | null;
- codeB: string | null;
-};
-
-export default function Gaming({
- problem,
- scoreA,
- codeA,
- scoreB,
- codeB,
-}: Props) {
- return (
- <>
- <div style={{ display: "flex", flexDirection: "column" }}>
- <div style={{ display: "flex", flex: 1, justifyContent: "center" }}>
- {problem}
- </div>
- <div style={{ display: "flex", flex: 3 }}>
- <div style={{ display: "flex", flex: 3, flexDirection: "column" }}>
- <div style={{ flex: 1, justifyContent: "center" }}>{scoreA}</div>
- <div style={{ flex: 3 }}>
- <pre>
- <code>{codeA}</code>
- </pre>
- </div>
- </div>
- <div style={{ display: "flex", flex: 3, flexDirection: "column" }}>
- <div style={{ flex: 1, justifyContent: "center" }}>{scoreB}</div>
- <div style={{ flex: 3 }}>
- <pre>
- <code>{codeB}</code>
- </pre>
- </div>
- </div>
- </div>
- </div>
- </>
- );
-}
diff --git a/frontend/src/routes/golf/watch/apps/Waiting.tsx b/frontend/src/routes/golf/watch/apps/Waiting.tsx
deleted file mode 100644
index a82ee69..0000000
--- a/frontend/src/routes/golf/watch/apps/Waiting.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-type Props = {
- gameId: number;
-};
-
-export default function Waiting(_props: Props) {
- return <div>対戦相手が現れるのを待っています......</div>;
-}