Feature: click to show path

rmccrear · Mar 5, 2024 · 124db2a · 124db2a
1 parent 589a030
commit 124db2a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/app/css/partials/board.css b/app/css/partials/board.css
@@ -26,6 +26,32 @@ input#message:focus {
   border: 2px solid #73ad21;
   padding: 2px;
 }
+.code-popup {
+  visibility: hidden;
+  display: inline-block;
+  width: 5em;
+  text-align: center;
+  background: black;
+  border:solid 2px #73ad21;
+  border-radius: 6px;
+  position: absolute;
+  bottom: -1em;
+  z-index: 1;
+  color: #b44f47;
+  padding: .2em;
+}
+.encoded-token:hover .code-popup {
+  visibility: visible;
+}
+
+.highlight-token {
+  color: #b44f47;
+}
+
+.encoded-token {
+  cursor: pointer;
+  position: relative;
+}
 
 #board {
   height: 800px;

diff --git a/app/write-message.js b/app/write-message.js
@@ -108,7 +108,8 @@ function resetMessage(message) {
   const digitsStr = DIGITS[0] + DIGITS[1];
   const displayMessage = convertDigits(code, INTERNAL_DIGITS, DIGITS);
   const displayMessageNoSpaces = displayMessage.split(" ").join("");
-  $("#code").text(displayMessage);
+  // $("#code").text(displayMessage);
+  setupDisplay(code);
   const encodedmessage = code.split(" ").join(""); // remove spaces
   currentEncodedMessage = encodedmessage;
   const bitLength = currentEncodedMessage.length || 0;
@@ -202,7 +203,23 @@ const onReady = function () {
     } else {
       $("#code").removeClass("super-shadow");
     }
-  })
+  });
+  $("#code").on("click", function(event) {
+    if(event.target && $(event.target).data("code")) {
+      const code = $(event.target).data("code")
+      console.log(code);
+      const decodedTiles = board.decodeMessage(code, true);
+      console.log(decodedTiles);
+      if(decodedTiles) {
+        $(".encoded-token").removeClass("highlight-token");
+        $(event.target).addClass("highlight-token");
+        const letter = decodedTiles[0].l;
+        const tile = decodedTiles[0];
+        board.setCurrNodeTile(tile);
+        repaint(board);
+      }
+    } 
+  });
 };
 
 const resetCopyButtonText = function(){
@@ -214,6 +231,21 @@ const changeDigitSystem = function(digits) {
   resetMessage();
 }
 
+function setupDisplay(encodedMessageWithSpaces) {
+  let tokens = encodedMessageWithSpaces.split(" ");
+  let message = board.decodeMessage(tokens.join(""));
+  let elms = [];
+  for(let i=0; i<tokens.length; i++) {
+    const internalCode = tokens[i];
+    const encodedLetter = convertDigits(internalCode, INTERNAL_DIGITS, DIGITS);
+    elms.push(`<span
+      class="encoded-token"
+      data-code="${internalCode}"> ${encodedLetter} <span class="code-popup">${message[i]}:  ${encodedLetter}</span></span>`);
+  }
+  console.log(elms.join(""))
+  $("#code").html(elms.join(""));
+}
+
 function convertDigits(encodedMessage, fromDigits, toDigits) {
   const chars = [...encodedMessage]; // for unicode emoji
   const recodedMessage = [];