Kopie van https://gitlab.com/studieverenigingvia/ict/centurion met een paar aanpassingen
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.2 KiB
95 lines
3.2 KiB
import React, {useEffect, useState} from 'react';
|
|
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] = useQueryParam('lobby', NumberParam);
|
|
const [isLeader, setIsLeader] = useState(false);
|
|
const [seekTime, setSeekTime] = useState(0);
|
|
const [userCount, setUserCount] = useState(0);
|
|
|
|
async function onChangeLobbyInput(i: any) {
|
|
setLobbyId(i);
|
|
|
|
const result: any = await emit('join_lobby', i);
|
|
setIsLeader(socket.id === result.lobby.leaderId);
|
|
setUserCount(result.lobby.users?.length || 0);
|
|
}
|
|
|
|
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);
|
|
});
|
|
return () => {
|
|
socket.off("welcome");
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
async function wrapper() {
|
|
const result: any = await emit('lobby_info');
|
|
setIsLeader(socket.id === result.lobby.leaderId);
|
|
setUserCount(result.lobby.users?.length || 0);
|
|
}
|
|
|
|
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>
|
|
<Col span={24}>
|
|
<h1 id="centurion-title">Centurion! <img src={beer} className="beer" alt="beer"/></h1>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="hints" span={24}>
|
|
<div>Honderd minuten...</div>
|
|
<div>Honderd shots...</div>
|
|
<div>Kun jij het aan?</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="control" span={8} offset={8}>
|
|
<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}/>
|
|
</span>
|
|
|
|
<p>Er zijn {userCount} gebruiker(s) aanwezig.</p>
|
|
<p> {isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'} </p>
|
|
{isLeader ? seekItem : ''}
|
|
</Card>
|
|
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Lobby;
|
|
|