// Send data to backend function
function sendData(data) {
      fetch('http://localhost:5000/api/send', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(data)
      })
      .then(res => res.json())
      .then(data => {
        ctx.clearRect(0, 0, 480, 270);
        ctx.beginPath();
        ctx.arc(data.xpos, data.ypos, 10, 0, Math.PI * 2);
        ctx.fill();
        reset = false
      })
      .catch(err => console.error('Error:', err));
    }

// Set up canvas    
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); // 2D context

// Track key presses
var keyDown = {
  "ArrowUp": false,
  "ArrowDown": false,
  "ArrowRight": false,
  "ArrowLeft": false,
}

document.addEventListener('keydown', function (e) {
  let f = e.key
  if (f === "ArrowUp") {
    keyDown.ArrowUp = true;
  } else if (f === "ArrowDown") {
    keyDown.ArrowDown = true;
  } else if (f === "ArrowRight") {
    keyDown.ArrowRight = true;
  } else if (f === "ArrowLeft") {
    keyDown.ArrowLeft = true;
  }
})

document.addEventListener('keyup', function (e) {
  let f = e.key
  if (f === "ArrowUp") {
    keyDown.ArrowUp = false;
  } else if (f === "ArrowDown") {
    keyDown.ArrowDown = false;
  } else if (f === "ArrowRight") {
    keyDown.ArrowRight = false;
  } else if (f === "ArrowLeft") {
    keyDown.ArrowLeft = false;
  }
})

// Start Game
var reset = true
setInterval(() => sendData({reset, keyDown}), 16);