From bd2a6cd3901e18a338d0839504c68bf46acbdf4b Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <31893343+NewHappyRabbit@users.noreply.github.com>
Date: Thu, 20 Feb 2025 02:52:08 +0200
Subject: [PATCH] Events can now be hidden and are scrollable.

---
 src/client/graphics/layers/EventsDisplay.ts | 34 ++++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 8564f9ac4..577603ecd 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -52,6 +52,7 @@ export class EventsDisplay extends LitElement implements Layer {
   private events: Event[] = [];
   @state() private incomingAttacks: AttackUpdate[] = [];
   @state() private outgoingAttacks: AttackUpdate[] = [];
+  @state() private _hidden: boolean = false;
 
   private updateMap = new Map([
     [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
@@ -82,15 +83,15 @@ export class EventsDisplay extends LitElement implements Layer {
 
     let remainingEvents = this.events.filter((event) => {
       const shouldKeep =
-        this.game.ticks() - event.createdAt < (event.duration ?? 80);
+        this.game.ticks() - event.createdAt < (event.duration ?? 600);
       if (!shouldKeep && event.onDelete) {
         event.onDelete();
       }
       return shouldKeep;
     });
 
-    if (remainingEvents.length > 10) {
-      remainingEvents = remainingEvents.slice(-10);
+    if (remainingEvents.length > 30) {
+      remainingEvents = remainingEvents.slice(-30);
     }
 
     if (this.events.length !== remainingEvents.length) {
@@ -394,10 +395,33 @@ export class EventsDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-3xl lg:w-full lg:w-auto"
+        class="${this._hidden
+          ? "w-fit px-[10px] py-[5px]"
+          : ""} rounded-md bg-black bg-opacity-60 relative max-h-[30vw] overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-3xl lg:w-full lg:w-auto"
       >
+        <div class="w-full bg-black/10 sticky top-0 px-[10px]">
+          <button
+            class="text-white cursor-pointer pointer-events-auto ${this._hidden
+              ? "hidden"
+              : ""}"
+            @click=${() => (this._hidden = true)}
+          >
+            Hide
+          </button>
+        </div>
+        <button
+          class="text-white cursor-pointer pointer-events-auto ${this._hidden
+            ? ""
+            : "hidden"}"
+          @click=${() => (this._hidden = false)}
+        >
+          Events
+        </button>
         <table
-          class="w-full border-collapse bg-black bg-opacity-60 text-white shadow-lg lg:text-xl text-xs"
+          class="w-full border-collapse text-white shadow-lg lg:text-xl text-xs ${this
+            ._hidden
+            ? "hidden"
+            : ""}"
           style="pointer-events: auto;"
         >
           <tbody>