Merge branch 'main' of https://github.com/matheuslimam/PokemonLeopoldo

matheuslimam · Nov 13, 2023 · 0e8b92c · 0e8b92c
2 parents 2aecba2 + 98f5d6d
commit 0e8b92c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/Time.html b/Time.html
@@ -122,7 +122,7 @@ <h1>Monte o seu time!</h1>
                 </div>
 
                 <div class="checkbox-option">
-                    <input type="checkbox" id="wartortle" name="wartortle" />
+                    <input type="checkbox" id="wartortle" name="wartortle"/>
                     <label for="wartortle">Wartortle</label>
                     <img src="https://img.pokemondb.net/sprites/black-white/anim/normal/wartortle.gif" alt="Wartortle, pokemón do tipo água">
                 </div>
@@ -343,11 +343,11 @@ <h1>Monte o seu time!</h1>
 //                 }
 //             }
 
-//             // Função para escapar caracteres especiais HTML
-//             function escapeHTML(input) {
-//                 var doc = new DOMParser().parseFromString(input, "text/html");
-//                 return doc.body.textContent || "";
-//             }
+            // Função para escapar caracteres especiais HTML
+            function escapeHTML(input) {
+                var doc = new DOMParser().parseFromString(input, "text/html");
+                return doc.body.textContent || "";
+            }
 
         </script>
         </div>

diff --git a/home.html b/home.html
@@ -45,14 +45,14 @@ <h2>Você deseja ligar o som?</h2>
     <nav id="navbar" class="navbar">
         <ul>
             <li><a href="config.html">
-                <img class="icon" src="imgs/configuracoes.png" alt="Configurações"></a>
+                <img class="icon" src="imgs/configuracoes.png" alt="Configurações" tabindex="0"></a>
             </li>
             <li><a href="construcao.html">
-                <img class="icon" src="imgs/gestao-de-inventario.png" alt="Inventário">
+                <img class="icon" src="imgs/gestao-de-inventario.png" alt="Inventário" tabindex="0">
             </a>
         </li>
             <li><a href="Pokedex.html">
-                <img class="icon" src="imgs/pokebola.png" alt="Pokedex">
+                <img class="icon" src="imgs/pokebola.png" alt="Pokedex" tabindex="0">
             </a>
         </li>
         </ul>
@@ -61,13 +61,13 @@ <h2>Você deseja ligar o som?</h2>
     <div id="time" class="time">
         <div style="z-index: 5;" id="google_translate_element"></div>
         <a href="Time.html">
-            <img class="icon" src="imgs/time-azul.png" alt="Seleção de time">
+            <img class="icon" src="imgs/time-azul.png" alt="Seleção de time" tabindex="0">
         </a>
     </div>
 
     <div id="perfil" class="perfil">
         <a href="Perfil.html">
-            <img class="icon" src="imgs/treinador-de-pokemon.png" alt="Perfil de Treinador">
+            <img class="icon" src="imgs/treinador-de-pokemon.png" alt="Perfil de Treinador" tabindex="0">
         </a>
     </div>
     <div id="location" class="location">
@@ -83,5 +83,6 @@ <h2>Você deseja ligar o som?</h2>
 <script src="data/collisions.js"></script>
 <script src="classes.js"></script>
 <script src="walktest.js"></script>
+<script src="navegação.js"></script>
 </body>
 </html>
diff --git a/navegação.js b/navegação.js
@@ -0,0 +1,29 @@
+const focusableElements = document.querySelectorAll('img');
+let currentFocus = 0;
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Tab') {
+        e.preventDefault();
+
+        if (e.shiftKey) {
+            currentFocus = (currentFocus - 1 + focusableElements.length) % focusableElements.length;
+        } else {
+            currentFocus = (currentFocus + 1) % focusableElements.length;
+        }
+
+        focusableElements[currentFocus].focus();
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (currentFocus > 2) {
+            currentFocus -= 3;
+        }
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentFocus < focusableElements.length - 3) {
+            currentFocus += 3;
+        }
+    } else if (e.key === 'Enter') {
+        e.preventDefault();
+        focusableElements[currentFocus].click();
+    }
+});