import React, {useEffect, useRef, useState} from "react";
import {Row} from "antd";
import NextShot from "./components/NextShot";
import Feed from "./components/Feed";
import ShotsTaken from "./components/ShotsTaken";
import Lobby from "./components/Lobby";
import {useSocket} from "use-socketio";
import logo from "./via-logo.svg";
import {Tick} from "./types/types";
import {NumberParam, useQueryParam} from "use-query-params";
const Wrapper = () => {
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 = (
);
const lobbyContent = (
);
const content = started ? feedContent : lobbyContent;
return (
<>
>
);
};
export default Wrapper;