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.5 KiB
95 lines
3.5 KiB
import React, {useEffect, useRef, useState} from 'react';
|
|
import {Card, Col, InputNumber, Row} from "antd"
|
|
import {emit} from "../util/socket";
|
|
import "../css/lobby.sass";
|
|
import beer from "../img/beer.png"
|
|
import {NumberParam, useQueryParam} from 'use-query-params';
|
|
import {useSocket} from "use-socketio/lib";
|
|
|
|
const Lobby = (props: any) => {
|
|
const [lobbyId, setLobbyId] = useQueryParam('lobby', NumberParam);
|
|
const [isLeader, setIsLeader] = useState(false);
|
|
const [seekTime, setSeekTime] = useState(0);
|
|
const [userCount, setUserCount] = useState(0);
|
|
|
|
const {socket} = useSocket("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);
|
|
});
|
|
|
|
const socketRef = useRef<SocketIOClient.Socket>(socket);
|
|
|
|
async function onChangeLobbyInput(i: any) {
|
|
setLobbyId(i);
|
|
|
|
const result: any = await emit(socket,'join_lobby', i);
|
|
setIsLeader(socket.id === result.lobby.leaderId);
|
|
setUserCount(result.lobby.users?.length || 0);
|
|
}
|
|
|
|
useEffect(() => {
|
|
async function wrapper() {
|
|
const result: any = await emit(socketRef.current,'lobby_info');
|
|
setIsLeader(socketRef.current.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">
|
|
<img src={beer} className="beer-flipped" alt="beer"/>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 type="flex" justify="center">
|
|
<Col className="control" xs={12} sm={10} md={8} xl={6}>
|
|
<Card title={`Lobby setup (${lobbyId}):`} actions={isLeader ? [
|
|
<span onClick={async () => {
|
|
await emit(socket,'request_start', seekTime)
|
|
}}>Start</span>,
|
|
] : [<span onClick={props.start}>Join</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;
|
|
|