<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GTA‑V Style 2.5D Driving</title>

<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet">

<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    background: #000;
  }
  #map {
    position: absolute;
    inset: 0;
  }
  #game {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Pause menu */
  #pauseMenu {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    padding: 20px;
    border-radius: 12px;
    color: #00eaff;
    font-family: system-ui, sans-serif;
    display: none;
    z-index: 20;
    text-align: center;
  }
  .pm-btn {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    background: #111;
    border: 1px solid #00eaff;
    color: #00eaff;
    border-radius: 8px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="map"></div>
<canvas id="game"></canvas>

<div id="pauseMenu">
  <button class="pm-btn" id="toggleView">Toggle View (V)</button>
  <button class="pm-btn" id="toggleOverride">View Override</button>
  <button class="pm-btn" id="closePause">Close</button>
</div>

<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>

<script>
/* ---------------------------------------------------
   INPUT
--------------------------------------------------- */
const keys = { w:false, s:false, a:false, d:false, esc:false };

window.addEventListener("keydown", e => {
  if (e.key === "w") keys.w = true;
  if (e.key === "s") keys.s = true;
  if (e.key === "a") keys.a = true;
  if (e.key === "d") keys.d = true;
  if (e.key === "Escape") togglePauseMenu();
  if (e.key === "v") toggleCameraMode();
});

window.addEventListener("keyup", e => {
  if (e.key === "w") keys.w = false;
  if (e.key === "s") keys.s = false;
  if (e.key === "a") keys.a = false;
  if (e.key === "d") keys.d = false;
});

/* ---------------------------------------------------
   CAMERA MODES
--------------------------------------------------- */
let chaseCam = true;        // GTA‑V mode
let viewOverride = false;   // Manual camera rotation
let cameraPitch = 55;       // 2.5D angle

function toggleCameraMode() {
  chaseCam = !chaseCam;
}

function toggleOverrideMode() {
  viewOverride = !viewOverride;
}

/* ---------------------------------------------------
   PLAYER (REALISTIC CAR PHYSICS)
--------------------------------------------------- */
class Player {
  constructor(lng, lat) {
    this.lng = lng;
    this.lat = lat;

    this.heading = 0;       // degrees
    this.speed = 0;         // m/s
    this.maxSpeed = 40;
    this.accel = 20;
    this.brake = 30;
    this.turnRate = 120;    // deg/sec
    this.friction = 8;

    this.img = new Image();
    this.img.src = "player.png";
  }

  update(dt) {
    // Steering
    if (keys.a) this.heading -= this.turnRate * dt;
    if (keys.d) this.heading += this.turnRate * dt;

    // Acceleration
    if (keys.w) this.speed += this.accel * dt;
    if (keys.s) this.speed -= this.brake * dt;

    // Clamp speed
    if (this.speed > this.maxSpeed) this.speed = this.maxSpeed;
    if (this.speed < -this.maxSpeed * 0.4) this.speed = -this.maxSpeed * 0.4;

    // Friction
    if (!keys.w && !keys.s) {
      if (this.speed > 0) this.speed -= this.friction * dt;
      if (this.speed < 0) this.speed += this.friction * dt;
      if (Math.abs(this.speed) < 0.1) this.speed = 0;
    }

    // Movement
    const rad = this.heading * Math.PI / 180;
    const dx = Math.cos(rad) * this.speed * dt;
    const dy = Math.sin(rad) * this.speed * dt;

    const p = map.project([this.lng, this.lat]);
    const newPoint = { x: p.x + dx, y: p.y + dy };
    const ll = map.unproject(newPoint);

    this.lng = ll.lng;
    this.lat = ll.lat;
  }

  draw(ctx) {
    const pos = map.project([this.lng, this.lat]);
    const size = 50;

    ctx.save();
    ctx.translate(pos.x, pos.y);

    // Car always points up in chase cam
    if (chaseCam) {
      ctx.rotate(0);
    } else {
      ctx.rotate(this.heading * Math.PI / 180);
    }

    ctx.drawImage(this.img, -size/2, -size/2, size, size);
    ctx.restore();
  }
}

/* ---------------------------------------------------
   INIT
--------------------------------------------------- */
let map, player, canvas, ctx;
let lastTime = performance.now();

window.onload = () => {
  map = new maplibregl.Map({
    container: 'map',
    style: './map-style.json',   // Your neon theme
    center: [173.284, -41.270],
    zoom: 17.5,
    pitch: cameraPitch,
    bearing: 0
  });

  map.keyboard.disable();
  map.dragRotate.enable();
  map.touchZoomRotate.disableRotation();

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

  resizeCanvas();
  window.addEventListener("resize", resizeCanvas);

  player = new Player(173.284, -41.270);

  map.on("render", gameLoop);
};

/* ---------------------------------------------------
   MAIN LOOP
--------------------------------------------------- */
function gameLoop() {
  const now = performance.now();
  const dt = (now - lastTime) / 1000;
  lastTime = now;

  player.update(dt);

  // Camera follow
  if (chaseCam) {
    map.setPitch(cameraPitch);

    if (!viewOverride) {
      map.setBearing(player.heading);
    }

    map.setCenter([player.lng, player.lat]);
  } else {
    map.setPitch(0);
    map.setBearing(0);
    map.setCenter([player.lng, player.lat]);
  }

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.draw(ctx);
}

/* ---------------------------------------------------
   HELPERS
--------------------------------------------------- */
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

/* ---------------------------------------------------
   PAUSE MENU
--------------------------------------------------- */
function togglePauseMenu() {
  const pm = document.getElementById("pauseMenu");
  pm.style.display = pm.style.display === "block" ? "none" : "block";
}

document.getElementById("toggleView").onclick = toggleCameraMode;
document.getElementById("toggleOverride").onclick = toggleOverrideMode;
document.getElementById("closePause").onclick = togglePauseMenu;

</script>

</body>
</html>
