From 22d7c46b12678d8a7c54ec103445405ff7585323 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Jakse?= <raphael.git@jakse.fr>
Date: Sat, 3 May 2025 19:09:58 +0200
Subject: [PATCH] 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
---
 public/index.html   |  2 +-
 public/trivabble.js | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index b539a51..7640739 100644
--- 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 44d788e..e0ec713 100644
--- 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)));
+                }
             }
         }
 
-- 
2.30.2