Allow start at time

backend/src/Lobby.js

@@ -17,7 +17,7 @@ module.exports = class Lobby {
     timelineIndex = 0;
 
     // For debugging purposes
-    speedFactor = 100;
+    speedFactor = 1;
 
     constructor(name) {
         this.name = name;
@@ -68,16 +68,24 @@ module.exports = class Lobby {
         };
 
         if (false) {
-            this.currentSeconds = 500;
+            this.seek(ioLobby, 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();
     }
 
+    /**
+     *
+     * @param ioLobby
+     * @param {number} time
+     */
+    seek(ioLobby, time) {
+        this.currentSeconds = time;
+        this.startTime = Date.now() - time * 1000;
+        this.timelineIndex = timeline.indexForTime(this.currentSeconds);
+        ioLobby.emit('seek', time);
+    }
+
     /**
      *
      * @returns {boolean}

backend/src/index.js

@@ -20,7 +20,7 @@ io.on('connection', socket => {
 
     socket.on('join_lobby', (lobbyId, callback) => {
         if (!callback || typeof callback !== 'function') {
-            console.error("Callback not a function.");
+            console.error("Join: Callback not a function.");
             return
         }
 
@@ -52,7 +52,7 @@ io.on('connection', socket => {
 
     socket.on('lobby_info', callback => {
         if (!callback || typeof callback !== 'function') {
-            console.error("Callback not a function.");
+            console.error("Lobby info: Callback not a function.");
             return
         }
 
@@ -64,7 +64,7 @@ io.on('connection', socket => {
         });
     });
 
-    socket.on('request_start', () => {
+    socket.on('request_start', (time = null) => {
         console.log('request start', socket.rooms);
 
         const lobby = service.getUserLobby(socketId);
@@ -73,8 +73,13 @@ io.on('connection', socket => {
             return;
         }
 
-        const ioLobby = io.to(lobby.name + "")
+        const ioLobby = io.to(lobby.name + "");
         ioLobby.emit('started');
         lobby.run(ioLobby);
-    })
+
+        if (typeof time === 'number' && time) {
+            console.log("Starting at", time);
+            lobby.seek(ioLobby, time);
+        }
+    });
 });

frontend/package-lock.json

@@ -11445,11 +11445,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-radial-progress-indicator": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/react-radial-progress-indicator/-/react-radial-progress-indicator-1.4.1.tgz",
-      "integrity": "sha512-4FYrCtpqshAdVdKWPo+CmIVU5fALidzKrFNIB3S98JgXruts22jiqS3n0JFLW5mlYqTXUqzOQNH1m2jyWgnnzg=="
-    },
     "react-scripts": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.3.1.tgz",
@@ -12165,6 +12160,26 @@
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
       "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
     },
+    "serialize-query-params": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/serialize-query-params/-/serialize-query-params-0.3.0.tgz",
+      "integrity": "sha512-gtarsAa5B7L+v2mxbm0zTq8WjqwjgYHZmLsyvxGnlSfW2bWkokV0QKzRxLCGHF2aDqbQYCCNaj1/NP6DqbcEKQ==",
+      "requires": {
+        "query-string": "^5.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        }
+      }
+    },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -13641,6 +13656,14 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-query-params": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/use-query-params/-/use-query-params-0.6.0.tgz",
+      "integrity": "sha512-AEZm0+TTYuV3/l/IC+Iyqkvol1muXWJd2hlgY2erFESvtZNIpU4BrsTo6jnOBFd/t6rTOQuFjKSmW/+TAy8mzQ==",
+      "requires": {
+        "serialize-query-params": "^0.3.0"
+      }
+    },
     "use-socketio": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/use-socketio/-/use-socketio-2.0.0.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "socket.io-client": "^2.3.0",
     "sscaffold-css": "^0.1.0",
     "typescript": "^3.7.5",
+    "use-query-params": "^0.6.0",
     "use-socketio": "^2.0.0"
   },
   "scripts": {

frontend/src/App.tsx

@@ -13,6 +13,7 @@ const App = () => {
     const [started, setStarted] = useState(false);
     const player = useRef(new Audio("centurion.m4a"));
 
+
     useEffect(() => {
         socket.on('started', async () => {
             setStarted(true);
@@ -34,7 +35,6 @@ const App = () => {
         });
 
 
-
         return () => {
             socket.off("started");
             socket.off("seek");

frontend/src/components/Feed.tsx

@@ -36,7 +36,7 @@ const Feed = () => {
                 }
 
                 // @ts-ignore
-                setFeedItems(newItems);
+                // setFeedItems(newItems);
             }
         });
 

frontend/src/components/Lobby.tsx

@@ -3,10 +3,12 @@ import {Card, Col, InputNumber, Row} from "antd"
 import socket, {emit} from "../util/socket";
 import "../css/lobby.css";
 import beer from "../img/beer.png"
+import {NumberParam, useQueryParam} from 'use-query-params';
 
 const Lobby = () => {
-    const [lobbyId, setLobbyId] = useState<number | undefined>(undefined);
+    const [lobbyId, setLobbyId] = useQueryParam('lobby', NumberParam);
     const [isLeader, setIsLeader] = useState(false);
+    const [seekTime, setSeekTime] = useState(0);
     const [userCount, setUserCount] = useState(0);
 
     async function onChangeLobbyInput(i: any) {
@@ -19,6 +21,13 @@ const Lobby = () => {
 
     useEffect(() => {
         socket.on('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);
@@ -38,6 +47,14 @@ const Lobby = () => {
         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>
@@ -55,7 +72,9 @@ const Lobby = () => {
             <Row>
                 <Col className="control" span={8} offset={8}>
                     <Card title={`Lobby setup (${lobbyId}):`} actions={isLeader ? [
-                        <span onClick={async () => {await emit('request_start')}}>Start</span>,
+                        <span onClick={async () => {
+                            await emit('request_start', seekTime)
+                        }}>Start</span>,
                     ] : []}>
                         <span>
                             Huidige lobby <InputNumber size="small" min={100} max={100000} value={lobbyId}
@@ -64,6 +83,7 @@ const Lobby = () => {
 
                         <p>Er zijn {userCount} gebruiker(s) aanwezig.</p>
                         <p> {isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'} </p>
+                        {isLeader ? seekItem : ''}
                     </Card>
 
                 </Col>

frontend/src/util/socket.ts

@@ -8,7 +8,6 @@ export default socket;
  * Promisify emit.
  * @param event
  * @param arg
- * @param callback
  */
 export function emit(event: string, arg: any = null) {
     return new Promise((resolve, reject) => {
@@ -20,10 +19,10 @@ export function emit(event: string, arg: any = null) {
             resolve(res);
         };
 
-        if (arg) {
+        if (arg === null || typeof arg === 'undefined') {
-            socket.emit(event, arg, cb);
-        } else {
             socket.emit(event, cb);
+        } else {
+            socket.emit(event, arg, cb);
         }
 
     })