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 = (
Start bij:
Er zijn {userCount} gebruiker(s) aanwezig.
{isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'}
{isLeader ? seekItem : ''}