add option to toggle player names

src/common/Protocol.ts

@@ -64,6 +64,8 @@ const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12
 const INPUT_EV_REPLAY_SPEED_UP = 13
 const INPUT_EV_REPLAY_SPEED_DOWN = 14
 
+const INPUT_EV_TOGGLE_PLAYER_NAMES = 15
+
 const CHANGE_DATA = 1
 const CHANGE_TILE = 2
 const CHANGE_PLAYER = 3
@@ -98,6 +100,8 @@ export default {
   INPUT_EV_REPLAY_SPEED_UP,
   INPUT_EV_REPLAY_SPEED_DOWN,
 
+  INPUT_EV_TOGGLE_PLAYER_NAMES,
+
   CHANGE_DATA,
   CHANGE_TILE,
   CHANGE_PLAYER,

src/frontend/components/HelpOverlay.vue

@@ -12,6 +12,8 @@
       <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 player names:</td><td><div><kbd>N</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>

src/frontend/components/SettingsOverlay.vue

@@ -31,6 +31,10 @@
           <span @click="increaseVolume">🔊</span>
         </td>
       </tr>
+      <tr>
+        <td><label>Show player names: </label></td>
+        <td><input type="checkbox" v-model="modelValue.showPlayerNames" /></td>
+      </tr>
     </table>
   </div>
 </template>

src/frontend/game.ts

@@ -11,6 +11,8 @@ import Game from './../common/GameCommon'
 import fireworksController from './Fireworks'
 import Protocol from '../common/Protocol'
 import Time from '../common/Time'
+import settings from './settings'
+import { SETTINGS } from './settings'
 import { Dim, Point } from '../common/Geometry'
 import {
   FixedLengthArray,
@@ -53,6 +55,7 @@ interface Hud {
   setConnectionState: (v: number) => void
   togglePreview: () => void
   toggleSoundsEnabled: () => void
+  togglePlayerNames: () => void
   setReplaySpeed?: (v: number) => void
   setReplayPaused?: (v: boolean) => void
 }
@@ -205,6 +208,9 @@ function EventAdapter (
     if (ev.code === 'KeyM') {
       addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
     }
+    if (ev.code === 'KeyN') {
+      addEvent([Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES])
+    }
   })
 
   const addEvent = (event: GameEvent) => {
@@ -441,19 +447,13 @@ export async function main(
   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
+    return settings.getInt(SETTINGS.SOUND_VOLUME, 100)
   }
   const playerSoundEnabled = (): boolean => {
-    const enabled = localStorage.getItem('sound_enabled')
-    if (enabled === null) {
-      return false
-    }
-    return enabled === '1'
+    return settings.getBool(SETTINGS.SOUND_ENABLED, false)
+  }
+  const showPlayerNames = (): boolean => {
+    return settings.getBool(SETTINGS.SHOW_PLAYER_NAMES, true)
   }
 
   const playClick = () => {
@@ -464,27 +464,24 @@ export async function main(
 
   const playerBgColor = () => {
     if (MODE === MODE_REPLAY) {
-      return localStorage.getItem('bg_color') || '#222222'
+      return settings.getStr(SETTINGS.COLOR_BACKGROUND, '#222222')
     }
-    return (Game.getPlayerBgColor(gameId, clientId)
-        || localStorage.getItem('bg_color')
-        || '#222222')
+    return Game.getPlayerBgColor(gameId, clientId)
+        || settings.getStr(SETTINGS.COLOR_BACKGROUND, '#222222')
   }
   const playerColor = () => {
     if (MODE === MODE_REPLAY) {
-      return localStorage.getItem('player_color') || '#ffffff'
+      return settings.getStr(SETTINGS.PLAYER_COLOR, '#ffffff')
     }
-    return (Game.getPlayerColor(gameId, clientId)
-        || localStorage.getItem('player_color')
-        || '#ffffff')
+    return Game.getPlayerColor(gameId, clientId)
+        || settings.getStr(SETTINGS.PLAYER_COLOR, '#ffffff')
   }
   const playerName = () => {
     if (MODE === MODE_REPLAY) {
-      return localStorage.getItem('player_name') || '#ffffff'
+      return settings.getStr(SETTINGS.PLAYER_NAME, 'anon')
     }
-    return (Game.getPlayerName(gameId, clientId)
-        || localStorage.getItem('player_name')
-        || 'anon')
+    return Game.getPlayerName(gameId, clientId)
+        || settings.getStr(SETTINGS.PLAYER_NAME, 'anon')
   }
 
   let cursorDown: string = ''
@@ -718,6 +715,8 @@ export async function main(
           HUD.togglePreview()
         } else if (type === Protocol.INPUT_EV_TOGGLE_SOUNDS) {
           HUD.toggleSoundsEnabled()
+        } else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
+          HUD.togglePlayerNames()
         }
 
         // LOCAL + SERVER CHANGES
@@ -784,6 +783,10 @@ 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()
+        } else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
+          HUD.togglePlayerNames()
         }
       }
     }
