Fixed dark mode class being added in different places (body and html elements).

Fixed flag "None" (xx.svg) being able to be set and used ingame.

All menu modals will now close if you click outside of them.

Fixed info icon in instructions.

Added an icon to show the number of new events that happened while the events panel is hidden.

Removed opacity from the svg icons files and added it to the player-icons div, making them have the same opacity and being more visible.

src/client/FlagInput.ts

@@ -1,8 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import Countries from "./data/countries.json";
-import { UserSettings } from "../core/game/UserSettings";
-
+import { ModalOverlay } from "./components/ModalOverlay";
 const flagKey: string = "flag";
 
 @customElement("flag-input")
@@ -10,7 +9,6 @@ export class FlagInput extends LitElement {
   @state() private flag: string = "";
   @state() private search: string = "";
   @state() private showModal: boolean = false;
-  private userSettings: UserSettings = new UserSettings();
 
   static styles = css`
     @media (max-width: 768px) {
@@ -29,11 +27,10 @@ export class FlagInput extends LitElement {
   }
 
   private setFlag(flag: string) {
-    if (flag == "") {
-      this.flag = "";
-    } else {
-      this.flag = flag;
+    if (flag == "xx") {
+      flag = "";
     }
+    this.flag = flag;
     this.showModal = false;
     this.storeFlag(flag);
   }
@@ -80,6 +77,12 @@ export class FlagInput extends LitElement {
 
   render() {
     return html`
+      <div
+        class="absolute left-0 top-0 w-full h-full ${this.showModal
+          ? ""
+          : "hidden"}"
+        @click=${() => (this.showModal = false)}
+      ></div>
       <div class="flex relative">
         <button
           @click=${() => (this.showModal = !this.showModal)}

src/client/HelpModal.ts

@@ -207,6 +207,12 @@ export class HelpModal extends LitElement {
         class="modal-overlay"
         style="display: ${this.isModalOpen ? "flex" : "none"}"
       >
+      <div
+        class="absolute left-0 top-0 w-full h-full ${
+          this.isModalOpen ? "" : "hidden"
+        }"
+        @click=${this.close}
+      ></div>
         <div class="modal-content">
           <span class="close" @click=${this.close}>&times;</span>
 
