add volume setting

src/frontend/components/SettingsOverlay.vue

@@ -17,6 +17,20 @@
         <td><label>Sounds: </label></td>
         <td><input type="checkbox" v-model="modelValue.soundsEnabled" /></td>
       </tr>
+      <tr>
+        <td><label>Sounds Volume: </label></td>
+        <td class="sound-volume">
+          <span @click="decreaseVolume">🔉</span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            :value="modelValue.soundsVolume"
+            @change="updateVolume"
+            />
+          <span @click="increaseVolume">🔊</span>
+        </td>
+      </tr>
     </table>
   </div>
 </template>
@@ -30,7 +44,23 @@ export default defineComponent({
     'update:modelValue': null,
   },
   props: {
-    modelValue: Object,
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    updateVolume (ev: Event): void {
+      (this.modelValue as any).soundsVolume = (ev.target as HTMLInputElement).value
+    },
+    decreaseVolume (): void {
+      const vol = parseInt(this.modelValue.soundsVolume, 10) - 5
+      this.modelValue.soundsVolume = Math.max(0, vol)
+    },
+    increaseVolume (): void {
+      const vol = parseInt(this.modelValue.soundsVolume, 10) + 5
+      this.modelValue.soundsVolume = Math.min(100, vol)
+    },
   },
   created () {
     // TODO: ts type PlayerSettings
@@ -40,3 +70,7 @@ export default defineComponent({
   },
 })
 </script>
+<style scoped>
+.sound-volume span { cursor: pointer; user-select: none; }
+.sound-volume input { vertical-align: middle; }
+</style>

src/frontend/game.ts

@@ -439,6 +439,14 @@ export async function main(
   let finished = longFinished
   const justFinished = () => finished && !longFinished
 
+  const playerSoundVolume = (): number => {
+    const volume = localStorage.getItem('sound_volume')
+    if (volume === null) {
+      return 100
+    }
+    const vol = parseInt(volume, 10)
+    return isNaN(vol) ? 100 : vol
+  }
   const playerSoundEnabled = (): boolean => {
     const enabled = localStorage.getItem('sound_enabled')
     if (enabled === null) {
@@ -446,6 +454,13 @@ export async function main(
     }
     return enabled === '1'
   }
+
+  const playClick = () => {
+    const vol = playerSoundVolume()
+    clickAudio.volume = vol / 100
+    clickAudio.play()
+  }
+
   const playerBgColor = () => {
     return (Game.getPlayerBgColor(gameId, clientId)
         || localStorage.getItem('bg_color')
@@ -709,7 +724,7 @@ export async function main(
           ts,
           (playerId: string) => {
             if (playerSoundEnabled()) {
-              clickAudio.play()
+              playClick()
             }
           }
         )
@@ -889,6 +904,11 @@ export async function main(
     onSoundsEnabledChange: (value: boolean) => {
       localStorage.setItem('sound_enabled', value ? '1' : '0')
     },
+    onSoundsVolumeChange: (value: number) => {
+      log.info('vol changed', value)
+      localStorage.setItem('sound_volume', `${value}`)
+      playClick()
+    },
     replayOnSpeedUp,
     replayOnSpeedDown,
     replayOnPauseToggle,
@@ -899,6 +919,7 @@ export async function main(
       color: playerColor(),
       name: playerName(),
       soundsEnabled: playerSoundEnabled(),
+      soundsVolume: playerSoundVolume(),
     },
     disconnect: Communication.disconnect,
     connect: connect,

src/frontend/views/Game.vue

@@ -71,6 +71,7 @@ export default defineComponent({
           color: '',
           name: '',
           soundsEnabled: false,
+          soundsVolume: 100,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
@@ -78,6 +79,7 @@ export default defineComponent({
         onColorChange: (v: string) => {},
         onNameChange: (v: string) => {},
         onSoundsEnabledChange: (v: boolean) => {},
+        onSoundsVolumeChange: (v: number) => {},
         connect: () => {},
         disconnect: () => {},
         unload: () => {},
@@ -100,6 +102,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
       this.g.onSoundsEnabledChange(value)
     })
+    this.$watch(() => this.g.player.soundsVolume, (value: number) => {
+      this.g.onSoundsVolumeChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore

src/frontend/views/Replay.vue

@@ -77,6 +77,7 @@ export default defineComponent({
           color: '',
           name: '',
           soundsEnabled: false,
+          soundsVolume: 100,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
@@ -84,6 +85,7 @@ export default defineComponent({
         onColorChange: (v: string) => {},
         onNameChange: (v: string) => {},
         onSoundsEnabledChange: (v: boolean) => {},
+        onSoundsVolumeChange: (v: number) => {},
         replayOnSpeedUp: () => {},
         replayOnSpeedDown: () => {},
         replayOnPauseToggle: () => {},
@@ -115,6 +117,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.soundsEnabled, (value: boolean) => {
       this.g.onSoundsEnabledChange(value)
     })
+    this.$watch(() => this.g.player.soundsVolume, (value: number) => {
+      this.g.onSoundsVolumeChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore