New Page

import react from 'react';

function flightsimulator() {
  let plane = {
    x: 50,
    y: 50,
  };

  function handleKeyDown(event) {
    switch (event.key) {
      case "ArrowUp":
        plane.y -= 10;
        break;
      case "ArrowDown":
        plane.y += 10;
        break;
      case "ArrowLeft":
        plane.x -= 10;
        break;
      case "ArrowRight":
        plane.x += 10;
        break;
    }
    document.getElementById("plane").style.top = plane.y + "%";
    document.getElementById("plane").style.left = plane.x + "%";
  }

  return (
    <div class="h-screen w-screen bg-blue-500 relative" tabIndex="0" onKeyDown={handleKeyDown}>
      <div id="plane" class="absolute bg-red-500 w-10 h-10" style={{ top: plane.y + "%", left: plane.x + "%" }}></div>
    </div>
  );
}

export default flightsimulator;