vinzenz/servicepoint-tanks
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

show status of sockets independently

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-04-07 21:09:52 +02:00
parent dd33ec59ad
commit 3c9192ab3a
3 changed files with 32 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

35
tank-frontend/src/Controls.tsx
View file

@ -1,6 +1,7 @@
import './Controls.css';
import useWebSocket from 'react-use-websocket';
import {useEffect} from 'react';
import {statusTextForReadyState} from './statusTextForReadyState.tsx';
export default function Controls({playerId}: {
playerId: string
@ -9,7 +10,8 @@ export default function Controls({playerId}: {
url.searchParams.set('playerId', playerId);
const {
sendMessage,
getWebSocket
getWebSocket,
readyState
} = useWebSocket(url.toString(), {
shouldReconnect: () => true,
});
@ -56,21 +58,24 @@ export default function Controls({playerId}: {
};
}, [sendMessage]);
return <div className="controls">
<div className="control">
<div className="row">
<kbd className="up">▲</kbd>
return <>
<span>The controller is currently {statusTextForReadyState[readyState]}</span>
<div className="controls">
<div className="control">
<div className="row">
<kbd className="up">▲</kbd>
</div>
<div className="row">
<kbd>◀</kbd>
<kbd>▼</kbd>
<kbd>▶</kbd>
</div>
<h3>Move</h3>
</div>
<div className="row">
<kbd>◀</kbd>
<kbd>▼</kbd>
<kbd>▶</kbd>
<div className="control">
<kbd className="space">Space</kbd>
<h3>Fire</h3>
</div>
<h3>Move</h3>
</div>
<div className="control">
<kbd className="space">Space</kbd>
<h3>Fire</h3>
</div>
</div>;
</>;
}