@@ -859,10 +862,12 @@ export async function main(
         bmp = await getPlayerCursor(p)
         pos = viewport.worldToViewport(p)
         ctx.drawImage(bmp, pos.x - CURSOR_W_2, pos.y - CURSOR_H_2)
-        // performance:
-        // not drawing text directly here, to have less ctx
-        // switches between drawImage and fillTxt
-        texts.push([`${p.name} (${p.points})`, pos.x, pos.y + CURSOR_H])
+        if (showPlayerNames()) {
+          // performance:
+          // not drawing text directly here, to have less ctx
+          // switches between drawImage and fillTxt
+          texts.push([`${p.name} (${p.points})`, pos.x, pos.y + CURSOR_H])
+        }
       }
     }
 
@@ -900,25 +905,27 @@ export async function main(
       evts.setHotkeys(state)
     },
     onBgChange: (value: string) => {
-      localStorage.setItem('bg_color', value)
+      settings.setStr(SETTINGS.COLOR_BACKGROUND, value)
       evts.addEvent([Protocol.INPUT_EV_BG_COLOR, value])
     },
     onColorChange: (value: string) => {
-      localStorage.setItem('player_color', value)
+      settings.setStr(SETTINGS.PLAYER_COLOR, value)
       evts.addEvent([Protocol.INPUT_EV_PLAYER_COLOR, value])
     },
     onNameChange: (value: string) => {
-      localStorage.setItem('player_name', value)
+      settings.setStr(SETTINGS.PLAYER_NAME, value)
       evts.addEvent([Protocol.INPUT_EV_PLAYER_NAME, value])
     },
     onSoundsEnabledChange: (value: boolean) => {
-      localStorage.setItem('sound_enabled', value ? '1' : '0')
+      settings.setBool(SETTINGS.SOUND_ENABLED, value)
     },
     onSoundsVolumeChange: (value: number) => {
-      log.info('vol changed', value)
-      localStorage.setItem('sound_volume', `${value}`)
+      settings.setInt(SETTINGS.SOUND_VOLUME, value)
       playClick()
     },
+    onShowPlayerNamesChange: (value: boolean) => {
+      settings.setBool(SETTINGS.SHOW_PLAYER_NAMES, value)
+    },
     replayOnSpeedUp,
     replayOnSpeedDown,
     replayOnPauseToggle,
@@ -929,6 +936,7 @@ export async function main(
       name: playerName(),
       soundsEnabled: playerSoundEnabled(),
       soundsVolume: playerSoundVolume(),
+      showPlayerNames: showPlayerNames(),
     },
     disconnect: Communication.disconnect,
     connect: connect,

src/frontend/settings.ts

