From 100c30a70391b920f207b4bded93245a3dc50f94 Mon Sep 17 00:00:00 2001
From: bijx <bsamiee@hotmail.com>
Date: Tue, 17 Mar 2026 02:00:11 -0400
Subject: [PATCH] Added player name opacity control to SettingsModal with a
 slider input

---
 src/client/graphics/layers/SettingsModal.ts | 38 +++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/client/graphics/layers/SettingsModal.ts b/src/client/graphics/layers/SettingsModal.ts
index 0a5b184bf..066b89723 100644
--- a/src/client/graphics/layers/SettingsModal.ts
+++ b/src/client/graphics/layers/SettingsModal.ts
@@ -187,6 +187,12 @@ export class SettingsModal extends LitElement implements Layer {
     this.requestUpdate();
   }
 
+  private onPlayerNameOpacityChange(event: Event) {
+    const opacity = parseFloat((event.target as HTMLInputElement).value);
+    this.userSettings.setPlayerNameOpacity(opacity);
+    this.requestUpdate();
+  }
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -453,6 +459,38 @@ export class SettingsModal extends LitElement implements Layer {
               </div>
             </button>
 
+            <div
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+            >
+              <img
+                src=${settingsIcon}
+                alt="nameOpacity"
+                width="20"
+                height="20"
+              />
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("user_setting.player_name_opacity_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("user_setting.player_name_opacity_desc")}
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  .value=${this.userSettings.playerNameOpacity()}
+                  @input=${this.onPlayerNameOpacityChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400">
+                ${this.userSettings.playerNameOpacity() === 0
+                  ? translateText("user_setting.hidden")
+                  : `${this.userSettings.playerNameOpacity()}%`}
+              </div>
+            </div>
+
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleLeftClickOpensMenu}"