Fix support for Safari 8+

public/index.html

@@ -99,7 +99,9 @@
         </div>
 
         <div id="panel" class="panel">
-            <button id="btn-settings" data-l10n="text-content">Settings</button>
+            <div id="btn-settings-wrapper">
+                <button id="btn-settings" data-l10n="text-content">Settings</button>
+            </div>
             <div id="bag"></div>
             <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
             <table id="participants">

public/trivabble.css

@@ -79,6 +79,9 @@ html, #board, [draggable], .tile {
     width: 100%;
     top: 0px;
     left: 0px;
+    display: -webkit-flex;
+    -webkit-justify-content: center;
+    -webkit-flex-direction: column;
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -346,7 +349,7 @@ td.blink {
 }
 
 #panel {
-    -webkit-justify-content:center;
+    /* -webkit-justify-content:center; does not look good */
     justify-content:space-between;
     text-align:center;
 }
@@ -424,6 +427,7 @@ td.blink {
 }
 
 #participants .score-cell button {
+    min-height:4ex; /* for old webkit */
     min-height: auto;
     font-size:x-small;
     padding:0 1ex;
@@ -526,6 +530,7 @@ td.blink {
     background-color: rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
+    -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
     transform: scale(1.1);
     transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
     z-index: 1;
@@ -580,6 +585,7 @@ td.blink {
 .show-modal {
     opacity: 1;
     visibility: visible;
+    -webkit-transition: visibility 0s linear 0s, opacity 0.25s 0s;
     transform: scale(1.0);
     transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
 }
@@ -612,10 +618,15 @@ td.blink {
     font-size:small;
     border-radius:3px;
     border:none;
-    margin:0 0 0 auto;
+    margin:0;
     min-height: 2em;
 }
 
+#panel #btn-settings-wrapper {
+    text-align:right;
+}
+
+
 #btn-settings:before {
     content: "⚙️ "
 }
@@ -639,6 +650,10 @@ td.blink {
 #help-box {
     margin-left:1ex;
     margin-top:1ex;
+    display:-webkit-flex;
+    -webkit-flex-direction:column;
+    -webkit-justify-content:center;
+    -webkit-align-items:center;
     align-items:center;
     display:flex;
     flex-direction:column;
@@ -646,11 +661,14 @@ td.blink {
 }
 
 #help-box-inner {
+    display:-webkit-flex;
+    -webkit-flex-direction:row;
     display:flex;
     flex-direction:row;
     min-height:2em;
     border-top:1px solid gray;
     border-bottom:1px solid gray;
+    -webkit-align-items:center;
     align-items:center;
 }
 
@@ -705,6 +723,8 @@ button#next-help-msg:hover {
 }
 
 #panel-buttons {
+    display:-webkit-flex;
+    -webkit-flex-direction: column;
     display:flex;
     flex-direction:column;
 }

public/trivabble.js

@@ -864,7 +864,7 @@
         const content = document.createElement("div");
         content.appendChild(document.createElement("span"));
         content.lastChild.className = "info";
-        content.lastChild.textContent = info;
+        content.lastChild.textContent = info || "";
         chatMessage("", content);
         return content;
     }
@@ -1829,6 +1829,11 @@
         }
     }
 
