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

@@ -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">
+    return <div className='TankWelcome'>
-        <input
+        <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
+            <button className="JoinElems"
                 onClick={() => setClicked(true)}
                 disabled={disableButtons}
             >
                 join
             </button>
+        </div>
     </div>;
 }