Widget:Agatha-decoder: mudanças entre as edições
Ir para navegação
Ir para pesquisar
(Criou página com '<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% {...') |
Sem resumo de edição |
||
(6 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(" | 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=" | <img id="arrow" class="agatha__bookshelfArrow" src="/images/8/8d/Setagatha.png" alt="Seta que indica estante"> | ||
</div> | </div> | ||
</center> | </center> | ||
<input type="text" name="agatha__bookshelfCode"> | <center> | ||
<div style="width:28rem;margin-top:.75rem;"><input type="text" class="input-default" name="agatha__bookshelfCode"></div> | |||
<button type="submit"> | <button type="submit"> | ||
decode | decode | ||
</button> | </button> | ||
</center> | |||
</form> | </form> | ||
Linha 160: | Linha 163: | ||
e.preventDefault(); | e.preventDefault(); | ||
const code = document.querySelector("input[name='agatha__bookshelfCode']").value; | const code = document.querySelector("input[name='agatha__bookshelfCode']").value; | ||
decode( | decode(code); | ||
}) | }) | ||
}); | }); | ||
</script> | </script> |
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>