create emoji table (only sends hearts)

TODO.txt

@@ -171,9 +171,6 @@
 * Load terrain dataImage in background
 * BUG: half encircle Antartica causes capture
 
---- v4 Release
-
-
 * improve front page (make map larger?)
 * Add additional maps
 * add offline mode

src/client/graphics/layers/RadialMenu.ts

@@ -57,6 +57,46 @@ export class RadialMenu implements Layer {
         this.createMenuElement();
     }
 
+    private hideEmojiTable(): void {
+        const emojiTable: HTMLTableElement | null = document.getElementById('uniqueEmojiTable') as HTMLTableElement | null;
+
+        if (emojiTable instanceof HTMLTableElement) {
+            if (!emojiTable.classList.contains('hidden')) {
+                emojiTable.classList.add('hidden');
+            }
+        } else {
+            console.error('Emoji table not found');
+        }
+    }
+
+    private showEmojiTable(recipient: Player | typeof AllPlayers): void {
+        const emojiTable: HTMLTableElement | null = document.getElementById('uniqueEmojiTable') as HTMLTableElement | null;
+
+        if (emojiTable instanceof HTMLTableElement) {
+            emojiTable.classList.remove('hidden');
+        } else {
+            console.error('Emoji table not found');
+        }
+        this.setupEmojiButtons(recipient)
+    }
+
+    private setupEmojiButtons(recipient: Player | typeof AllPlayers) {
+        const emojiTable = document.getElementById('uniqueEmojiTable');
+
+        if (emojiTable) {
+            emojiTable.addEventListener('click', (event) => {
+                const emojiElement = event.target as HTMLElement;
+                if (emojiElement.classList.contains('emoji-button')) {
+                    const emoji = emojiElement.textContent;
+                    this.hideEmojiTable()
+                    this.eventBus.emit(new SendEmojiIntentEvent(recipient, Emoji.Heart))
+                }
+            });
+        } else {
+            console.error('Emoji table not found');
+        }
+    }
+
     private createMenuElement() {
         this.menuElement = d3.select(document.body)
             .append('div')
@@ -228,9 +268,7 @@ export class RadialMenu implements Layer {
             const target = tile.owner() == myPlayer ? AllPlayers : (tile.owner() as Player)
             if (myPlayer.canSendEmoji(target)) {
                 this.activateMenuElement(Slot.Emoji, "#ebe250", emojiIcon, () => {
-                    this.eventBus.emit(
-                        new SendEmojiIntentEvent(target, Emoji.Fire)
-                    )
+                    this.showEmojiTable(target)
                 })
             }
         }
@@ -337,6 +375,7 @@ export class RadialMenu implements Layer {
 
     private onPointerUp(event: MouseUpEvent) {
         this.hideRadialMenu()
+        this.hideEmojiTable()
     }
 
     private showRadialMenu(x: number, y: number) {

src/client/index.html

@@ -49,6 +49,65 @@
 	<div id="app"></div>
 	<div id="radialMenu" class="radial-menu"></div>
 
+	<table id="uniqueEmojiTable" class="emoji-table hidden">
+		<tr>
+			<td><button class="emoji-button">😀</button></td>
+			<td><button class="emoji-button">🐶</button></td>
+			<td><button class="emoji-button">🌺</button></td>
+			<td><button class="emoji-button">🍕</button></td>
+			<td><button class="emoji-button">🚗</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🐱</button></td>
+			<td><button class="emoji-button">🌴</button></td>
+			<td><button class="emoji-button">🍦</button></td>
+			<td><button class="emoji-button">✈️</button></td>
+			<td><button class="emoji-button">📚</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🐼</button></td>
+			<td><button class="emoji-button">🌻</button></td>
+			<td><button class="emoji-button">🍔</button></td>
+			<td><button class="emoji-button">🚲</button></td>
+			<td><button class="emoji-button">🎬</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🐘</button></td>
+			<td><button class="emoji-button">🌹</button></td>
+			<td><button class="emoji-button">🍎</button></td>
+			<td><button class="emoji-button">🚁</button></td>
+			<td><button class="emoji-button">💻</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🦁</button></td>
+			<td><button class="emoji-button">🌼</button></td>
+			<td><button class="emoji-button">🍓</button></td>
+			<td><button class="emoji-button">🚂</button></td>
+			<td><button class="emoji-button">📷</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🐸</button></td>
+			<td><button class="emoji-button">🌳</button></td>
+			<td><button class="emoji-button">🍇</button></td>
+			<td><button class="emoji-button">🚢</button></td>
+			<td><button class="emoji-button">🎸</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🦉</button></td>
+			<td><button class="emoji-button">🌵</button></td>
+			<td><button class="emoji-button">🥑</button></td>
+			<td><button class="emoji-button">🚀</button></td>
+			<td><button class="emoji-button">🎨</button></td>
+		</tr>
+		<tr>
+			<td><button class="emoji-button">🦋</button></td>
+			<td><button class="emoji-button">🍄</button></td>
+			<td><button class="emoji-button">🍉</button></td>
+			<td><button class="emoji-button">🛵</button></td>
+			<td><button class="emoji-button">🏆</button></td>
+		</tr>
+	</table>
+
 	<style>
 		body {
 			visibility: hidden;

src/client/styles.css

@@ -383,4 +383,86 @@ h3 {
 
 .events-table .error {
     color: red;
+}
+
+/* EMOJI Table */
+.emoji-table {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    background-color: #1E1E1E;
+    padding: 15px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 95vw;
+    max-height: 95vh;
+    overflow-y: auto;
+}
+
+.emoji-row {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.emoji-button {
+    font-size: 60px;
+    /* Increased font size for larger emojis */
+    width: 80px;
+    /* Increased width */
+    height: 80px;
+    /* Increased height */
+    border: 1px solid #333;
+    background-color: #2C2C2C;
+    color: white;
+    border-radius: 12px;
+    /* Slightly increased border radius */
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 8px;
+    /* Increased margin */
+}
+
+.emoji-button:hover {
+    background-color: #3A3A3A;
+    transform: scale(1.1);
+}
+
+.emoji-button:active {
+    background-color: #4A4A4A;
+    transform: scale(0.95);
+}
+
+.emoji-table.hidden {
+    display: none;
+}
+
+@media (max-width: 600px) {
+    .emoji-button {
+        font-size: 32px;
+        /* Slightly smaller font size for mobile */
+        width: 60px;
+        /* Smaller width for mobile */
+        height: 60px;
+        /* Smaller height for mobile */
+        margin: 5px;
+        /* Smaller margin for mobile */
+    }
+}
+
+@media (max-width: 400px) {
+    .emoji-button {
+        font-size: 28px;
+        width: 50px;
+        height: 50px;
+        margin: 3px;
+    }
 }