fix choosing maps

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.css

@@ -4,3 +4,12 @@
     flex-wrap: wrap;
     row-gap: var(--padding-big);
 }
+
+.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/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 MapDropDown from './MapDropDown.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>
+            <MapDropDown />
             <Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
             <Button
                 onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}

tank-frontend/src/MapDropDown.tsx

@@ -0,0 +1,28 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import { getMaps, postMaps } from "./serverCalls";
+
+export default function MapDropDown() {
+    const [mapList, setMaps] = useState<string[] | null>(null);
+
+    useEffect(() => {
+        let aborted = false;
+        async function startFetch() {
+            const response = await getMaps();
+            if (!aborted && response.ok && response.successResult)
+                setMaps(response.successResult);
+        }
+        startFetch();
+        return () => { aborted = true };
+    }, []);
+
+    const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        postMaps(event.target.options[event.target.selectedIndex].value);
+        event.preventDefault();
+    };
+
+    return <select value="maps" className='DropDown' onChange={onChange}>
+        <option value="" defaultValue={""} >Choose map</option>
+        {mapList?.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
@@ -57,20 +57,20 @@ export default function DataTable<T>({data, columns, className}: {
     return <div className={'DataTable ' + (className ?? '')}>
         <table>
             <thead className='DataTableHead'>
-            <tr>
+                <tr>
-                {
+                    {
-                    columns.map(column =>
+                        columns.map(column =>
-                        <th key={column.field} onClick={() => headerClick(column)}>
+                            <th key={column.field} onClick={() => headerClick(column)}>
-                            {column.label ?? column.field}
+                                {column.label ?? column.field}
-                        </th>)
+                            </th>)
-                }
+                    }
-            </tr>
+                </tr>
             </thead>
             <tbody>
-            {
+                {
-                dataToDisplay.map((element, index) =>
+                    dataToDisplay.map((element, index) =>
-                    <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns}/>)
+                        <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns} />)
-            }
+                }
             </tbody>
         </table>
     </div>;

tank-frontend/src/serverCalls.tsx

@@ -44,3 +44,15 @@ export function postPlayer(name: string) {
 
     return fetchTyped<string>({url, method: 'POST'});
 }
+
+export async function getMaps() {
+    const url = makeApiUrl('/map');
+    return await fetchTyped<string[]>({url, method: 'GET'});
+}
+
+export function postMaps(map: string) {
+    const url = makeApiUrl('/map');
+    url.searchParams.set('name', map);
+
+    return fetchTyped<string>({url, method: 'POST'});
+}