From 14bbc483fdb338c8e55e77f267ecf0d51415549b Mon Sep 17 00:00:00 2001 From: nsfisis Date: Mon, 22 Jul 2024 04:44:31 +0900 Subject: prettier --- frontend/src/main.tsx | 45 ++++--- frontend/src/routes/Home.tsx | 8 +- frontend/src/routes/Login.tsx | 8 +- frontend/src/routes/golf/GolfEntry.tsx | 2 +- frontend/src/routes/golf/GolfPlay.tsx | 4 +- frontend/src/routes/golf/GolfWatch.tsx | 4 +- frontend/src/routes/golf/play/App.tsx | 132 +++++++++++++-------- frontend/src/routes/golf/play/GameState.ts | 8 +- frontend/src/routes/golf/play/apps/Connecting.tsx | 8 +- frontend/src/routes/golf/play/apps/Failed.tsx | 8 +- frontend/src/routes/golf/play/apps/Finished.tsx | 27 ++--- frontend/src/routes/golf/play/apps/Gaming.tsx | 18 ++- frontend/src/routes/golf/play/apps/Starting.tsx | 6 +- frontend/src/routes/golf/play/apps/Waiting.tsx | 8 +- frontend/src/routes/golf/watch/App.tsx | 96 ++++++++++----- frontend/src/routes/golf/watch/WatchState.ts | 8 +- frontend/src/routes/golf/watch/apps/Connecting.tsx | 8 +- frontend/src/routes/golf/watch/apps/Failed.tsx | 8 +- frontend/src/routes/golf/watch/apps/Gaming.tsx | 26 ++-- frontend/src/routes/golf/watch/apps/Waiting.tsx | 8 +- frontend/src/routes/teams/Edit.tsx | 6 +- frontend/src/routes/teams/New.tsx | 6 +- frontend/src/routes/users/Edit.tsx | 6 +- 23 files changed, 247 insertions(+), 211 deletions(-) (limited to 'frontend/src') 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: (), + element: , }, { path: "/login/", - element: (), + element: , action: loginAction, }, { path: "/users/:userId/", - element: (), + element: , }, { path: "/teams/new/", - element: (), + element: , }, { path: "/teams/:teamId/", - element: (), + element: , }, { path: "/golf/entry/", - element: (), + element: , }, { path: "/golf/:gameId/play/:playerId/", - element: (), + element: , }, { path: "/golf/:gameId/watch/", - element: (), + element: , }, ]); -ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById("root")!).render( , -) +); 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 (

Albatross.swift

-

- iOSDC 2024 -

+

iOSDC 2024

Login

); -}; +} 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 (

Albatross.swift

-

- Login -

+

Login

@@ -16,7 +14,7 @@ export default function Login() {
); -}; +} 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() {

Golf Entry

); -}; +} 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() { ); -}; +} 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() { ); -}; +} 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(socketUrl); + const { sendJsonMessage, lastJsonMessage, readyState } = + useWebSocket(socketUrl); - const [gameState, setGameState] = useState('connecting'); + const [gameState, setGameState] = useState("connecting"); const [problem, setProblem] = useState(null); // in seconds const [timeLeft, setTimeLeft] = useState(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(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 (
-

Game #{gameId} (playerId #{playerId})

+

+ Game #{gameId} (playerId #{playerId}) +

- {gameState === 'connecting' ? () - : gameState === 'waiting' ? () - : gameState === 'starting' ? () - : gameState === 'gaming' ? () - : gameState === 'finished' ? () - : ()} + {gameState === "connecting" ? ( + + ) : gameState === "waiting" ? ( + + ) : gameState === "starting" ? ( + + ) : gameState === "gaming" ? ( + + ) : gameState === "finished" ? ( + + ) : ( + + )}
); 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 ( -
- 接続中です...... -
- ); -} + return
接続中です......
; +}; 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 ( -
- エラー -
- ); -} + return
エラー
; +}; 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 ( <> +
対戦終了
- 対戦終了 -
-
-
- {resultText} -
-
- あなたのスコア: {yourScore ?? 'なし'} -
-
- 相手のスコア: {opponentScore ?? 'なし'} -
+
{resultText}
+
あなたのスコア: {yourScore ?? "なし"}
+
相手のスコア: {opponentScore ?? "なし"}
); -} +}; 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 ( -
-
-
- {problem} -
-
- {score == null ? 'Score: -' : `Score: ${score} byte`} -
+
+
+
{problem}
+
{score == null ? "Score: -" : `Score: ${score} byte`}
-
+