From a46f583437e9b66ebec6fa22e27567a71b17b497 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 21 Jul 2024 16:13:58 +0900 Subject: react router --- frontend/src/routes/golf/play/apps/Connecting.tsx | 12 ++++++++ frontend/src/routes/golf/play/apps/Failed.tsx | 12 ++++++++ frontend/src/routes/golf/play/apps/Finished.tsx | 30 ++++++++++++++++++++ frontend/src/routes/golf/play/apps/Gaming.tsx | 34 +++++++++++++++++++++++ frontend/src/routes/golf/play/apps/Starting.tsx | 15 ++++++++++ frontend/src/routes/golf/play/apps/Waiting.tsx | 12 ++++++++ 6 files changed, 115 insertions(+) create mode 100644 frontend/src/routes/golf/play/apps/Connecting.tsx create mode 100644 frontend/src/routes/golf/play/apps/Failed.tsx create mode 100644 frontend/src/routes/golf/play/apps/Finished.tsx create mode 100644 frontend/src/routes/golf/play/apps/Gaming.tsx create mode 100644 frontend/src/routes/golf/play/apps/Starting.tsx create mode 100644 frontend/src/routes/golf/play/apps/Waiting.tsx (limited to 'frontend/src/routes/golf/play/apps') diff --git a/frontend/src/routes/golf/play/apps/Connecting.tsx b/frontend/src/routes/golf/play/apps/Connecting.tsx new file mode 100644 index 0000000..594a291 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Connecting.tsx @@ -0,0 +1,12 @@ +type Props = { + gameId: number; + playerId: number; +}; + +export default (_props: Props) => { + return ( +
+ 接続中です...... +
+ ); +} diff --git a/frontend/src/routes/golf/play/apps/Failed.tsx b/frontend/src/routes/golf/play/apps/Failed.tsx new file mode 100644 index 0000000..6ea56e6 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Failed.tsx @@ -0,0 +1,12 @@ +type Props = { + gameId: number; + playerId: number; +}; + +export default (_props: Props) => { + return ( +
+ エラー +
+ ); +} diff --git a/frontend/src/routes/golf/play/apps/Finished.tsx b/frontend/src/routes/golf/play/apps/Finished.tsx new file mode 100644 index 0000000..9922e07 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Finished.tsx @@ -0,0 +1,30 @@ +type Props = { + gameId: number; + playerId: number; + 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 ? 'あなたの勝ち' : 'あなたの負け'); + return ( + <> +
+ 対戦終了 +
+
+
+ {resultText} +
+
+ あなたのスコア: {yourScore ?? 'なし'} +
+
+ 相手のスコア: {opponentScore ?? 'なし'} +
+
+ + ); +} diff --git a/frontend/src/routes/golf/play/apps/Gaming.tsx b/frontend/src/routes/golf/play/apps/Gaming.tsx new file mode 100644 index 0000000..27488e3 --- /dev/null +++ b/frontend/src/routes/golf/play/apps/Gaming.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +type Props = { + gameId: number; + playerId: number; + problem: string | null; + onCodeChange: (data: { code: string }) => void; + score: number | null; +}; + +export default ({ problem, onCodeChange, score }: Props) => { + const handleTextChange = (e: React.ChangeEvent) => { + onCodeChange({ code: e.target.value }); + }; + + return ( +
+
+
+ {problem} +
+
+ {score == null ? 'Score: -' : `Score: ${score} byte`} +
+
+
+