separated server calls

tank-frontend/src/JoinForm.css

@@ -13,5 +13,4 @@
 .JoinElems {
     padding: 8px 8px;
     margin: 8px 8px;
-    color: rgb(255, 255, 255);
 }

tank-frontend/src/JoinForm.tsx

@@ -1,22 +1,6 @@
 import { useEffect, useState } from 'react';
 import './JoinForm.css';
-
+import { PlayerResponse, postPlayer } from './serverCalls';
-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;
-}
 
 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) => {
+            postPlayer(name)
-                if (value)
+                .then((value: PlayerResponse | null) => {
-                    onDone(value);
+                    if (value)
-                else
+                        onDone(value.id);
-                    setClicked(false);
+                    else
-            });
+                        setClicked(false);
+                });
         } catch (e) {
             console.log(e);
             alert(e);
@@ -47,7 +32,7 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
         </h1>
         <p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p>
         <div className="JoinForm">
-        <p className='JoinElems' style={{ "color": "white" }}>
+            <p className='JoinElems' style={{ "color": "white" }}>
                 Enter your name to join the game!
             </p>
             <input className="JoinElems"

tank-frontend/src/PlayerInfo.css

@@ -0,0 +1,21 @@
+.Player {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid rgb(76, 76, 76);
+    border-radius: 4px;
+}
+
+.ScoreForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.ElemGroup {
+    display: flex;
+    flex-direction: row;
+}
+
+.Elems {
+    padding: 8px 8px;
+    margin: 8px 8px;
+}

tank-frontend/src/PlayerInfo.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import './PlayerInfo.css'
+import { PlayerResponse, getPlayer } from './serverCalls';
+
+export default function PlayerInfo({ playerId }: { playerId: string }) {
+    const [player, setPlayer] = useState<PlayerResponse | null>();
+
+    const refresh = () => {
+        getPlayer(playerId).then(setPlayer);
+    };
+
+    useEffect(() => {
+        const timer = setInterval(refresh, 5000);
+        return () => clearInterval(timer);
+    });
+
+    return <div className='TankWelcome'>
+        <h1 className='Elems' style={{ "color": "white" }}>
+            Tanks
+        </h1>
+        <div className="ScoreForm">
+            <div className='ElemGroup'>
+                <p className='Elems' style={{ "color": "white" }}>
+                    name
+                </p>
+                <p className='Elems' style={{ "color": "white" }}>
+                    {player?.name}
+                </p>
+            </div>
+            <div className='ElemGroup'></div>
+            <p className='Elems' style={{ "color": "white" }}>
+                {JSON.stringify(player)}
+            </p>
+
+
+        </div>
+    </div >;
+}

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<string | null>(null);
 
     return <>
-        {id === null && <JoinForm onDone={name => setId(name)}/>}
+        {id === null && <JoinForm onDone={name => setId(name)} />}
-        <ClientScreen/>
+        {id == null || <PlayerInfo playerId={id} />}
-        {id == null || <Controls playerId={id}/>} 
+        <ClientScreen />
+        {id == null || <Controls playerId={id} />}
     </>;
 }
 
 createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <App/>
+        <App />
     </React.StrictMode>
 );

tank-frontend/src/serverCalls.tsx

@@ -0,0 +1,23 @@
+export type PlayerResponse = {
+    readonly name: string;
+    readonly id: string;
+};
+
+export async function fetchTyped<T>({ 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<PlayerResponse>({ 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<PlayerResponse>({ url, method: 'GET' });
+}