fix timer

src/PlayerInterface/App/index.tsx

@@ -20,6 +20,7 @@ export function App(props: { game: Game; root: Element }) {
 
   const [gameState, setGameState] = createStore({
     mode: props.game.mode,
+    time: props.game.player.currentTime,
     volume: props.game.soundSystem.getVolume(),
     isPlaying: props.game.player.isPlaying,
     isPaused: props.game.player.isPaused
@@ -46,6 +47,20 @@ export function App(props: { game: Game; root: Element }) {
       setGameState({ volume: props.game.soundSystem.getVolume() })
     })
 
+    let interval: number
+    const onPlay = () => {
+      interval = setInterval(() => {
+        setGameState({ time: props.game.player.currentTime })
+      }, 100)
+    }
+    const onPauseOrStop = () => {
+      clearInterval(interval)
+    }
+    const offPlayTimer = props.game.player.events.on('play', onPlay)
+    const offPauseTimer = props.game.player.events.on('pause', onPauseOrStop)
+    const offStopTimer = props.game.player.events.on('stop', onPauseOrStop)
+    const offSeekTimer = props.game.player.events.on('seek', (time) => setGameState({ time }))
+
     window.addEventListener('click', onWindowClick)
     window.addEventListener('keydown', onKeyDown)
     document.addEventListener('pointerlockchange', onPointerLockChange, false)
@@ -65,6 +80,10 @@ export function App(props: { game: Game; root: Element }) {
       offPause?.()
       offStop?.()
       offVolumeChange?.()
+      offPlayTimer?.()
+      offPauseTimer?.()
+      offStopTimer?.()
+      offSeekTimer?.()
 
       props.root.removeEventListener('click', onRootClick)
       window.removeEventListener('click', onWindowClick)

src/PlayerInterface/GameState.tsx

@@ -3,6 +3,7 @@ import { PlayerMode } from '../Game'
 
 export const GameStateContext = createContext({
   mode: PlayerMode.FREE,
+  time: 0,
   volume: 1,
   isPlaying: false,
   isPaused: false

src/PlayerInterface/Loading/index.tsx

@@ -40,8 +40,6 @@ export function Loading(props: { game: Game; visible: boolean }) {
       progress: 0
     })
 
-    console.log(item)
-
     setItems(item.type, typeItems)
   }
 

src/PlayerInterface/Time/index.tsx

@@ -1,40 +1,11 @@
-import { createSignal, onCleanup, onMount } from 'solid-js'
 import { formatTime } from '../../Time'
 import type { ReplayPlayer } from '../../ReplayPlayer'
+import { useGameState } from '../GameState'
 import './style.css'
 
 export function Time(props: { player: ReplayPlayer }) {
-  const [isPlaying, setIsPlaying] = createSignal(false)
-
-  onMount(() => {
-    const offPlay = props.player.events.on('play', onPlay)
-    const offPause = props.player.events.on('pause', onPauseOrStop)
-    const offStop = props.player.events.on('stop', onPauseOrStop)
-    onCleanup(() => {
-      offPlay?.()
-      offPause?.()
-      offStop?.()
-    })
-  })
-
-  const onPlay = () => {
-    setIsPlaying(true)
-  }
-
-  const onPauseOrStop = () => {
-    setIsPlaying(false)
-  }
-
-  const update = () => {
-    if (!isPlaying()) {
-      return
-    }
-
-    // this.forceUpdate()
-    setTimeout(update, 100)
-  }
-
-  const current = () => formatTime(props.player.currentTime)
+  const gameState = useGameState()
+  const current = () => formatTime(gameState.time)
   const total = () => formatTime(props.player.replay.length)
 
   return (

src/ReplayPlayer.ts

@@ -64,20 +64,20 @@ export class ReplayPlayer {
       this.isPaused = false
     }
 
-    this.events.emit('play')
+    this.events.emit('play', this.currentTime)
   }
 
   pause() {
     if (this.isPlaying) {
       this.isPaused = true
     }
 
-    this.events.emit('pause')
+    this.events.emit('pause', this.currentTime)
   }
 
   stop() {
     this.reset()
-    this.events.emit('stop')
+    this.events.emit('stop', 0)
   }
 
   speedUp() {
@@ -120,6 +120,7 @@ export class ReplayPlayer {
             }
           }
 
+          this.events.emit('seek', t)
           updateGame(this.game, this.state)
 
           return