fix: improve keyboard shortcuts (and non working help dialog) (#413)

Author: DeepSpace2

internal/frontend/lobby.js

@@ -1,9 +1,12 @@
+import KeyboardManager from "./resources/keyboardManager.js"
+
 String.prototype.format = function () {
     return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
 };
 
 const discordInstanceId = getCookie("discord-instance-id");
 const rootPath = `${discordInstanceId ? ".proxy/" : ""}{{.RootPath}}`;
+const keyboardManager = new KeyboardManager();
 
 let socketIsConnecting = false;
 let hasSocketEverConnected = false;
@@ -151,7 +154,7 @@ function createDialogButton(text) {
 function createDialogButtonBar(...buttons) {
     const buttonBar = document.createElement("div");
     buttonBar.classList.add("button-bar");
-    buttons.forEach(buttonBar.appendChild);
+    buttons.forEach((button) => buttonBar.appendChild(button));
     return buttonBar;
 }
 
@@ -171,18 +174,17 @@ function showHelpDialog() {
     const controlsLabel = document.createElement("b");
     controlsLabel.innerText = '{{.Translation.Get "controls"}}';
 
-    const controlsTextOne = document.createElement("p");
-    controlsTextOne.innerText = '{{.Translation.Get "switch-tools-intro"}}:';
-
-    const controlsTextTwo = document.createElement("p");
-    controlsTextTwo.innerHTML =
-        '{{.Translation.Get "pencil"}}: <kbd>Q</kbd><br/>' +
-        '{{.Translation.Get "fill-bucket"}}: <kbd>W</kbd><br/>' +
-        '{{.Translation.Get "eraser"}}: <kbd>E</kbd><br/>';
-
-    const controlsTextThree = document.createElement("p");
-    controlsTextThree.innerHTML =
-        '{{printf (.Translation.Get "switch-pencil-sizes") "<kbd>1</kbd>" "<kbd>4</kbd>"}}';
+    const undoModifierKeysString = keyboardManager.get("undoModifier").split("+").map(k => `<kbd>${k}</kbd>`).join("+");
+    const controlsText = document.createElement("div");
+    controlsText.classList.add("help-controls-grid");
+    controlsText.innerHTML =
+        `
+        <span>{{.Translation.Get "pencil"}}</span><span dir="ltr"><kbd>${keyboardManager.get("pen")}</kbd></span>
+        <span>{{.Translation.Get "fill-bucket"}}</span><span dir="ltr"><kbd>${keyboardManager.get("bucket")}</kbd></span>
+        <span>{{.Translation.Get "eraser"}}</span><span dir="ltr"><kbd>${keyboardManager.get("rubber")}</kbd></span>
+        <span>{{.Translation.Get "undo-help-message"}}</span><span dir="ltr">${undoModifierKeysString}+<kbd>${keyboardManager.get("undo")}</kbd></span>
+        <span>{{.Translation.Get "switch-pencil-sizes"}}</span><span dir="ltr"><kbd>${keyboardManager.get("size8")}</kbd>-<kbd>${keyboardManager.get("size32")}</kbd></span>
+        `;
 
     const closeButton = createDialogButton('{{.Translation.Get "close"}}');
     closeButton.addEventListener("click", () => {
@@ -197,9 +199,7 @@ function showHelpDialog() {
 
     const dialogContent = document.createElement("div");
     dialogContent.appendChild(controlsLabel);
-    dialogContent.appendChild(controlsTextOne);
-    dialogContent.appendChild(controlsTextTwo);
-    dialogContent.appendChild(controlsTextThree);
+    dialogContent.appendChild(controlsText);
     dialogContent.appendChild(footer);
 
     showDialog(
@@ -452,6 +452,22 @@ const toolButtonPen = document.getElementById("tool-type-pencil");
 const toolButtonRubber = document.getElementById("tool-type-rubber");
 const toolButtonFill = document.getElementById("tool-type-fill");
 
+const pencilImage = document.getElementById("use-pencil-button-image"); 
+const eraserImage = document.getElementById("use-eraser-button-image"); 
+const bucketImage = document.getElementById("use-fill-bucket-button-image"); 
+const undoImage = document.getElementById("undo-button-image"); 
+const size8buttonWrapper = document.getElementById("size-8-button-wrapper");
+const size16buttonWrapper = document.getElementById("size-16-button-wrapper");
+const size24buttonWrapper = document.getElementById("size-24-button-wrapper");
+const size32buttonWrapper = document.getElementById("size-32-button-wrapper");
+
+
+pencilImage.setAttribute("title", `${pencilImage.getAttribute("title")} (${keyboardManager.get("pencil")})`);
+eraserImage.setAttribute("title", `${eraserImage.getAttribute("title")} (${keyboardManager.get("rubber")})`);
+bucketImage.setAttribute("title", `${bucketImage.getAttribute("title")} (${keyboardManager.get("bucket")})`);
+undoImage.setAttribute("title", `${undoImage.getAttribute("title")} (${keyboardManager.get("undoModifier")}+${keyboardManager.get("undo")})`);
+
+
 if (sizeButton8.checked) {
     setLineWidthNoUpdate(8);
 } else if (sizeButton16.checked) {
@@ -516,34 +532,19 @@ function setLineWidth(value) {
     setLineWidthNoUpdate(value);
     updateDrawingStateUI();
 }
+
 sizeButton8.addEventListener("change", () => setLineWidth(8));
-document
-    .getElementById("size-8-button-wrapper")
-    .addEventListener("mouseup", sizeButton8.click);
-document
-    .getElementById("size-8-button-wrapper")
-    .addEventListener("mousedown", sizeButton8.click);
+size8buttonWrapper.addEventListener("mouseup", sizeButton8.click);
+size8buttonWrapper.addEventListener("mousedown", sizeButton8.click);
 sizeButton16.addEventListener("change", () => setLineWidth(16));
-document
-    .getElementById("size-16-button-wrapper")
-    .addEventListener("mouseup", sizeButton16.click);
-document
-    .getElementById("size-16-button-wrapper")
-    .addEventListener("mousedown", sizeButton16.click);
+size16buttonWrapper.addEventListener("mouseup", sizeButton16.click);
+size16buttonWrapper.addEventListener("mousedown", sizeButton16.click);
 sizeButton24.addEventListener("change", () => setLineWidth(24));
-document
-    .getElementById("size-24-button-wrapper")
-    .addEventListener("mouseup", sizeButton24.click);
-document
-    .getElementById("size-24-button-wrapper")
-    .addEventListener("mousedown", sizeButton24.click);
+size24buttonWrapper.addEventListener("mouseup", sizeButton24.click);
+size24buttonWrapper.addEventListener("mousedown", sizeButton24.click);
 sizeButton32.addEventListener("change", () => setLineWidth(32));
-document
-    .getElementById("size-32-button-wrapper")
-    .addEventListener("mouseup", sizeButton32.click);
-document
-    .getElementById("size-32-button-wrapper")
-    .addEventListener("mousedown", sizeButton32.click);
+size32buttonWrapper.addEventListener("mouseup", sizeButton32.click);
+size32buttonWrapper.addEventListener("mousedown", sizeButton32.click);
 
 function setLineWidthNoUpdate(value) {
     localLineWidth = value;
@@ -1890,6 +1891,13 @@ function isAnyDialogVisible() {
     return false;
 }
 
+function getModifierKey(event, modifierKey) {
+    // Split by "+" and ensure every specified modifier property is true on the event.
+    // e.g. "ctrl+shift" checks event.ctrlKey AND event.shiftKey
+    return modifierKey.split("+").every(modifier => event[`${modifier}Key`]);
+}
+
+
 function onKeyDown(event) {
     //Avoid firing actions if the user is in the chat.
     if (document.activeElement instanceof HTMLInputElement) {
@@ -1907,28 +1915,28 @@ function onKeyDown(event) {
     //find it better than having to find specific keys on your
     //keyboard. Especially for people that aren't used to typing
     //without looking at their keyboard, this might help.
-    if (event.key === "q") {
+    if (event.key === keyboardManager.get("pen")) {
         toolButtonPen.click();
         chooseTool(pen);
-    } else if (event.key === "w") {
+    } else if (event.key === keyboardManager.get("bucket")) {
         toolButtonFill.click();
         chooseTool(fillBucket);
-    } else if (event.key === "e") {
+    } else if (event.key === keyboardManager.get("rubber")){
         toolButtonRubber.click();
         chooseTool(rubber);
-    } else if (event.key === "1") {
+    } else if (event.key === keyboardManager.get("size8")) {
         sizeButton8.click();
         setLineWidth(8);
-    } else if (event.key === "2") {
+    } else if (event.key === keyboardManager.get("size16")) {
         sizeButton16.click();
         setLineWidth(16);
-    } else if (event.key === "3") {
+    } else if (event.key === keyboardManager.get("size24")) {
         sizeButton24.click();
         setLineWidth(24);
-    } else if (event.key === "4") {
+    } else if (event.key === keyboardManager.get("size32")) {
         sizeButton32.click();
         setLineWidth(32);
-    } else if (event.key === "z" && event.ctrlKey) {
+    } else if (getModifierKey(event, keyboardManager.get("undoModifier")) && event.key.toLowerCase() === keyboardManager.get("undo")) {
         undoAndSendEvent();
     }
 }

internal/frontend/resources/keyboardManager.js

@@ -0,0 +1,23 @@
+class KeyboardManager {
+  constructor() {
+    this.keys = {
+      bucket:       "w",
+      pen:          "q",
+      rubber:       "e",
+      size8:        "1",
+      size16:       "2",
+      size24:       "3",
+      size32:       "4",
+      undo:         "z",
+      
+      // multiple modifiers should be separated by +, for example "ctrl+shift"
+      undoModifier: "ctrl",
+    }
+  }
+
+  get(key) {
+    return this.keys[key]
+  }
+}
+
+export default KeyboardManager;

internal/frontend/resources/lobby.css

@@ -47,10 +47,10 @@ kbd {
     display: inline-block;
     font-size: 0.85em;
     font-weight: 700;
-    line-height: 1;
     vertical-align: middle;
     padding: 2px 4px;
     white-space: nowrap;
+    width: fit-content;
 }
 
 @media only screen and (max-width: 812px),
@@ -811,3 +811,14 @@ kbd {
     gap: 10px;
     font-size: 1rem !important;
 }
+
+#help-dialog {
+  width: 16%;
+}
+
+.help-controls-grid {
+    display: grid;
+    grid-template-columns: max-content auto;
+    gap: 0.25rem 1rem;
+    margin-top: 0.5rem;
+}

internal/frontend/templates/lobby.html

@@ -298,7 +298,7 @@
                         <input id="tool-type-pencil" class="custom-check-or-radio line-width-button" type="radio"
                             name="tool-type" checked>
                         <div id="tool-type-pencil-wrapper" class="line-width-button-content">
-                            <img title="{{.Translation.Get "use-pencil"}}" alt="{{.Translation.Get "use-pencil"}}"
+                <img id="use-pencil-button-image" title="{{.Translation.Get "use-pencil"}} " alt="{{.Translation.Get "use-pencil"}}"
                                 src='{{.RootPath}}/resources/{{.WithCacheBust "pencil.svg"}}'
                                 style="transform: scaleX(-1)" />
                         </div>
@@ -307,16 +307,16 @@
                         <input id="tool-type-fill" class="custom-check-or-radio line-width-button" type="radio"
                             name="tool-type">
                         <div id="tool-type-fill-wrapper" class="line-width-button-content">
-                            <img alt="{{.Translation.Get "use-fill-bucket"}}"
-                                title="{{.Translation.Get "use-fill-bucket"}}"
+                            <img id="use-fill-bucket-button-image" alt="{{.Translation.Get "use-fill-bucket"}}"
+                  title="{{.Translation.Get "use-fill-bucket"}} "
                                 src='{{.RootPath}}/resources/{{.WithCacheBust "fill.svg"}}' />
                         </div>
                     </label>
                     <label for="tool-type-rubber">
                         <input id="tool-type-rubber" class="custom-check-or-radio line-width-button" type="radio"
                             name="tool-type">
                         <div id="tool-type-rubber-wrapper" class="line-width-button-content">
-                            <img alt="{{.Translation.Get "use-eraser"}}" title="{{.Translation.Get "use-eraser"}}"
+                <img id="use-eraser-button-image" alt="{{.Translation.Get "use-eraser"}}" title="{{.Translation.Get "use-eraser"}} "
                                 src='{{.RootPath}}/resources/{{.WithCacheBust "rubber.svg"}}' />
                         </div>
                     </label>
@@ -327,7 +327,7 @@
                             name="line-width" checked>
                         <div id="size-8-button-wrapper" class="line-width-button-content"
                             alt="{{printf (.Translation.Get "change-pencil-size-to") "8"}}"
-                            title="{{printf (.Translation.Get "change-pencil-size-to") "8"}}">
+                title="{{printf (.Translation.Get "change-pencil-size-to") "8"}} ">
                             <div class="dot" style="width: 8px; height: 8px"></div>
                         </div>
                     </label>
@@ -336,7 +336,7 @@
                             name="line-width">
                         <div id="size-16-button-wrapper" class="line-width-button-content"
                             alt="{{printf (.Translation.Get "change-pencil-size-to") "16"}}"
-                            title="{{printf (.Translation.Get "change-pencil-size-to") "16"}}">
+                title="{{printf (.Translation.Get "change-pencil-size-to") "16"}} ">
                             <div class="dot" style="width: 16px; height: 16px"></div>
                         </div>
                     </label>
@@ -345,7 +345,7 @@
                             name="line-width">
                         <div id="size-24-button-wrapper" class="line-width-button-content"
                             alt="{{printf (.Translation.Get "change-pencil-size-to") "24"}}"
-                            title="{{printf (.Translation.Get "change-pencil-size-to") "24"}}">
+                title="{{printf (.Translation.Get "change-pencil-size-to") "24"}} ">
                             <div class="dot" style="width: 24px; height: 24px"></div>
                         </div>
                     </label>
@@ -354,7 +354,7 @@
                             name="line-width">
                         <div id="size-32-button-wrapper" class="line-width-button-content"
                             alt="{{printf (.Translation.Get "change-pencil-size-to") "32"}}"
-                            title="{{printf (.Translation.Get "change-pencil-size-to") "32"}}">
+                title="{{printf (.Translation.Get "change-pencil-size-to") "32"}} ">
                             <div class="dot" style="width: 32px; height: 32px"></div>
                         </div>
                     </label>
@@ -368,7 +368,7 @@
                 <!--We won't make this button easier to click, as there's no going back. -->
                 <button id="undo-button" class="canvas-button toolbox-group" alt="{{.Translation.Get "undo"}}"
                     title="{{.Translation.Get "undo"}}">
-                    <img alt="{{.Translation.Get "undo"}}" title="{{.Translation.Get "undo"}}"
+                    <img id="undo-button-image" alt="{{.Translation.Get "undo"}}" title="{{.Translation.Get "undo"}} "
                         src='{{.RootPath}}/resources/{{.WithCacheBust "undo.svg"}}' />
                 </button>
             </div>
@@ -382,7 +382,7 @@
     </div>
 
     <script type="text/javascript" src='{{.RootPath}}/resources/{{.WithCacheBust "draw.js"}}'></script>
-    <script type="text/javascript" src='{{.RootPath}}/{{.WithCacheBust "lobby.js"}}'></script>
+    <script type="module" src='{{.RootPath}}/{{.WithCacheBust "lobby.js"}}'></script>
 </body>
 
 </html>

internal/translations/ar.go

@@ -117,7 +117,6 @@ func initArabicTranslation() *Translation {
 	translation.put("pencil", "القلم")
 	translation.put("eraser", "الممحاة")
 	translation.put("fill-bucket", "الملء بالدلو")
-	translation.put("switch-tools-intro", "يمكنك التحويل بين الأدوات بواسطة الاختصارات")
 	translation.put("switch-pencil-sizes", "يمكنك التغيير بين احجام القلم من %s إلى %s.")
 
 	// Generic words

internal/translations/de_DE.go

@@ -110,7 +110,6 @@ func initGermanTranslation() {
 	translation.put("pencil", "Stift")
 	translation.put("eraser", "Radiergummi")
 	translation.put("fill-bucket", "Fülleimer")
-	translation.put("switch-tools-intro", "Zwischen den Werkzeugen kannst du mit Tastaturkürzel wechseln")
 	translation.put("switch-pencil-sizes", "Die Stiftgröße kannst du mit den Tasten %s bis %s verändern.")
 
 	// Generic words

internal/translations/en_us.go

@@ -128,8 +128,8 @@ func initEnglishTranslation() *Translation {
 	translation.put("pencil", "Pencil")
 	translation.put("eraser", "Eraser")
 	translation.put("fill-bucket", "Fill bucket")
-	translation.put("switch-tools-intro", "You can switch between tools using shortcuts")
-	translation.put("switch-pencil-sizes", "You can also switch between pencil sizes using keys %s to %s.")
+	translation.put("switch-pencil-sizes", "Tool sizes")
+	translation.put("undo-help-message", "Undo")
 
 	// Generic words
 	// "close" as in "closing the window"

internal/translations/es_ES.go

@@ -116,7 +116,6 @@ func initSpainTranslation() {
 	translation.put("pencil", "Lápiz")
 	translation.put("eraser", "Borrador")
 	translation.put("fill-bucket", "Llenar el cubo")
-	translation.put("switch-tools-intro", "Puede cambiar entre herramientas mediante atajos")
 	translation.put("switch-pencil-sizes", "También puedes cambiar entre tamaños de lápiz usando teclas %s para %s.")
 
 	// Generic words

internal/translations/fa.go

@@ -127,7 +127,6 @@ func initPersianTranslation() *Translation {
 	translation.put("pencil", "قلم")
 	translation.put("eraser", "پاک‌کن")
 	translation.put("fill-bucket", "سطل رنگ")
-	translation.put("switch-tools-intro", "شما می‌تونید ابزارها رو با استفاده از کلیدای میانبر عوض کنید")
 	translation.put("switch-pencil-sizes", "همچنین می‌تونید اندازه قلم رو با کلیدای %s تا %s عوض کنید.")
 
 	// Generic words

internal/translations/fr_FR.go

@@ -128,7 +128,6 @@ func initFrenchTranslation() *Translation {
 	translation.put("pencil", "Crayon")
 	translation.put("eraser", "Gomme")
 	translation.put("fill-bucket", "Pot de peinture")
-	translation.put("switch-tools-intro", "Vous pouvez changer d'outil à l'aide des raccourcis")
 	translation.put("switch-pencil-sizes", "Vous pouvez aussi changer la taille du crayon avec les touches %s à %s.")
 
 	// Generic words