make durations (double tap and flash light) configurable

diff --git a/public/index.html b/public/index.html
index 4811d72d2c06e54d84077b99f68c647807ba9db4..30f3f9f789d8ceb501a22bd685854825fe72c8d8 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -50,10 +50,23 @@
                     <span data-l10n="text-content">Configuration window</span>
                     <span class="modal-button" id="modal-close-btn">&#215;</span>
                </h2>
-                <div id="prefs-sound">
+                <div id="prefs">
                     <p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                     <p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
                 </div>
+               <hr/>
+               <div id="prefs">
+                   <p><label>
+                <input type="number" size="4" min="500" max="5000" step="100" id="double-tap-duration"/>
+                <span data-l10n="text-content">Double tap duration</span>
+                <span data-l10n="text-content">(ms)</span>
+            </label></p>
+                   <p><label>
+                <input type="number" size="4" min="500" max="5000" step="100" id="flash-light-duration"/>
+                <span data-l10n="text-content">Flash light duration</span>
+                <span data-l10n="text-content">(ms)</span>
+            </label></p>
+               </div>
             </div>
         </div>
         

diff --git a/public/trivabble.css b/public/trivabble.css
index 4aae8bdb5cf926515d4b767f89409bf106288441..30423162bbd25539f298227cfdb5f281b1d83166 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -447,11 +447,11 @@ td.blink {
     }
 }
 
-#prefs-sound {
+#prefs {
     margin:1ex 0 0 0;
 }
 
-#prefs-sound p {
+#prefs p {
     margin:0;
     padding:0;
     font-size:small
@@ -461,7 +461,7 @@ td.blink {
     font-size:small;
 }
 
-#prefs-sound input, #prefs-sound label {
+#prefs input, #prefs label {
     vertical-align:middle
 }
 

diff --git a/public/trivabble.js b/public/trivabble.js
index b71c3f9d648cfabf0316201f9dad2d00e6d2a059..5d0be42a6c8fdfad4b2e75ac82e450357b37e36a 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1448,7 +1448,7 @@
             return;
         }
         if (e.type === "touchstart") {
-            if ((highlightTile.id !== id) || (Date.now() - highlightTile.date > Conf.DOUBLE_TAP_DURATION)) {
+            if ((highlightTile.id !== id) || (Date.now() - highlightTile.date > localStorage.doubleTapDuration)) {
                 highlightTile.id = id;
                 highlightTile.date = Date.now();
                 return;
@@ -1481,23 +1481,23 @@
         setTimeout(
             function (x) {
                 x.classList.remove("highlight");
-            }, Conf.FLASH_LIGHT_DURATION*1/3, placeholder);
+            }, localStorage.flashLightDuration*1/3, placeholder);
         setTimeout(
             function (x) {
                 x.classList.add("highlight");
-            }, Conf.FLASH_LIGHT_DURATION*1/2, placeholder);
+            }, localStorage.flashLightDuration*1/2, placeholder);
         setTimeout(
             function (x) {
                 x.classList.remove("highlight");
-            }, Conf.FLASH_LIGHT_DURATION*2/3, placeholder);
+            }, localStorage.flashLightDuration*2/3, placeholder);
         setTimeout(
             function (x) {
                 x.classList.add("highlight");
-            }, Conf.FLASH_LIGHT_DURATION*5/6, placeholder);
+            }, localStorage.flashLightDuration*5/6, placeholder);
         setTimeout(
             function (x) {
                 x.classList.remove("highlight");
-            }, Conf.FLASH_LIGHT_DURATION*1, placeholder);
+            }, localStorage.flashLightDuration*1, placeholder);
     }
 
     function initChat() {
@@ -1580,6 +1580,33 @@
         }
     }
 
+    function initLaserPointer() {
+
+        if (!Object.prototype.hasOwnProperty.call(localStorage, "doubleTapDuration")) {
+            localStorage.doubleTapDuration = Conf.DOUBLE_TAP_DURATION;
+        }
+        const doubleTapDuration = document.getElementById("double-tap-duration");
+        if (doubleTapDuration) {
+            doubleTapDuration.value = localStorage.doubleTapDuration;
+            doubleTapDuration.onchange = function () {
+                localStorage.doubleTapDuration =
+                    document.getElementById("double-tap-duration").value;
+            }
+        }
+
+        if (!Object.prototype.hasOwnProperty.call(localStorage, "flashLightDuration")) {
+            localStorage.flashLightDuration = Conf.FLASH_LIGHT_DURATION;
+        }
+        const flashLightDuration = document.getElementById("flash-light-duration");
+        if (flashLightDuration) {
+            flashLightDuration.value = localStorage.flashLightDuration;
+            flashLightDuration.onchange = function () {
+                localStorage.flashLightDuration =
+                    document.getElementById("flash-light-duration").value;
+            }
+        }
+    }
+
     function repromptName(f) {
         if (localStorage.trivabblePlayerName && localStorage.trivabblePlayerName.trim()) {
             f();
@@ -1799,6 +1826,7 @@
         initChat();
         initGame();
         initSound();
+        initLaserPointer();
     };
 
     trivabble.l10nError = trivabble.run;