From bcb3a86b9c10902e64d5b6b7aa7175d264906380 Mon Sep 17 00:00:00 2001 From: Adi <6841988+DeepSpace2@users.noreply.github.com> Date: Sat, 11 Apr 2026 01:16:55 +0300 Subject: [PATCH 1/2] fix: improve keyboard shortcuts --- internal/frontend/keyboard_shortcuts.go | 25 ++++++++++++ internal/frontend/lobby.go | 4 ++ internal/frontend/lobby.js | 54 ++++++++++++++----------- internal/frontend/resources/lobby.css | 13 +++++- internal/frontend/templates/lobby.html | 16 ++++---- internal/frontend/templating_test.go | 1 + internal/translations/ar.go | 1 - internal/translations/de_DE.go | 1 - internal/translations/en_us.go | 4 +- internal/translations/es_ES.go | 1 - internal/translations/fa.go | 1 - internal/translations/fr_FR.go | 1 - internal/translations/he.go | 4 +- internal/translations/pl.go | 1 - 14 files changed, 84 insertions(+), 43 deletions(-) create mode 100644 internal/frontend/keyboard_shortcuts.go diff --git a/internal/frontend/keyboard_shortcuts.go b/internal/frontend/keyboard_shortcuts.go new file mode 100644 index 00000000..a40b1caa --- /dev/null +++ b/internal/frontend/keyboard_shortcuts.go @@ -0,0 +1,25 @@ +package frontend + +type keys struct { + Bucket string + Pen string + Rubber string + Size8 string + Size16 string + Size24 string + Size32 string + Undo string + UndoModifier string +} + +var lobbyKeyboardShortcuts = keys{ + Bucket: "w", + Pen: "q", + Rubber: "e", + Size8: "1", + Size16: "2", + Size24: "3", + Size32: "4", + Undo: "z", + UndoModifier: "ctrl", +} diff --git a/internal/frontend/lobby.go b/internal/frontend/lobby.go index 43458e78..60e1345d 100644 --- a/internal/frontend/lobby.go +++ b/internal/frontend/lobby.go @@ -18,6 +18,7 @@ type lobbyPageData struct { Translation *translations.Translation Locale string + Keys *keys } type lobbyJsData struct { @@ -26,6 +27,7 @@ type lobbyJsData struct { Translation *translations.Translation Locale string + Keys *keys } func (handler *SSRHandler) lobbyJs(writer http.ResponseWriter, request *http.Request) { @@ -35,6 +37,7 @@ func (handler *SSRHandler) lobbyJs(writer http.ResponseWriter, request *http.Req GameConstants: api.GameConstantsData, Translation: translation, Locale: locale, + Keys: &lobbyKeyboardShortcuts, } writer.Header().Set("Content-Type", "text/javascript") @@ -111,6 +114,7 @@ func (handler *SSRHandler) ssrEnterLobbyNoChecks( LobbyData: api.CreateLobbyData(handler.cfg, lobby), Translation: translation, Locale: locale, + Keys: &lobbyKeyboardShortcuts, } }) diff --git a/internal/frontend/lobby.js b/internal/frontend/lobby.js index 16c50ffe..aad368cb 100644 --- a/internal/frontend/lobby.js +++ b/internal/frontend/lobby.js @@ -151,7 +151,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 +171,19 @@ 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"}}: Q
' + - '{{.Translation.Get "fill-bucket"}}: W
' + - '{{.Translation.Get "eraser"}}: E
'; - - const controlsTextThree = document.createElement("p"); - controlsTextThree.innerHTML = - '{{printf (.Translation.Get "switch-pencil-sizes") "1" "4"}}'; + const size8Key = {{printf "%q" .Keys.Size8}}; + const size32Key = {{printf "%q" .Keys.Size32}}; + const undoModifierKeysString = {{printf "%q" .Keys.UndoModifier}}.split("+").map(k => `${k}`).join("+"); + const controlsText = document.createElement("div"); + controlsText.classList.add("help-controls-grid"); + controlsText.innerHTML = + ` + {{.Translation.Get "pencil"}}{{.Keys.Pen}} + {{.Translation.Get "fill-bucket"}}{{.Keys.Bucket}} + {{.Translation.Get "eraser"}}{{.Keys.Rubber}} + {{.Translation.Get "undo-help-message"}}${undoModifierKeysString}+{{.Keys.Undo}} + {{.Translation.Get "switch-pencil-sizes"}}${size8Key}-${size32Key} + `; const closeButton = createDialogButton('{{.Translation.Get "close"}}'); closeButton.addEventListener("click", () => { @@ -197,9 +198,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( @@ -1890,6 +1889,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 +1913,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 === {{printf "%q" .Keys.Pen}}) { toolButtonPen.click(); chooseTool(pen); - } else if (event.key === "w") { + } else if (event.key === {{printf "%q" .Keys.Bucket}}) { toolButtonFill.click(); chooseTool(fillBucket); - } else if (event.key === "e") { + } else if (event.key === {{printf "%q" .Keys.Rubber}}){ toolButtonRubber.click(); chooseTool(rubber); - } else if (event.key === "1") { + } else if (event.key === {{printf "%q" .Keys.Size8}}) { sizeButton8.click(); setLineWidth(8); - } else if (event.key === "2") { + } else if (event.key === {{printf "%q" .Keys.Size16}}) { sizeButton16.click(); setLineWidth(16); - } else if (event.key === "3") { + } else if (event.key === {{printf "%q" .Keys.Size24}}) { sizeButton24.click(); setLineWidth(24); - } else if (event.key === "4") { + } else if (event.key === {{printf "%q" .Keys.Size32}}) { sizeButton32.click(); setLineWidth(32); - } else if (event.key === "z" && event.ctrlKey) { + } else if (getModifierKey(event, "{{.Keys.UndoModifier}}") && event.key.toLowerCase() === {{printf "%q" .Keys.Undo }}) { undoAndSendEvent(); } } diff --git a/internal/frontend/resources/lobby.css b/internal/frontend/resources/lobby.css index cca140a9..dd859aca 100644 --- a/internal/frontend/resources/lobby.css +++ b/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; +} diff --git a/internal/frontend/templates/lobby.html b/internal/frontend/templates/lobby.html index edcf2dcb..994ecd9e 100644 --- a/internal/frontend/templates/lobby.html +++ b/internal/frontend/templates/lobby.html @@ -298,7 +298,7 @@
- {{.Translation.Get
@@ -308,7 +308,7 @@ name="tool-type">
{{.Translation.Get
@@ -316,7 +316,7 @@
- {{.Translation.Get
@@ -327,7 +327,7 @@ name="line-width" checked>
+ title="{{printf (.Translation.Get "change-pencil-size-to") "8"}} ({{.Keys.Size8}})">
@@ -336,7 +336,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "16"}} ({{.Keys.Size16}})">
@@ -345,7 +345,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "24"}} ({{.Keys.Size24}})">
@@ -354,7 +354,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "32"}} ({{.Keys.Size32}})">
@@ -368,7 +368,7 @@ diff --git a/internal/frontend/templating_test.go b/internal/frontend/templating_test.go index 62c52e16..7d94dd37 100644 --- a/internal/frontend/templating_test.go +++ b/internal/frontend/templating_test.go @@ -24,6 +24,7 @@ func Test_templateLobbyPage(t *testing.T) { GameConstants: api.GameConstantsData, }, Translation: translations.DefaultTranslation, + Keys: &lobbyKeyboardShortcuts, }) if err != nil { t.Errorf("Error templating: %s", err) diff --git a/internal/translations/ar.go b/internal/translations/ar.go index b0908b0d..69f873e1 100644 --- a/internal/translations/ar.go +++ b/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 diff --git a/internal/translations/de_DE.go b/internal/translations/de_DE.go index e82ce7d5..d05e4015 100644 --- a/internal/translations/de_DE.go +++ b/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 diff --git a/internal/translations/en_us.go b/internal/translations/en_us.go index fa00a44c..f66be7a1 100644 --- a/internal/translations/en_us.go +++ b/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" diff --git a/internal/translations/es_ES.go b/internal/translations/es_ES.go index 4d8fda93..b563a834 100644 --- a/internal/translations/es_ES.go +++ b/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 diff --git a/internal/translations/fa.go b/internal/translations/fa.go index e76c02ae..237e7291 100644 --- a/internal/translations/fa.go +++ b/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 diff --git a/internal/translations/fr_FR.go b/internal/translations/fr_FR.go index ec8fe0c8..ac566e4c 100644 --- a/internal/translations/fr_FR.go +++ b/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 diff --git a/internal/translations/he.go b/internal/translations/he.go index 5dfb4835..aa0800cc 100644 --- a/internal/translations/he.go +++ b/internal/translations/he.go @@ -127,8 +127,8 @@ func initHebrewTranslation() { translation.put("pencil", "עיפרון") translation.put("eraser", "מחק") translation.put("fill-bucket", "דלי") - translation.put("switch-tools-intro", "ניתן להחליך בין הכלים השונים על-ידי שימוש בקיצורים") - translation.put("switch-pencil-sizes", "ניתן לעבור בין גדלי העיפרון/מחק השונים על-ידי שימוש בכפתורים %s עד %s") + translation.put("switch-pencil-sizes", "גדלי כלים") + translation.put("undo-help-message", "ביטול שינוי אחרון") // Generic words // "close" as in "closing the window" diff --git a/internal/translations/pl.go b/internal/translations/pl.go index b3872722..0281e20a 100644 --- a/internal/translations/pl.go +++ b/internal/translations/pl.go @@ -109,7 +109,6 @@ func initPolishTranslation() { translation.put("pencil", "Ołówek") translation.put("eraser", "Gumka") translation.put("fill-bucket", "Wiadro") - translation.put("switch-tools-intro", "Możesz przełączać się pomiędzy narzędziami za pomocą skrótów") translation.put("switch-pencil-sizes", "Możesz też zmieniać rozmiary ołówka używają klawiszy %s do %s.") // Generic words From 12d2bfd4bf1694c351e83746d6fc094fd46aacfe Mon Sep 17 00:00:00 2001 From: Adi <6841988+DeepSpace2@users.noreply.github.com> Date: Thu, 23 Apr 2026 21:32:13 +0300 Subject: [PATCH 2/2] remove keys mapping from backend --- internal/frontend/keyboard_shortcuts.go | 25 ------ internal/frontend/lobby.go | 4 - internal/frontend/lobby.js | 82 ++++++++++--------- .../frontend/resources/keyboardManager.js | 23 ++++++ internal/frontend/templates/lobby.html | 20 ++--- internal/frontend/templating_test.go | 1 - 6 files changed, 75 insertions(+), 80 deletions(-) delete mode 100644 internal/frontend/keyboard_shortcuts.go create mode 100644 internal/frontend/resources/keyboardManager.js diff --git a/internal/frontend/keyboard_shortcuts.go b/internal/frontend/keyboard_shortcuts.go deleted file mode 100644 index a40b1caa..00000000 --- a/internal/frontend/keyboard_shortcuts.go +++ /dev/null @@ -1,25 +0,0 @@ -package frontend - -type keys struct { - Bucket string - Pen string - Rubber string - Size8 string - Size16 string - Size24 string - Size32 string - Undo string - UndoModifier string -} - -var lobbyKeyboardShortcuts = keys{ - Bucket: "w", - Pen: "q", - Rubber: "e", - Size8: "1", - Size16: "2", - Size24: "3", - Size32: "4", - Undo: "z", - UndoModifier: "ctrl", -} diff --git a/internal/frontend/lobby.go b/internal/frontend/lobby.go index 60e1345d..43458e78 100644 --- a/internal/frontend/lobby.go +++ b/internal/frontend/lobby.go @@ -18,7 +18,6 @@ type lobbyPageData struct { Translation *translations.Translation Locale string - Keys *keys } type lobbyJsData struct { @@ -27,7 +26,6 @@ type lobbyJsData struct { Translation *translations.Translation Locale string - Keys *keys } func (handler *SSRHandler) lobbyJs(writer http.ResponseWriter, request *http.Request) { @@ -37,7 +35,6 @@ func (handler *SSRHandler) lobbyJs(writer http.ResponseWriter, request *http.Req GameConstants: api.GameConstantsData, Translation: translation, Locale: locale, - Keys: &lobbyKeyboardShortcuts, } writer.Header().Set("Content-Type", "text/javascript") @@ -114,7 +111,6 @@ func (handler *SSRHandler) ssrEnterLobbyNoChecks( LobbyData: api.CreateLobbyData(handler.cfg, lobby), Translation: translation, Locale: locale, - Keys: &lobbyKeyboardShortcuts, } }) diff --git a/internal/frontend/lobby.js b/internal/frontend/lobby.js index aad368cb..40741da0 100644 --- a/internal/frontend/lobby.js +++ b/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; @@ -171,18 +174,16 @@ function showHelpDialog() { const controlsLabel = document.createElement("b"); controlsLabel.innerText = '{{.Translation.Get "controls"}}'; - const size8Key = {{printf "%q" .Keys.Size8}}; - const size32Key = {{printf "%q" .Keys.Size32}}; - const undoModifierKeysString = {{printf "%q" .Keys.UndoModifier}}.split("+").map(k => `${k}`).join("+"); + const undoModifierKeysString = keyboardManager.get("undoModifier").split("+").map(k => `${k}`).join("+"); const controlsText = document.createElement("div"); controlsText.classList.add("help-controls-grid"); controlsText.innerHTML = ` - {{.Translation.Get "pencil"}}{{.Keys.Pen}} - {{.Translation.Get "fill-bucket"}}{{.Keys.Bucket}} - {{.Translation.Get "eraser"}}{{.Keys.Rubber}} - {{.Translation.Get "undo-help-message"}}${undoModifierKeysString}+{{.Keys.Undo}} - {{.Translation.Get "switch-pencil-sizes"}}${size8Key}-${size32Key} + {{.Translation.Get "pencil"}}${keyboardManager.get("pen")} + {{.Translation.Get "fill-bucket"}}${keyboardManager.get("bucket")} + {{.Translation.Get "eraser"}}${keyboardManager.get("rubber")} + {{.Translation.Get "undo-help-message"}}${undoModifierKeysString}+${keyboardManager.get("undo")} + {{.Translation.Get "switch-pencil-sizes"}}${keyboardManager.get("size8")}-${keyboardManager.get("size32")} `; const closeButton = createDialogButton('{{.Translation.Get "close"}}'); @@ -451,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) { @@ -515,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; @@ -1913,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 === {{printf "%q" .Keys.Pen}}) { + if (event.key === keyboardManager.get("pen")) { toolButtonPen.click(); chooseTool(pen); - } else if (event.key === {{printf "%q" .Keys.Bucket}}) { + } else if (event.key === keyboardManager.get("bucket")) { toolButtonFill.click(); chooseTool(fillBucket); - } else if (event.key === {{printf "%q" .Keys.Rubber}}){ + } else if (event.key === keyboardManager.get("rubber")){ toolButtonRubber.click(); chooseTool(rubber); - } else if (event.key === {{printf "%q" .Keys.Size8}}) { + } else if (event.key === keyboardManager.get("size8")) { sizeButton8.click(); setLineWidth(8); - } else if (event.key === {{printf "%q" .Keys.Size16}}) { + } else if (event.key === keyboardManager.get("size16")) { sizeButton16.click(); setLineWidth(16); - } else if (event.key === {{printf "%q" .Keys.Size24}}) { + } else if (event.key === keyboardManager.get("size24")) { sizeButton24.click(); setLineWidth(24); - } else if (event.key === {{printf "%q" .Keys.Size32}}) { + } else if (event.key === keyboardManager.get("size32")) { sizeButton32.click(); setLineWidth(32); - } else if (getModifierKey(event, "{{.Keys.UndoModifier}}") && event.key.toLowerCase() === {{printf "%q" .Keys.Undo }}) { + } else if (getModifierKey(event, keyboardManager.get("undoModifier")) && event.key.toLowerCase() === keyboardManager.get("undo")) { undoAndSendEvent(); } } diff --git a/internal/frontend/resources/keyboardManager.js b/internal/frontend/resources/keyboardManager.js new file mode 100644 index 00000000..68ea925a --- /dev/null +++ b/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; diff --git a/internal/frontend/templates/lobby.html b/internal/frontend/templates/lobby.html index 994ecd9e..ec354786 100644 --- a/internal/frontend/templates/lobby.html +++ b/internal/frontend/templates/lobby.html @@ -298,7 +298,7 @@
- {{.Translation.Get
@@ -307,8 +307,8 @@
- {{.Translation.Get
@@ -316,7 +316,7 @@
- {{.Translation.Get
@@ -327,7 +327,7 @@ name="line-width" checked>
+ title="{{printf (.Translation.Get "change-pencil-size-to") "8"}} ">
@@ -336,7 +336,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "16"}} ">
@@ -345,7 +345,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "24"}} ">
@@ -354,7 +354,7 @@ name="line-width">
+ title="{{printf (.Translation.Get "change-pencil-size-to") "32"}} ">
@@ -368,7 +368,7 @@ @@ -382,7 +382,7 @@ - + diff --git a/internal/frontend/templating_test.go b/internal/frontend/templating_test.go index 7d94dd37..62c52e16 100644 --- a/internal/frontend/templating_test.go +++ b/internal/frontend/templating_test.go @@ -24,7 +24,6 @@ func Test_templateLobbyPage(t *testing.T) { GameConstants: api.GameConstantsData, }, Translation: translations.DefaultTranslation, - Keys: &lobbyKeyboardShortcuts, }) if err != nil { t.Errorf("Error templating: %s", err)