/*
  canvas.js

  toute la logique de rendu visuel
*/

import { maze } from "./maze.js";
import { player } from "./player.js";

const canvas = document.getElementById("maze");
const ctx = canvas.getContext("2d");
const cellSize = 70;

export function drawMaze() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < maze.length; y++) {
    for (let x = 0; x < maze[y].length; x++) {
      if (maze[y][x] === 1) ctx.fillStyle = "#333";
      else if (maze[y][x] === 2) ctx.fillStyle = "gold";
      else ctx.fillStyle = "#eee";

      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
    }
  }
}

export function drawPlayer() {
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(
    player.x * cellSize + cellSize / 2,
    player.y * cellSize + cellSize / 2,
    cellSize / 3,
    0, Math.PI * 2
  );
  ctx.fill();
}

export function drawBlind() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

export function render() {
  drawMaze();
  drawPlayer();
}