Widget:Agatha-decoder: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 2: Linha 2:
     .agatha__bookshelfs {
     .agatha__bookshelfs {
         position: relative;
         position: relative;
         background: url("https://image.ibb.co/njxx5o/back.jpg") 0 0 no-repeat;
         background: url("/images/3/36/Decod_agatha.png") 0 0 no-repeat;
background-size: contain;
         width: 386px;
         width: 386px;
         height: 424px;
         height: 424px;
Linha 34: Linha 35:
         <center>
         <center>
             <div class="agatha__bookshelfs">
             <div class="agatha__bookshelfs">
                 <img id="arrow" class="agatha__bookshelfArrow" src="https://image.ibb.co/j9rPko/arrow.png" alt="">
                 <img id="arrow" class="agatha__bookshelfArrow" src="/images/8/8d/Setagatha.png" alt="Seta que indica estante">
             </div>
             </div>
         </center>
         </center>

Edição atual tal como às 22h58min de 13 de agosto de 2023

<style>

   .agatha__bookshelfs {
       position: relative;
       background: url("/images/3/36/Decod_agatha.png") 0 0 no-repeat;

background-size: contain;

       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="/images/8/8d/Setagatha.png" alt="Seta que indica estante">
<input type="text" class="input-default" 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(code);
   })

}); </script>