get rid of inline styles

diff --git a/public/index.html b/public/index.html
index f7e910c48163e25f6e664539a93ddf2a3b3ccede..0d956d1a9d01443dcc44a934160a63d0a547e89c 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
                         <option value="ro">Română</option>
                     </select>
                 </p>
-                <p id="board-lang-selection" style="display:none">
+                <p id="board-lang-selection" hidden="true">
                     <label for="board-lang" data-l10n="text-content">Board language: </label>
                     <select id="board-lang">
                         <option value="fr">French</option>
@@ -51,10 +51,10 @@
                 <div id="prefs">
                     <p><label><input type="checkbox" id="tiles-sound" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                     <p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
-                    <p id="enable-spell-checker-outer" style="display:none"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
+                    <p id="enable-spell-checker-outer" hidden="true"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
                            <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
                            <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
-                    <p><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
+                    <p id="flash-light-color-p"><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
                        </div>
             </div>
         </div>
@@ -79,22 +79,22 @@
             <div id="panel-buttons">
                 <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
                 <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
-                <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
+                <button id="check-spelling" class="minibutton" data-l10n="text-content" hidden="true">Check spelling for new words</button>
             </div>
             <div id="help-box">
                 <p id="help-box-title" data-l10n="text-content">Tip!</p>
                 <div id="help-box-inner">
                     <div id="help-messages">
-                        <p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
-                        <p data-l10n="text-content" style="display:none">Click on someone's score&#10;to change it.</p>
-                        <p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
-                        <p data-l10n="text-content" style="display:none">Click on (+) to increase someone's score.</p>
-                        <p data-l10n="text-content" style="display:none">Show a cell to everyone by double-clicking on it.</p>
+                        <p data-l10n="text-content" hidden="true">Click on the bag to take one tile.</p>
+                        <p data-l10n="text-content" hidden="true">Click on someone's score&#10;to change it.</p>
+                        <p data-l10n="text-content" hidden="true">Who's turn? Click on the Turn button!</p>
+                        <p data-l10n="text-content" hidden="true">Click on (+) to increase someone's score.</p>
+                        <p data-l10n="text-content" hidden="true">Show a cell to everyone by double-clicking on it.</p>
                     </div>
                     <button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
                 </div>
             </div>
-            <p id="info-spell-checking" style="display:none;"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
+            <p id="info-spell-checking" hidden="true"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
         </div>
     </body>
 </html>

diff --git a/public/trivabble.css b/public/trivabble.css
index 3d89dd25fda2781d09ff0b046211326d8756ba9d..b350a445588ecd17c72b1ad0dee7ff0133788dce 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -1,3 +1,7 @@
+ :root {
+    --flash-light-color: #ee6633;
+}
+
 #board {
     border-collapse:collapse;
 }
@@ -226,15 +230,16 @@ button[disabled=disabled], button:disabled {
     }
 }
 
-.laser-highlighting .tile {
+.flash-light-highlighting .tile {
     transition:none;
 }
 
-.laser-highlight {
-    background-color: #E3E;
+.flash-light-highlight {
+    background-color: #ee6633;
+    background-color: var(--flash-light-color);
 }
 
-.laser-highlight .tile:not(.tile-highlight) {
+.flash-light-highlight .tile:not(.tile-highlight) {
     background-color: inherit;
 }
 

diff --git a/public/trivabble.js b/public/trivabble.js
index 33e497dd765dab2ac9e48b864bc126b6b78dd36d..1441202de8ed8684267b0c7d27b13dc44c2dd36a 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -696,7 +696,7 @@
     }
 
     function touchStartTilePreventDefault(e) {
-        laserTouch(e);
+        flashLightTouch(e);
         return preventDefault(e);
     }
 
@@ -1827,7 +1827,7 @@
         }
     }
 
