game.js

(() => {
  // --- State ---
  let gridSize = 4;
  let players = [
    { name: 'Player 1', color: '#e74c3c', score: 0 },
    { name: 'Player 2', color: '#3498db', score: 0 },
  ];
  let currentPlayer = 0;
  // Lines: horizontal[row][col] and vertical[row][col]
  // horizontal: (gridSize) rows x (gridSize-1) cols
  // vertical: (gridSize-1) rows x (gridSize) cols
  let hLines = [];
  let vLines = [];
  // Boxes: (gridSize-1) x (gridSize-1), null or player index
  let boxes = [];
  let gameOver = false;

  // --- DOM refs ---
  const canvas = document.getElementById('game-canvas');
  const ctx = canvas.getContext('2d');
  const setupScreen = document.getElementById('setup-screen');
  const gameScreen = document.getElementById('game-screen');
  const gameOverScreen = document.getElementById('game-over');

  // --- Constants ---
  const DOT_RADIUS = 6;
  const LINE_THICKNESS = 5;
  const CELL_SIZE = 80;
  const PADDING = 30;

  // --- Theme ---
  const themeToggle = document.getElementById('theme-toggle');
  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
    localStorage.setItem('dab-theme', theme);
    if (!setupScreen.classList.contains('hidden')) return;
    draw();
  }
  themeToggle.addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-theme');
    applyTheme(current === 'dark' ? 'light' : 'dark');
  });
  // Load saved theme
  const savedTheme = localStorage.getItem('dab-theme') || 'light';
  applyTheme(savedTheme);

  // --- Grid size buttons ---
  document.querySelectorAll('.grid-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.grid-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      gridSize = parseInt(btn.dataset.size);
    });
  });

  // --- Start game ---
  document.getElementById('start-btn').addEventListener('click', startGame);
  document.getElementById('restart-btn').addEventListener('click', () => {
    gameScreen.classList.add('hidden');
    gameOverScreen.classList.add('hidden');
    setupScreen.classList.remove('hidden');
  });
  document.getElementById('play-again-btn').addEventListener('click', () => {
    gameOverScreen.classList.add('hidden');
    gameScreen.classList.add('hidden');
    setupScreen.classList.remove('hidden');
  });

  function startGame() {
    players[0].name = document.getElementById('p1-name').value || 'Player 1';
    players[0].color = document.getElementById('p1-color').value;
    players[1].name = document.getElementById('p2-name').value || 'Player 2';
    players[1].color = document.getElementById('p2-color').value;
    players[0].score = 0;
    players[1].score = 0;
    currentPlayer = 0;
    gameOver = false;

    // Init line arrays: false = not drawn
    const rows = gridSize;
    const cols = gridSize;
    hLines = Array.from({ length: rows }, () => Array(cols - 1).fill(false));
    vLines = Array.from({ length: rows - 1 }, () => Array(cols).fill(false));
    boxes = Array.from({ length: rows - 1 }, () => Array(cols - 1).fill(null));

    // Size canvas
    const w = (gridSize - 1) * CELL_SIZE + PADDING * 2;
    const h = (gridSize - 1) * CELL_SIZE + PADDING * 2;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = w * dpr;
    canvas.height = h * dpr;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

    setupScreen.classList.add('hidden');
    gameScreen.classList.remove('hidden');
    updateScoreboard();
    draw();
  }

  // --- Drawing ---
  function getCSS(varName) {
    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
  }

  function draw() {
    const w = parseFloat(canvas.style.width);
    const h = parseFloat(canvas.style.height);
    ctx.clearRect(0, 0, w, h);

    // Draw filled boxes
    for (let r = 0; r < gridSize - 1; r++) {
      for (let c = 0; c < gridSize - 1; c++) {
        if (boxes[r][c] !== null) {
          const x = PADDING + c * CELL_SIZE;
          const y = PADDING + r * CELL_SIZE;
          ctx.fillStyle = players[boxes[r][c]].color + '44';
          ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
        }
      }
    }

    // Draw horizontal lines
    for (let r = 0; r < gridSize; r++) {
      for (let c = 0; c < gridSize - 1; c++) {
        const x1 = PADDING + c * CELL_SIZE;
        const y1 = PADDING + r * CELL_SIZE;
        ctx.strokeStyle = hLines[r][c] ? hLines[r][c] : getCSS('--line-empty');
        ctx.lineWidth = hLines[r][c] ? LINE_THICKNESS + 1 : LINE_THICKNESS;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + CELL_SIZE, y1);
        ctx.stroke();
      }
    }

    // Draw vertical lines
    for (let r = 0; r < gridSize - 1; r++) {
      for (let c = 0; c < gridSize; c++) {
        const x1 = PADDING + c * CELL_SIZE;
        const y1 = PADDING + r * CELL_SIZE;
        ctx.strokeStyle = vLines[r][c] ? vLines[r][c] : getCSS('--line-empty');
        ctx.lineWidth = vLines[r][c] ? LINE_THICKNESS + 1 : LINE_THICKNESS;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1, y1 + CELL_SIZE);
        ctx.stroke();
      }
    }

    // Draw dots
    for (let r = 0; r < gridSize; r++) {
      for (let c = 0; c < gridSize; c++) {
        const x = PADDING + c * CELL_SIZE;
        const y = PADDING + r * CELL_SIZE;
        ctx.fillStyle = getCSS('--dot-color');
        ctx.beginPath();
        ctx.arc(x, y, DOT_RADIUS, 0, Math.PI * 2);
        ctx.fill();
      }
    }
  }

  // --- Click handling ---
  canvas.addEventListener('click', (e) => {
    if (gameOver) return;
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;

    const hit = findClosestLine(mx, my);
    if (!hit) return;

    const { type, row, col } = hit;
    // Check if already drawn
    if (type === 'h' && hLines[row][col]) return;
    if (type === 'v' && vLines[row][col]) return;

    // Draw line with player color
    const color = players[currentPlayer].color;
    if (type === 'h') hLines[row][col] = color;
    else vLines[row][col] = color;

    // Check for completed boxes
    const scored = checkBoxes();
    if (scored === 0) {
      currentPlayer = 1 - currentPlayer;
    }

    updateScoreboard();
    draw();

    // Check game over
    const totalBoxes = (gridSize - 1) * (gridSize - 1);
    if (players[0].score + players[1].score === totalBoxes) {
      gameOver = true;
      showGameOver();
    }
  });

  // Hover effect
  canvas.addEventListener('mousemove', (e) => {
    if (gameOver) return;
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    const hit = findClosestLine(mx, my);
    canvas.style.cursor = hit ? 'pointer' : 'default';
  });

  function findClosestLine(mx, my) {
    const threshold = 15;
    let best = null;
    let bestDist = threshold;

    // Check horizontal lines
    for (let r = 0; r < gridSize; r++) {
      for (let c = 0; c < gridSize - 1; c++) {
        if (hLines[r][c]) continue;
        const x1 = PADDING + c * CELL_SIZE;
        const y1 = PADDING + r * CELL_SIZE;
        const x2 = x1 + CELL_SIZE;
        const dist = distToSegment(mx, my, x1, y1, x2, y1);
        if (dist < bestDist) {
          bestDist = dist;
          best = { type: 'h', row: r, col: c };
        }
      }
    }

    // Check vertical lines
    for (let r = 0; r < gridSize - 1; r++) {
      for (let c = 0; c < gridSize; c++) {
        if (vLines[r][c]) continue;
        const x1 = PADDING + c * CELL_SIZE;
        const y1 = PADDING + r * CELL_SIZE;
        const y2 = y1 + CELL_SIZE;
        const dist = distToSegment(mx, my, x1, y1, x1, y2);
        if (dist < bestDist) {
          bestDist = dist;
          best = { type: 'v', row: r, col: c };
        }
      }
    }
    return best;
  }

  function distToSegment(px, py, x1, y1, x2, y2) {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const lenSq = dx * dx + dy * dy;
    let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
    t = Math.max(0, Math.min(1, t));
    const cx = x1 + t * dx;
    const cy = y1 + t * dy;
    const ex = px - cx;
    const ey = py - cy;
    return Math.sqrt(ex * ex + ey * ey);
  }

  function checkBoxes() {
    let scored = 0;
    for (let r = 0; r < gridSize - 1; r++) {
      for (let c = 0; c < gridSize - 1; c++) {
        if (boxes[r][c] !== null) continue;
        const top = hLines[r][c];
        const bottom = hLines[r + 1][c];
        const left = vLines[r][c];
        const right = vLines[r][c + 1];
        if (top && bottom && left && right) {
          boxes[r][c] = currentPlayer;
          players[currentPlayer].score++;
          scored++;
        }
      }
    }
    return scored;
  }

  // --- Scoreboard ---
  function updateScoreboard() {
    const p1Card = document.getElementById('p1-score-card');
    const p2Card = document.getElementById('p2-score-card');
    document.getElementById('p1-label').textContent = players[0].name;
    document.getElementById('p2-label').textContent = players[1].name;
    document.getElementById('p1-score').textContent = players[0].score;
    document.getElementById('p2-score').textContent = players[1].score;

    p1Card.style.color = players[0].color;
    p2Card.style.color = players[1].color;

    p1Card.classList.toggle('active', currentPlayer === 0);
    p2Card.classList.toggle('active', currentPlayer === 1);

    const indicator = document.getElementById('turn-indicator');
    indicator.textContent = `${players[currentPlayer].name}'s turn`;
    indicator.style.color = players[currentPlayer].color;
  }

  // --- Game Over ---
  function showGameOver() {
    const winnerText = document.getElementById('winner-text');
    const finalScore = document.getElementById('final-score');

    if (players[0].score > players[1].score) {
      winnerText.textContent = `${players[0].name} Wins!`;
      winnerText.style.color = players[0].color;
    } else if (players[1].score > players[0].score) {
      winnerText.textContent = `${players[1].name} Wins!`;
      winnerText.style.color = players[1].color;
    } else {
      winnerText.textContent = "It's a Tie!";
      winnerText.style.color = '';
    }
    finalScore.textContent = `${players[0].score} - ${players[1].score}`;
    gameOverScreen.classList.remove('hidden');
  }
})();