adiciona tags de invalidacao

mustache1up · Sep 6, 2023 · 70bfe81 · 70bfe81
1 parent 21f631d
commit 70bfe81
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 25 deletions.
diff --git a/public/bla.json b/public/bla.json
diff --git a/src/App.vue b/src/App.vue
@@ -16,6 +16,7 @@ import Teclado from "./components/Teclado.vue";
 import Tabuleiro from "./components/Tabuleiro.vue";
 import palavrasValidas from "./assets/palavrasValidas.js";
 import normaliza from "./assets/normaliza.js";
+import { next } from "lodash-es";
 
 const estado = reactive({
   palavra: "??????",
@@ -33,12 +34,13 @@ const tentativaVazia = () => {
     letras: new Array(6).fill(""),
     resultado: new Array(6).fill(""),
     sacode: new Array(6).fill(false),
+    invalida: new Array(6).fill(false),
   };
 };
 
 estado.palavra = palavrasValidas.palavrasValidas[Math.floor(Math.random()*palavrasValidas.palavrasValidas.length)];
 estado.palavra = estado.palavra.toUpperCase();
-// estado.palavra = "SACRAS";
+estado.palavra = "SACRAS";
 estado.letrasCerta = normaliza(estado.palavra);
 
 estado.tentativas = Array.from({length: estado.maxTentativas}, () => tentativaVazia());
@@ -52,11 +54,17 @@ const backspace = () => {
     return;
   }
   const indiceLetraSelecionada = estado.indiceLetraSelecionada;
-  tentativaAtual.value.letras[indiceLetraSelecionada] = "";
+  tentativaAtual.value.letras[indiceLetraSelecionada] = " ";
 
   tentativaAtual.value.sacode[indiceLetraSelecionada] = false;
+  console.log(indiceLetraSelecionada + " -> false");
   nextTick(() => {
-    tentativaAtual.value.sacode[indiceLetraSelecionada] = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        tentativaAtual.value.sacode[indiceLetraSelecionada] = true;
+        console.log(indiceLetraSelecionada + " -> true");
+      });
+    });
   });
 
   estado.indiceLetraSelecionada = _.clamp(indiceLetraSelecionada - 1, 0, tentativaAtual.value.letras.length - 1);
@@ -70,13 +78,17 @@ const letra = (letra) => {
   tentativaAtual.value.letras[indiceLetraSelecionada] = letra;
 
   tentativaAtual.value.sacode[indiceLetraSelecionada] = false;
+  console.log(indiceLetraSelecionada + " -> false");
   nextTick(() => {
-    tentativaAtual.value.sacode[indiceLetraSelecionada] = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        tentativaAtual.value.sacode[indiceLetraSelecionada] = true;
+        console.log(indiceLetraSelecionada + " -> true");
+      });
+    });
   });
 
   estado.indiceLetraSelecionada = _.clamp(indiceLetraSelecionada + 1, 0, tentativaAtual.value.letras.length - 1);
-
-
 };
 
 watch(() => estado.indiceLetraSelecionada, (indice) => {
@@ -101,15 +113,26 @@ const fazTentativa = () => {
 
   const palavraSemAcentuacao = normaliza(estado.palavra);
 
+  const tentativaAtualValue = tentativaAtual.value;
+  tentativaAtualValue.invalida = new Array(6).fill(false);
+  tentativaAtualValue.sacode = new Array(6).fill(false);
+
   if (!palavrasValidas.palavrasValidas.map((s) => normaliza(s)).includes(palavraTentativa)) {
-    alert("A tentativa precisa constar no dicionário.\n\nTente outra palavra.");
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        tentativaAtualValue.invalida = new Array(6).fill(true);
+        console.log("tentativaAtualValue.invalida = new Array(6).fill(true);");
+      });
+    });
+    console.log("A tentativa precisa constar no dicionário.\n\nTente outra palavra.");
     return;
   }
 
