fix replay after opening a game

build/public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   
   <title>🧩 jigsaw.hyottoko.club</title>
-<script type="module" crossorigin src="/assets/index.ee8c98e9.js"></script>
+<script type="module" crossorigin src="/assets/index.ea488403.js"></script>
   <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
   <link rel="stylesheet" href="/assets/index.6748df9f.css">
 </head>

src/frontend/game.ts

@@ -1,11 +1,11 @@
 "use strict"
 
-import {run} from './gameloop'
+import { GameLoopInstance, run } from './gameloop'
 import Camera from './Camera'
 import Graphics from './Graphics'
 import Debug from './Debug'
 import Communication from './Communication'
-import Util from './../common/Util'
+import Util, { logger } from './../common/Util'
 import PuzzleGraphics from './PuzzleGraphics'
 import Game from './../common/GameCommon'
 import fireworksController from './Fireworks'
@@ -29,6 +29,8 @@ declare global {
   }
 }
 
+const log = logger('game.ts')
+
 // @ts-ignore
 const images = import.meta.globEager('./*.png')
 
@@ -350,11 +352,20 @@ export async function main(
       }
       const gameObject: GameType = Util.decodeGame(replay.game)
       Game.setGame(gameObject.id, gameObject)
+
       REPLAY.requesting = false
       REPLAY.log = replay.log
       REPLAY.lastRealTs = Time.timestamp()
       REPLAY.gameStartTs = parseInt(REPLAY.log[0][4], 10)
       REPLAY.lastGameTs = REPLAY.gameStartTs
+      REPLAY.final = false
+      REPLAY.logPointer = 0
+      REPLAY.speeds = [0.5, 1, 2, 5, 10, 20, 50, 100, 250, 500]
+      REPLAY.speedIdx = 1
+      REPLAY.paused = false
+      REPLAY.dataOffset = 0
+      REPLAY.dataSize = 10000
+
       TIME = () => REPLAY.lastGameTs
     } else {
       throw '[ 2020-12-22 MODE invalid, must be play|replay ]'
@@ -491,8 +502,25 @@ export async function main(
     doSetSpeedStatus()
   }
 
+  const intervals: NodeJS.Timeout[] = []
+  const clearIntervals = () => {
+    intervals.forEach(inter => {
+      clearInterval(inter)
+    })
+  }
+
+  let gameLoopInstance: GameLoopInstance
+  const unload = () => {
+    clearIntervals()
+    if (gameLoopInstance) {
+      gameLoopInstance.stop()
+    }
+  }
+
   if (MODE === MODE_PLAY) {
-    setInterval(updateTimerElements, 1000)
+    intervals.push(setInterval(() => {
+      updateTimerElements()
+    }, 1000))
   } else if (MODE === MODE_REPLAY) {
     doSetSpeedStatus()
   }
@@ -528,7 +556,7 @@ export async function main(
   } else if (MODE === MODE_REPLAY) {
     // no external communication for replay mode,
     // only the REPLAY.log is relevant
-    const inter = setInterval(() => {
+    intervals.push(setInterval(() => {
       const realTs = Time.timestamp()
       if (REPLAY.requesting) {
         REPLAY.lastRealTs = realTs
@@ -555,7 +583,7 @@ export async function main(
         const nextIdx = REPLAY.logPointer + 1
         if (nextIdx >= REPLAY.log.length) {
           if (REPLAY.final) {
-            clearInterval(inter)
+            clearIntervals()
           }
           break
         }
@@ -592,7 +620,7 @@ export async function main(
       REPLAY.lastRealTs = realTs
       REPLAY.lastGameTs = maxGameTs
       updateTimerElements()
-    }, 50)
+    }, 50))
   }
 
   let _last_mouse_down: Point|null = null
@@ -808,7 +836,7 @@ export async function main(
     RERENDER = false
   }
 
-  run({
+  gameLoopInstance = run({
     update: onUpdate,
     render: onRender,
   })
@@ -844,5 +872,6 @@ export async function main(
     },
     disconnect: Communication.disconnect,
     connect: connect,
+    unload: unload,
   }
 }

src/frontend/gameloop.ts

@@ -6,7 +6,17 @@ interface GameLoopOptions {
   update: (step: number) => void
   render: (passed: number) => void
 }
-export const run = (options: GameLoopOptions): void => {
+
+export interface GameLoopInstance {
+  stop: () => void
+}
+
+export const run = (options: GameLoopOptions): GameLoopInstance => {
+  let stopped = false
+  const stop = () => {
+    stopped = true
+  }
+
   const fps = options.fps || 60
   const slow = options.slow || 1
   const update = options.update
@@ -28,10 +38,15 @@ export const run = (options: GameLoopOptions): void => {
     }
     render(dt / slow)
     last = now
-    raf(frame)
+    if (!stopped) {
+      raf(frame)
+    }
   }
 
   raf(frame)
+  return {
+    stop,
+  }
 }
 
 export default {

src/frontend/views/Game.vue

@@ -78,8 +78,9 @@ export default defineComponent({
         onColorChange: (v: string) => {},
         onNameChange: (v: string) => {},
         onSoundsEnabledChange: (v: boolean) => {},
-        disconnect: () => {},
         connect: () => {},
+        disconnect: () => {},
+        unload: () => {},
       },
     }
   },
@@ -121,6 +122,7 @@ export default defineComponent({
     )
   },
   unmounted () {
+    this.g.unload()
     this.g.disconnect()
   },
   methods: {

src/frontend/views/Replay.vue

@@ -80,7 +80,9 @@ export default defineComponent({
         replayOnSpeedUp: () => {},
         replayOnSpeedDown: () => {},
         replayOnPauseToggle: () => {},
+        connect: () => {},
         disconnect: () => {},
+        unload: () => {},
       },
 
       replay: {
@@ -129,6 +131,7 @@ export default defineComponent({
     )
   },
   unmounted () {
+    this.g.unload()
     this.g.disconnect()
   },
   methods: {