diff --git a/src/client/Main.ts b/src/client/Main.ts
index 41c1bd4b4..1035302ff 100644
--- a/src/client/Main.ts
+++ b/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")) {
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 57ba9fb05..057802553 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -245,6 +245,11 @@ export class SinglePlayerModal extends LitElement {
class="modal-overlay"
style="display: ${this.isModalOpen ? "flex" : "none"}"
>
+
×
diff --git a/src/client/components/ModalOverlay.ts b/src/client/components/ModalOverlay.ts
new file mode 100644
index 000000000..8dc0cbbcf
--- /dev/null
+++ b/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`
+
(this.visible = false)}
+ >
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 4c10dcd23..a479fc5e1 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/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
@@ -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
+
${this.newEvents}
diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts
index 6feb6db59..ea0d6a6f5 100644
--- a/src/core/game/UserSettings.ts
+++ b/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");
+ }
}
}