Add anonymous name toggle to user settings (#661)

## Description:
Added a new toggle to user settings 
I deleted some leftover files that were no longer in use in order to
eliminate errors.

## Please complete the following:
- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

aotumuri

resources/lang/en.json

@@ -211,6 +211,8 @@
     "dark_mode_desc": "Toggle the site’s appearance between light and dark themes",
     "emojis_label": "😊 Emojis",
     "emojis_desc": "Toggle whether emojis are shown in game",
+    "anonymous_names_label": "🥷 Hidden Names",
+    "anonymous_names_desc": "Hide real player names with random ones on your screen.",
     "left_click_label": "🖱️ Left Click to Open Menu",
     "left_click_desc": "When ON, left-click opens menu and sword button attacks. When OFF, left-click attacks directly.",
     "attack_ratio_label": "⚔️ Attack Ratio",

resources/lang/ja.json

@@ -201,6 +201,8 @@
     "dark_mode_desc": "ダークモードを切り替えます。",
     "emojis_label": "😊 絵文字",
     "emojis_desc": "ゲーム内での絵文字を表示します。",
+    "anonymous_names_label": "🥷 表示名を隠す",
+    "anonymous_names_desc": "実際のプレイヤー名を隠し、自分の画面ではランダムな名前で表示します。",
     "left_click_label": "🖱️ 左クリックでメニューを開く",
     "left_click_desc": "オンにすると左クリックでメニューを開き、剣ボタンで攻撃します。オフにすると右クリックで直接攻撃します。",
     "attack_ratio_label": "⚔️ 攻撃比率",

src/client/Main.ts

@@ -21,8 +21,6 @@ import { LangSelector } from "./LangSelector";
 import { LanguageModal } from "./LanguageModal";
 import "./PublicLobby";
 import { PublicLobby } from "./PublicLobby";
-import "./RandomNameButton";
-import { RandomNameButton } from "./RandomNameButton";
 import { SinglePlayerModal } from "./SinglePlayerModal";
 import { UserSettingModal } from "./UserSettingModal";
 import "./UsernameInput";
@@ -50,7 +48,6 @@ class Client {
   private usernameInput: UsernameInput | null = null;
   private flagInput: FlagInput | null = null;
   private darkModeButton: DarkModeButton | null = null;
-  private randomNameButton: RandomNameButton | null = null;
 
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
@@ -85,13 +82,6 @@ class Client {
       consolex.warn("Dark mode button element not found");
     }
 
-    this.randomNameButton = document.querySelector(
-      "random-name-button",
-    ) as RandomNameButton;
-    if (!this.randomNameButton) {
-      consolex.warn("Random name button element not found");
-    }
-
     const loginDiscordButton = document.getElementById(
       "login-discord",
     ) as OButton;

src/client/RandomNameButton.ts

@@ -1,30 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { UserSettings } from "../core/game/UserSettings";
-
-@customElement("random-name-button")
-export class RandomNameButton extends LitElement {
-  private userSettings: UserSettings = new UserSettings();
-  @state() private randomName: boolean = this.userSettings.anonymousNames();
-
-  createRenderRoot() {
-    return this;
-  }
-
-  toggleRandomName() {
-    this.userSettings.toggleRandomName();
-    this.randomName = this.userSettings.anonymousNames();
-  }
-
-  render() {
-    return html`
-      <button
-        title="Random Name"
-        class="absolute top-0 left-0 md:top-[10px] md:left-[10px] border-none bg-none cursor-pointer text-2xl"
-        @click=${() => this.toggleRandomName()}
-      >
-        ${this.randomName ? "🥷" : "🕵️"}
-      </button>
-    `;
-  }
-}

src/client/UserSettingModal.ts

@@ -102,6 +102,15 @@ export class UserSettingModal extends LitElement {
     console.log("🤡 Emojis:", enabled ? "ON" : "OFF");
   }
 
+  private toggleAnonymousNames(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+    if (typeof enabled !== "boolean") return;
+
+    this.userSettings.set("settings.anonymousNames", enabled);
+
+    console.log("🙈 Anonymous Names:", enabled ? "ON" : "OFF");
+  }
+
   private toggleLeftClickOpensMenu(e: CustomEvent<{ checked: boolean }>) {
     const enabled = e.detail?.checked;
     if (typeof enabled !== "boolean") return;
@@ -226,6 +235,15 @@ export class UserSettingModal extends LitElement {
         @change=${this.toggleLeftClickOpensMenu}
       ></setting-toggle>
 
+      <!-- 🙈 Anonymous Names -->
+      <setting-toggle
+        label="${translateText("user_setting.anonymous_names_label")}"
+        description="${translateText("user_setting.anonymous_names_desc")}"
+        id="anonymous-names-toggle"
+        .checked=${this.userSettings.anonymousNames()}
+        @change=${this.toggleAnonymousNames}
+      ></setting-toggle>
+
       <!-- ⚔️ Attack Ratio -->
       <setting-slider
         label="${translateText("user_setting.attack_ratio_label")}"