sound when pieces connect

src/frontend/components/HelpOverlay.vue

@@ -12,6 +12,7 @@
       <tr><td>🖼️ Toggle preview:</td><td><div><kbd>Space</kbd></div></td></tr>
       <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>
     </table>
   </div>
 </template>

src/frontend/components/SettingsOverlay.vue

@@ -13,6 +13,10 @@
         <td><label>Name: </label></td>
         <td><input type="text" maxLength="16" v-model="modelValue.name" /></td>
       </tr>
+      <tr>
+        <td><label>Sounds: </label></td>
+        <td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td>
+      </tr>
     </table>
   </div>
 </template>

src/frontend/game.ts

@@ -31,6 +31,9 @@ declare global {
 // @ts-ignore
 const images = import.meta.globEager('./*.png')
 
+// @ts-ignore
+const sounds = import.meta.globEager('./*.mp3')
+
 export const MODE_PLAY = 'play'
 export const MODE_REPLAY = 'replay'
 
@@ -46,6 +49,7 @@ interface Hud {
   setPiecesTotal: (v: number) => void
   setConnectionState: (v: number) => void
   togglePreview: () => void
+  toggleSoundsEnabled: () => void
   setReplaySpeed?: (v: number) => void
   setReplayPaused?: (v: boolean) => void
 }
@@ -171,6 +175,9 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
       PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
       RERENDER = true
     }
+    if (ev.key === 'M' || ev.key === 'm') {
+      addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
+    }
   })
 
   const addEvent = (event: GameEvent) => {
@@ -233,6 +240,9 @@ export async function main(
     return MODE === MODE_REPLAY || player.id !== clientId
   }
 
+  const click = sounds['./click.mp3'].default
+  const clickAudio = new Audio(click)
+
   const cursorGrab = await Graphics.loadImageToBitmap(images['./grab.png'].default)
   const cursorHand = await Graphics.loadImageToBitmap(images['./hand.png'].default)
   const cursorGrabMask = await Graphics.loadImageToBitmap(images['./grab_mask.png'].default)
@@ -404,6 +414,13 @@ export async function main(
   let finished = longFinished
   const justFinished = () => finished && !longFinished
 
+  const playerSoundEnabled = (): boolean => {
+    const enabled = localStorage.getItem('sound_enabled')
+    if (enabled === null) {
+      return false
+    }
+    return enabled === '1'
+  }
   const playerBgColor = () => {
     return (Game.getPlayerBgColor(gameId, clientId)
         || localStorage.getItem('bg_color')
@@ -614,12 +631,24 @@ export async function main(
           viewport.zoom('out', viewport.worldToViewport(pos))
         } else if (type === Protocol.INPUT_EV_TOGGLE_PREVIEW) {
           HUD.togglePreview()
+        } else if (type === Protocol.INPUT_EV_TOGGLE_SOUNDS) {
+          HUD.toggleSoundsEnabled()
         }
 
         // LOCAL + SERVER CHANGES
         // -------------------------------------------------------------
         const ts = TIME()
-        const changes = Game.handleInput(gameId, clientId, evt, ts)
+        const changes = Game.handleInput(
+          gameId,
+          clientId,
+          evt,
+          ts,
+          (playerId: string) => {
+            if (playerSoundEnabled()) {
+              clickAudio.play()
+            }
+          }
+        )
         if (changes.length > 0) {
           RERENDER = true
         }
@@ -787,6 +816,9 @@ export async function main(
       localStorage.setItem('player_name', value)
       evts.addEvent([Protocol.INPUT_EV_PLAYER_NAME, value])
     },
+    onSoundsEnabledChange: (value: boolean) => {
+      localStorage.setItem('sound_enabled', value ? '1' : '0')
+    },
     replayOnSpeedUp,
     replayOnSpeedDown,
     replayOnPauseToggle,
@@ -795,6 +827,7 @@ export async function main(
       background: playerBgColor(),
       color: playerColor(),
       name: playerName(),
+      soundsEnabled: playerSoundEnabled(),
     },
     disconnect: Communication.disconnect,
     connect: connect,

src/frontend/views/Game.vue

@@ -70,12 +70,14 @@ export default defineComponent({
           background: '',
           color: '',
           name: '',
+          soundsEnabled: false,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
         onBgChange: (v: string) => {},
         onColorChange: (v: string) => {},
         onNameChange: (v: string) => {},
+        onSoundsEnabledChange: (v: boolean) => {},
         disconnect: () => {},
         connect: () => {},
       },
@@ -94,6 +96,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.name, (value: string) => {
       this.g.onNameChange(value)
     })
+    this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
+      this.g.onSoundsEnabledChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore
@@ -111,6 +116,7 @@ export default defineComponent({
         setPiecesTotal: (v: number) => { this.piecesTotal = v },
         setConnectionState: (v: number) => { this.connectionState = v },
         togglePreview: () => { this.toggle('preview', false) },
+        toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
       }
     )
   },

src/frontend/views/Replay.vue

@@ -69,12 +69,14 @@ export default defineComponent({
           background: '',
           color: '',
           name: '',
+          soundsEnabled: false,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
         onBgChange: (v: string) => {},
         onColorChange: (v: string) => {},
         onNameChange: (v: string) => {},
+        onSoundsEnabledChange: (v: boolean) => {},
         replayOnSpeedUp: () => {},
         replayOnSpeedDown: () => {},
         replayOnPauseToggle: () => {},
@@ -100,6 +102,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.name, (value: string) => {
       this.g.onNameChange(value)
     })
+    this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
+      this.g.onSoundsEnabledChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore
@@ -119,6 +124,7 @@ export default defineComponent({
         setConnectionState: (v: number) => { this.connectionState = v },
         setReplaySpeed: (v: number) => { this.replay.speed = v },
         setReplayPaused: (v: boolean) => { this.replay.paused = v },
+        toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
       }
     )
   },