enhanced joining field

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"

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;
+}

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>;
 }

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}/>} 
     </>;
 }