mara/servicepoint-tanks
Archived
Watch
0
0
Fork
You've already forked servicepoint-tanks
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

automatic rejoin on reload or server restart

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-04-13 19:50:37 +02:00
commit 64a61ef2b3
1 changed files with 141 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

38
tank-frontend/src/JoinForm.tsx
View file

@ -1,8 +1,12 @@
import { useEffect, useState } from 'react';
import {useEffect, useState} from 'react';
import './JoinForm.css';
import { PlayerResponse, postPlayer } from './serverCalls';
import {NameId, PlayerResponse, postPlayer} from './serverCalls';
import {Guid} from './Guid.ts';
export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
export default function JoinForm({setNameId, clientId}: {
setNameId: (mutator: (oldState: NameId) => NameId) => void,
clientId: Guid
}) {
const [name, setName] = useState('');
const [clicked, setClicked] = useState(false);
const [data, setData] = useState<PlayerResponse | null>(null);
@ -12,10 +16,10 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
return;
try {
postPlayer(name)
.then((value: PlayerResponse | null) => {
postPlayer({name, id: clientId})
.then(value => {
if (value)
onDone(value.id);
setNameId(prev => ({...prev, ...value}));
else
setClicked(false);
});
@ -23,27 +27,27 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
console.log(e);
alert(e);
}
}, [clicked, setData, data]);
}, [clicked, setData, data, clientId, setClicked, setNameId]);
const disableButtons = clicked || name.trim() === '';
return <div className='TankWelcome'>
<h1 className='JoinElems' style={{ "color": "white" }}>
return <div className="TankWelcome">
<h1 className="JoinElems" style={{'color': 'white'}}>
Tanks
</h1>
<p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p>
<p className="JoinElems" style={{'color': 'white'}}> Welcome and have fun!</p>
<div className="JoinForm">
<p className='JoinElems' style={{ "color": "white" }}>
<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)}
type="text"
value={name}
placeholder="player name"
onChange={e => setName(e.target.value)}
/>
<button className="JoinElems"
onClick={() => setClicked(true)}
disabled={disableButtons}
onClick={() => setClicked(true)}
disabled={disableButtons}
>
join
</button>