-  tentativaAtual.value.resultado = computaResultado(tentativaAtual.value.letras, [...estado.letrasCerta]);
+  tentativaAtualValue.resultado = computaResultado(tentativaAtualValue.letras, [...estado.letrasCerta]);
 
-  tentativaAtual.value.letras.forEach((caractere, indice) => {
-    const resultado = tentativaAtual.value.resultado[indice];
+  tentativaAtualValue.letras.forEach((caractere, indice) => {
+    const resultado = tentativaAtualValue.resultado[indice];
     if(resultado === "C") {
       estado.statusLetras[caractere] = resultado;
       return;
@@ -124,20 +147,16 @@ const fazTentativa = () => {
     }
   });
 
-  const x = tentativaAtual.value;
-  x.sacode = new Array(6).fill(false);
-  nextTick(() => {
-    x.sacode = new Array(6).fill(true);
-  });
+  tentativaAtualValue.sacode = new Array(6).fill(true);
 
   if (palavraTentativa === palavraSemAcentuacao) {
-    alert("ACERTOU! A palavra é " + estado.palavra);
+    console.log("ACERTOU! A palavra é " + estado.palavra);
     estado.indiceTentativaAtual = undefined;
     return;
   }
 
   if (estado.indiceTentativaAtual == estado.maxTentativas - 1) {
-    alert("Acabaram as tentativas!");
+    console.log("Acabaram as tentativas!");
     estado.indiceTentativaAtual = undefined;
     return;
   }

diff --git a/src/components/Tentativa.vue b/src/components/Tentativa.vue
@@ -3,7 +3,7 @@
     <div v-for="(letra, indiceLetra) in letras" :key="indiceLetra" 
       class="letra text-5xl h-16 w-16 text-center m-[2px] p-[5px] font-mplus-black
         text-stone-800 border-[3px] border-stone-900 rounded-md" 
-      :class="{ pulse: letra.sacode }" 
+      :class="{ pulse: letra.sacode, invalida: letra.invalida }"
       :data-selected="indiceTentativa === estado.indiceTentativaAtual && estado.indiceLetraSelecionada == indiceLetra ? 1 : 0"
       :data-status="letra.resultado ? letra.resultado : indiceTentativa === estado.indiceTentativaAtual ? '' : 'O'" 
       @click="estado.indiceLetraSelecionada=indiceLetra"
@@ -18,9 +18,9 @@ const estado = inject("estado");
 const props = defineProps(["tentativa", "indiceTentativa"]);
 
 const letras = computed(() => {
-  var zip = _.zip(props.tentativa.letras, props.tentativa.resultado, props.tentativa.sacode);
-  var letras = _.map(zip, ([caractere, resultado, sacode]) => {
-    return {caractere, resultado, sacode};
+  var zip = _.zip(props.tentativa.letras, props.tentativa.resultado, props.tentativa.sacode, props.tentativa.invalida);
+  var letras = _.map(zip, ([caractere, resultado, sacode, invalida]) => {
+    return {caractere, resultado, sacode, invalida};
   });
   return letras;
 });
@@ -63,16 +63,31 @@ const letras = computed(() => {
 }
 
 .letra.pulse {
-  animation: pulse 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-  transform: scale(1);
+  animation: pulse 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
 }
 
 @keyframes pulse {
-  50% {
+  from {
+    transform: scale(1);
+  }
+  to {
     transform: scale(1.2);
   }
 }
 
+letra.invalida {
+  animation: treme 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes treme {
+  from {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.5);
+  }
+}
+
 @keyframes blink {
   10%, 80% {
     border-color: rgba(253, 245, 230, 1);
@@ -86,7 +101,8 @@ const letras = computed(() => {
   animation-delay: 0s;
 }
 
-.pulse:nth-child(n) {
+.pulse:nth-child(n),
+letra.invalida:nth-child(n) {
   animation-delay: calc(0.08s * var(--nth-child-index));
 }