@@ -315,7 +321,8 @@ export class HelpModal extends LitElement {
               <p class="mb-4">Right clicking (or touch on mobile) opens the radial menu. From there you can:</p>
               <ul>
                 <li class="mb-4"><div class="inline-block icon build-icon"></div> - Open the build menu.</li>
-                <li class="mb-4"><div class="inline-block icon info-icon"></div> - Open the Info menu.</li>
+                <li class="mb-4">
+                  <img src="/images/InfoIcon.svg" class="inline-block icon" style="fill: white; background: transparent;"/> - Open the Info menu.</li>
                 <li class="mb-4"><div class="inline-block icon boat-icon"></div> - Send a boat to attack at the selected location (only available if you have access to water).</li>
                 <li class="mb-4"><div class="inline-block icon cancel-icon"></div> - Close the menu.</li>
               </ul>
@@ -467,5 +474,6 @@ export class HelpModal extends LitElement {
 
   public close() {
     this.isModalOpen = false;
+    console.log("closing modal");
   }
 }

src/client/HostLobbyModal.ts

@@ -323,6 +323,11 @@ export class HostLobbyModal extends LitElement {
         class="modal-overlay"
         style="display: ${this.isModalOpen ? "flex" : "none"}"
       >
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+          class="${this.isModalOpen ? "" : "hidden"}"
+          @click=${this.close}
+        ></div>
         <div class="modal-content">
           <span class="close" @click=${this.close}>&times;</span>
 

src/client/JoinPrivateLobbyModal.ts

@@ -233,6 +233,11 @@ export class JoinPrivateLobbyModal extends LitElement {
         class="modal-overlay"
         style="display: ${this.isModalOpen ? "flex" : "none"}"
       >
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+          class="${this.isModalOpen ? "" : "hidden"}"
+          @click=${this.close}
+        ></div>
         <div class="modal-content">
           <span class="close" @click=${this.closeAndLeave}>&times;</span>
           <div class="title">Join Private Lobby</div>

src/client/Main.ts

@@ -108,9 +108,9 @@ class Client {
       });
 
     if (this.userSettings.darkMode()) {
-      document.body.classList.add("dark");
+      document.documentElement.classList.add("dark");
     } else {
-      document.body.classList.remove("dark");
+      document.documentElement.classList.remove("dark");
     }
     page("/join/:lobbyId", (ctx) => {
       if (ctx.init && sessionStorage.getItem("inLobby")) {

src/client/SinglePlayerModal.ts

@@ -245,6 +245,11 @@ export class SinglePlayerModal extends LitElement {
         class="modal-overlay"
         style="display: ${this.isModalOpen ? "flex" : "none"}"
       >
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+          class="${this.isModalOpen ? "" : "hidden"}"
+          @click=${this.close}
+        ></div>
         <div class="modal-content">
           <span class="close" @click=${this.close}>&times;</span>
 

src/client/components/ModalOverlay.ts

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("modal-overlay")
+export class ModalOverlay extends LitElement {
+  @property({ reflect: true }) public visible: boolean = false;
+
+  static styles = css`
+    .overlay {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div
+        class="overlay ${this.visible ? "" : "hidden"}"
+        @click=${() => (this.visible = false)}
+      ></div>
+    `;
+  }
+}

src/client/graphics/layers/EventsDisplay.ts

@@ -55,6 +55,15 @@ export class EventsDisplay extends LitElement implements Layer {
   @state() private incomingAttacks: AttackUpdate[] = [];
   @state() private outgoingAttacks: AttackUpdate[] = [];
   @state() private _hidden: boolean = false;
+  @state() private newEvents: number = 0;
+
+  private toggleHidden() {
+    this._hidden = !this._hidden;
+    if (this._hidden) {
+      this.newEvents = 0;
+    }
+    this.requestUpdate();
+  }
 
   private updateMap = new Map([
     [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
@@ -121,6 +130,9 @@ export class EventsDisplay extends LitElement implements Layer {
 
   private addEvent(event: Event) {
     this.events = [...this.events, event];
+    if (this._hidden == true) {
+      this.newEvents++;
+    }
     this.requestUpdate();
   }
 
@@ -414,7 +426,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 ._hidden
                 ? "hidden"
                 : ""}"
-              @click=${() => (this._hidden = true)}
+              @click=${this.toggleHidden}
             >
               Hide
             </button>
@@ -423,9 +435,15 @@ export class EventsDisplay extends LitElement implements Layer {
             class="text-white cursor-pointer pointer-events-auto ${this._hidden
               ? ""
               : "hidden"}"
-            @click=${() => (this._hidden = false)}
+            @click=${this.toggleHidden}
           >
             Events
+            <span
+              class="${this.newEvents
+                ? ""
+                : "hidden"} inline-block px-2 bg-red-500 rounded-sm"
+              >${this.newEvents}</span
+            >
           </button>
           <table
             class="w-full border-collapse text-white shadow-lg lg:text-xl text-xs ${this

src/client/graphics/layers/NameLayer.ts

@@ -166,6 +166,7 @@ export class NameLayer implements Layer {
     iconsDiv.style.justifyContent = "center";
     iconsDiv.style.alignItems = "center";
     iconsDiv.style.zIndex = "2";
+    iconsDiv.style.opacity = "0.8";
     element.appendChild(iconsDiv);
 
     const nameDiv = document.createElement("div");

src/client/index.html

@@ -165,7 +165,7 @@
     <div class="flex justify-center items-center flex-grow">
       <div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
         <div
-          class="relative flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
+          class="flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
         >
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
           <username-input class="w-full"></username-input>

src/core/game/UserSettings.ts

@@ -10,7 +10,6 @@ export class UserSettings {
 
   set(key: string, value: boolean) {
     localStorage.setItem(key, value ? "true" : "false");
-    document.body.classList.toggle("dark");
   }
 
   emojis() {
@@ -27,5 +26,10 @@ export class UserSettings {
 
   toggleDarkMode() {
     this.set("settings.darkMode", !this.darkMode());
+    if (this.darkMode()) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
   }
 }