Sync up when joining late

backend/src/Lobby.js

@@ -1,5 +1,6 @@
 const User = require("./User.js");
 const timeline = require("./timeline.js");
+
 module.exports = class Lobby {
     /**
      * @type {User[]}
@@ -32,18 +33,22 @@ module.exports = class Lobby {
                 return;
             }
 
-            console.log(this.currentSeconds);
 
             const timestamp = timeline.getIndex(this.timelineIndex);
             const nextShot = timeline.getNextShot(this.timelineIndex);
 
             if (!timestamp) {
                 // We are done.
+                ioLobby.emit('tick_event', {
+                    current: this.currentSeconds
+                });
                 console.log("Done");
                 this.running = false;
                 return;
             }
 
+            console.log("ticking", this.currentSeconds);
+
             ioLobby.emit('tick_event', {
                 current: this.currentSeconds,
                 next: timestamp,
@@ -62,6 +67,14 @@ module.exports = class Lobby {
             setTimeout(doTick, Math.floor(waitTime / this.speedFactor));
         };
 
+        if (false) {
+            this.currentSeconds = 500;
+            this.startTime = Date.now() - this.currentSeconds * 1000;
+            this.timelineIndex = timeline.indexForTime(this.currentSeconds);
+            console.log("idx", this.timelineIndex);
+            ioLobby.emit('seek', this.currentSeconds);
+        }
+
         doTick();
     }
 

backend/src/index.js

@@ -40,6 +40,10 @@ io.on('connection', socket => {
 
         socket.join(lobby.name);
 
+        if (lobby.running) {
+            socket.emit('seek', lobby.currentSeconds);
+        }
+
         callback(null, {
             status: 'ok',
             lobby: lobby

backend/src/timeline.js

@@ -34,6 +34,19 @@ function getNextShot(i) {
     return undefined;
 }
 
+function indexForTime(seconds) {
+    let lastIndex = 0;
+    for(let i = 0; i < timeline.length; i++) {
+        const time = timeline[i];
+
+        if (time.timestamp >= seconds) {
+            return lastIndex;
+        }
+
+        lastIndex = i;
+    }
+}
+
 module.exports = {
-    getIndex, getNextShot
+    getIndex, getNextShot, indexForTime
 };

frontend/src/App.tsx

@@ -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");
         }
     });
 

frontend/src/components/NextShot.tsx

@@ -11,7 +11,8 @@ const NextShot = () => {
 
     useEffect(() => {
         socket.on("tick_event", (tick: Tick) => {
-            if (!tick.nextShot) {
+            console.log("TICK EVENT?", tick);
+            if (!tick.nextShot || !tick.next) {
                 setRemaining(0);
                 return;
             }

frontend/src/components/ShotsTaken.tsx

@@ -5,16 +5,16 @@ import {Tick} from "../types/types";
 
 
 const ShotsTaken = () => {
-    const [remaining, setRemaining] = useState(100);
+    const [taken, setTaken] = useState(100);
 
     useEffect(() => {
         socket.on("tick_event", (tick: Tick) => {
             if (!tick.nextShot) {
-                setRemaining(0);
+                setTaken(100);
                 return;
             }
 
-            setRemaining(tick.nextShot.count - 1);
+            setTaken(tick.nextShot.count - 1);
         });
 
         return () => {
@@ -26,8 +26,8 @@ const ShotsTaken = () => {
         <Col className="sider" span={4}>
             <h1>Shots genomen:</h1>
             <Progress type="circle"
-                      percent={100 - remaining}
+                      percent={taken}
-                      format={_ => remaining + ' / 100'}
+                      format={_ => taken + ' / 100'}
                       status="normal"
                       strokeColor={"#304ba3"}
                       strokeWidth={10}/>

frontend/src/types/types.ts

@@ -1,6 +1,6 @@
 export interface Tick {
     current: number,
-    next: {
+    next?: {
         timestamp: number,
         events: TimestampEvent[]
     },