<!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;
  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;
}

/* 🔧 DEV MENU (RIGHT SIDE) */
#devMenu {
  position:absolute;
  top:10px;
  right:10px;
  width:230px;
  background:rgba(0,0,0,0.75);
  color:#00eaff;
  font-family:system-ui;
  padding:12px;
  border-radius:12px;
  z-index:30;
}

#devMenu h3 { margin:0 0 10px 0; }

#devMenu label {
  display:block;
  font-size:12px;
  margin-bottom:6px;
}

#devMenu input {
  width:100%;
}

#devMenu button {
  width:100%;
  margin-top:6px;
  padding:6px;
  background:#111;
  border:1px solid #00eaff;
  color:#00eaff;
  border-radius:6px;
  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>

<!-- 🔧 DEV MENU -->
<div id="devMenu">
  <h3>⚙️ Tuning</h3>

  <label>Acceleration <input id="accel" type="range" min="1" max="50"></label>
  <label>Brake <input id="brake" type="range" min="1" max="60"></label>
  <label>Max Speed <input id="maxSpeed" type="range" min="5" max="100"></label>
  <label>Friction <input id="friction" type="range" min="0" max="20" step="0.5"></label>
  <label>Turn Rate <input id="turnRate" type="range" min="30" max="300"></label>

  <hr>

  <label>Zoom <input id="zoom" type="range" min="15" max="20" step="0.1"></label>
  <label>Pitch <input id="pitch" type="range" min="0" max="80"></label>

  <hr>

  <label>Spawn Lng <input id="spawnLng" type="number" step="0.0001"></label>
  <label>Spawn Lat <input id="spawnLat" type="number" step="0.0001"></label>

  <button id="respawn">Respawn</button>
  <button id="reset">Reset</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 };

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 */
let chaseCam = true;
let viewOverride = false;
let cameraPitch = 55;

function toggleCameraMode(){ chaseCam = !chaseCam; }
function toggleOverrideMode(){ viewOverride = !viewOverride; }

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

    this.heading = 0;
    this.speed = 0;

    this.maxSpeed = 40;
    this.accel = 20;
    this.brake = 30;
    this.turnRate = 120;
    this.friction = 8;

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

  update(dt) {

    // 🔥 SMART STEERING (your only physics upgrade)
    const speedFactor = Math.min(Math.abs(this.speed) / this.maxSpeed, 1);
    const turn = this.turnRate * (0.3 + speedFactor);

    if (keys.a) this.heading -= turn * dt;
    if (keys.d) this.heading += turn * dt;

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

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

    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;
    }

    const rad = this.heading * Math.PI/180;
    const p = map.project([this.lng, this.lat]);

    const np = {
      x: p.x + Math.cos(rad)*this.speed*dt,
      y: p.y + Math.sin(rad)*this.speed*dt
    };

    const ll = map.unproject(np);
    this.lng = ll.lng;
    this.lat = ll.lat;
  }

  draw(ctx) {
    const pos = map.project([this.lng, this.lat]);
    ctx.drawImage(this.img, pos.x-25, pos.y-25, 50, 50);
  }
}

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

window.onload = () => {

  map = new maplibregl.Map({
    container:'map',
    style:'./map-style.json',
    center:[173.284, -41.270],
    zoom:17.5,
    pitch:cameraPitch
  });

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

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

  player = new Player(173.284, -41.270);

  initMenu();

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

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

  player.update(dt);

  if (chaseCam) {
    map.setPitch(cameraPitch);
    if (!viewOverride) map.setBearing(player.heading);
  } else {
    map.setPitch(0);
    map.setBearing(0);
  }

  map.setCenter([player.lng, player.lat]);

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

/* MENU SYSTEM */
function initMenu(){

  const bind = id => {
    const el = document.getElementById(id);
    el.value = player[id] || cameraPitch;

    el.oninput = e => {
      const v = parseFloat(e.target.value);
      if (id in player) player[id] = v;
      if (id === "zoom") map.setZoom(v);
      if (id === "pitch") cameraPitch = v;
    };
  };

  ["accel","brake","maxSpeed","friction","turnRate","zoom","pitch"].forEach(bind);

  spawnLng.value = player.lng;
  spawnLat.value = player.lat;

  respawn.onclick = () => {
    player.lng = parseFloat(spawnLng.value);
    player.lat = parseFloat(spawnLat.value);
  };

  reset.onclick = () => location.reload();
}

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

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

toggleView.onclick = toggleCameraMode;
toggleOverride.onclick = toggleOverrideMode;
closePause.onclick = togglePauseMenu;

</script>

</body>
</html>