centurion/frontend/src/components/Centurion.tsx

import React, {useEffect, useRef, useState} from "react";
import {Row} from "antd";
import {useSocket} from "use-socketio";
import {NumberParam, useQueryParam} from "use-query-params";

import {Tick} from "../types/types";

import NextShot from "./NextShot";
import Feed from "./Feed";
import ShotsTaken from "./ShotsTaken";
import Lobby from "./Lobby";

import logo from "../img/via-logo.svg";

const Centurion = () => {
    const [started, setStarted] = useState(false);
    const [wantsToStart, setWantsToStart] = useState(false);
    const player = useRef(new Audio("centurion.m4a"));
    const [noSound] = useQueryParam('noSound', NumberParam);

    function goStart() {
        console.log("Starting from wrapper..");
        setWantsToStart(true);
    }


    useSocket("started", async (obj: any) => {
        console.log("got started");
        setStarted(true);

        if (typeof noSound === 'undefined') {
            await player.current.play();
        }
    });

    useEffect(() => {
        if (noSound === 1) {
            // Won't play sound so we don't get DOM Interaction errors.
            setWantsToStart(true);
        }
    }, [noSound]);

    useSocket("tick_event", async (tick: Tick) => {
        if (!started && wantsToStart) {
            if (player.current.paused) {
                if (typeof noSound === 'undefined') {
                    await player.current.play();
                }
            }

            setStarted(true);
            player.current.currentTime = tick.current;
        }
    });

    const feedContent = (
        <Row>
            <NextShot/>
            <Feed/>
            <ShotsTaken/>
        </Row>
    );

    const lobbyContent = (
        <Lobby start={goStart}/>
    );

    const content = started ? feedContent : lobbyContent;

    return (
        <>
            <section className="content">
                {content}
            </section>
            <footer>
                <img src={logo} className="via-logo" alt="logo"/>
            </footer>
        </>
    );
};

export default Centurion;