add setting to name layer + update text in translation

resources/lang/en.json

@@ -525,6 +525,8 @@
     "cursor_cost_label_desc": "Show a cost pill under the build cursor icon",
     "anonymous_names_label": "Hidden Names",
     "anonymous_names_desc": "Hide real player names with random ones on your screen.",
+    "player_name_opacity_label": "Player Name Opacity",
+    "player_name_opacity_desc": "Adjust on-map player label opacity. At 0, names and flags are hidden.",
     "lobby_id_visibility_label": "Hidden Lobby IDs",
     "lobby_id_visibility_desc": "Hide Lobby ID in private lobby creation",
     "toggle_visibility": "Toggle Visibility",
@@ -613,6 +615,7 @@
     "unbind": "Unbind",
     "on": "On",
     "off": "Off",
+    "hidden": "Hidden",
     "toggle_terrain": "Toggle Terrain",
     "exit_game_label": "Exit Game",
     "exit_game_info": "Return to main menu",

src/client/graphics/layers/NameLayer.ts

@@ -333,17 +333,23 @@ export class NameLayer implements Layer {
     const troopsDiv = render.element.querySelector(
       ".player-troops",
     ) as HTMLDivElement;
+    const nameOpacityPercent = this.userSettings.playerNameOpacity();
+    const nameOpacity = nameOpacityPercent / 100;
+    const hideFlag = nameOpacityPercent === 0;
     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();
+      (span as HTMLElement).style.opacity = `${nameOpacity}`;
     }
     if (flagDiv) {
       flagDiv.style.height = `${render.fontSize}px`;
+      flagDiv.style.display = hideFlag ? "none" : "";
     }
     troopsDiv.style.fontSize = `${render.fontSize}px`;
+    troopsDiv.style.opacity = `${nameOpacity}`;
     troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());