XT07 · CristhianMazon · Jun 25, 2025 · Jun 25, 2025 · Jun 25, 2025 · Jun 26, 2025
diff --git a/views/audio/MusicaFundo.mp3 b/views/audio/MusicaFundo.mp3
diff --git a/views/css/style.css b/views/css/style.css
diff --git a/views/img/Fundo.png b/views/img/Fundo.png
diff --git a/views/img/FundoAnimado.mp4 b/views/img/FundoAnimado.mp4
diff --git a/views/img/FundoParado.png b/views/img/FundoParado.png
diff --git a/views/index.html b/views/index.html
@@ -1,48 +1,79 @@
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Províncias de Numerath</title>
-  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="css/style.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Províncias de Numerath</title>
+    <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 <body>
-  <!-- MENU FIXO -->
-  <aside class="menu-lateral">
-    <ul>
-      <li onclick="abrirPainel('inicio')">Início</li>
-      <li onclick="abrirPainel('como-jogar')">Como Jogar</li>
-      <li onclick="abrirPainel('config')">Configurações</li>
-    </ul>
-  </aside>
+    <audio id="backgroundMusic" loop autoplay>
+    <source src="audio/MusicaFundo.mp3" type="audio/mpeg">
+        Seu navegador não suporta o elemento de áudio.
+    </audio>
 
-  <!-- PAINÉIS DESLIZANTES -->
-  <div id="painel-inicio" class="painel">Bem-vindo ao jogo!</div>
-  <div id="painel-como-jogar" class="painel">Aqui você aprende a jogar.</div>
-  <div id="painel-config" class="painel">Configurações do jogo.</div>
+    <aside class="menu-lateral" id="menuLateral">
+        <ul>
+            <li onclick="abrirPainel('inicio')">
+                <i class="fas fa-home"></i> <span class="menu-texto"></span>
+            </li>
+            <li onclick="abrirPainel('como-jogar')">
+                <i class="fas fa-question-circle"></i> <span class="menu-texto"></span>
+            </li>
+            <li onclick="abrirPainel('config')">
+                <i class="fas fa-cog"></i> <span class="menu-texto"></span>
+            </li>
+        </ul>
+    </aside>
 
-  <!-- Conteúdo principal -->
-  <main class="conteudo">
-    <div class="ImagemTitulo">
-      <img src="img/LogoProjeto.png" alt="LogoProjeto" class="logo">
-      <div class="titulo">
-        <h1>PROVÍNCIAS DE</h1>
-        <h1>NUMERATH</h1>
-      </div>
+    <div id="painel-como-jogar" class="painel">
+        <span class="fechar-painel" onclick="fecharPainel()">X</span>
+        <h2>Como Jogar</h2>
+        <p>Aqui você saberá como seguir seu caminho!!</p>
+        <ul>
+            <li>Objetivo: Alcance a pontuação máxima resolvendo desafios matemáticos.</li>
+            <li>Controles: Use o mouse para interagir com os elementos.</li>
+            <li>Dicas: Fique atento aos bônus de tempo!</li>
+        </ul>
     </div>
-    <button class="jogar">
-      JOGAR
-      <span class="prego top-right"></span>
-      <span class="prego bottom-left"></span>
-    </button>
-  </main>
-
-  <video autoplay muted loop id="bg-video">
-    <source src="img/FundoAnimado.mp4" type="video/mp4">
-    Seu navegador não suporta vídeos em HTML5.
-  </video>
+    <div id="painel-config" class="painel">
+        <span class="fechar-painel" onclick="fecharPainel()">X</span>
+        <h2>Configurações</h2>
+        <p>Aqui você pode ajustar o volume a sua escolha!!.</p>
+        <div class="config-item">
+            <label for="volume">Volume da Música:</label>
+            <input type="range" id="volume" min="0" max="100" value="50">
+        </div>
+        <div class="config-item">
+            <label for="efeitos">Volume dos Efeitos:</label>
+            <input type="range" id="efeitos" min="0" max="100" value="30">
+        </div>
+        <div class="config-item">
+            <label for="toggleMusic">Música Ativada:</label>
+            <input type="checkbox" id="toggleMusic" checked>
+        </div>
+        <button>Salvar Configurações</button>
+    </div>
+
+    <main class="conteudo">
+        <div class="ImagemTitulo">
+            <img src="img/LogoProjeto.png" alt="LogoProjeto" class="logo">
+            <div class="titulo">
+                <h1>PROVÍNCIAS DE</h1>
+                <h1>NUMERATH</h1>
+            </div>
+        </div>
+        <button class="jogar" id="btnJogar">
+            JOGAR
+            <span class="prego top-right"></span>
+            <span class="prego bottom-left"></span>
+        </button>
 
