add a laser pointer to highlight a case

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index bf35e61e0a2d865553d2078cf9d672e295720713..86cddd596b3a76990ee5071e540e60219e1bfcaf 100644 (file)
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -165,3 +165,6 @@ msgstr "Vous avez changé la langue du plateau en {0}"
 
 msgid  "{0} changed the language of the board to {1}"
 msgstr "{0} a changé la langue du plateau en {1}"
+
+msgid  "Look at:"
+msgstr "Regardez ici :"

diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 72e1c1e3a52d39ad2921a1486a050664ab11dda2..5a2b4d1bd66df51c74e740fb921d056efd0561db 100644 (file)
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -171,3 +171,6 @@ msgstr ""
 
 msgid  "{0} changed the language of the board to {1}"
 msgstr ""
+
+msgid  "Look at:"
+msgstr ""

diff --git a/public/trivabble.css b/public/trivabble.css
index 1d8fbbf2f97a6fbdfc88abd86c060317b2658e61..4dae7431f89d03e6026495e64eb745a5422cec23 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -192,6 +192,10 @@ button:hover {
     cursor:pointer
 }
 
+.highlight {
+    background-color: #E3E;
+}
+
 .tile.tile-highlight {
     background-color: #FFF;
     font-weight: bold;

diff --git a/public/trivabble.js b/public/trivabble.js
index 90e9dcafeea092b279ee57db962bc90c5b9086e3..7bda1758781917b020cc5f42df4caaa1b6918837 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -42,6 +42,7 @@
     setConf("ENABLE_EVENT_SOURCE",  true);
     setConf("MAX_WEBSOCKET_ERRORS", 1);
     setConf("APP_PATH",             "");
+    setConf("DOUBLE_TAP_DURATION",  1000);
 
     const _ = (window.libD && libD.l10n) ? libD.l10n() : function (s) {
         return s;
@@ -683,6 +684,11 @@
 
                     return;
                 }
+
+                case "highlightTile": {
+                    localHighlightTile(msg.specialMsg.tile);
+                    infoMessage(msg.msg);
+                }
             }
         }
 
@@ -1435,6 +1441,41 @@
 
     }
 
+    function highlightTile(e) {
+        let id = this.id;
+        if (id === "") {
+            return;
+        }
+        if (e.type === "touchstart") {
+            if ((highlightTile.id !== id) || (Date.now() - highlightTile.date > Conf.DOUBLE_TAP_DURATION)) {
+                highlightTile.id = id;
+                highlightTile.date = Date.now();
+                return;
+            }
+        }
+        const letters = "ABCDEFGHIJKLMNO";
+        const col = (id % 15) + 1;
+        const row = letters[Math.floor(id / 15)];
+        sendCmds([{
+            cmd: "msg",
+            msg: _("Look at:") + " " + row + "" + col,
+            specialMsg: {
+                type: "highlightTile",
+                tile: id
+            }
+        }]);
+    }
+
+    function localHighlightTile(id) {
+        const placeholder = boardCells[id].getElementsByClassName("tile-placeholder")[0];
+        placeholder.classList.add("highlight");
+        setTimeout(function (x) { x.classList.remove("highlight"); }, 500, placeholder);
+        setTimeout(function (x) { x.classList.add("highlight"); }, 750, placeholder);
+        setTimeout(function (x) { x.classList.remove("highlight"); }, 1000, placeholder);
+        setTimeout(function (x) { x.classList.add("highlight"); }, 1250, placeholder);
+        setTimeout(function (x) { x.classList.remove("highlight"); }, 1500, placeholder);
+    }
+
     function initChat() {
         const btn = document.getElementById("chat-btn");
 
@@ -1658,6 +1699,9 @@
                 cell = document.createElement("td");
                 boardCells.push(cell);
                 board.lastChild.appendChild(cell);
+                cell.id = i * 15 + j;
+                cell.ondblclick = highlightTile;
+                cell.ontouchstart = highlightTile;
                 cell.appendChild(document.createElement("div"));
                 cell.lastChild.className = "tile-placeholder";