<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Smooth Turning + Camera Rotation</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%;
  }
  #map {
    position: absolute;
    inset: 0;
  }

  /* NEW CAR ICON */
  #car {
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;

    /* Triangle arrow car */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #00eaff; /* front of car */
    filter: drop-shadow(0 0 6px #00eaff);
  }
</style>
</head>
<body>

<div id="map"></div>
<div id="car"></div>

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

<script>
/* ---------------- BASIC CONFIG ---------------- */
let player = {
  lng: 173.28463,
  lat: -41.27011,
  heading: 0,          // degrees
  speed: 25,           // meters per second
  turnSpeed: 90        // degrees per second
};

const keys = { w:false, s:false, a:false, d:false };

const METERS_PER_DEG_LAT = 111320;

/* Camera */
let cameraBearing = 0;

/* ---------------- INPUT ---------------- */
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;
});

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

/* ---------------- MAP INIT ---------------- */
let map;
let lastTime = performance.now();

window.onload = () => {
  map = new maplibregl.Map({
    container: 'map',
    style: 'https://api.maptiler.com/maps/019d3452-4395-7ecd-bbf0-c64a3d5060cd/style.json?key=uHmPABwBFcVhiPJcdCzb',
    center: [player.lng, player.lat],
    zoom: 19,
    pitch: 45,
    bearing: 0
  });

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

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

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

  updatePlayer(dt);
  updateCamera(dt);

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

  // Rotate car icon relative to camera
  document.getElementById("car").style.transform =
    `translate(-50%, -50%) rotate(${player.heading - cameraBearing}deg)`;
}

/* ---------------- VEHICLE MOVEMENT ---------------- */
function updatePlayer(dt) {
  const metersPerDegLng = METERS_PER_DEG_LAT * Math.cos(player.lat * Math.PI/180);

  // Smooth turning
  let turnRate = player.turnSpeed;
  if (keys.w || keys.s) turnRate *= 1.2;

  if (keys.a) player.heading += turnRate * dt; // left
  if (keys.d) player.heading -= turnRate * dt; // right

  // Forward/backward
  let move = 0;
  if (keys.w) move = player.speed * dt;
  if (keys.s) move = -player.speed * dt;

  const rad = player.heading * Math.PI / 180;
  const dx = Math.cos(rad) * move;
  const dy = Math.sin(rad) * move;

  player.lat += dy / METERS_PER_DEG_LAT;
  player.lng += dx / metersPerDegLng;
}

/* ---------------- CAMERA ROTATION ---------------- */
function updateCamera(dt) {
  const diff = ((player.heading - cameraBearing + 540) % 360) - 180;
  cameraBearing += diff * 4 * dt;

  map.setBearing(cameraBearing);
}
</script>

</body>
</html>
