Refactor NameLayer to use textContent for player names and add validation for player name opacity setting

src/client/graphics/layers/NameLayer.ts

@@ -239,7 +239,7 @@ export class NameLayer implements Layer {
 
     const nameSpan = document.createElement("span");
     nameSpan.className = "player-name-span";
-    nameSpan.innerHTML = player.name();
+    nameSpan.textContent = player.name();
     nameDiv.appendChild(nameSpan);
     element.appendChild(nameDiv);
 
@@ -339,10 +339,12 @@ 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");
+    const span = nameDiv.querySelector(
+      ".player-name-span",
+    ) as HTMLSpanElement | null;
     if (span) {
-      span.innerHTML = render.player.name();
-      (span as HTMLElement).style.opacity = `${nameOpacity}`;
+      span.textContent = render.player.name();
+      span.style.opacity = `${nameOpacity}`;
     }
     if (flagDiv) {
       flagDiv.style.height = `${render.fontSize}px`;

src/core/game/UserSettings.ts

@@ -247,6 +247,7 @@ export class UserSettings {
   }
 
   setPlayerNameOpacity(opacity: number): void {
+    if (!Number.isFinite(opacity)) return;
     const clampedOpacity = Math.max(0, Math.min(100, Math.round(opacity)));
     this.setFloat("settings.playerNameOpacity", clampedOpacity);
   }