From 75ca7b1b1e017eda78ad4fdfea3c3f7027ec7e3a Mon Sep 17 00:00:00 2001
From: James R <113132470+JamesRand12@users.noreply.github.com>
Date: Fri, 7 Nov 2025 00:51:01 +0100
Subject: [PATCH] feat: improve emoji panel UI and UX (#2383)

Added some basic fixes:

- Add backdrop overlay with outside-click-to-close
- Reduce emoji button sizes to fit all emojis without scrolling
- Update styling to match player info panel theme

## Description:
I updated the emoji panel such as reducing the size so it fits on the
screen without scrolling for emojis, and ability to close the panel by
clicking outside of it. Previously you couldn't close the panel by
clicking outside of it, and this was inconsistent with the rest of the
UI. I also updated the styling to match the panel before that (the
player info panel).

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [ ] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [ ] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

insane.p

<img width="1237" height="874" alt="image"
src="https://github.com/user-attachments/assets/5c0bd229-0f9b-489d-bc34-a4a70021b78d"
/>

---------

Co-authored-by: Evan <evanpelle@gmail.com>
---
 src/client/graphics/layers/EmojiTable.ts | 85 ++++++++++++++----------
 1 file changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index ca87f009b..ef2745280 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -57,6 +57,15 @@ export class EmojiTable extends LitElement {
 
   private onEmojiClicked: (emoji: string) => void = () => {};
 
+  private handleBackdropClick = (e: MouseEvent) => {
+    const panelContent = this.querySelector(
+      'div[class*="bg-zinc-900"]',
+    ) as HTMLElement;
+    if (panelContent && !panelContent.contains(e.target as Node)) {
+      this.hideTable();
+    }
+  };
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -64,43 +73,51 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="bg-slate-800 max-w-[95vw] max-h-[95vh] pt-[15px] pb-[15px] fixed flex flex-col -translate-x-1/2 -translate-y-1/2 
-                items-center rounded-[10px] z-[9999] top-[50%] left-[50%] justify-center"
-        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
-        @wheel=${(e: WheelEvent) => e.stopPropagation()}
+        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[9998]"
+        @click=${this.handleBackdropClick}
       >
-        <!-- Close button -->
-        <button
-          class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center
-                  bg-red-500 hover:bg-red-900 text-white rounded-full
-                  text-sm font-bold transition-colors"
-          @click=${this.hideTable}
-        >
-          ✕
-        </button>
         <div
-          class="flex flex-col overflow-y-auto"
-          style="scrollbar-gutter: stable both-edges;"
+          class="bg-zinc-900/95 p-[6px] flex items-center justify-center rounded-[10px] z-[9999] relative shadow-2xl shadow-black/50 ring-1 ring-white/5"
+          style="
+            width: min(410px, calc(100vw - 60px), calc((100vh - 40px) * 215 / 449));
+            aspect-ratio: 215 / 449;
+            container-type: size;
+          "
+          @contextmenu=${(e: MouseEvent) => e.preventDefault()}
+          @wheel=${(e: WheelEvent) => e.stopPropagation()}
+          @click=${(e: MouseEvent) => e.stopPropagation()}
         >
-          ${emojiTable.map(
-            (row) => html`
-              <div class="w-full justify-center flex">
-                ${row.map(
-                  (emoji) => html`
-                    <button
-                      class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
-                              border border-solid border-slate-500 rounded-[12px] bg-slate-700 hover:bg-slate-600 active:bg-slate-500 
-                              md:m-[8px] md:text-[60px] md:w-[80px] md:h-[80px] hover:scale-[1.1] active:scale-[0.95]
-                              sm:w-[60px] sm:h-[60px] sm:text-[32px] sm:m-[5px] text-[28px] w-[50px] h-[50px] m-[3px]"
-                      @click=${() => this.onEmojiClicked(emoji)}
-                    >
-                      ${emoji}
-                    </button>
-                  `,
-                )}
-              </div>
-            `,
-          )}
+          <!-- Close button -->
+          <button
+            class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
+                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow transition-colors z-[10000]"
+            @click=${this.hideTable}
+          >
+            ✕
+          </button>
+          <div
+            class="flex flex-col"
+            style="transform: scale(calc(100cqw / 215px)); transform-origin: center;"
+          >
+            ${emojiTable.map(
+              (row) => html`
+                <div class="flex justify-center">
+                  ${row.map(
+                    (emoji) => html`
+                      <button
+                        class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
+                                border border-solid border-zinc-600 rounded-[8px] bg-zinc-800 hover:bg-zinc-700 active:bg-zinc-600
+                                m-[2px] text-[25px] w-[35px] h-[35px] hover:scale-[1.1] active:scale-[0.95]"
+                        @click=${() => this.onEmojiClicked(emoji)}
+                      >
+                        ${emoji}
+                      </button>
+                    `,
+                  )}
+                </div>
+              `,
+            )}
+          </div>
         </div>
       </div>
     `;