replaces player names with randomized name (#340)

This PR replaces player names with randomized name
The goal is to reduce exposure to inappropriate or offensive names.
Additionally, content creators no longer need to worry about displaying
other players’ usernames.
<img width="1276" alt="スクリーンショット 2025-03-25 23 03 37"
src="https://github.com/user-attachments/assets/3d396bb0-336f-41a0-8d56-ff5229fe05f8"
/>
<img width="1048" alt="スクリーンショット 2025-03-25 23 03 48"
src="https://github.com/user-attachments/assets/a72711cf-9743-4879-8f2f-b8187b10a272"
/>
Use the upper left button (Ninja) to change settings.
<img width="1173" alt="スクリーンショット 2025-03-25 23 04 03"
src="https://github.com/user-attachments/assets/2d2fcbbd-7342-40b0-97c1-ecc184e5fbb6"
/>

Fixes #489

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/graphics/layers/NameLayer.ts

@@ -195,6 +195,7 @@ export class NameLayer implements Layer {
     nameDiv.style.alignItems = "center";
 
     const nameSpan = document.createElement("span");
+    nameSpan.className = "player-name-span";
     nameSpan.innerHTML = player.name();
     nameDiv.appendChild(nameSpan);
     element.appendChild(nameDiv);
@@ -262,6 +263,10 @@ export class NameLayer implements Layer {
     nameDiv.style.fontSize = `${render.fontSize}px`;
     nameDiv.style.lineHeight = `${render.fontSize}px`;
     nameDiv.style.color = render.fontColor;
+    const span = nameDiv.querySelector(".player-name-span");
+    if (span) {
+      span.innerHTML = render.player.name();
+    }
     if (flagDiv) {
       flagDiv.style.height = `${render.fontSize}px`;
     }

src/client/graphics/layers/OptionsMenu.ts

@@ -106,6 +106,10 @@ export class OptionsMenu extends LitElement implements Layer {
     this.eventBus.emit(new RefreshGraphicsEvent());
   }
 
+  private onToggleRandomNameModeButtonClick() {
+    this.userSettings.toggleRandomName();
+  }
+
   private onToggleFocusLockedButtonClick() {
     this.userSettings.toggleFocusLocked();
     this.requestUpdate();
@@ -196,6 +200,12 @@ export class OptionsMenu extends LitElement implements Layer {
             title: "Dark Mode",
             children: "🌙: " + (this.userSettings.darkMode() ? "On" : "Off"),
           })}
+          ${button({
+            onClick: this.onToggleRandomNameModeButtonClick,
+            title: "Random name mode",
+            children:
+              "🥷: " + (this.userSettings.anonymousNames() ? "On" : "Off"),
+          })}
           ${button({
             onClick: this.onToggleLeftClickOpensMenu,
             title: "Left click",