Hoje as peças vão se mover!

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Damas — laboratório de movimentos</title>
  <!-- O nome precisa ser igual ao arquivo criado na próxima missão. -->
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>Damas: primeiro movimento</h1>
    <p>Protótipo: movimento simples, sem captura e sem promoção a dama.</p>
    <p>Peças 1 começam embaixo. Clique na peça e depois na casa de destino.</p>
    <p id="turno">Vez: peças 1</p>
    <!-- O JavaScript cria as 64 casas dentro desta div. -->
    <div id="tabuleiro" role="group" aria-label="Tabuleiro de damas"></div>
    <p id="aviso" role="status" aria-live="polite">Escolha uma peça da sua vez.</p>
    <button id="reiniciar" type="button">Reiniciar</button>
    <p><small>Ao atualizar ou reiniciar, a partida volta ao começo.</small></p>
  </main>
</body>
</html>

/* Estrutura para testar a lógica. A personalização ficará para outra aula. */
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font-family: Arial, sans-serif; color: #222; background: #fff; }
main { max-width: 560px; margin: auto; }
h1 { font-size: 1.5rem; }
p { line-height: 1.4; }
#turno { font-weight: bold; }
#tabuleiro { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 440px; border: 2px solid #222; }
.casa { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer; border-radius: 0; }
.clara { background: #eee; }
.escura { background: #777; }
.peca { width: 74%; height: 74%; border-radius: 50%; display: grid; place-items: center; font-weight: bold; font-size: clamp(14px, 4vw, 22px); pointer-events: none; }
.jogador-1 { background: #fff; color: #111; border: 2px solid #111; }
.jogador-2 { background: #222; color: #fff; border: 2px solid #fff; }
.selecionada { outline: 3px solid #e6b800; outline-offset: -3px; }
.casa:focus-visible { outline: 3px solid #075bd8; outline-offset: -3px; }
#aviso { min-height: 3em; }
#reiniciar { padding: 10px 16px; cursor: pointer; }

// 0 = casa vazia; 1 = peça de baixo; 2 = peça de cima.
// A posição fica nos dados. A tela é desenhada a partir deles.
const tabuleiro = document.getElementById("tabuleiro");
const turno = document.getElementById("turno");
const aviso = document.getElementById("aviso");
const reiniciar = document.getElementById("reiniciar");

function criarPosicaoInicial() {
  const dados = [];
  for (let linha = 0; linha < 8; linha++) {
    dados[linha] = [];
    for (let coluna = 0; coluna < 8; coluna++) {
      const escura = (linha + coluna) % 2 === 1;
      let valor = 0;
      if (escura && linha < 3) valor = 2;
      if (escura && linha > 4) valor = 1;
      dados[linha][coluna] = valor;
    }
  }
  return dados;
}

let posicoes = criarPosicaoInicial();
let selecionada = null; // Guarda linha e coluna da peça escolhida.
let vez = 1;

function desenhar() {
  tabuleiro.innerHTML = "";
  turno.textContent = "Vez: peças " + vez;
  for (let linha = 0; linha < 8; linha++) {
    for (let coluna = 0; coluna < 8; coluna++) {
      const casa = document.createElement("button");
      casa.type = "button";
      casa.className = "casa " + ((linha + coluna) % 2 === 1 ? "escura" : "clara");
      // Os dados ligam cada botão à posição na matriz.
      casa.dataset.linha = linha;
      casa.dataset.coluna = coluna;
      const valor = posicoes[linha][coluna];
      casa.setAttribute("aria-label", "Linha " + (linha + 1) + ", coluna " + (coluna + 1) + (valor ? ", peça " + valor : ", vazia"));
      const marcada = selecionada !== null && selecionada.linha === linha && selecionada.coluna === coluna;
      casa.classList.toggle("selecionada", marcada);
      casa.setAttribute("aria-pressed", String(marcada));
      if (valor !== 0) {
        const peca = document.createElement("span");
        peca.className = "peca jogador-" + valor;
        peca.textContent = valor;
        casa.appendChild(peca);
      }
      tabuleiro.appendChild(casa);
    }
  }
}

function movimentoPermitido(origem, destino) {
  // Uma casa ocupada nunca pode receber outra peça nesta aula.
  if (posicoes[destino.linha][destino.coluna] !== 0) return false;
  const deltaLinha = destino.linha - origem.linha;
  const deltaColuna = destino.coluna - origem.coluna;
  // Na matriz, subir diminui a linha; descer aumenta a linha.
  const direcao = vez === 1 ? -1 : 1;
  const diagonal = Math.abs(deltaColuna) === 1;
  const avanca = deltaLinha === direcao;
  // MISSAO 6: troque apenas a próxima linha para exigir as duas condições.
  return false;
}

function moverPeca(origem, destino) {
  // Primeiro copia a peça para o destino; depois esvazia a origem.
  posicoes[destino.linha][destino.coluna] = posicoes[origem.linha][origem.coluna];
  posicoes[origem.linha][origem.coluna] = 0;
  selecionada = null;
  // MISSAO 8: troque a vez aqui.
}

function aoClicarNaCasa(evento) {
  const casa = evento.target.closest(".casa");
  if (!casa || !tabuleiro.contains(casa)) return;
  const destino = {
    linha: Number(casa.dataset.linha),
    coluna: Number(casa.dataset.coluna)
  };
  const valor = posicoes[destino.linha][destino.coluna];
  // Clicar em uma peça da própria vez seleciona (ou desmarca) essa peça.
  if (valor === vez) {
    const mesma = selecionada !== null && selecionada.linha === destino.linha && selecionada.coluna === destino.coluna;
    selecionada = mesma ? null : destino;
    aviso.textContent = mesma ? "Escolha uma peça da sua vez." : "Agora escolha uma casa vazia na diagonal à frente.";
    desenhar();
    return;
  }
  if (selecionada === null) {
    aviso.textContent = "Primeiro escolha uma peça da sua vez.";
    return;
  }
  if (!movimentoPermitido(selecionada, destino)) {
    aviso.textContent = "Movimento bloqueado: use uma casa vazia, uma diagonal e um passo à frente.";
    return; // A peça, a seleção e a vez permanecem iguais.
  }
  moverPeca(selecionada, destino);
  desenhar();
  aviso.textContent = "Movimento realizado. Vez das peças " + vez + ".";
}

reiniciar.addEventListener("click", function () {
  posicoes = criarPosicaoInicial();
  selecionada = null;
  vez = 1;
  desenhar();
  aviso.textContent = "Escolha uma peça da sua vez.";
});

// MISSAO 5: conecte o clique do tabuleiro nesta linha vazia.

desenhar();

tabuleiro.addEventListener("click", aoClicarNaCasa);

return diagonal && avanca;

vez = vez === 1 ? 2 : 1;