Widget:Agatha-decoder

<style>

   .agatha__bookshelfs {
       position: relative;
       background: url("https://image.ibb.co/njxx5o/back.jpg") 0 0 no-repeat;
       width: 386px;
       height: 424px;
   }
   
   .agatha__bookshelfArrow {
       position: absolute;
       display: none;
       width: 46px;
   }

   .agatha__bookshelfArrow.active {
       display: block;
       animation: blink 1s ease .2s backwards infinite;        
   }

   @keyframes blink {
       0% {
           opacity: 1;
       }
       50% {
           opacity: 0;
       }
       100% {
           opacity: 1;
       }
   }

</style>

   <form data-target="bookshelfForm">

               <img id="arrow" class="agatha__bookshelfArrow" src="https://image.ibb.co/j9rPko/arrow.png" alt="">

       <input type="text" name="agatha__bookshelfCode">

       <button type="submit">
           decode
       </button>
   </form>    

<script defer> function decode(code) {

   let actualPos = null;
   const chars = code.split("");

   chars.forEach(char => {
       if (actualPos == null) {
           actualPos = getInitialPos(char);
       } else {
           switch (char) {
               case "M": // Cima
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, -1);
                   break;
               case "Y": // Baixo
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, 1);
                   break;
               case "W": // Direita
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, 1);
                   break;
               case "G": //Esquerda
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, -1);
                   break;
               case "A": // Embaixo à direita
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, 1);
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, 1);
                   break;
               case "K": // Em cima à direita
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, 1);
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, -1);
                   break;
               case "F": // Em cima à esquerda
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, -1);
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, -1);
                   break;
               case "Z": // Embaixo à esquerda
                   actualPos.x = calcWithBookShelfClamp(actualPos.x, -1);
                   actualPos.y = calcWithBookShelfClamp(actualPos.y, 1);
                   break;
               case "B": // Copy Back
                   // actualPos.x = calcWithBookShelfClamp(-1);
                   // actualPos.y = calcWithBookShelfClamp(1);
                   break;
           }
       }
   });

   document.querySelector("#arrow").classList.add("active");
   const arrowPos = getArrowPos(actualPos);
   document.querySelector("#arrow").style.top = arrowPos.top;
   document.querySelector("#arrow").style.right = arrowPos.right;

   return actualPos;

}

function getInitialPos(char) {

   switch (char) {
       case "F":
           return { x: 0, y: 0 };
       case "K":
           return { x: 3, y: 0 };
       case "Z":
           return { x: 0, y: 3 };
       case "A":
           return { x: 3, y: 3 };
   }

}

const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

function getArrowPos(pos) {

   const stylePos = { top: "0", right: "0" };

   switch (pos.y) {
       case 0:
           stylePos.top = "13%";
           break;
       case 1:
           stylePos.top = "38%";
           break;
       case 2:
           stylePos.top = "63%";
           break;
       case 3:
           stylePos.top = "87%";
           break;
   }

   switch (pos.x) {
       case 0:
           stylePos.right = "83%";
           break;
       case 1:
           stylePos.right = "70%";
           break;
       case 2:
           stylePos.right = "16%";
           break;
       case 3:
           stylePos.right = "4%";
           break;
   }

   return stylePos;

}

function calcWithBookShelfClamp(val, inc) {

   // const temp = clamp(val + inc, 0, 3);
   const temp = val + inc;
   return temp > 0 && temp <= 3 ? temp : temp < 0 ? 3 : 0;

}

document.addEventListener("DOMContentLoaded", function () {

   document.querySelector("[data-target='bookshelfForm']").addEventListener("submit", (e) => {
       e.preventDefault();
       const code = document.querySelector("input[name='agatha__bookshelfCode']").value;
       decode("");
   })

}); </script>