Sync up when joining late

master
Wilco Kruijer 5 years ago
parent c54f9b6273
commit 3f1425a080
  1. 15
      backend/src/Lobby.js
  2. 4
      backend/src/index.js
  3. 15
      backend/src/timeline.js
  4. 25
      frontend/src/App.tsx
  5. 3
      frontend/src/components/NextShot.tsx
  6. 10
      frontend/src/components/ShotsTaken.tsx
  7. 2
      frontend/src/types/types.ts

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

@ -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

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

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

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

@ -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}
format={_ => remaining + ' / 100'}
percent={taken}
format={_ => taken + ' / 100'}
status="normal"
strokeColor={"#304ba3"}
strokeWidth={10}/>

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

Loading…
Cancel
Save