remove guid, reduce latency (gets stuck sometimes tho)

tank-frontend/src/App.tsx

@@ -1,56 +1,38 @@
-import {useCallback, useState} from 'react';
 import ClientScreen from './ClientScreen';
 import Controls from './Controls.tsx';
 import JoinForm from './JoinForm.tsx';
 import PlayerInfo from './PlayerInfo.tsx';
-import {useStoredObjectState} from './useStoredState.ts';
-import {NameId, postPlayer} from './serverCalls.tsx';
-import Column from "./components/Column.tsx";
-import Row from "./components/Row.tsx";
-import Scoreboard from "./Scoreboard.tsx";
-import Button from "./components/Button.tsx";
+import Column from './components/Column.tsx';
+import Row from './components/Row.tsx';
+import Scoreboard from './Scoreboard.tsx';
+import Button from './components/Button.tsx';
 import './App.css';
-import {getRandomTheme, useStoredTheme} from "./theme.ts";
-import {EmptyGuid} from "./Guid.ts";
-
-const getNewNameId = () => ({
-    id: EmptyGuid,
-    name: ''
-});
+import {getRandomTheme, useStoredTheme} from './theme.ts';
+import {useState} from 'react';
 
 export default function App() {
     const [theme, setTheme] = useStoredTheme();
-    const [nameId, setNameId] = useStoredObjectState<NameId>('access', getNewNameId);
+    const [name, setName] = useState<string | null>(null);
 
-    const [isLoggedIn, setLoggedIn] = useState<boolean>(false);
-    const logout = () => setLoggedIn(false);
+    return <Column className="flex-grow">
 
-    useCallback(async () => {
-        if (isLoggedIn)
-            return;
-        const result = await postPlayer(nameId);
-        setLoggedIn(result.ok);
-    }, [nameId, isLoggedIn])();
-
-    return <Column className='flex-grow'>
-
-        <ClientScreen logout={logout} theme={theme} playerId={nameId.id}/>
+        <ClientScreen theme={theme} player={name}/>
 
         <Row>
-            <h1 className='flex-grow'>CCCB-Tanks!</h1>
-            <Button text='change colors' onClick={() => setTheme(_ => getRandomTheme())}/>
+            <h1 className="flex-grow">CCCB-Tanks!</h1>
+            <Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
             <Button
                 onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
-                text='GitHub'/>
-            {nameId.name !== '' &&
-                <Button onClick={() => setNameId(getNewNameId)} text='logout'/>}
+                text="GitHub"/>
+            {name !== '' &&
+                <Button onClick={() => setName(_ => '')} text="logout"/>}
         </Row>
 
-        {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
+        {name || <JoinForm onDone={name => setName(_ => name)}/>}
 
-        <Row className='GadgetRows'>
-            {isLoggedIn && <Controls playerId={nameId.id}/>}
-            {isLoggedIn && <PlayerInfo playerId={nameId.id}/>}
+        <Row className="GadgetRows">
+            {name && <Controls player={name}/>}
+            {name && <PlayerInfo player={name}/>}
             <Scoreboard/>
         </Row>
 

tank-frontend/src/ClientScreen.tsx

@@ -2,7 +2,6 @@ import useWebSocket from 'react-use-websocket';
 import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
 import {hslToString, Theme} from "./theme.ts";
-import {Guid} from "./Guid.ts";
 import {makeApiUrl} from './serverCalls.tsx';
 
 const pixelsPerRow = 352;
@@ -98,23 +97,21 @@ function drawPixelsToCanvas(
     context.putImageData(imageData, 0, 0);
 }
 
-export default function ClientScreen({logout, theme, playerId}: {
-    logout: () => void,
+export default function ClientScreen({theme, player}: {
     theme: Theme,
-    playerId?: Guid
+    player: string | null
 }) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
     const url = makeApiUrl('/screen', 'ws');
-    if (playerId)
-        url.searchParams.set('player', playerId);
+    if (player && player !== '')
+        url.searchParams.set('playerName', player);
 
     const {
         lastMessage,
         sendMessage,
         getWebSocket
     } = useWebSocket(url.toString(), {
-        onError: logout,
         shouldReconnect: () => true,
     });
 

tank-frontend/src/Controls.tsx

@@ -1,12 +1,11 @@
 import './Controls.css';
 import useWebSocket, {ReadyState} from 'react-use-websocket';
 import {useEffect} from 'react';
-import {Guid} from "./Guid.ts";
 import {makeApiUrl} from './serverCalls.tsx';
 
-export default function Controls({playerId}: { playerId: Guid }) {
+export default function Controls({player}: { player: string }) {
     const url = makeApiUrl('/controls', 'ws');
-    url.searchParams.set('playerId', playerId);
+    url.searchParams.set('playerName', player);
 
     const {
         sendMessage,
@@ -62,17 +61,17 @@ export default function Controls({playerId}: { playerId: Guid }) {
     }, [readyState]);
 
     return <div className="Controls flex-row">
-        <div className='flex-column Controls-Container'>
+        <div className="flex-column Controls-Container">
             <h3>Move</h3>
             <kbd>▲</kbd>
-            <div className='flex-row Controls-Container'>
+            <div className="flex-row Controls-Container">
                 <kbd>◄</kbd>
                 <kbd>▼</kbd>
                 <kbd>►</kbd>
             </div>
         </div>
 
-        <div className='flex-column Controls-Container'>
+        <div className="flex-column Controls-Container">
             <h3>Fire</h3>
             <kbd className="space">Space</kbd>
         </div>

tank-frontend/src/JoinForm.tsx

@@ -1,14 +1,12 @@
 import {useEffect, useState} from 'react';
 import './JoinForm.css';
-import {NameId, Player, postPlayer} from './serverCalls';
-import {Guid} from './Guid.ts';
-import Column from "./components/Column.tsx";
-import Button from "./components/Button.tsx";
-import TextInput from "./components/TextInput.tsx";
+import {Player, postPlayer} from './serverCalls';
+import Column from './components/Column.tsx';
+import Button from './components/Button.tsx';
+import TextInput from './components/TextInput.tsx';
 
-export default function JoinForm({setNameId, clientId}: {
-    setNameId: (mutator: (oldState: NameId) => NameId) => void,
-    clientId: Guid
+export default function JoinForm({onDone}: {
+    onDone: (name: string) => void;
 }) {
     const [clicked, setClicked] = useState(false);
     const [data, setData] = useState<Player | null>(null);
@@ -18,28 +16,27 @@ export default function JoinForm({setNameId, clientId}: {
         if (!clicked || data)
             return;
 
-        postPlayer({name, id: clientId})
-            .then(response => {
-                if (response.ok && response.successResult) {
-                    setNameId(_ => response.successResult!);
-                    setErrorText(null);
-                    return;
-                }
+        postPlayer(name).then(response => {
+            if (response.ok && response.successResult) {
+                onDone(response.successResult!.trim());
+                setErrorText(null);
+                return;
+            }
 
-                if (response.additionalErrorText)
-                    setErrorText(`${response.statusCode} (${response.statusText}): ${response.additionalErrorText}`);
-                else
-                    setErrorText(`${response.statusCode} (${response.statusText})`);
+            if (response.additionalErrorText)
+                setErrorText(`${response.statusCode} (${response.statusText}): ${response.additionalErrorText}`);
+            else
+                setErrorText(`${response.statusCode} (${response.statusText})`);
 
-                setClicked(false);
-            });
-    }, [clicked, setData, data, clientId, setClicked, setNameId, errorText]);
+            setClicked(false);
+        });
+    }, [clicked, setData, data, setClicked, onDone, errorText]);
 
     const [name, setName] = useState('');
     const disableButtons = clicked || name.trim() === '';
     const setClickedTrue = () => setClicked(true);
 
-    return <Column className='JoinForm'>
+    return <Column className="JoinForm">
         <h3> Enter your name to play </h3>
         <TextInput
             value={name}
@@ -50,7 +47,7 @@ export default function JoinForm({setNameId, clientId}: {
         <Button
             onClick={setClickedTrue}
             disabled={disableButtons}
-            text='INSERT COIN'/>
+            text="INSERT COIN"/>
         {errorText && <p>{errorText}</p>}
     </Column>;
 }

tank-frontend/src/PlayerInfo.tsx

@@ -1,5 +1,4 @@
 import {makeApiUrl, Scores} from './serverCalls';
-import {Guid} from './Guid.ts';
 import Column from './components/Column.tsx';
 import useWebSocket, {ReadyState} from 'react-use-websocket';
 import {useEffect, useState} from 'react';
@@ -37,11 +36,11 @@ type PlayerInfoMessage = {
     readonly tank?: TankInfo;
 }
 
-export default function PlayerInfo({playerId}: { playerId: Guid }) {
+export default function PlayerInfo({player}: { player: string }) {
     const [shouldSendMessage, setShouldSendMessage] = useState(false);
 
     const url = makeApiUrl('/player');
-    url.searchParams.set('id', playerId);
+    url.searchParams.set('name', player);
 
     const {lastJsonMessage, readyState, sendMessage} = useWebSocket<PlayerInfoMessage>(url.toString(), {
         onMessage: () => setShouldSendMessage(true),

tank-frontend/src/components/DataTable.tsx

@@ -54,8 +54,6 @@ export default function DataTable<T>({data, columns, className}: {
 
     dataToDisplay.sort(actualSorter)
 
-    console.log('sorted', {dataToDisplay});
-
     return <div className={'DataTable ' + (className ?? '')}>
         <table>
             <thead className='DataTableHead'>

tank-frontend/src/serverCalls.tsx

@@ -1,5 +1,3 @@
-import {Guid} from './Guid.ts';
-
 export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
     return new URL(`${protocol}://${window.location.hostname}${path}`);
 }
@@ -22,15 +20,9 @@ export type Scores = {
 
 export type Player = {
     readonly name: string;
-    readonly id: Guid;
     readonly scores: Scores;
 };
 
-export type NameId = {
-    name: string,
-    id: Guid
-};
-
 export async function fetchTyped<T>({url, method}: { url: URL; method: string; }): Promise<ServerResponse<T>> {
     const response = await fetch(url, {method});
     const result: ServerResponse<T> = {
@@ -46,10 +38,9 @@ export async function fetchTyped<T>({url, method}: { url: URL; method: string; }
     return result;
 }
 
-export function postPlayer({name, id}: NameId) {
+export function postPlayer(name: string) {
     const url = makeApiUrl('/player');
     url.searchParams.set('name', name);
-    url.searchParams.set('id', id);
 
-    return fetchTyped<NameId>({url, method: 'POST'});
+    return fetchTyped<string>({url, method: 'POST'});
 }