Make the player name change button a discrete pencil button

Thanks Arnaudv6 for the idea

Ref: https://git.jakse.fr/trivabble/trivabble/issues/7#issuecomment-69

diff --git a/public/index.html b/public/index.html
index b539a515b2f8e61e3b7ad5271ce7e2a49e0e11c3..76407390b30af3fce035c803f2ecf43c0849c796 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
             <button data-l10n="text-content" id="leave-game">Leave current game</button>
             <button id="clear-game" data-l10n="text-content">Restart</button>
             <p id="p-number"><span data-l10n="text-content">Game number:</span> <span id="number" data-l10n="text-content">(pending)</span></p>
-            <p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span><br /><button class="minibutton" id="change-name" data-l10n="text-content">Change</button></p>
+            <p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span> <button class="minibutton" id="change-name" title="Change" aria-label="Change" data-l10n="title,aria-label">✏️</button></p>
             <div id="chat-messages"></div>
             <textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
             <button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>

diff --git a/public/trivabble.js b/public/trivabble.js
index 44d788eb127afcb5ee79b949e7c21327486036f5..e0ec7133de473657e6d3552cbe80d85557e921ee 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -2473,10 +2473,12 @@
         document.documentElement.setAttribute("xml:lang", libD.lang);
 
         for (const node of [].slice.call(document.querySelectorAll("[data-l10n]"))) {
-            if (node.dataset.l10n === "text-content") {
-                node.textContent = _(node.textContent.trim());
-            } else {
-                node.setAttribute(node.dataset.l10n, _(node.getAttribute(node.dataset.l10n)));
+            for (const e of node.dataset.l10n.split(",")) {
+                if (e === "text-content") {
+                    node.textContent = _(node.textContent.trim());
+                } else {
+                    node.setAttribute(e, _(node.getAttribute(e)));
+                }
             }
         }