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

const ws = new WebSocket("ws://localhost:3000");

let objects = [];

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);

  if (data.type === "init") {
    objects = data.level;
    draw();
  }

  if (data.type === "add") {
    objects.push(data.object);
    draw();
  }
};

canvas.addEventListener("click", (e) => {
  const rect = canvas.getBoundingClientRect();

  const obj = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };

  ws.send(JSON.stringify({
    type: "add",
    object: obj
  }));
});

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

  objects.forEach(obj => {
    ctx.fillRect(obj.x, obj.y, 20, 20);
  });
}