From d66f172b5de5ba1d47de27e60cde68c71d730282 Mon Sep 17 00:00:00 2001 From: Wilco Kruijer Date: Tue, 18 Feb 2020 16:46:07 +0100 Subject: [PATCH] Allow start at time --- backend/src/Lobby.js | 20 +++++++++++++------ backend/src/index.js | 17 ++++++++++------ frontend/package-lock.json | 33 ++++++++++++++++++++++++++----- frontend/package.json | 1 + frontend/src/App.tsx | 2 +- frontend/src/components/Feed.tsx | 2 +- frontend/src/components/Lobby.tsx | 32 ++++++++++++++++++++++++------ frontend/src/util/socket.ts | 7 +++---- 8 files changed, 85 insertions(+), 29 deletions(-) diff --git a/backend/src/Lobby.js b/backend/src/Lobby.js index 3940ae2..d5c8653 100644 --- a/backend/src/Lobby.js +++ b/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.startTime = Date.now() - this.currentSeconds * 1000; - this.timelineIndex = timeline.indexForTime(this.currentSeconds); - console.log("idx", this.timelineIndex); - ioLobby.emit('seek', this.currentSeconds); + this.seek(ioLobby, 500); } 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} diff --git a/backend/src/index.js b/backend/src/index.js index 39f9961..37d26ce 100644 --- a/backend/src/index.js +++ b/backend/src/index.js @@ -1,7 +1,7 @@ const service = require("./service.js"); const state = require("./state.js"); -const { io } = require('./app.js'); +const {io} = require('./app.js'); io.on('connection', socket => { const socketId = socket.id; @@ -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); + } + }); }); \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 95e4afe..d2499ab 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 02056c2..9cb269f 100644 --- a/frontend/package.json +++ b/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": { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2b8205b..d998b67 100644 --- a/frontend/src/App.tsx +++ b/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"); diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx index e42e14a..639244f 100644 --- a/frontend/src/components/Feed.tsx +++ b/frontend/src/components/Feed.tsx @@ -36,7 +36,7 @@ const Feed = () => { } // @ts-ignore - setFeedItems(newItems); + // setFeedItems(newItems); } }); diff --git a/frontend/src/components/Lobby.tsx b/frontend/src/components/Lobby.tsx index 8f7b2ee..a0ca428 100644 --- a/frontend/src/components/Lobby.tsx +++ b/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(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 = ( + + Start bij: setSeekTime(time || 0)}/> + sec. + + ); + return (
@@ -54,16 +71,19 @@ const Lobby = () => { - {await emit('request_start')}}>Start, - ]: []}> + { + await emit('request_start', seekTime) + }}>Start, + ] : []}> Huidige lobby + onChange={onChangeLobbyInput}/>

Er zijn {userCount} gebruiker(s) aanwezig.

-

{isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'}

+

{isLeader ? 'Jij bent de baas.' : 'Wachten op de baas...'}

+ {isLeader ? seekItem : ''} diff --git a/frontend/src/util/socket.ts b/frontend/src/util/socket.ts index f37917f..9abb192 100644 --- a/frontend/src/util/socket.ts +++ b/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) { - socket.emit(event, arg, cb); - } else { + if (arg === null || typeof arg === 'undefined') { socket.emit(event, cb); + } else { + socket.emit(event, arg, cb); } })