centurion/frontend/src/components/Lobby.tsx

import React, {useEffect, useRef, useState} from 'react';
import {Card, Col, InputNumber, Row} from "antd"
import {useSocket} from "use-socketio/lib";
import {NumberParam, useQueryParam} from 'use-query-params';

import {emit} from "../util/socket";

import "../css/lobby.sass";
import beer from "../img/beer.png"

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;