const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let player = { x: 0, y: 1.6, z: 0, yaw: 0, pitch: 0 };
let keys = {};

const WORLD_SIZE = 16;
let world = {};

// generate flat world
for (let x = -WORLD_SIZE; x < WORLD_SIZE; x++) {
  for (let z = -WORLD_SIZE; z < WORLD_SIZE; z++) {
    world[`${x},0,${z}`] = 1;
  }
}

document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);

document.body.requestPointerLock =
  document.body.requestPointerLock ||
  document.body.mozRequestPointerLock;

canvas.onclick = () => document.body.requestPointerLock();

document.addEventListener("mousemove", e => {
  if (document.pointerLockElement === document.body) {
    player.yaw -= e.movementX * 0.002;
    player.pitch -= e.movementY * 0.002;
    player.pitch = Math.max(-1.5, Math.min(1.5, player.pitch));
  }
});

function update() {
  let speed = 0.05;
  if (keys["w"]) {
    player.x += Math.sin(player.yaw) * speed;
    player.z += Math.cos(player.yaw) * speed;
  }
  if (keys["s"]) {
    player.x -= Math.sin(player.yaw) * speed;
    player.z -= Math.cos(player.yaw) * speed;
  }
  if (keys["a"]) {
    player.x -= Math.cos(player.yaw) * speed;
    player.z += Math.sin(player.yaw) * speed;
  }
  if (keys["d"]) {
    player.x += Math.cos(player.yaw) * speed;
    player.z -= Math.sin(player.yaw) * speed;
  }
}

function project(x, y, z) {
  let dx = x - player.x;
  let dy = y - player.y;
  let dz = z - player.z;

  let sinY = Math.sin(player.yaw);
  let cosY = Math.cos(player.yaw);

  let xz = cosY * dx - sinY * dz;
  let zz = sinY * dx + cosY * dz;

  let scale = 300 / zz;
  return {
    x: canvas.width / 2 + xz * scale,
    y: canvas.height / 2 - dy * scale,
    size: scale
  };
}

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

  Object.keys(world).forEach(key => {
    let [x, y, z] = key.split(",").map(Number);
    let p = project(x + 0.5, y + 0.5, z + 0.5);
    if (p.size > 0) {
      ctx.fillStyle = "green";
      ctx.fillRect(p.x - p.size, p.y - p.size, p.size * 2, p.size * 2);
    }
  });
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

loop();