@@ -0,0 +1,66 @@
+/**
+ * Player settings
+ */
+
+export const SETTINGS = {
+  SOUND_VOLUME: 'sound_volume',
+  SOUND_ENABLED: 'sound_enabled',
+  COLOR_BACKGROUND: 'bg_color',
+  PLAYER_COLOR: 'player_color',
+  PLAYER_NAME: 'player_name',
+  SHOW_PLAYER_NAMES: 'show_player_names',
+}
+
+const set = (setting: string, value: string): void => {
+  localStorage.setItem(setting, value)
+}
+
+const get = (setting: string): any => {
+  return localStorage.getItem(setting)
+}
+
+const setInt = (setting: string, val: number): void => {
+  set(setting, `${val}`)
+}
+
+const getInt = (setting: string, def: number): number => {
+  const value = get(setting)
+  if (value === null) {
+    return def
+  }
+  const vol = parseInt(value, 10)
+  return isNaN(vol) ? def : vol
+}
+
+const setBool = (setting: string, val: boolean): void => {
+  set(setting, val ? '1' : '0')
+}
+
+const getBool = (setting: string, def: boolean): boolean => {
+  const value = get(setting)
+  if (value === null) {
+    return def
+  }
+  return value === '1'
+}
+
+const setStr = (setting: string, val: string): void => {
+  set(setting, val)
+}
+
+const getStr = (setting: string, def: string): string => {
+  const value = get(setting)
+  if (value === null) {
+    return def
+  }
+  return value
+}
+
+export default {
+  setInt,
+  getInt,
+  setBool,
+  getBool,
+  setStr,
+  getStr,
+}

src/frontend/views/Game.vue

@@ -72,6 +72,7 @@ export default defineComponent({
           name: '',
           soundsEnabled: false,
           soundsVolume: 100,
+          showPlayerNames: true,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
@@ -80,6 +81,7 @@ export default defineComponent({
         onNameChange: (v: string) => {},
         onSoundsEnabledChange: (v: boolean) => {},
         onSoundsVolumeChange: (v: number) => {},
+        onShowPlayerNamesChange: (v: boolean) => {},
         connect: () => {},
         disconnect: () => {},
         unload: () => {},
@@ -105,6 +107,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.soundsVolume, (value: number) => {
       this.g.onSoundsVolumeChange(value)
     })
+    this.$watch(() => this.g.player.showPlayerNames, (value: boolean) => {
+      this.g.onShowPlayerNamesChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore
@@ -123,6 +128,7 @@ export default defineComponent({
         togglePreview: () => { this.toggle('preview', false) },
         setConnectionState: (v: number) => { this.connectionState = v },
         toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
+        togglePlayerNames: () => { this.g.player.showPlayerNames = !this.g.player.showPlayerNames },
       }
     )
   },

src/frontend/views/Replay.vue

@@ -72,6 +72,7 @@ export default defineComponent({
           name: '',
           soundsEnabled: false,
           soundsVolume: 100,
+          showPlayerNames: true,
         },
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
@@ -80,6 +81,7 @@ export default defineComponent({
         onNameChange: (v: string) => {},
         onSoundsEnabledChange: (v: boolean) => {},
         onSoundsVolumeChange: (v: number) => {},
+        onShowPlayerNamesChange: (v: boolean) => {},
         replayOnSpeedUp: () => {},
         replayOnSpeedDown: () => {},
         replayOnPauseToggle: () => {},
@@ -113,6 +115,9 @@ export default defineComponent({
     this.$watch(() => this.g.player.soundsVolume, (value: number) => {
       this.g.onSoundsVolumeChange(value)
     })
+    this.$watch(() => this.g.player.showPlayerNames, (value: boolean) => {
+      this.g.onShowPlayerNamesChange(value)
+    })
     this.g = await main(
       `${this.$route.params.id}`,
       // @ts-ignore
@@ -133,6 +138,7 @@ export default defineComponent({
         setReplaySpeed: (v: number) => { this.replay.speed = v },
         setReplayPaused: (v: boolean) => { this.replay.paused = v },
         toggleSoundsEnabled: () => { this.g.player.soundsEnabled = !this.g.player.soundsEnabled },
+        togglePlayerNames: () => { this.g.player.showPlayerNames = !this.g.player.showPlayerNames },
       }
     )
   },