diff --git a/srcjs/stendhal.css b/srcjs/stendhal.css
index b422699b48..fd658fd1ce 100644
--- a/srcjs/stendhal.css
+++ b/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;
}
diff --git a/srcjs/stendhal.html b/srcjs/stendhal.html
index dd6a78355b..7b3a16ece3 100644
--- a/srcjs/stendhal.html
+++ b/srcjs/stendhal.html
@@ -60,15 +60,17 @@
-
+
+
@@ -254,6 +256,7 @@
diff --git a/srcjs/stendhal/ui/component/ChatInputComponent.ts b/srcjs/stendhal/ui/component/ChatInputComponent.ts
index 7a395b63ef..a66fc328cf 100644
--- a/srcjs/stendhal/ui/component/ChatInputComponent.ts
+++ b/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) {
diff --git a/srcjs/stendhal/ui/dialog/EmojiMapDialog.ts b/srcjs/stendhal/ui/dialog/EmojiMapDialog.ts
index 9956c16ca3..01e58f5c88 100644
--- a/srcjs/stendhal/ui/dialog/EmojiMapDialog.ts
+++ b/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);
}
}
diff --git a/srcjs/stendhal/ui/dialog/SettingsDialog.ts b/srcjs/stendhal/ui/dialog/SettingsDialog.ts
index e78f04a9e6..abfdb0c891 100644
--- a/srcjs/stendhal/ui/dialog/SettingsDialog.ts
+++ b/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 *** */
diff --git a/srcjs/stendhal/util/ConfigManager.ts b/srcjs/stendhal/util/ConfigManager.ts
index 5cf9a3b182..f8123f3d79 100644
--- a/srcjs/stendhal/util/ConfigManager.ts
+++ b/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",