Add icon for toggling pen pressure support

Author: Bios-Marcel

README.md

@@ -192,6 +192,7 @@ original file.
 * [Help Icon](https://www.iconfinder.com/icons/211675/help_icon) - Made by Ionicons
 * [Fullscreen Icon](https://www.iconfinder.com/icons/298714/screen_full_icon) - Made by Github
 * [Pencil Icon](https://github.com/twitter/twemoji/blob/8e58ae4/svg/270f.svg)
+* [Drawing Tablet Pen Icon](https://www.iconfinder.com/icons/8665767/pen_icon)
 * [Checkmark Icon](https://commons.wikimedia.org/wiki/File:Green_check_icon_with_gradient.svg)
 * [Fill Icon](https://commons.wikimedia.org/wiki/File:Circle-icons-paintcan.svg)
 * [Trash Icon](https://www.iconfinder.com/icons/315225/trash_can_icon) - Made by [Yannick Lung](https://yannicklung.com)

internal/frontend/lobby.js

@@ -122,6 +122,10 @@ const soundToggleLabel = document.getElementById("sound-toggle-label");
 let sound = localStorage.getItem("sound") !== "false";
 updateSoundIcon();
 
+const penToggleLabel = document.getElementById("pen-pressure-toggle-label");
+let penPressure = localStorage.getItem("penPressure") !== "false";
+updateTogglePenIcon();
+
 const set_dummy_word_hints = () => {
     // Dummy wordhint to prevent layout changes.
     applyWordHints([{
@@ -388,6 +392,21 @@ function updateSoundIcon() {
     }
 }
 
+function togglePenPressure() {
+    penPressure = !penPressure;
+    localStorage.setItem("penPressure", penPressure.toString());
+    updateTogglePenIcon();
+}
+document.getElementById("toggle-pen-pressure-button").addEventListener("click", togglePenPressure);
+
+function updateTogglePenIcon() {
+    if (penPressure) {
+        penToggleLabel.src = "{{.RootPath}}/resources/pen.svg?cache_bust={{.CacheBust}}";
+    } else {
+        penToggleLabel.src = "{{.RootPath}}/resources/no-pen.svg?cache_bust={{.CacheBust}}";
+    }
+}
+
 //The drawing board has a base size. This base size results in a certain ratio
 //that the actual canvas has to be resized accordingly too. This is needed
 //since not every client has the same screensize.
@@ -1452,7 +1471,7 @@ function pressureToLineWidth(event) {
     if (event.buttons !== 1 || event.pressure === 0 || event.pointerType === "touch") {
         return 0;
     }
-    if (event.pressure === 0.5 || !event.pressure) {
+    if (!penPressure || event.pressure === 0.5 || !event.pressure) {
         return localLineWidth;
     }
     return Math.ceil(event.pressure * 32);

internal/frontend/resources/no-pen.svg

@@ -50,6 +50,13 @@
                                         <img id="sound-toggle-label" class="header-button-image" />
                                         {{.Translation.Get "toggle-soundeffects"}}
                                     </button>
+                                    <button id="toggle-pen-pressure-button"
+                                        class="dialog-button menu-item header-button"
+                                        alt="{{.Translation.Get "toggle-pen-pressure"}}"
+                                        title="{{.Translation.Get "toggle-pen-pressure"}}">
+                                        <img id="pen-pressure-toggle-label" class="header-button-image" />
+                                        {{.Translation.Get "toggle-pen-pressure"}}
+                                    </button>
                                     <button id="name-change-button" class="dialog-button menu-item header-button"
                                         alt="{{.Translation.Get "change-your-name"}}"
                                         title="{{.Translation.Get "change-your-name"}}">

internal/frontend/resources/pen.svg

@@ -30,6 +30,7 @@ func initGermanTranslation() {
 
 	translation.put("round", "Runde")
 	translation.put("toggle-soundeffects", "Sound ein- / ausschalten")
+	translation.put("toggle-pen-pressure", "Tablet-Stiftdruck ein- / ausschalten")
 	translation.put("change-your-name", "Anzeigename")
 	translation.put("randomize", "Zufälliger Name")
 	translation.put("apply", "Anwenden")

internal/frontend/templates/lobby.html

@@ -28,6 +28,7 @@ func initEnglishTranslation() Translation {
 
 	translation.put("round", "Round")
 	translation.put("toggle-soundeffects", "Toggle soundeffects")
+	translation.put("toggle-pen-pressure", "Toggle pen pressure")
 	translation.put("change-your-name", "Nickname")
 	translation.put("randomize", "Randomize")
 	translation.put("apply", "Apply")