Experimental system emoji support

srcjs/stendhal.css

@@ -23,6 +23,17 @@ body {
 	margin: 0;
 }
 
+.emoji-text {
+	font-family:
+			"Noto Color Emoji",
+			"Twemoji Mozilla",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"EmojiOne Color",
+			"Android Emoji";
+}
+
 .hidden {
 	display: none;
 }

srcjs/stendhal.html

@@ -60,15 +60,17 @@
 
 		<div id="middleColumn" class="mainColumn">
 			<div id="topPanel"></div>
-			<canvas id="gamewindow" width="640" height="480" tabindex="-1">Sorry, this page only works in modern web browsers.</canvas>
+			<!-- FIXME: "gamewindow" and "chat" elements don't use fonts defined in "emoji-text" attribute, probably because
+			            font is overridden in class definitions -->
+			<canvas id="gamewindow" class="emoji-text" width="640" height="480" tabindex="-1">Sorry, this page only works in modern web browsers.</canvas>
 			<div id="bottomPanel" class="mainColumn">
 				<div class="horizontalgroup">
-					<input id="chatinput" type="text" name="chatinput" autocomplete="off" autofocus>
+					<input id="chatinput" class="emoji-text" type="text" name="chatinput" autocomplete="off" autofocus>
 					<button id="send-button">send</button>
 					<button id="keywords-button">Hi!</button>
-					<button id="emojis-button">emoji</button>
+					<button id="emojis-button" class="emoji-text">emoji</button>
 				</div>
-				<div id="chat"></div>
+				<div id="chat" class="emoji-text"></div>
 			</div>
 		</div>
 
@@ -254,6 +256,7 @@
 			<label class="checksetting"><input type="checkbox" id="chk_pvtsnd">Private message notifications</label>
 			<label class="checksetting"><input type="checkbox" id="chk_clickindicator">Display clicks/touches</label>
 			<label class="checksetting"><input type="checkbox" id="chk_pathfinding">Click ground to move</label>
+			<label class="checksetting"><input type="checkbox" id="chk_sysemojis">System emojis</label>
 		</div>
 		<div id="settings_panel3" class="verticalgroup vgroupcolr">
 			<div>

srcjs/stendhal/ui/component/ChatInputComponent.ts

