From bf6ce9960168c847faa94adc0ea5b8ee70f38cd4 Mon Sep 17 00:00:00 2001 From: Ronja Spiegelberg Date: Sat, 13 Apr 2024 16:32:13 +0200 Subject: [PATCH 1/3] enhanced joining field --- tank-frontend/package.json | 2 +- tank-frontend/src/JoinForm.css | 12 +++++++++++ tank-frontend/src/JoinForm.tsx | 38 +++++++++++++++++++++------------- tank-frontend/src/index.tsx | 2 +- 4 files changed, 38 insertions(+), 16 deletions(-) diff --git a/tank-frontend/package.json b/tank-frontend/package.json index 17be3e5..ba60c09 100644 --- a/tank-frontend/package.json +++ b/tank-frontend/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host 0.0.0.0 --port 8543", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" diff --git a/tank-frontend/src/JoinForm.css b/tank-frontend/src/JoinForm.css index 4e33b01..015b34c 100644 --- a/tank-frontend/src/JoinForm.css +++ b/tank-frontend/src/JoinForm.css @@ -1,4 +1,16 @@ +.TankWelcome { + display: flex; + flex-direction: column; +} + .JoinForm { display: flex; flex-direction: row; + border: 2px solid rgb(76, 76, 76); + border-radius: 4px; } + +.JoinElems { + padding: 8px 8px; + margin: 8px 8px; +} \ No newline at end of file diff --git a/tank-frontend/src/JoinForm.tsx b/tank-frontend/src/JoinForm.tsx index cd3aabc..6a927c4 100644 --- a/tank-frontend/src/JoinForm.tsx +++ b/tank-frontend/src/JoinForm.tsx @@ -1,4 +1,4 @@ -import {useEffect, useState} from 'react'; +import { useEffect, useState } from 'react'; import './JoinForm.css'; type PlayerResponse = { @@ -18,7 +18,7 @@ export async function fetchPlayer(name: string, options: RequestInit) { return json.id; } -export default function JoinForm({onDone}: { onDone: (id: string) => void }) { +export default function JoinForm({ onDone }: { onDone: (id: string) => void }) { const [name, setName] = useState(''); const [clicked, setClicked] = useState(false); const [data, setData] = useState(null); @@ -41,17 +41,27 @@ export default function JoinForm({onDone}: { onDone: (id: string) => void }) { }, [clicked, setData, data]); const disableButtons = clicked || name.trim() === ''; - return
- setName(e.target.value)} - /> - + return
+

+ Tanks +

+

Welcome and have fun!

+
+

+ Enter your name to join the game! +

+ setName(e.target.value)} + /> + +
; } diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx index 1ca269c..3f3a217 100644 --- a/tank-frontend/src/index.tsx +++ b/tank-frontend/src/index.tsx @@ -11,7 +11,7 @@ function App() { return <> {id === null && setId(name)}/>} - {id == null || } + {id == null || } ; } From 7cc159edd7a2dce1ad3b51497608446888de96d3 Mon Sep 17 00:00:00 2001 From: Ronja Spiegelberg Date: Sat, 13 Apr 2024 16:39:35 +0200 Subject: [PATCH 2/3] column-based join form layout --- tank-frontend/src/JoinForm.css | 3 ++- tank-frontend/src/JoinForm.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/tank-frontend/src/JoinForm.css b/tank-frontend/src/JoinForm.css index 015b34c..a4bad2b 100644 --- a/tank-frontend/src/JoinForm.css +++ b/tank-frontend/src/JoinForm.css @@ -5,7 +5,7 @@ .JoinForm { display: flex; - flex-direction: row; + flex-direction: column; border: 2px solid rgb(76, 76, 76); border-radius: 4px; } @@ -13,4 +13,5 @@ .JoinElems { padding: 8px 8px; margin: 8px 8px; + color: rgb(255, 255, 255); } \ No newline at end of file diff --git a/tank-frontend/src/JoinForm.tsx b/tank-frontend/src/JoinForm.tsx index 6a927c4..be88789 100644 --- a/tank-frontend/src/JoinForm.tsx +++ b/tank-frontend/src/JoinForm.tsx @@ -47,7 +47,7 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {

Welcome and have fun!

-

+

Enter your name to join the game!

Date: Sat, 13 Apr 2024 17:56:33 +0200 Subject: [PATCH 3/3] separated server calls --- tank-frontend/src/JoinForm.css | 1 - tank-frontend/src/JoinForm.tsx | 33 ++++++++------------------- tank-frontend/src/PlayerInfo.css | 21 +++++++++++++++++ tank-frontend/src/PlayerInfo.tsx | 38 +++++++++++++++++++++++++++++++ tank-frontend/src/index.tsx | 14 +++++++----- tank-frontend/src/serverCalls.tsx | 23 +++++++++++++++++++ 6 files changed, 99 insertions(+), 31 deletions(-) create mode 100644 tank-frontend/src/PlayerInfo.css create mode 100644 tank-frontend/src/PlayerInfo.tsx create mode 100644 tank-frontend/src/serverCalls.tsx diff --git a/tank-frontend/src/JoinForm.css b/tank-frontend/src/JoinForm.css index a4bad2b..d7bef0d 100644 --- a/tank-frontend/src/JoinForm.css +++ b/tank-frontend/src/JoinForm.css @@ -13,5 +13,4 @@ .JoinElems { padding: 8px 8px; margin: 8px 8px; - color: rgb(255, 255, 255); } \ No newline at end of file diff --git a/tank-frontend/src/JoinForm.tsx b/tank-frontend/src/JoinForm.tsx index be88789..a62533c 100644 --- a/tank-frontend/src/JoinForm.tsx +++ b/tank-frontend/src/JoinForm.tsx @@ -1,22 +1,6 @@ import { useEffect, useState } from 'react'; import './JoinForm.css'; - -type PlayerResponse = { - readonly name: string; - readonly id: string; -}; - -export async function fetchPlayer(name: string, options: RequestInit) { - const url = new URL(import.meta.env.VITE_TANK_PLAYER_URL); - url.searchParams.set('name', name); - - const response = await fetch(url, options); - if (!response.ok) - return null; - - const json = await response.json() as PlayerResponse; - return json.id; -} +import { PlayerResponse, postPlayer } from './serverCalls'; export default function JoinForm({ onDone }: { onDone: (id: string) => void }) { const [name, setName] = useState(''); @@ -28,12 +12,13 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) { return; try { - fetchPlayer(name, {}).then((value: string | null) => { - if (value) - onDone(value); - else - setClicked(false); - }); + postPlayer(name) + .then((value: PlayerResponse | null) => { + if (value) + onDone(value.id); + else + setClicked(false); + }); } catch (e) { console.log(e); alert(e); @@ -47,7 +32,7 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {

Welcome and have fun!

-

+

Enter your name to join the game!

(); + + const refresh = () => { + getPlayer(playerId).then(setPlayer); + }; + + useEffect(() => { + const timer = setInterval(refresh, 5000); + return () => clearInterval(timer); + }); + + return
+

+ Tanks +

+
+
+

+ name +

+

+ {player?.name} +

+
+
+

+ {JSON.stringify(player)} +

+ + +
+
; +} diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx index 3f3a217..d6b278e 100644 --- a/tank-frontend/src/index.tsx +++ b/tank-frontend/src/index.tsx @@ -1,22 +1,24 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import './index.css'; import ClientScreen from './ClientScreen'; import Controls from './Controls.tsx'; import JoinForm from './JoinForm.tsx'; -import {createRoot} from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; +import PlayerInfo from './PlayerInfo.tsx'; function App() { const [id, setId] = useState(null); return <> - {id === null && setId(name)}/>} - - {id == null || } + {id === null && setId(name)} />} + {id == null || } + + {id == null || } ; } createRoot(document.getElementById('root')!).render( - + ); diff --git a/tank-frontend/src/serverCalls.tsx b/tank-frontend/src/serverCalls.tsx new file mode 100644 index 0000000..6640b47 --- /dev/null +++ b/tank-frontend/src/serverCalls.tsx @@ -0,0 +1,23 @@ +export type PlayerResponse = { + readonly name: string; + readonly id: string; +}; + +export async function fetchTyped({ url, method }: { url: URL; method: string; }) { + const response = await fetch(url, { method }); + if (!response.ok) + return null; + return await response.json() as T; +} + +export function postPlayer(name: string) { + const url = new URL(import.meta.env.VITE_TANK_PLAYER_URL); + url.searchParams.set('name', name); + return fetchTyped({ url, method: 'POST' }); +} + +export function getPlayer(id: string) { + const url = new URL(import.meta.env.VITE_TANK_PLAYER_URL); + url.searchParams.set('id', id); + return fetchTyped({ url, method: 'GET' }); +}