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.
75 lines
2.5 KiB
75 lines
2.5 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"
|
|
|
|
const Lobby = () => {
|
|
const [lobbyId, setLobbyId] = useState<number | undefined>(undefined);
|
|
const [isLeader, setIsLeader] = useState(false);
|
|
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) => {
|
|
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();
|
|
}, []);
|
|
|
|
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')}}>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>
|
|
</Card>
|
|
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Lobby;
|
|
|