@@ -1,5 +1,5 @@
 /***************************************************************************
- *                (C) Copyright 2003-2023 - Faiumoni e. V.                 *
+ *                (C) Copyright 2003-2024 - Faiumoni e. V.                 *
  ***************************************************************************
  *                                                                         *
  *   This program is free software; you can redistribute it and/or modify  *
@@ -59,14 +59,29 @@ export class ChatInputComponent extends Component {
 
 		// ** emoji shortcuts ** //
 		const btn_emoji = document.getElementById("emojis-button")!;
-		// clear default text & add emoji image
-		btn_emoji.innerText = "";
-		// set image for emoji button
-		btn_emoji.appendChild(stendhal.data.sprites.get(stendhal.paths.sprites + "/emoji/smile.png").cloneNode());
 		// event to bring up emoji dialog
 		btn_emoji.addEventListener("click", (e) => {
 			this.buildEmojiMap();
 		});
+
+		this.refresh();
+	}
+
+	public override refresh() {
+		super.refresh();
+
+		const btn_emoji = document.getElementById("emojis-button")!;;
+		// remove any previous child elements
+		while (btn_emoji.lastChild != null) {
+			btn_emoji.removeChild(btn_emoji.lastChild)
+		}
+		// update button
+		if (stendhal.config.getBoolean("client.emojis.system")) {
+			btn_emoji.innerText = "☺";
+		} else {
+			// set image for emoji button
+			btn_emoji.appendChild(stendhal.data.sprites.get(stendhal.paths.sprites + "/emoji/smile.png").cloneNode());
+		}
 	}
 
 	public clear() {
@@ -78,6 +93,10 @@ export class ChatInputComponent extends Component {
 		this.inputElement.focus();
 	}
 
+	public appendText(text: string) {
+		this.setText(this.inputElement.value + text);
+	}
+
 	private fromHistory(i: number) {
 		this.historyIndex = this.historyIndex + i;
 		if (this.historyIndex < 0) {

srcjs/stendhal/ui/dialog/EmojiMapDialog.ts

@@ -1,5 +1,5 @@
 /***************************************************************************
- *                       Copyright © 2023 - Stendhal                       *
+ *                    Copyright © 2023-2024 - Stendhal                     *
  ***************************************************************************
  *                                                                         *
  *   This program is free software; you can redistribute it and/or modify  *
@@ -18,37 +18,99 @@ declare var stendhal: any;
 
 export class EmojiMapDialog extends DialogContentComponent {
 
+	private static readonly glyphs = [
+		"☺", "☻",
+		"🙂",
+		"🙃",
+		"😊",
+		"😉",
+		"😛",
+		"😜",
+		"😋",
+		"😀", "😃",
+		"☹",
+		"🙁",
+		"😢",
+		"🥲",
+		"😂",
+		"😕",
+		"🙄",
+		"😐",
+		"😑",
+		"😶",
+		"😲", "😮", "😯",
+		"😖", "😣",
+		"🤓",
+		"😎",
+		"😇", "👼",
+		"❤",
+		"💙",
+		"💚",
+		"💜",
+		"💛",
+		"💘",
+		"💔",
+		"💢",
+		"🗢", "👄", "💋",
+		"💧",
+		"♩", "𝅘𝅥",
+		"♪", "𝅘𝅥𝅮", "🎵",
+		"♬", "🎜",
+		"♫", "🎝",
+		"👍",
+		"👎",
+		"👋"
+	];
+	private readonly sysEmojis: boolean;
+
+
 	constructor() {
 		super("emojimap-template");
 
+		// Note: dialog must be re-constructed if setting changes
+		this.sysEmojis = stendhal.config.getBoolean("client.emojis.system");
+
 		const emojiStore = singletons.getEmojiStore();
+		let emojiList = EmojiMapDialog.glyphs;
+		if (!this.sysEmojis) {
+			emojiList = emojiStore.getEmojiList();
+		}
 		let idx = 0;
 		let row: HTMLDivElement = document.createElement("div");
 		this.componentElement.appendChild(row);
-		for (const emoji of emojiStore.getEmojiList()) {
+		for (const emoji of emojiList) {
 			if (idx > 0 && idx % 13 == 0) {
 				// new row
 				row = document.createElement("div");
 				this.componentElement.appendChild(row);
 			}
 			const button = document.createElement("button");
-			button.className = "shortcut-button";
-			button.appendChild(stendhal.data.sprites.get(stendhal.paths.sprites + "/emoji/" + emoji + ".png").cloneNode());
+			button.classList.add("shortcut-button", "emoji-text");
+			if (!this.sysEmojis) {
+				button.appendChild(stendhal.data.sprites.get(stendhal.paths.sprites + "/emoji/" + emoji + ".png").cloneNode());
+			} else {
+				button.innerText = emoji;
+			}
 			button.addEventListener("click", (evt) => {
 				this.onButtonPressed(emoji);
 			});
-			//~ this.componentElement.appendChild(button);
 			row.appendChild(button);
 			idx++;
 		}
 	}
 
 	private onButtonPressed(emoji: string) {
-		const action = {
-			"type": "chat",
-			"text": ":" + emoji + ":"
-		} as any;
-		marauroa.clientFramework.sendAction(action);
-		this.close();
+		if (!this.sysEmojis) {
+			const action = {
+				"type": "chat",
+				"text": ":" + emoji + ":"
+			} as any;
+			marauroa.clientFramework.sendAction(action);
+			this.close();
+			return;
+		}
+
+		// FIXME: should insert text at caret position
+		singletons.getChatInput().appendText(emoji);
 	}
 }

srcjs/stendhal/ui/dialog/SettingsDialog.ts

@@ -17,6 +17,7 @@ import { ItemInventoryComponent } from "../component/ItemInventoryComponent";
 import { DialogContentComponent } from "../toolkit/DialogContentComponent";
 import { TravelLogDialog } from "./TravelLogDialog";
 import { UIComponentEnum } from "../UIComponentEnum";
+import { singletons } from "../../SingletonRepo";
 
 declare var marauroa: any;
 declare var stendhal: any;
@@ -140,6 +141,18 @@ export class SettingsDialog extends DialogContentComponent {
 		this.createCheckBox("chk_pathfinding", "client.pathfinding",
 				"Pathfinding on ground enabled", "Pathfinding on ground disabled");
 
+		const chk_sysemojis = this.createCheckBox("chk_sysemojis", "client.emojis.system",
+				"Using system emojis", "Using built-in emojis",
+				function() {
+					singletons.getChatInput().refresh();
+				});
+		if (!SettingsDialog.debugging) {
+			// disabled until fully functional
+			chk_sysemojis.disabled = true;
+			chk_sysemojis.style["display"] = "none"
+			chk_sysemojis.parentElement!.style["display"] = "none";
+		}
+
 
 		/* *** right panel *** */
 

srcjs/stendhal/util/ConfigManager.ts

@@ -1,5 +1,5 @@
 /***************************************************************************
- *                    Copyright © 2022-2023 - Stendhal                     *
+ *                    Copyright © 2022-2024 - Stendhal                     *
  ***************************************************************************
  *                                                                         *
  *   This program is free software; you can redistribute it and/or modify  *
@@ -20,6 +20,7 @@ declare var stendhal: any;
 export class ConfigManager {
 
 	private readonly defaults = {
+		"client.emojis.system": "false",
 		"client.pathfinding": "true",
 		"ui.sound": "false",
 		"ui.sound.master.volume": "100",