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 @@
- Sorry, this page only works in modern web browsers. + + Sorry, this page only works in modern web browsers.
- + - +
-
+
@@ -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",