+    function getRowIndex(tr) {
+        // tr.rowIndex is -1 on WebKit-based browsers in Debian Jessie, hence this function
+        return [].indexOf.call(tr.parentNode.rows, tr);
+    }
+
     function triggerFlashLight(cell) {
         if (!cell) {
             return;
@@ -1836,7 +1841,7 @@
 
         const letters = "ABCDEFGHIJKLMNO";
         const col = cell.cellIndex - 1;
-        const row = cell.parentNode.rowIndex - 1;
+        const row = getRowIndex(cell.parentNode) - 1;
 
         sendCmds([{
             cmd: "msg",
@@ -1852,7 +1857,7 @@
         const tilePlaceholder = getParentWithClass(e.target, "tile-placeholder");
         if (tilePlaceholder) {
             const cell = tilePlaceholder.parentNode;
-            if (cell.cellIndex && cell.parentNode.rowIndex) {
+            if (cell.cellIndex && getRowIndex(cell.parentNode)) {
                 return cell;
             }
         }
@@ -2052,7 +2057,8 @@
             };
         }
 
-        if (!document.documentElement.style.setProperty && document.getElementById("flash-light-color-p")) {
+        // thx https://stackoverflow.com/a/26633844
+        if (!(window.CSS && CSS.supports && CSS.supports("color", "var(--v)")) && document.getElementById("flash-light-color-p")) {
             document.getElementById("flash-light-color-p").hidden = true;
             return;
         }
@@ -2240,14 +2246,14 @@
             board.rows[0].appendChild(document.createElement("th"));
             board.rows[0].lastChild.textContent = i + 1;
 
-            board.appendChild(document.createElement("tr"));
-            board.lastChild.appendChild(document.createElement("th"));
-            board.lastChild.lastChild.textContent = letters[i];
+            const row = board.insertRow(-1);
+            row.appendChild(document.createElement("th"));
+            row.lastChild.textContent = letters[i];
 
             for (let j = 0; j < 15; j++) {
                 cell = document.createElement("td");
                 boardCells.push(cell);
-                board.lastChild.appendChild(cell);
+                row.appendChild(cell);
 
                 cell.appendChild(document.createElement("div"));
                 cell.lastChild.className = "tile-placeholder";
@@ -2256,7 +2262,7 @@
                     specialCell("doubleWord", board.lastChild.lastChild);
                     cell = board.lastChild.lastChild.getElementsByClassName("special-cell-label")[0];
                     cell.textContent = "★";
-                    board.lastChild.lastChild.id = "center-cell";
+                    row.lastChild.id = "center-cell";
                 } else if (i % 7 === 0 && j % 7 === 0) {
                     specialCell("tripleWord", board.lastChild.lastChild);
                 } else if ((i === j || i + j === 14) && (i < 5 || i > 9)) {
@@ -2268,21 +2274,21 @@
                 }
             }
 
-            board.lastChild.appendChild(document.createElement("th"));
-            board.lastChild.lastChild.textContent = letters[i];
+            row.appendChild(document.createElement("th"));
+            row.lastChild.textContent = letters[i];
         }
 
         board.rows[0].appendChild(board.rows[0].cells[0].cloneNode(false));
 
-        board.appendChild(document.createElement("tr"));
-        board.lastChild.appendChild(board.rows[0].cells[0].cloneNode(false));
+        const row = board.insertRow(-1);
+        row.appendChild(board.rows[0].cells[0].cloneNode(false));
 
         for (let i = 0; i < 15; i++) {
-            board.lastChild.appendChild(document.createElement("th"));
-            board.lastChild.lastChild.textContent = i + 1;
+            row.appendChild(document.createElement("th"));
+            row.lastChild.textContent = i + 1;
         }
 
-        board.lastChild.appendChild(board.rows[0].cells[0].cloneNode(false));
+        row.appendChild(board.rows[0].cells[0].cloneNode(false));
 
         if (getSetting("trivabbleGameNumber")) {
             document.getElementById("number").textContent = getSetting("trivabbleGameNumber");

server/trivabble-server.js

@@ -29,6 +29,7 @@
 
 const port = parseInt(process.env.TRIVABBLE_PORT || "3000");
 const host = process.env.TRIVABBLE_HOST || "localhost";
+const disableCSP = process.env.DISABLE_CSP || false;
 
 const SAVE_TIMEOUT = 5000;
 const KEEP_ALIVE = 30000;
@@ -998,7 +999,24 @@ 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.setHeader(
+                            "Content-Security-Policy",
+                            "default-src 'none'; " +
+                            "script-src 'self'; " +
+                            "style-src 'self'; " +
+                            "img-src 'self'; " +
+                            (disableCSP ? "" : "connect-src 'self' " + (
+                                // uzbl (like Safari 9 / iPad 2) does not like unsecure websockets on the
+                                // same port with connect-src 'self'
+                                // See https://github.com/w3c/webappsec-csp/issues/7
+                                "ws://" + host + ":" + port + " " +
+                                "ws://127.0.0.1:" + port + " " +
+                                "ws://localhost:" + port + "; "
+                            )) +
+                            "media-src 'self'"
+                        );
+
                         response.end(contents);
                     });
                 } else {