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/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");