From 14bbc483fdb338c8e55e77f267ecf0d51415549b Mon Sep 17 00:00:00 2001 From: nsfisis Date: Mon, 22 Jul 2024 04:44:31 +0900 Subject: prettier --- frontend/.eslintrc.cjs | 18 +-- frontend/.prettierignore | 1 + frontend/.prettierrc | 1 + frontend/index.html | 2 +- frontend/package-lock.json | 16 +++ frontend/package.json | 4 +- 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 +- frontend/vite.config.ts | 6 +- 30 files changed, 281 insertions(+), 225 deletions(-) create mode 100644 frontend/.prettierignore create mode 100644 frontend/.prettierrc (limited to 'frontend') 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 @@ - + 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: (), + 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`}
-
+