|
|
|
|
@ -3,10 +3,12 @@ import {Card, Col, InputNumber, Row} from "antd" |
|
|
|
|
import socket, {emit} from "../util/socket"; |
|
|
|
|
import "../css/lobby.css"; |
|
|
|
|
import beer from "../img/beer.png" |
|
|
|
|
import {NumberParam, useQueryParam} from 'use-query-params'; |
|
|
|
|
|
|
|
|
|
const Lobby = () => { |
|
|
|
|
const [lobbyId, setLobbyId] = useState<number | undefined>(undefined); |
|
|
|
|
const [lobbyId, setLobbyId] = useQueryParam('lobby', NumberParam); |
|
|
|
|
const [isLeader, setIsLeader] = useState(false); |
|
|
|
|
const [seekTime, setSeekTime] = useState(0); |
|
|
|
|
const [userCount, setUserCount] = useState(0); |
|
|
|
|
|
|
|
|
|
async function onChangeLobbyInput(i: any) { |
|
|
|
|
@ -19,6 +21,13 @@ const Lobby = () => { |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
socket.on('welcome', async (obj: any) => { |
|
|
|
|
if (lobbyId) { |
|
|
|
|
// lobbyId is already defined, this means we have a queryparam set.
|
|
|
|
|
await onChangeLobbyInput(lobbyId); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
console.log("Got welcome", lobbyId); |
|
|
|
|
|
|
|
|
|
setLobbyId(obj.lobby.name); |
|
|
|
|
setIsLeader(socket.id === obj.lobby.leaderId); |
|
|
|
|
setUserCount(obj.lobby.users?.length || 0); |
|
|
|
|
@ -38,6 +47,14 @@ const Lobby = () => { |
|
|
|
|
wrapper(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const seekItem = ( |
|
|
|
|
<span> |
|
|
|
|
Start bij: <InputNumber size="small" min={0} max={60000} value={seekTime} |
|
|
|
|
onChange={time => setSeekTime(time || 0)}/> |
|
|
|
|
sec. |
|
|
|
|
</span> |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="lobby"> |
|
|
|
|
<Row> |
|
|
|
|
@ -54,16 +71,19 @@ const Lobby = () => { |
|
|
|
|
</Row> |
|
|
|
|
<Row> |
|
|
|
|
<Col className="control" span={8} offset={8}> |
|
|
|
|
<Card title={`Lobby setup (${lobbyId}):`} actions={ isLeader ? [ |
|
|
|
|
<span onClick={async () => {await emit('request_start')}}>Start</span>, |
|
|
|
|
]: []}> |
|
|
|
|
<Card title={`Lobby setup (${lobbyId}):`} actions={isLeader ? [ |
|
|
|
|
<span onClick={async () => { |
|
|
|
|
await emit('request_start', seekTime) |
|
|
|
|
}}>Start</span>, |
|
|
|
|
] : []}> |
|
|
|
|
<span> |
|
|
|
|
Huidige lobby <InputNumber size="small" min={100} max={100000} value={lobbyId} |
|
|
|
|
onChange={onChangeLobbyInput}/> |
|
|
|
|
onChange={onChangeLobbyInput}/> |
|
|
|
|
</span> |
|
|
|
|
|
|
|
|
|
<p>Er zijn {userCount} gebruiker(s) aanwezig.</p> |
|
|
|
|
<p> {isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'}</p> |
|
|
|
|
<p> {isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'} </p> |
|
|
|
|
{isLeader ? seekItem : ''} |
|
|
|
|
</Card> |
|
|
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
Wilco Kruijer
4 years ago