From bf6ce9960168c847faa94adc0ea5b8ee70f38cd4 Mon Sep 17 00:00:00 2001
From: Ronja Spiegelberg <spiegelberg+github@gmail.com>
Date: Sat, 13 Apr 2024 16:32:13 +0200
Subject: [PATCH] enhanced joining field

---
 tank-frontend/package.json     |  2 +-
 tank-frontend/src/JoinForm.css | 12 +++++++++++
 tank-frontend/src/JoinForm.tsx | 38 +++++++++++++++++++++-------------
 tank-frontend/src/index.tsx    |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/tank-frontend/package.json b/tank-frontend/package.json
index 17be3e5..ba60c09 100644
--- a/tank-frontend/package.json
+++ b/tank-frontend/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0 --port 8543",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
diff --git a/tank-frontend/src/JoinForm.css b/tank-frontend/src/JoinForm.css
index 4e33b01..015b34c 100644
--- a/tank-frontend/src/JoinForm.css
+++ b/tank-frontend/src/JoinForm.css
@@ -1,4 +1,16 @@
+.TankWelcome {
+    display: flex;
+    flex-direction: column;
+}
+
 .JoinForm {
     display: flex;
     flex-direction: row;
+    border: 2px solid rgb(76, 76, 76);
+    border-radius: 4px;
 }
+
+.JoinElems {
+    padding: 8px 8px;
+    margin: 8px 8px;
+}
\ No newline at end of file
diff --git a/tank-frontend/src/JoinForm.tsx b/tank-frontend/src/JoinForm.tsx
index cd3aabc..6a927c4 100644
--- a/tank-frontend/src/JoinForm.tsx
+++ b/tank-frontend/src/JoinForm.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import './JoinForm.css';
 
 type PlayerResponse = {
@@ -18,7 +18,7 @@ export async function fetchPlayer(name: string, options: RequestInit) {
     return json.id;
 }
 
-export default function JoinForm({onDone}: { onDone: (id: string) => void }) {
+export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
     const [name, setName] = useState('');
     const [clicked, setClicked] = useState(false);
     const [data, setData] = useState<PlayerResponse | null>(null);
@@ -41,17 +41,27 @@ export default function JoinForm({onDone}: { onDone: (id: string) => void }) {
     }, [clicked, setData, data]);
 
     const disableButtons = clicked || name.trim() === '';
-    return <div className="JoinForm">
-        <input
-            type="text"
-            value={name}
-            onChange={e => setName(e.target.value)}
-        />
-        <button
-            onClick={() => setClicked(true)}
-            disabled={disableButtons}
-        >
-            join
-        </button>
+    return <div className='TankWelcome'>
+        <h1 className='JoinElems' style={{ "color": "white" }}>
+            Tanks
+        </h1>
+        <p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p>
+        <div className="JoinForm">
+            <p className='JoinElems' style={{ "color": "white" }}>
+                Enter your name to join the game!
+            </p>
+            <input className="JoinElems"
+                type="text"
+                value={name}
+                placeholder='player name'
+                onChange={e => setName(e.target.value)}
+            />
+            <button className="JoinElems"
+                onClick={() => setClicked(true)}
+                disabled={disableButtons}
+            >
+                join
+            </button>
+        </div>
     </div>;
 }
diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx
index 1ca269c..3f3a217 100644
--- a/tank-frontend/src/index.tsx
+++ b/tank-frontend/src/index.tsx
@@ -11,7 +11,7 @@ function App() {
     return <>
         {id === null && <JoinForm onDone={name => setId(name)}/>}
         <ClientScreen/>
-        {id == null || <Controls playerId={id}/>}
+        {id == null || <Controls playerId={id}/>} 
     </>;
 }