alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-25 23:34:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

bugfix: emoji table was too small on firefox

Browse Source
This commit is contained in:
evanpelle
2025-11-20 16:49:45 -08:00
parent 599342995c
commit 9287d0323d
1 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/EmojiTable.ts
+23 -33
View File
@@ -4,7 +4,7 @@ import { EventBus } from "../../../core/EventBus";
import { AllPlayers } from "../../../core/game/Game";
import { GameView, PlayerView } from "../../../core/game/GameView";
import { TerraNulliusImpl } from "../../../core/game/TerraNulliusImpl";
import { Emoji, emojiTable, flattenedEmojiTable } from "../../../core/Util";
import { Emoji, flattenedEmojiTable } from "../../../core/Util";
import { CloseViewEvent, ShowEmojiMenuEvent } from "../../InputHandler";
import { SendEmojiIntentEvent } from "../../Transport";
import { TransformHandler } from "../TransformHandler";
@@ -73,20 +73,10 @@ export class EmojiTable extends LitElement {
return html`
<div
class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[10002]"
class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-start sm:items-center justify-center z-[10002] pt-4 sm:pt-0"
@click=${this.handleBackdropClick}
>
<div
class="bg-zinc-900/95 p-[6px] flex items-center justify-center rounded-[10px] z-[10003] 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()}
>
<div class="relative">
<!-- Close button -->
<button
class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
@@ -95,28 +85,28 @@ export class EmojiTable extends LitElement {
>
✕
</button>
<div
class="flex flex-col"
style="transform: scale(calc(100cqw / 215px)); transform-origin: center;"
class="bg-zinc-900/95 p-2 sm:p-3 rounded-[10px] z-[10003] shadow-2xl shadow-black/50 ring-1 ring-white/5
w-[calc(100vw-32px)] sm:w-[400px] max-h-[calc(100vh-60px)] overflow-y-auto"
@contextmenu=${(e: MouseEvent) => e.preventDefault()}
@wheel=${(e: WheelEvent) => e.stopPropagation()}
@click=${(e: MouseEvent) => e.stopPropagation()}
>
${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 class="grid grid-cols-5 gap-1 sm:gap-2">
${flattenedEmojiTable.map(
(emoji) => html`
<button
class="flex items-center justify-center cursor-pointer aspect-square
border border-solid border-zinc-600 rounded-lg bg-zinc-800 hover:bg-zinc-700 active:bg-zinc-600
text-3xl sm:text-4xl transition-transform duration-300 hover:scale-110 active:scale-95"
@click=${() => this.onEmojiClicked(emoji)}
>
${emoji}
</button>
`,
)}
</div>
</div>
</div>
</div>