let x = 100;
let y = 100;

let ballPosistions = [];

let radius = 5;
let foodCount = 1000;

let posFood = [];
let colorFood = [];

let wasEaten = [];

// NETZWERK CODE ANFANG 
let ws = new WebSocket("ws://195.90.213.214:7345");
let connected = false;

function receiveMessage(event) {
  let msg = event.data;
  let obj = JSON.parse(msg);

  if(obj.type == "pos"){
    posFood = obj.value;
  }

  if (obj.type == "colors") {
    colorFood = obj.value;
  }

  if (obj.type == "ballPositions"){
    ballPosistions = obj.value;
    radius = ballPosistions[0][2];
  }

  if (obj.type == "wasEaten"){
    wasEaten = obj.value;
  }
}

function newConnection() {
  console.log("Verbindung erfolgreich aufgebaut!");
  connected = true;
}

ws.onopen = newConnection;
ws.onmessage = receiveMessage;
// NETZWERK CODE ENDE

window.addEventListener("click", event => {
  if (event.button == 0) {
    ws.send(JSON.stringify({ type: "boost"})) 
  }
});

function draw(ctx, width, height, mouseX, mouseY) {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(width, 0, width* 3, height * 3);
  ctx.fillRect(0, height, width, height * 2);
  
  grid(ctx, width, height);

  ctx.fillStyle = "#ff000080";
  ctx.fillRect(width, 0, width* 3, height * 3);
  ctx.fillRect(0, height, width, height * 2);

  if (connected) {
    ws.send(JSON.stringify({ type: "ballPos", value: [mouseX, mouseY] })) 
  }

  handleFood(ctx);

  for (let pos of ballPosistions){
    ball(ctx, pos[0], pos[1], pos[2], pos[3], pos[4]);
  }
  
}

function handleFood(ctx){
  for (let i = 0; i < foodCount; i += 2) {
    if (wasEaten.includes(i)) continue;
    food(ctx, posFood[i], posFood[i + 1], colorFood[i]);
  }
}

function grid(ctx, width, height) {
  width = width * 4;
  height = height * 4;
  ctx.strokeStyle = '#c4c4c4ff';
  ctx.beginPath();

  for (let i = 10; i < width; i += 10) {
    ctx.moveTo(i, 0);
    ctx.lineTo(i, height);
  }

  for (let i = 10; i < height; i += 10) {
    ctx.moveTo(0, i);
    ctx.lineTo(width, i);
  }

  ctx.stroke();
}

function ball(ctx, x, y, r, name, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = "red"
  ctx.font = "14px Arial";
  ctx.fillText(name, x, y - r);
}

function food(ctx, x, y, color){
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, 2, 0, Math.PI * 2);
  ctx.fill();
}