diff options
Diffstat (limited to 'frontend')
30 files changed, 281 insertions, 225 deletions
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index d6c9537..6e8698b 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -2,17 +2,17 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended", ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parser: "@typescript-eslint/parser", + plugins: ["react-refresh"], rules: { - 'react-refresh/only-export-components': [ - 'warn', + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], }, -} +}; diff --git a/frontend/.prettierignore b/frontend/.prettierignore new file mode 100644 index 0000000..9b1c8b1 --- /dev/null +++ b/frontend/.prettierignore @@ -0,0 +1 @@ +/dist diff --git a/frontend/.prettierrc b/frontend/.prettierrc new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/frontend/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/frontend/index.html b/frontend/index.html index 50c37f7..247b738 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 491ca76..9a17b0d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,6 +23,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", + "prettier": "^3.3.3", "typescript": "^5.2.2", "vite": "^5.3.4" } @@ -2795,6 +2796,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 03def3d..b57e207 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,8 +4,9 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", "build": "tsc -b && vite build", + "dev": "vite", + "fmt": "prettier --write .", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, @@ -25,6 +26,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", + "prettier": "^3.3.3", "typescript": "^5.2.2", "vite": "^5.3.4" } diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 6019704..52b0c29 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,56 +1,53 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import { - createBrowserRouter, - RouterProvider, -} from 'react-router-dom'; -import Home from './routes/Home.tsx'; -import Login, { loginAction } from './routes/Login.tsx'; -import GolfEntry from './routes/golf/GolfEntry.tsx'; -import GolfPlay from './routes/golf/GolfPlay.tsx'; -import GolfWatch from './routes/golf/GolfWatch.tsx'; -import UserEdit from './routes/users/Edit.tsx'; -import TeamNew from './routes/teams/New.tsx'; -import TeamEdit from './routes/teams/Edit.tsx'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import Home from "./routes/Home.tsx"; +import Login, { loginAction } from "./routes/Login.tsx"; +import GolfEntry from "./routes/golf/GolfEntry.tsx"; +import GolfPlay from "./routes/golf/GolfPlay.tsx"; +import GolfWatch from "./routes/golf/GolfWatch.tsx"; +import UserEdit from "./routes/users/Edit.tsx"; +import TeamNew from "./routes/teams/New.tsx"; +import TeamEdit from "./routes/teams/Edit.tsx"; const router = createBrowserRouter([ { path: "/", - element: (<Home />), + element: <Home />, }, { path: "/login/", - element: (<Login />), + element: <Login />, action: loginAction, }, { path: "/users/:userId/", - element: (<UserEdit />), + element: <UserEdit />, }, { path: "/teams/new/", - element: (<TeamNew />), + element: <TeamNew />, }, { path: "/teams/:teamId/", - element: (<TeamEdit />), + element: <TeamEdit />, }, { path: "/golf/entry/", - element: (<GolfEntry />), + element: <GolfEntry />, }, { path: "/golf/:gameId/play/:playerId/", - element: (<GolfPlay />), + element: <GolfPlay />, }, { path: "/golf/:gameId/watch/", - element: (<GolfWatch />), + element: <GolfWatch />, }, ]); -ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode>, -) +); diff --git a/frontend/src/routes/Home.tsx b/frontend/src/routes/Home.tsx index 62d66b5..176ad35 100644 --- a/frontend/src/routes/Home.tsx +++ b/frontend/src/routes/Home.tsx @@ -1,15 +1,13 @@ -import { Link } from 'react-router-dom'; +import { Link } from "react-router-dom"; export default function Home() { return ( <div> <h1>Albatross.swift</h1> - <p> - iOSDC 2024 - </p> + <p>iOSDC 2024</p> <p> <Link to="/login/">Login</Link> </p> </div> ); -}; +} diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx index f3fa00e..4871060 100644 --- a/frontend/src/routes/Login.tsx +++ b/frontend/src/routes/Login.tsx @@ -4,9 +4,7 @@ export default function Login() { return ( <div> <h1>Albatross.swift</h1> - <h2> - Login - </h2> + <h2>Login</h2> <Form method="post"> <label>Username</label> <input type="text" name="username" /> @@ -16,7 +14,7 @@ export default function Login() { </Form> </div> ); -}; +} export async function loginAction({ request }: ActionFunctionArgs) { const formData = await request.formData(); @@ -35,4 +33,4 @@ export async function loginAction({ request }: ActionFunctionArgs) { } const { userId } = await res.json(); return redirect(`/users/${userId}/`); -}; +} diff --git a/frontend/src/routes/golf/GolfEntry.tsx b/frontend/src/routes/golf/GolfEntry.tsx index e23c576..a0f9c8e 100644 --- a/frontend/src/routes/golf/GolfEntry.tsx +++ b/frontend/src/routes/golf/GolfEntry.tsx @@ -4,4 +4,4 @@ export default function GolfEntry() { <h1>Golf Entry</h1> </div> ); -}; +} diff --git a/frontend/src/routes/golf/GolfPlay.tsx b/frontend/src/routes/golf/GolfPlay.tsx index 3cc7d65..42e8e5f 100644 --- a/frontend/src/routes/golf/GolfPlay.tsx +++ b/frontend/src/routes/golf/GolfPlay.tsx @@ -1,4 +1,4 @@ -import App from './play/App.tsx'; +import App from "./play/App.tsx"; export default function GolfPlay() { return ( @@ -7,4 +7,4 @@ export default function GolfPlay() { <App gameId={0} playerId={0} /> </div> ); -}; +} diff --git a/frontend/src/routes/golf/GolfWatch.tsx b/frontend/src/routes/golf/GolfWatch.tsx index e5fe93f..acd3305 100644 --- a/frontend/src/routes/golf/GolfWatch.tsx +++ b/frontend/src/routes/golf/GolfWatch.tsx @@ -1,4 +1,4 @@ -import App from './watch/App.tsx'; +import App from "./watch/App.tsx"; export default function GolfWatch() { return ( @@ -7,4 +7,4 @@ export default function GolfWatch() { <App gameId={0} /> </div> ); -}; +} 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>; +}; diff --git a/frontend/src/routes/golf/watch/App.tsx b/frontend/src/routes/golf/watch/App.tsx index 6649251..b24833f 100644 --- a/frontend/src/routes/golf/watch/App.tsx +++ b/frontend/src/routes/golf/watch/App.tsx @@ -1,32 +1,45 @@ -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'; +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 } } + | { 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 }: 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 { lastJsonMessage, readyState } = + useWebSocket<WebSocketMessage>(socketUrl); - const [watchState, setWatchState] = useState<WatchState>('connecting'); + const [watchState, setWatchState] = useState<WatchState>("connecting"); const [problem, setProblem] = useState<string | null>(null); @@ -37,28 +50,37 @@ export default ({ gameId }: Props) => { useEffect(() => { if (readyState === ReadyState.UNINSTANTIATED) { - setWatchState('failed'); - } else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) { - if (watchState !== 'finished') { - setWatchState('failed'); + setWatchState("failed"); + } else if ( + readyState === ReadyState.CLOSING || + readyState === ReadyState.CLOSED + ) { + if (watchState !== "finished") { + setWatchState("failed"); } } else if (readyState === ReadyState.CONNECTING) { - setWatchState('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; + 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'); + setWatchState("gaming"); } else { - setWatchState('failed'); + setWatchState("failed"); } } else { - setWatchState('waiting'); + setWatchState("waiting"); } } }, [readyState, lastJsonMessage]); @@ -67,10 +89,22 @@ export default ({ gameId }: Props) => { <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} />)} + {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 index 2e0b066..8d9997e 100644 --- a/frontend/src/routes/golf/watch/WatchState.ts +++ b/frontend/src/routes/golf/watch/WatchState.ts @@ -1 +1,7 @@ -export type WatchState = 'connecting' | 'waiting' | 'starting' | 'gaming' | 'finished' | 'failed'; +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 index 6f1f356..8dc7a8c 100644 --- a/frontend/src/routes/golf/watch/apps/Connecting.tsx +++ b/frontend/src/routes/golf/watch/apps/Connecting.tsx @@ -3,9 +3,5 @@ type Props = { }; export default (_props: Props) => { - return ( - <div> - 接続中です...... - </div> - ); -} + return <div>接続中です......</div>; +}; diff --git a/frontend/src/routes/golf/watch/apps/Failed.tsx b/frontend/src/routes/golf/watch/apps/Failed.tsx index 70d3693..3c29d74 100644 --- a/frontend/src/routes/golf/watch/apps/Failed.tsx +++ b/frontend/src/routes/golf/watch/apps/Failed.tsx @@ -3,9 +3,5 @@ type Props = { }; export default (_props: Props) => { - return ( - <div> - エラー - </div> - ); -} + return <div>エラー</div>; +}; diff --git a/frontend/src/routes/golf/watch/apps/Gaming.tsx b/frontend/src/routes/golf/watch/apps/Gaming.tsx index a17b71e..623cb08 100644 --- a/frontend/src/routes/golf/watch/apps/Gaming.tsx +++ b/frontend/src/routes/golf/watch/apps/Gaming.tsx @@ -10,25 +10,25 @@ type Props = { export default ({ problem, scoreA, codeA, scoreB, codeB }: Props) => { return ( <> - <div style={{ display: 'flex', flexDirection: 'column' }}> - <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}> + <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={{ 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> + <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={{ display: "flex", flex: 3, flexDirection: "column" }}> + <div style={{ flex: 1, justifyContent: "center" }}>{scoreB}</div> <div style={{ flex: 3 }}> - <pre><code>{codeB}</code></pre> + <pre> + <code>{codeB}</code> + </pre> </div> </div> </div> diff --git a/frontend/src/routes/golf/watch/apps/Waiting.tsx b/frontend/src/routes/golf/watch/apps/Waiting.tsx index bd4f567..e8d5390 100644 --- a/frontend/src/routes/golf/watch/apps/Waiting.tsx +++ b/frontend/src/routes/golf/watch/apps/Waiting.tsx @@ -3,9 +3,5 @@ type Props = { }; export default (_props: Props) => { - return ( - <div> - 対戦相手が現れるのを待っています...... - </div> - ); -} + return <div>対戦相手が現れるのを待っています......</div>; +}; diff --git a/frontend/src/routes/teams/Edit.tsx b/frontend/src/routes/teams/Edit.tsx index 0b3ed74..82c1ff8 100644 --- a/frontend/src/routes/teams/Edit.tsx +++ b/frontend/src/routes/teams/Edit.tsx @@ -4,9 +4,7 @@ export default function Edit() { return ( <div> <h1>Albatross.swift</h1> - <h2> - Team Edit - </h2> + <h2>Team Edit</h2> <Form method="post"> <label>Team name</label> <input type="text" name="name" /> @@ -16,4 +14,4 @@ export default function Edit() { </Form> </div> ); -}; +} diff --git a/frontend/src/routes/teams/New.tsx b/frontend/src/routes/teams/New.tsx index 2712cd5..ba00731 100644 --- a/frontend/src/routes/teams/New.tsx +++ b/frontend/src/routes/teams/New.tsx @@ -4,9 +4,7 @@ export default function New() { return ( <div> <h1>Albatross.swift</h1> - <h2> - Team New - </h2> + <h2>Team New</h2> <Form method="post"> <label>Team name</label> <input type="text" name="name" /> @@ -16,4 +14,4 @@ export default function New() { </Form> </div> ); -}; +} diff --git a/frontend/src/routes/users/Edit.tsx b/frontend/src/routes/users/Edit.tsx index fa2a826..6c9af19 100644 --- a/frontend/src/routes/users/Edit.tsx +++ b/frontend/src/routes/users/Edit.tsx @@ -4,9 +4,7 @@ export default function Edit() { return ( <div> <h1>Albatross.swift</h1> - <h2> - User Edit - </h2> + <h2>User Edit</h2> <Form method="post"> <label>Display name</label> <input type="text" name="display_name" /> @@ -19,4 +17,4 @@ export default function Edit() { </p> </div> ); -}; +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 5a33944..9cc50ea 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) +}); |