add map emojis to World & Europe. Leaderboard uses twemojies

src/client/graphics/Utils.ts

@@ -1,3 +1,6 @@
+import twemoji from 'twemoji';
+import DOMPurify from 'dompurify';
+
 export function renderTroops(troops: number): string {
     let troopsStr = ''
 
@@ -28,4 +31,22 @@ export function createCanvas(): HTMLCanvasElement {
     canvas.style.touchAction = 'none';
 
     return canvas
+}
+
+export function processName(name: string): string {
+  const sanitized = Array.from(name).slice(0, 10).join('').replace(/[^\p{L}\p{N}\s\p{Emoji}\p{Emoji_Component}]/gu, '');
+
+  // First sanitize the raw input - strip everything except text and emojis
+  const withEmojis = twemoji.parse(sanitized, {
+    base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/',  // Use jsDelivr CDN
+    folder: 'svg',  // or 'png' if you prefer
+    ext: '.svg'     // or '.png' if you prefer
+  });
+  return DOMPurify.sanitize(withEmojis, {
+    ALLOWED_TAGS: ['img'],
+    ALLOWED_ATTR: ['src', 'alt', 'class'],
+    // Only allow twemoji CDN URLs
+    ALLOWED_URI_REGEXP: /^https:\/\/cdn\.jsdelivr\.net\/gh\/twitter\/twemoji/
+  });
+
 }

src/client/graphics/layers/Leaderboard.ts

@@ -1,8 +1,12 @@
-import {LitElement, html, css} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
-import {Layer} from './Layer';
-import {Game, Player} from '../../../core/game/Game';
-import {ClientID} from '../../../core/Schemas';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { Layer } from './Layer';
+import { Game, Player } from '../../../core/game/Game';
+import { ClientID } from '../../../core/Schemas';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { processName } from '../Utils';
+
+
 
 interface Entry {
   name: string
@@ -85,6 +89,10 @@ export class Leaderboard extends LitElement implements Layer {
   :host {
     display: block;
   }
+  img.emoji {
+    height: 1em;  // Match text height
+    width: auto;  // Maintain aspect ratio
+  }
   .leaderboard {
     position: fixed;
     top: 10px;
@@ -158,7 +166,7 @@ export class Leaderboard extends LitElement implements Layer {
         .map((player, index) => html`
                 <tr class="${player.isMyPlayer ? 'myPlayer' : 'otherPlayer'}">
                   <td>${player.position}</td>
-                  <td>${player.name.slice(0, 10)}</td>
+                  <td>${unsafeHTML(processName(player.name))}</td>
                   <td>${player.score}</td>
                 </tr>
               `)}