From ea95069604dab79161aa91ca58da68903ec6cb0f Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 8 Jun 2026 14:15:07 -0700
Subject: [PATCH] Move special effects toggle to graphics settings, wire to
 renderer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The special effects toggle wrote settings.specialEffects but nothing in
the WebGL pipeline read it — the FX pass is gated on passEnabled.fx. The
setting was orphaned when the old canvas renderer was removed, so the
toggle had no visual effect.

Move the toggle into the graphics settings modal (under a new Effects
section) and remove it from the in-game settings modal and the homepage
user settings modal. Rewire it to a passEnabled.fx graphics override so
it actually toggles the FX pass, applied live via the existing graphics
override listener.

Delete the now-dead fxLayer()/toggleFxLayer() from UserSettings.

Note: users who previously disabled special effects will reset to on,
since the old settings.specialEffects key is no longer read.
---
 resources/lang/en.json                        |  1 +
 src/client/UserSettingModal.ts                | 18 --------
 .../hud/layers/GraphicsSettingsModal.ts       | 45 +++++++++++++++++++
 src/client/hud/layers/SettingsModal.ts        | 31 -------------
 src/client/render/gl/GraphicsOverrides.ts     |  5 +++
 src/client/render/gl/RenderOverrides.ts       |  3 ++
 src/core/game/UserSettings.ts                 |  8 ----
 7 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 18fa3da00..f3016e666 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -946,6 +946,7 @@
     "highlight_thicken_desc": "How much the border thickens on hover",
     "rail_distance_label": "Train track draw distance",
     "rail_distance_desc": "How far zoomed out train tracks remain visible",
+    "section_effects": "Effects",
     "reset_label": "Reset to defaults",
     "reset_desc": "Clear all graphics overrides"
   },
diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts
index b0a260a70..fe52b0a02 100644
--- a/src/client/UserSettingModal.ts
+++ b/src/client/UserSettingModal.ts
@@ -221,15 +221,6 @@ export class UserSettingModal extends BaseModal {
     );
   }
 
