enhanced joining field
This commit is contained in:
parent
9620703efc
commit
bf6ce99601
|
@ -4,7 +4,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite --host 0.0.0.0 --port 8543",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
|
|
|
@ -1,4 +1,16 @@
|
||||||
|
.TankWelcome {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.JoinForm {
|
.JoinForm {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
border: 2px solid rgb(76, 76, 76);
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.JoinElems {
|
||||||
|
padding: 8px 8px;
|
||||||
|
margin: 8px 8px;
|
||||||
|
}
|
|
@ -1,4 +1,4 @@
|
||||||
import {useEffect, useState} from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import './JoinForm.css';
|
import './JoinForm.css';
|
||||||
|
|
||||||
type PlayerResponse = {
|
type PlayerResponse = {
|
||||||
|
@ -18,7 +18,7 @@ export async function fetchPlayer(name: string, options: RequestInit) {
|
||||||
return json.id;
|
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 [name, setName] = useState('');
|
||||||
const [clicked, setClicked] = useState(false);
|
const [clicked, setClicked] = useState(false);
|
||||||
const [data, setData] = useState<PlayerResponse | null>(null);
|
const [data, setData] = useState<PlayerResponse | null>(null);
|
||||||
|
@ -41,17 +41,27 @@ export default function JoinForm({onDone}: { onDone: (id: string) => void }) {
|
||||||
}, [clicked, setData, data]);
|
}, [clicked, setData, data]);
|
||||||
|
|
||||||
const disableButtons = clicked || name.trim() === '';
|
const disableButtons = clicked || name.trim() === '';
|
||||||
return <div className="JoinForm">
|
return <div className='TankWelcome'>
|
||||||
<input
|
<h1 className='JoinElems' style={{ "color": "white" }}>
|
||||||
type="text"
|
Tanks
|
||||||
value={name}
|
</h1>
|
||||||
onChange={e => setName(e.target.value)}
|
<p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p>
|
||||||
/>
|
<div className="JoinForm">
|
||||||
<button
|
<p className='JoinElems' style={{ "color": "white" }}>
|
||||||
onClick={() => setClicked(true)}
|
Enter your name to join the game!
|
||||||
disabled={disableButtons}
|
</p>
|
||||||
>
|
<input className="JoinElems"
|
||||||
join
|
type="text"
|
||||||
</button>
|
value={name}
|
||||||
|
placeholder='player name'
|
||||||
|
onChange={e => setName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button className="JoinElems"
|
||||||
|
onClick={() => setClicked(true)}
|
||||||
|
disabled={disableButtons}
|
||||||
|
>
|
||||||
|
join
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ function App() {
|
||||||
return <>
|
return <>
|
||||||
{id === null && <JoinForm onDone={name => setId(name)}/>}
|
{id === null && <JoinForm onDone={name => setId(name)}/>}
|
||||||
<ClientScreen/>
|
<ClientScreen/>
|
||||||
{id == null || <Controls playerId={id}/>}
|
{id == null || <Controls playerId={id}/>}
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue