|
|
|
@ -1,24 +1,74 @@ |
|
|
|
|
import React, {useEffect} from 'react'; |
|
|
|
|
import {Col, Progress} from "antd" |
|
|
|
|
import socket from "../util/socket"; |
|
|
|
|
|
|
|
|
|
import React, {useEffect, useState} from 'react'; |
|
|
|
|
import {Card, Col, InputNumber, Row} from "antd" |
|
|
|
|
import socket, {emit} from "../util/socket"; |
|
|
|
|
import "../css/lobby.css"; |
|
|
|
|
import beer1 from "../img/beer1.png" |
|
|
|
|
|
|
|
|
|
const Lobby = () => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
socket.on("SENDING_NEW_TIME", (data: string) => { |
|
|
|
|
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("SENDING_NEW_TIME"); |
|
|
|
|
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 ( |
|
|
|
|
<Col className="sider" span={4} offset={10}> |
|
|
|
|
<h1>Centurion!</h1> |
|
|
|
|
<div className="lobby"> |
|
|
|
|
<Row> |
|
|
|
|
<Col span={24}> |
|
|
|
|
<h1>Centurion! <img src={beer1} 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>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.' : 'Wachtend op de baas...'}</p> |
|
|
|
|
</Card> |
|
|
|
|
|
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|