-  <script src="js/menu.js"></script>
+        <div id="telaJogo" class="tela-jogo hidden">
+            </div>
+    </main>
+    <script src="js/menu.js"></script>
 </body>
-</html>
+</html>
diff --git a/views/js/menu.js b/views/js/menu.js
@@ -1,31 +1,181 @@
 let painelAtivo = null;
 
 function abrirPainel(id) {
-  const painel = document.getElementById(`painel-${id}`);
-
-  // Se já está aberto, fecha
-  if (painelAtivo === painel) {
-    painel.classList.remove("ativo");
-    painelAtivo = null;
-  } else {
-    // Fecha os outros
-    document.querySelectorAll(".painel").forEach(p => p.classList.remove("ativo"));
-
-    // Abre o painel novo
-    painel.classList.add("ativo");
-    painelAtivo = painel;
-  }
+    const imagemTituloContainer = document.querySelector('.ImagemTitulo');
+    const btnJogar = document.getElementById('btnJogar');
+    const telaJogo = document.getElementById('telaJogo');
+
+    playClickSound(); // Toca som de clique ao abrir/fechar painéis
+
+    if (id === 'inicio') {
+        if (telaJogo) {
+            telaJogo.classList.add('hidden');
+            telaJogo.style.opacity = '0';
+        }
+        if (imagemTituloContainer) {
+            imagemTituloContainer.classList.remove('hidden');
+        }
+        if (btnJogar) {
+            btnJogar.classList.remove('hidden');
+        }
+        if (painelAtivo) {
+            painelAtivo.classList.remove("ativo");
+            painelAtivo = null;
+        }
+        return;
+    }
+
+    const painel = document.getElementById(`painel-${id}`);
+
+    if (painelAtivo === painel) {
+        painel.classList.remove("ativo");
+        painelAtivo = null;
+    } else {
+        document.querySelectorAll(".painel").forEach(p => p.classList.remove("ativo"));
+        if (painel) {
+            painel.classList.add("ativo");
+            painel.classList.add('iniciar-painel'); // Adiciona classe para animação, se desejar
+            painelAtivo = painel;
+        }
+    }
+}
+
+function fecharPainel() {
+    playClickSound(); // Toca som de clique ao fechar painel
+    if (painelAtivo) {
+        painelAtivo.classList.remove("ativo");
+        // painelAtivo.classList.remove('iniciar-painel'); // Opcional: remover classe de animação
+        painelAtivo = null;
+    }
 }
 
