Merge pull request #2 from kaesaecracker/mp-changer

map chooser

Makefile

@@ -6,5 +6,5 @@ build:
 	podman build . --tag=$(TAG)
 
 run: build
-	podman run -i -p 3000:3000 localhost/$(TAG):latest
+	podman run -i -p 80:3000 localhost/$(TAG):latest
 

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "cccb-tanks-cs",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

tank-frontend/src/App.tsx

@@ -6,9 +6,10 @@ import Column from './components/Column.tsx';
 import Row from './components/Row.tsx';
 import Scoreboard from './Scoreboard.tsx';
 import Button from './components/Button.tsx';
+import MapChooser from './MapChooser.tsx';
 import './App.css';
-import {getRandomTheme, useStoredTheme} from './theme.ts';
+import {getRandomTheme, useStoredTheme} from "./theme.ts";
-import {useState} from 'react';
+import { useState } from 'react';
 
 export default function App() {
     const [theme, setTheme] = useStoredTheme();
@@ -20,6 +21,7 @@ export default function App() {
 
         <Row>
             <h1 className="flex-grow">CCCB-Tanks!</h1>
+            <MapChooser />
             <Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
             <Button
                 onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}

tank-frontend/src/JoinForm.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
 import './JoinForm.css';
-import {Player, postPlayer} from './serverCalls';
+import {makeApiUrl, Player} from './serverCalls';
 import Column from './components/Column.tsx';
 import Button from './components/Button.tsx';
 import TextInput from './components/TextInput.tsx';
@@ -16,19 +16,19 @@ export default function JoinForm({onDone}: {
         if (!clicked || data)
             return;
 
-        postPlayer(name).then(response => {
+        const url = makeApiUrl('/player');
-            if (response.ok && response.successResult) {
+        url.searchParams.set('name', name);
-                onDone(response.successResult!.trim());
+
-                setErrorText(null);
+        fetch(url, {method: 'POST'})
+            .then(async response => {
+                if (!response.ok) {
+                    setErrorText(`${response.status} (${response.statusText}): ${await response.text()}`);
+                    setClicked(false);
                     return;
                 }
 
-            if (response.additionalErrorText)
+                onDone((await response.json()).trim());
-                setErrorText(`${response.statusCode} (${response.statusText}): ${response.additionalErrorText}`);
+                setErrorText(null);
-            else
-                setErrorText(`${response.statusCode} (${response.statusText})`);
-
-            setClicked(false);
             });
     }, [clicked, setData, data, setClicked, onDone, errorText]);
 

tank-frontend/src/MapChooser.css

@@ -0,0 +1,9 @@
+
+.MapChooser-DropDown {
+    border: solid var(--border-size-thin);
+    padding: var(--padding-normal);
+
+    background: var(--color-background);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}

tank-frontend/src/MapChooser.tsx

@@ -0,0 +1,34 @@
+import {ChangeEvent} from 'react';
+import {makeApiUrl} from './serverCalls';
+import './MapChooser.css';
+import {useQuery} from '@tanstack/react-query';
+
+export default function MapChooser() {
+    const query = useQuery({
+        queryKey: ['get-maps'],
+        queryFn: async () => {
+            const url = makeApiUrl('/map');
+            const response = await fetch(url, {method: 'GET'});
+            if (!response.ok)
+                throw new Error(`response failed with code ${response.status} (${response.status})${await response.text()}`);
+            return await response.json() as string[];
+        }
+    });
+
+    const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        if (event.target.selectedIndex < 1)
+            return;
+        event.preventDefault();
+
+        const url = makeApiUrl('/map');
+        url.searchParams.set('name', event.target.options[event.target.selectedIndex].value);
+
+        fetch(url, {method: 'POST'});
+    };
+
+    return <select value="maps" className="MapChooser-DropDown" onChange={onChange}>
+        <option value="" defaultValue={''}>Choose map</option>
+        {query.isSuccess && query.data.map(m =>
+            <option key={m} value={m}>{m}</option>)}
+    </select>;
+}

tank-frontend/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import {ReactNode, useState} from "react";
+import { ReactNode, useState } from "react";
 import './DataTable.css';
 
 export type DataTableColumnDefinition<T> = {
@@ -9,7 +9,7 @@ export type DataTableColumnDefinition<T> = {
 };
 
 
-function DataTableRow({rowData, columns}: {
+function DataTableRow({ rowData, columns }: {
     rowData: any,
     columns: DataTableColumnDefinition<any>[]
 }) {
@@ -28,7 +28,7 @@ function DataTableRow({rowData, columns}: {
     </tr>;
 }
 
-export default function DataTable<T>({data, columns, className}: {
+export default function DataTable<T>({ data, columns, className }: {
     data: T[],
     columns: DataTableColumnDefinition<any>[],
     className?: string
@@ -69,7 +69,7 @@ export default function DataTable<T>({data, columns, className}: {
             <tbody>
                 {
                     dataToDisplay.map((element, index) =>
-                    <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns}/>)
+                        <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns} />)
                 }
             </tbody>
         </table>

tank-frontend/src/serverCalls.tsx

@@ -2,14 +2,6 @@ export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
     return new URL(`${protocol}://${window.location.hostname}${path}`);
 }
 
-export type ServerResponse<T> = {
-    ok: boolean;
-    statusCode: number;
-    statusText: string;
-    additionalErrorText?: string;
-    successResult?: T;
-}
-
 export type Scores = {
     readonly kills: number;
     readonly deaths: number;
@@ -22,25 +14,3 @@ export type Player = {
     readonly name: string;
     readonly scores: Scores;
 };
-
-export async function fetchTyped<T>({url, method}: { url: URL; method: string; }): Promise<ServerResponse<T>> {
-    const response = await fetch(url, {method});
-    const result: ServerResponse<T> = {
-        ok: response.ok,
-        statusCode: response.status,
-        statusText: response.statusText
-    };
-
-    if (response.ok)
-        result.successResult = await response.json();
-    else
-        result.additionalErrorText = await response.text();
-    return result;
-}
-
-export function postPlayer(name: string) {
-    const url = makeApiUrl('/player');
-    url.searchParams.set('name', name);
-
-    return fetchTyped<string>({url, method: 'POST'});
-}

tanks-backend/TanksServer/Interactivity/PlayerInfoConnection.cs

@@ -13,7 +13,7 @@ internal sealed class PlayerInfoConnection(
 ) : WebsocketServerConnection(logger, new ByteChannelWebSocket(rawSocket, logger, 0))
 {
     private readonly AppSerializerContext _context = new(new JsonSerializerOptions(JsonSerializerDefaults.Web));
-    private bool _wantsInfoOnTick;
+    private bool _wantsInfoOnTick = true;
     private byte[] _lastMessage = [];
 
     protected override ValueTask HandleMessageLockedAsync(Memory<byte> buffer)