-  private toggleFxLayer() {
-    this.userSettings.toggleFxLayer();
-
-    console.log(
-      "💥 Special effects:",
-      this.userSettings.fxLayer() ? "ON" : "OFF",
-    );
-  }
-
   private toggleCursorCostLabel() {
     this.userSettings.toggleCursorCostLabel();
 
@@ -769,15 +760,6 @@ export class UserSettingModal extends BaseModal {
         @change=${this.toggleAlertFrame}
       ></setting-toggle>
 
-      <!-- 💥 Special effects -->
-      <setting-toggle
-        label="${translateText("user_setting.special_effects_label")}"
-        description="${translateText("user_setting.special_effects_desc")}"
-        id="special-effect-toggle"
-        .checked=${this.userSettings.fxLayer()}
-        @change=${this.toggleFxLayer}
-      ></setting-toggle>
-
       <!-- 💰 Cursor Price Pill -->
       <setting-toggle
         label="${translateText("user_setting.cursor_cost_label_label")}"
diff --git a/src/client/hud/layers/GraphicsSettingsModal.ts b/src/client/hud/layers/GraphicsSettingsModal.ts
index 21ae8c9b4..8ea255318 100644
--- a/src/client/hud/layers/GraphicsSettingsModal.ts
+++ b/src/client/hud/layers/GraphicsSettingsModal.ts
@@ -231,6 +231,26 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
     this.patchStructure({ classicIcons: !this.currentClassicIcons() });
   }
 
+  private patchPassEnabled(patch: Partial<GraphicsOverrides["passEnabled"]>) {
+    const current = this.userSettings.graphicsOverrides();
+    this.userSettings.setGraphicsOverrides({
+      ...current,
+      passEnabled: { ...current.passEnabled, ...patch },
+    });
+    this.requestUpdate();
+  }
+
+  private currentSpecialEffects(): boolean {
+    return (
+      this.userSettings.graphicsOverrides().passEnabled?.fx ??
+      renderDefaults.passEnabled.fx
+    );
+  }
+
+  private onToggleSpecialEffects() {
+    this.patchPassEnabled({ fx: !this.currentSpecialEffects() });
+  }
+
   private onNameScaleChange(event: Event) {
     const value = parseFloat((event.target as HTMLInputElement).value);
     this.patchName({ nameScaleFactor: value });
@@ -504,6 +524,31 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
               </div>
             </div>
 
+            <div
+              class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wider mt-2"
+            >
+              ${translateText("graphics_setting.section_effects")}
+            </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.onToggleSpecialEffects}
+            >
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("user_setting.special_effects_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("user_setting.special_effects_desc")}
+                </div>
+              </div>
+              <div class="text-sm text-slate-400">
+                ${this.currentSpecialEffects()
+                  ? translateText("user_setting.on")
+                  : translateText("user_setting.off")}
+              </div>
+            </button>
+
             <div class="border-t border-slate-600 pt-3 mt-4">
               <button
                 class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
diff --git a/src/client/hud/layers/SettingsModal.ts b/src/client/hud/layers/SettingsModal.ts
index 697956840..11faf1d87 100644
--- a/src/client/hud/layers/SettingsModal.ts
+++ b/src/client/hud/layers/SettingsModal.ts
@@ -21,7 +21,6 @@ const cursorPriceIcon = assetUrl("images/CursorPriceIconWhite.svg");
 const darkModeIcon = assetUrl("images/DarkModeIconWhite.svg");
 const emojiIcon = assetUrl("images/EmojiIconWhite.svg");
 const exitIcon = assetUrl("images/ExitIconWhite.svg");
-const explosionIcon = assetUrl("images/ExplosionIconWhite.svg");
 const mouseIcon = assetUrl("images/MouseIconWhite.svg");
 const ninjaIcon = assetUrl("images/NinjaIconWhite.svg");
 const settingsIcon = assetUrl("images/SettingIconWhite.svg");
@@ -132,11 +131,6 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
-  private onToggleSpecialEffectsButtonClick() {
-    this.userSettings.toggleFxLayer();
-    this.requestUpdate();
-  }
-
   private onToggleAlertFrameButtonClick() {
     this.userSettings.toggleAlertFrame();
     this.requestUpdate();
@@ -379,31 +373,6 @@ export class SettingsModal extends LitElement implements Controller {
               </div>
             </button>
 
-            <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.onToggleSpecialEffectsButtonClick}"
-            >
-              <img
-                src=${explosionIcon}
-                alt="specialEffects"
-                width="20"
-                height="20"
-              />
-              <div class="flex-1">
-                <div class="font-medium">
-                  ${translateText("user_setting.special_effects_label")}
-                </div>
-                <div class="text-sm text-slate-400">
-                  ${translateText("user_setting.special_effects_desc")}
-                </div>
-              </div>
-              <div class="text-sm text-slate-400">
-                ${this.userSettings.fxLayer()
-                  ? translateText("user_setting.on")
-                  : translateText("user_setting.off")}
-              </div>
-            </button>
-
             <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.onToggleAlertFrameButtonClick}"
diff --git a/src/client/render/gl/GraphicsOverrides.ts b/src/client/render/gl/GraphicsOverrides.ts
index da01da6d0..6522ff5fe 100644
--- a/src/client/render/gl/GraphicsOverrides.ts
+++ b/src/client/render/gl/GraphicsOverrides.ts
@@ -26,6 +26,11 @@ export const GraphicsOverridesSchema = z
         railMinZoom: z.number(),
       })
       .partial(),
+    passEnabled: z
+      .object({
+        fx: z.boolean(),
+      })
+      .partial(),
   })
   .partial();
 
diff --git a/src/client/render/gl/RenderOverrides.ts b/src/client/render/gl/RenderOverrides.ts
index 7febfc5e1..0b146d2bc 100644
--- a/src/client/render/gl/RenderOverrides.ts
+++ b/src/client/render/gl/RenderOverrides.ts
@@ -38,6 +38,9 @@ export function applyGraphicsOverrides(
   if (overrides.railroad?.railMinZoom !== undefined) {
     settings.railroad.railMinZoom = overrides.railroad.railMinZoom;
   }
+  if (overrides.passEnabled?.fx !== undefined) {
+    settings.passEnabled.fx = overrides.passEnabled.fx;
+  }
   if (overrides.name?.darkNames !== undefined) {
     const dark = overrides.name.darkNames;
     // Dark: black fill + player-colored outline. Force outline RGB to black
diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts
index 4c37ce9ad..cd1b8c711 100644
--- a/src/core/game/UserSettings.ts
+++ b/src/core/game/UserSettings.ts
@@ -154,10 +154,6 @@ export class UserSettings {
     return this.getBool("settings.lobbyIdVisibility", true);
   }
 
-  fxLayer() {
-    return this.getBool("settings.specialEffects", true);
-  }
-
   darkMode() {
     return this.getBool(DARK_MODE_KEY, false);
   }
@@ -219,10 +215,6 @@ export class UserSettings {
     this.setBool("settings.lobbyIdVisibility", !this.lobbyIdVisibility());
   }
 
-  toggleFxLayer() {
-    this.setBool("settings.specialEffects", !this.fxLayer());
-  }
-
   toggleCursorCostLabel() {
     this.setBool("settings.cursorCostLabel", !this.cursorCostLabel());
   }