add hotkeys for replay speed up/down pause

src/common/Protocol.ts

@@ -60,6 +60,10 @@ const INPUT_EV_MOVE = 9
 const INPUT_EV_TOGGLE_PREVIEW = 10
 const INPUT_EV_TOGGLE_SOUNDS = 11
 
+const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12
+const INPUT_EV_REPLAY_SPEED_UP = 13
+const INPUT_EV_REPLAY_SPEED_DOWN = 14
+
 const CHANGE_DATA = 1
 const CHANGE_TILE = 2
 const CHANGE_PLAYER = 3
@@ -90,6 +94,10 @@ export default {
   INPUT_EV_TOGGLE_PREVIEW,
   INPUT_EV_TOGGLE_SOUNDS,
 
+  INPUT_EV_REPLAY_TOGGLE_PAUSE,
+  INPUT_EV_REPLAY_SPEED_UP,
+  INPUT_EV_REPLAY_SPEED_DOWN,
+
   CHANGE_DATA,
   CHANGE_TILE,
   CHANGE_PLAYER,

src/frontend/components/HelpOverlay.vue

@@ -13,6 +13,10 @@
       <tr><td>🧩✔️ Toggle fixed pieces:</td><td><div><kbd>F</kbd></div></td></tr>
       <tr><td>🧩❓ Toggle loose pieces:</td><td><div><kbd>G</kbd></div></td></tr>
       <tr><td>🔉 Toggle sounds:</td><td><div><kbd>M</kbd></div></td></tr>
+
+      <tr><td>⏫ Speed up (replay):</td><td><div><kbd>I</kbd></div></td></tr>
+      <tr><td>⏬ Speed down (replay):</td><td><div><kbd>O</kbd></div></td></tr>
+      <tr><td>⏸️ Pause (replay):</td><td><div><kbd>P</kbd></div></td></tr>
     </table>
   </div>
 </template>

src/frontend/game.ts

@@ -92,7 +92,12 @@ function addCanvasToDom(TARGET_EL: HTMLElement, canvas: HTMLCanvasElement) {
   return canvas
 }
 
-function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
+function EventAdapter (
+  canvas: HTMLCanvasElement,
+  window: any,
+  viewport: any,
+  MODE: string
+) {
   let events: Array<GameEvent> = []
 
   let KEYS_ON = true
@@ -174,6 +179,20 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
     if (ev.key === ' ') {
       addEvent([Protocol.INPUT_EV_TOGGLE_PREVIEW])
     }
+
+    if (MODE === MODE_REPLAY) {
+      if (ev.key === 'I' || ev.key === 'i') {
+        addEvent([Protocol.INPUT_EV_REPLAY_SPEED_UP])
+      }
+
+      if (ev.key === 'O' || ev.key === 'o') {
+        addEvent([Protocol.INPUT_EV_REPLAY_SPEED_DOWN])
+      }
+
+      if (ev.key === 'P' || ev.key === 'p') {
+        addEvent([Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE])
+      }
+    }
     if (ev.key === 'F' || ev.key === 'f') {
       PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED
       RERENDER = true
@@ -396,7 +415,7 @@ export async function main(
     -(TABLE_HEIGHT - canvas.height) /2
   )
 
-  const evts = EventAdapter(canvas, window, viewport)
+  const evts = EventAdapter(canvas, window, viewport, MODE)
 
   const previewImageUrl = Game.getImageUrl(gameId)
 
@@ -699,7 +718,13 @@ export async function main(
         // LOCAL ONLY CHANGES
         // -------------------------------------------------------------
         const type = evt[0]
-        if (type === Protocol.INPUT_EV_MOVE) {
+        if (type === Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE) {
+          replayOnPauseToggle()
+        } else if (type === Protocol.INPUT_EV_REPLAY_SPEED_DOWN) {
+          replayOnSpeedDown()
+        } else if (type === Protocol.INPUT_EV_REPLAY_SPEED_UP) {
+          replayOnSpeedUp()
+        } else if (type === Protocol.INPUT_EV_MOVE) {
           const diffX = evt[1]
           const diffY = evt[2]
           RERENDER = true