|
|
|
@ -1,25 +1,42 @@ |
|
|
|
|
import React, {useEffect, useState} from 'react'; |
|
|
|
|
import React, {useEffect, useRef, useState} from 'react'; |
|
|
|
|
import './App.css'; |
|
|
|
|
import logo from "./via-logo.svg" |
|
|
|
|
import {Row} from "antd" |
|
|
|
|
import socket, { emit } from "./util/socket"; |
|
|
|
|
import socket from "./util/socket"; |
|
|
|
|
import NextShot from "./components/NextShot"; |
|
|
|
|
import ShotsTaken from "./components/ShotsTaken"; |
|
|
|
|
import Feed from "./components/Feed"; |
|
|
|
|
import Lobby from "./components/Lobby"; |
|
|
|
|
|
|
|
|
|
import {Tick} from "./types/types"; |
|
|
|
|
|
|
|
|
|
const App = () => { |
|
|
|
|
const [started, setStarted] = useState(false); |
|
|
|
|
const player = useRef(new Audio("centurion.m4a")); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
socket.on('started', async () => { |
|
|
|
|
setStarted(true); |
|
|
|
|
console.log('ffin started') |
|
|
|
|
|
|
|
|
|
await player.current.play(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
socket.on('seek', async (sec: number) => { |
|
|
|
|
if (player.current.paused) { |
|
|
|
|
await player.current.play(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
socket.once("tick_event", (tick: Tick) => { |
|
|
|
|
// Wait till the next tick to actually start so we more closely match the leader's sound
|
|
|
|
|
setStarted(true); |
|
|
|
|
player.current.currentTime = tick.current |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
socket.off("started"); |
|
|
|
|
socket.off("seek"); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|