-    function triggerLaser(cell) {
+    function triggerFlashLight(cell) {
         if (!cell) {
             return;
         }
@@ -1858,39 +1858,39 @@
         return null;
     }
 
-    function laserDblClick(e) {
-        triggerLaser(getCellFromEvent(e));
+    function flashLightDblClick(e) {
+        triggerFlashLight(getCellFromEvent(e));
     }
 
-    function laserTouch(e) {
+    function flashLightTouch(e) {
         const cell = getCellFromEvent(e);
 
         if (!cell) {
             return;
         }
 
-        if ((laserTouch.last !== cell) || (Date.now() - laserTouch.date > getSetting("DOUBLE_TAP_DURATION"))) {
-            laserTouch.last = cell;
-            laserTouch.date = Date.now();
+        if ((flashLightTouch.last !== cell) || (Date.now() - flashLightTouch.date > getSetting("DOUBLE_TAP_DURATION"))) {
+            flashLightTouch.last = cell;
+            flashLightTouch.date = Date.now();
             return;
         }
 
-        triggerLaser(cell);
+        triggerFlashLight(cell);
     }
 
     function localHighlightCell(id) {
         const placeholder = boardCells[id].getElementsByClassName("tile-placeholder")[0];
-        placeholder.classList.add("laser-highlighting");
-        placeholder.classList.add("laser-highlight");
+        placeholder.classList.add("flash-light-highlighting");
+        placeholder.classList.add("flash-light-highlight");
 
         const sixthFlashLightDuration = getSetting("FLASH_LIGHT_DURATION") / 6;
 
         function on() {
-            placeholder.classList.add("laser-highlight");
+            placeholder.classList.add("flash-light-highlight");
         }
 
         function off() {
-            placeholder.classList.remove("laser-highlight");
+            placeholder.classList.remove("flash-light-highlight");
         }
 
         setTimeout(off, sixthFlashLightDuration);
@@ -1901,7 +1901,7 @@
 
         setTimeout(
             function () {
-                placeholder.classList.remove("laser-highlighting");
+                placeholder.classList.remove("flash-light-highlighting");
             },
             sixthFlashLightDuration * 6
         );
@@ -1997,18 +1997,18 @@
 
     function initSpellChecker() {
         if (getSetting("ENABLE_SPELL_CHECKER")) {
-            document.getElementById("enable-spell-checker-outer").style.display = "";
+            document.getElementById("enable-spell-checker-outer").hidden = false;
         }
 
         document.getElementById("enable-spell-checker").onclick = spellCheckerSettingChecked;
 
         if (!getSetting("ENABLE_SPELL_CHECKER") || !getSetting("spellCheckerEnabled")) {
-            document.getElementById("check-spelling").style.display = "none";
+            document.getElementById("check-spelling").hidden = true;
             document.getElementById("enable-spell-checker").checked = false;
-            document.getElementById("info-spell-checking").style.display = "none";
+            document.getElementById("info-spell-checking").hidden = true;
         } else {
-            document.getElementById("check-spelling").style.display = "";
-            document.getElementById("info-spell-checking").style.display = "";
+            document.getElementById("check-spelling").hidden = false;
+            document.getElementById("info-spell-checking").hidden = false;
             document.getElementById("enable-spell-checker").checked = true;
         }
     }
@@ -2030,9 +2030,9 @@
         return values.length - 1;
     }
 
-    function initLaserPointer() {
-        document.body.addEventListener("dblclick", laserDblClick);
-        document.body.addEventListener("touchstart", laserTouch);
+    function initFlashLight() {
+        document.body.addEventListener("dblclick", flashLightDblClick);
+        document.body.addEventListener("touchstart", flashLightTouch);
 
         const doubleTapDuration = document.getElementById("double-tap-duration");
         if (doubleTapDuration) {
@@ -2058,15 +2058,18 @@
             };
         }
 
+        if (!document.documentElement.style.setProperty && document.getElementById("flash-light-color-p")) {
+            document.getElementById("flash-light-color-p").hidden = true;
+            return;
+        }
+
         const flashLightColor = document.getElementById("flash-light-color");
         if (flashLightColor) {
-            console.log(getSetting("FLASH_LIGHT_COLOR"));
             flashLightColor.value = getSetting("FLASH_LIGHT_COLOR");
             flashLightColor.onchange = function () {
-                setSetting("FLASH_LIGHT_COLOR", document.getElementById("flash-light-color").value);
-                const style = document.createElement("style");
-                style.textContent = ".laser-highlight {background-color: " + getSetting("FLASH_LIGHT_COLOR") + ";}";
-                document.body.appendChild(style);
+                const color = document.getElementById("flash-light-color").value;
+                setSetting("FLASH_LIGHT_COLOR", color);
+                document.documentElement.style.setProperty("--flash-light-color", color);
             };
             flashLightColor.onchange();
         }
@@ -2081,13 +2084,13 @@
         if (helpMessages) {
             const listOfMessages = helpMessages.getElementsByTagName("p");
             if ((nextHelpMessage.index >= 0) && (nextHelpMessage.index < listOfMessages.length)) {
-                listOfMessages[nextHelpMessage.index].style.display = "none";
+                listOfMessages[nextHelpMessage.index].hidden = true;
             }
             nextHelpMessage.index++;
             if (nextHelpMessage.index === listOfMessages.length) {
                 nextHelpMessage.index = 0;
             }
-            listOfMessages[nextHelpMessage.index].style.display = "";
+            listOfMessages[nextHelpMessage.index].hidden = false;
         }
     }
 
@@ -2127,7 +2130,7 @@
         if (!boardLangSelect) {
             const boardLangSelection = document.getElementById("board-lang-selection");
             boardLangSelect = boardLangSelection.querySelector("select");
-            boardLangSelection.style.display = "";
+            boardLangSelection.hidden = false;
         }
 
         boardLangSelect.textContent = "";
@@ -2313,7 +2316,7 @@
         initGame();
         initSound();
         initSpellChecker();
-        initLaserPointer();
+        initFlashLight();
         nextHelpMessage();
     };
 

diff --git a/server/trivabble-server.js b/server/trivabble-server.js
index 7421b2523775525e28599299532e3c06cff4e467..890bb854b81035c8e80ea3959e648297dadf7aca 100644 (file)
--- a/server/trivabble-server.js
+++ b/server/trivabble-server.js
@@ -998,6 +998,7 @@ function handleRequest(request, response) {
                         }
 
                         response.setHeader("Content-Type", mime);
+                        response.setHeader("Content-Security-Policy", "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; media-src 'self'");
                         response.end(contents);
                     });
                 } else {