-// Fecha o painel se clicar fora dele e do menu
+// Listener global para fechar painel clicando fora
 document.addEventListener('click', function (event) {
-  const cliqueDentroPainel = painelAtivo && painelAtivo.contains(event.target);
-  const cliqueNoMenu = event.target.closest('.menu-lateral');
+    const cliqueDentroPainel = painelAtivo && painelAtivo.contains(event.target);
+    const menuLateral = document.querySelector('.menu-lateral');
+    const cliqueNoMenu = menuLateral && menuLateral.contains(event.target);
 
-  if (!cliqueDentroPainel && !cliqueNoMenu) {
-    if (painelAtivo) {
-      painelAtivo.classList.remove("ativo");
-      painelAtivo = null;
+    // Se clicou fora do painel ativo E fora do menu lateral, fecha o painel
+    if (painelAtivo && !cliqueDentroPainel && !cliqueNoMenu) {
+        fecharPainel();
     }
-  }
 });
+
+
+let clickSound; 
+let backgroundMusic; 
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    const btnJogar = document.getElementById('btnJogar');
+    const imagemTituloContainer = document.querySelector('.ImagemTitulo'); 
+    const telaJogo = document.getElementById('telaJogo');
+
+    backgroundMusic = document.getElementById('backgroundMusic');
+    const toggleMusic = document.getElementById('toggleMusic');
+    const volumeControl = document.getElementById('volume');
+    const efeitosControl = document.getElementById('efeitos');
+
+    // CORREÇÃO AQUI: Caminho e nome do arquivo do som de clique
+    clickSound = new Audio('sfx/SomClique.wav'); 
+    clickSound.volume = (efeitosControl ? efeitosControl.value / 100 : 0.7);
+
+    // --- LÓGICA DE ÁUDIO NO CARREGAMENTO (Simplificada para sua decisão) ---
+    if (backgroundMusic) {
+        // Define o volume inicial da música (ela ainda está mutada pelo HTML por padrão)
+        backgroundMusic.volume = (volumeControl ? volumeControl.value / 100 : 0.5);
+
+        // Garante que a música está mutada e pausada no carregamento,
+        // e o checkbox desmarcado (usuário precisará ativar)
+        backgroundMusic.muted = true;
+        backgroundMusic.pause(); // Garante que não está tocando
+        if (toggleMusic) {
+            toggleMusic.checked = false; // Checkbox começa desligado
+        }
+        console.log("Música de fundo iniciada em estado PAUSADO e MUTADO por padrão.");
+    }
+    // --- FIM DA LÓGICA DE ÁUDIO NO CARREGAMENTO ---
+
+
+    // Listener para o toggle de música
+    if (toggleMusic && backgroundMusic) {
+        toggleMusic.addEventListener('change', () => {
+            if (toggleMusic.checked) {
+                backgroundMusic.muted = false; // Desmuta
+                if (backgroundMusic.paused) { // Se estava pausada, tenta tocar
+                    backgroundMusic.play().catch(e => console.error("Erro ao tocar música ao desmutar via checkbox:", e));
+                }
+            } else {
+                backgroundMusic.muted = true; // Muta
+                backgroundMusic.pause(); // Pausa explicitamente
+            }
+        });
+    }
+
+    // Listener para o controle de volume da música
+    if (volumeControl && backgroundMusic) {
+        volumeControl.addEventListener('input', () => {
+            backgroundMusic.volume = volumeControl.value / 100;
+            if (volumeControl.value > 0) {
+                // Se volume é maior que zero e está mutado ou pausado, desmuta e tenta tocar
+                if (backgroundMusic.muted || backgroundMusic.paused) {
+                    backgroundMusic.muted = false;
+                    backgroundMusic.play().catch(e => console.error("Erro ao tocar música ao ajustar volume:", e));
+                }
+                if(toggleMusic) toggleMusic.checked = true; // Marca o checkbox
+            } else { // volumeControl.value == 0
+                backgroundMusic.muted = true; // Muta
+                if(toggleMusic) toggleMusic.checked = false; // Desmarca o checkbox
+            }
+        });
+    }
+
+    // Listener para o controle de volume dos efeitos
+    if (efeitosControl && clickSound) {
+        efeitosControl.addEventListener('input', () => {
+            clickSound.volume = efeitosControl.value / 100;
+        });
+    }
+
+    // Lógica para o botão "Jogar"
+    if (btnJogar && imagemTituloContainer && telaJogo) {
+        btnJogar.addEventListener('click', () => {
+            playClickSound(); // Som de clique
+            imagemTituloContainer.classList.add('hidden'); 
+            btnJogar.classList.add('hidden');    
+            telaJogo.classList.remove('hidden'); 
+            telaJogo.style.opacity = '1';         
+        });
+    }
+
+    // Adiciona som de clique ao botão "Salvar Configurações"
+    const salvarConfigButton = document.querySelector('#painel-config button');
+    if (salvarConfigButton) {
+        salvarConfigButton.addEventListener('click', () => {
+            playClickSound();
+            fecharPainel();
+        });
+    }
+
+    // Adiciona som de clique a todos os botões de fechar painel
+    const fecharPainelButtons = document.querySelectorAll('.fechar-painel');
+    fecharPainelButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            playClickSound();
+        });
+    });
+
+    // Adiciona som de clique aos itens do menu lateral
+    const menuItems = document.querySelectorAll('.menu-lateral li');
+    menuItems.forEach(item => {
+        item.addEventListener('click', () => {
+            // A função abrirPainel() já chama playClickSound()
+        });
+    });
+});
+
+function playClickSound() {
+    if (clickSound) {
+        clickSound.currentTime = 0; // Reinicia o áudio
+        clickSound.play().catch(e => console.error("Erro ao tocar som de clique:", e));
+    }
+}
diff --git a/views/sfx/SomClique.wav b/views/sfx/SomClique.wav