From 1c5e14cd478d00354b2d48e5fa917a135159ec3f Mon Sep 17 00:00:00 2001
From: Ronja Spiegelberg <spiegelberg+github@gmail.com>
Date: Sun, 28 Apr 2024 21:28:07 +0200
Subject: [PATCH] fix choosing maps

---
 Makefile                                   |  2 +-
 package-lock.json                          |  6 +++++
 tank-frontend/src/App.css                  |  9 +++++++
 tank-frontend/src/App.tsx                  |  6 +++--
 tank-frontend/src/MapDropDown.tsx          | 28 ++++++++++++++++++++
 tank-frontend/src/components/DataTable.tsx | 30 +++++++++++-----------
 tank-frontend/src/serverCalls.tsx          | 12 +++++++++
 7 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 tank-frontend/src/MapDropDown.tsx

diff --git a/Makefile b/Makefile
index 9432c05..4e76abc 100644
--- a/Makefile
+++ b/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
 
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..fa1abcd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "cccb-tanks-cs",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/tank-frontend/src/App.css b/tank-frontend/src/App.css
index af2fb25..2846800 100644
--- a/tank-frontend/src/App.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/tank-frontend/src/App.tsx b/tank-frontend/src/App.tsx
index aaf4755..a00b7c6 100644
--- a/tank-frontend/src/App.tsx
+++ b/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 {useState} from 'react';
+import {getRandomTheme, useStoredTheme} from "./theme.ts";
+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()}
diff --git a/tank-frontend/src/MapDropDown.tsx b/tank-frontend/src/MapDropDown.tsx
new file mode 100644
index 0000000..c235969
--- /dev/null
+++ b/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>
+}
diff --git a/tank-frontend/src/components/DataTable.tsx b/tank-frontend/src/components/DataTable.tsx
index 751d8d8..dcfe319 100644
--- a/tank-frontend/src/components/DataTable.tsx
+++ b/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>
-                {
-                    columns.map(column =>
-                        <th key={column.field} onClick={() => headerClick(column)}>
-                            {column.label ?? column.field}
-                        </th>)
-                }
-            </tr>
+                <tr>
+                    {
+                        columns.map(column =>
+                            <th key={column.field} onClick={() => headerClick(column)}>
+                                {column.label ?? column.field}
+                            </th>)
+                    }
+                </tr>
             </thead>
             <tbody>
-            {
-                dataToDisplay.map((element, index) =>
-                    <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns}/>)
-            }
+                {
+                    dataToDisplay.map((element, index) =>
+                        <DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns} />)
+                }
             </tbody>
         </table>
     </div>;
diff --git a/tank-frontend/src/serverCalls.tsx b/tank-frontend/src/serverCalls.tsx
index fc695b1..c0dd334 100644
--- a/tank-frontend/src/serverCalls.tsx
+++ b/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'});
+}