From 9bf58f97a1902e73baca9335d66bce8ee156dbe6 Mon Sep 17 00:00:00 2001
From: Pedro <pedro2007.prrr@gmail.com>
Date: Thu, 26 Oct 2023 15:02:31 -0300
Subject: [PATCH] Refactorization

---
 css/senha.css |  8 ++++++++
 js/senha.js   | 41 ++++++++++++++++++++++-------------------
 senha.html    |  6 ++++--
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/css/senha.css b/css/senha.css
index c450803..0fc98cd 100644
--- a/css/senha.css
+++ b/css/senha.css
@@ -84,6 +84,14 @@
     border-style: dotted;
 }
 
+.wrong {
+    visibility: hidden;
+}
+
+.indicate-wrong-characters .wrong {
+    visibility: visible;
+}
+
 .vertical-align-middle {
     vertical-align: middle;
 }
diff --git a/js/senha.js b/js/senha.js
index 3b51643..9481d2b 100644
--- a/js/senha.js
+++ b/js/senha.js
@@ -2,6 +2,7 @@ let validCharacters = "aeiou0123456789-_@#$%&*";
 let currentLastIndex = -1;
 let amountOfCharacters = 5;
 let selectedCharacter = -1;
+let indicateWrongCharacters = false;
 
 const gameFlexbox = document.getElementById("game-flexbox");
 const keyboard = document.getElementById("keyboard");
@@ -38,28 +39,21 @@ function addNewGuessesArray(correctInWrongPlace, correctInCorrectPlace) {
     let newGuessesArray = document.createElement("div");
     newGuessesArray.classList.add("guess-container");
     newGuessesArray.id = "guesses-" + currentLastIndex;
-    let wrong = amountOfCharacters;
-    for (let i = 0; i < correctInCorrectPlace; i++) {
-        wrong--;
-        let guess = document.createElement("span");
-        guess.classList.add("indicator");
-        guess.classList.add("correct-in-correct-place");
-        newGuessesArray.appendChild(guess);
-    }
-    for (let i = 0; i < correctInWrongPlace; i++) {
-        wrong--;
-        let guess = document.createElement("span");
-        guess.classList.add("indicator");
-        guess.classList.add("correct-in-wrong-place");
-        newGuessesArray.appendChild(guess);
-    }
-    for (let i = 0; i < wrong; i++) {
+    addIndicatorsOfType("correct-in-correct-place", correctInCorrectPlace, newGuessesArray);
+    addIndicatorsOfType("correct-in-wrong-place", correctInWrongPlace, newGuessesArray);
+    let wrong = amountOfCharacters - (correctInCorrectPlace + correctInWrongPlace);
+    addIndicatorsOfType("wrong", wrong, newGuessesArray);
+
+    document.getElementById("array-container-" + currentLastIndex).appendChild(newGuessesArray);
+}
+
+function addIndicatorsOfType(type, amount, parent) {
+    for (let i = 0; i < amount; i++) {
         let guess = document.createElement("span");
         guess.classList.add("indicator");
-        guess.classList.add("wrong");
-        newGuessesArray.appendChild(guess);
+        guess.classList.add(type);
+        parent.appendChild(guess);
     }
-    document.getElementById("array-container-" + currentLastIndex).appendChild(newGuessesArray);
 }
 
 function lockCharacterSlotArray(index = currentLastIndex) {
@@ -284,4 +278,13 @@ function setValidCharactersAndStartGame(str) {
 function simulateKeyPress(key) {
     const event = new KeyboardEvent('keyup', { key });
     document.dispatchEvent(event);
+}
+
+function toggleWrongCharacterIndicator() {
+    if (indicateWrongCharacters) {
+        document.body.classList.remove("indicate-wrong-characters");
+    } else {
+        document.body.classList.add("indicate-wrong-characters");
+    }
+    indicateWrongCharacters = !indicateWrongCharacters;
 }
\ No newline at end of file
diff --git a/senha.html b/senha.html
index ed0721a..71e842b 100644
--- a/senha.html
+++ b/senha.html
@@ -14,8 +14,10 @@ <h1 class="center" data-string="senha-title">Senha</h1>
 	<span class="indicator correct-in-correct-place vertical-align-middle"></span> <span data-string="senha-correctincorrectplace">significa que há um caractere correto no local certo.</span>
 	<br>
 	<span class="indicator correct-in-wrong-place vertical-align-middle"></span> <span data-string="senha-correctinwrongplace">significa que há um caractere correto no local errado.</span>
-	<br>
-	<span class="indicator wrong vertical-align-middle"></span> <span data-string="senha-wrongcharacter">significa um caractere completamente errado.</span>
+	<span class="wrong">
+		<br>
+		<span class="indicator wrong vertical-align-middle"></span> <span data-string="senha-wrongcharacter">significa um caractere completamente errado.</span>
+	</span>
 </div>
 <div class="center invisible" id="victory"><span data-string="senha-victory"></span> <span id="number-of-attempts"></span></div>
 <div id="game-flexbox" class="game-flexbox center-flex"></div>