groove-dev 0.27.110 → 0.27.111

package/codex/browser-racing-game/src/main.ts

@@ -1,913 +0,0 @@
-import './app.css';
-
-type Phase = 'menu' | 'countdown' | 'racing' | 'finished';
-
-type Vec = { x: number; y: number };
-
-type TrackSample = {
-  position: Vec;
-  tangent: Vec;
-  normal: Vec;
-  angle: number;
-};
-
-type NearestTrackPoint = TrackSample & {
-  distance: number;
-  along: number;
-  signedOffset: number;
-};
-
-type Racer = {
-  id: string;
-  name: string;
-  color: string;
-  isPlayer: boolean;
-  position: Vec;
-  velocity: Vec;
-  angle: number;
-  speed: number;
-  boost: number;
-  lap: number;
-  progress: number;
-  totalProgress: number;
-  lastProgress: number;
-  lane: number;
-  targetSpeed: number;
-  finished: boolean;
-  finishTime: number | null;
-  bumpFlash: number;
-  offTrack: boolean;
-};
-
-type Particle = {
-  position: Vec;
-  velocity: Vec;
-  color: string;
-  life: number;
-  maxLife: number;
-  size: number;
-};
-
-type Segment = {
-  a: Vec;
-  b: Vec;
-  length: number;
-  start: number;
-};
-
-const WORLD = { width: 2400, height: 1500 };
-const TRACK_HALF_WIDTH = 145;
-const TRACK_EDGE_WIDTH = 22;
-const TOTAL_LAPS = 3;
-const PLAYER_MAX_SPEED = 760;
-const BOOST_MAX_SPEED = 1040;
-const AI_COUNT = 7;
-
-const WAYPOINTS: Vec[] = [
-  { x: 520, y: 1070 },
-  { x: 350, y: 760 },
-  { x: 470, y: 360 },
-  { x: 880, y: 230 },
-  { x: 1320, y: 335 },
-  { x: 1585, y: 245 },
-  { x: 2040, y: 390 },
-  { x: 2180, y: 740 },
-  { x: 2020, y: 1075 },
-  { x: 1600, y: 1235 },
-  { x: 1260, y: 1045 },
-  { x: 940, y: 1250 }
-];
-
-const AI_NAMES = ['Vega', 'Blitz', 'Nova', 'Apex', 'Turbo', 'Rook', 'Echo'];
-const AI_COLORS = ['#ff4d6d', '#f7b731', '#45aaf2', '#a55eea', '#26de81', '#fd9644', '#d1d8e0'];
-const FINISH_DISTANCE = trackFinishBuffer();
-
-const app = document.querySelector<HTMLDivElement>('#app');
-if (!app) throw new Error('Missing #app root');
-
-app.innerHTML = `
-  <main class="shell">
-    <section class="hero-panel" aria-label="Game introduction">
-      <div>
-        <p class="eyebrow">Apex Rush GP</p>
-        <h1>Canvas racing with boost, bruises, and bot rivals.</h1>
-        <p class="lede">Thread the racing line, manage turbo, and out-drag seven AI competitors across ${TOTAL_LAPS} laps.</p>
-      </div>
-      <div class="controls-card">
-        <div><kbd>W</kbd><kbd>↑</kbd><span>Throttle</span></div>
-        <div><kbd>S</kbd><kbd>↓</kbd><span>Brake / reverse</span></div>
-        <div><kbd>A</kbd><kbd>D</kbd><kbd>←</kbd><kbd>→</kbd><span>Steer</span></div>
-        <div><kbd>Space</kbd><span>Boost</span></div>
-      </div>
-    </section>
-
-    <section class="game-card" aria-label="Apex Rush GP racing game">
-      <canvas id="raceCanvas" aria-label="Top-down racing canvas"></canvas>
-      <div class="hud top-left">
-        <span class="label">Speed</span>
-        <strong id="speedText">0</strong>
-        <span class="unit">km/h</span>
-      </div>
-      <div class="hud top-center">
-        <span class="label">Lap</span>
-        <strong id="lapText">1/${TOTAL_LAPS}</strong>
-      </div>
-      <div class="hud top-right">
-        <span class="label">Place</span>
-        <strong id="placeText">P1</strong>
-      </div>
-      <div class="boost-meter" aria-label="Boost meter"><span id="boostFill"></span></div>
-      <canvas id="miniMap" class="mini-map" aria-label="Track minimap"></canvas>
-      <div id="banner" class="banner">
-        <p class="eyebrow">Ready?</p>
-        <h2>Apex Rush GP</h2>
-        <button id="startButton" class="primary-button">Start Race</button>
-      </div>
-      <div id="results" class="results hidden" aria-live="polite"></div>
-    </section>
-  </main>
-`;
-
-const canvas = requireElement<HTMLCanvasElement>('#raceCanvas');
-const miniMap = requireElement<HTMLCanvasElement>('#miniMap');
-const speedText = requireElement<HTMLSpanElement>('#speedText');
-const lapText = requireElement<HTMLSpanElement>('#lapText');
-const placeText = requireElement<HTMLSpanElement>('#placeText');
-const boostFill = requireElement<HTMLSpanElement>('#boostFill');
-const banner = requireElement<HTMLDivElement>('#banner');
-const results = requireElement<HTMLDivElement>('#results');
-const startButton = requireElement<HTMLButtonElement>('#startButton');
-const context = requireCanvasContext(canvas);
-const miniContext = requireCanvasContext(miniMap);
-
-const segments = buildSegments(WAYPOINTS);
-const trackLength = segments.reduce((sum, segment) => sum + segment.length, 0);
-const keys = new Set<string>();
-let racers: Racer[] = [];
-let particles: Particle[] = [];
-let phase: Phase = 'menu';
-let countdownStartedAt = 0;
-let raceStartedAt = 0;
-let lastFrame = performance.now();
-let camera = { x: WORLD.width / 2, y: WORLD.height / 2, shake: 0 };
-let audio: AudioController | null = null;
-let hasFinishedCelebration = false;
-
-function buildSegments(points: Vec[]): Segment[] {
-  let start = 0;
-  return points.map((point, index) => {
-    const next = points[(index + 1) % points.length];
-    const length = distance(point, next);
-    const segment = { a: point, b: next, length, start };
-    start += length;
-    return segment;
-  });
-}
-
-class AudioController {
-  private context: AudioContext;
-  private master: GainNode;
-  private engineOscillator: OscillatorNode;
-  private engineGain: GainNode;
-
-  constructor() {
-    this.context = new AudioContext();
-    this.master = this.context.createGain();
-    this.master.gain.value = 0.16;
-    this.master.connect(this.context.destination);
-
-    this.engineOscillator = this.context.createOscillator();
-    this.engineGain = this.context.createGain();
-    this.engineOscillator.type = 'sawtooth';
-    this.engineOscillator.frequency.value = 70;
-    this.engineGain.gain.value = 0;
-    this.engineOscillator.connect(this.engineGain);
-    this.engineGain.connect(this.master);
-    this.engineOscillator.start();
-  }
-
-  async resume() {
-    if (this.context.state !== 'running') await this.context.resume();
-  }
-
-  updateEngine(speedRatio: number, boosting: boolean) {
-    const now = this.context.currentTime;
-    this.engineOscillator.frequency.setTargetAtTime(65 + speedRatio * 170 + (boosting ? 75 : 0), now, 0.04);
-    this.engineGain.gain.setTargetAtTime(0.015 + speedRatio * 0.07 + (boosting ? 0.035 : 0), now, 0.05);
-  }
-
-  tone(frequency: number, duration = 0.12, type: OscillatorType = 'triangle', gain = 0.08) {
-    const oscillator = this.context.createOscillator();
-    const toneGain = this.context.createGain();
-    oscillator.type = type;
-    oscillator.frequency.value = frequency;
-    toneGain.gain.value = 0;
-    oscillator.connect(toneGain);
-    toneGain.connect(this.master);
-    oscillator.start();
-    const now = this.context.currentTime;
-    toneGain.gain.linearRampToValueAtTime(gain, now + 0.01);
-    toneGain.gain.exponentialRampToValueAtTime(0.001, now + duration);
-    oscillator.stop(now + duration + 0.02);
-  }
-
-  crash() {
-    this.tone(72, 0.18, 'square', 0.1);
-    window.setTimeout(() => this.tone(48, 0.12, 'sawtooth', 0.05), 35);
-  }
-
-  lap() {
-    this.tone(540, 0.1, 'triangle', 0.08);
-    window.setTimeout(() => this.tone(760, 0.14, 'triangle', 0.08), 85);
-  }
-
-  countdown(number: number) {
-    this.tone(number === 0 ? 880 : 420, number === 0 ? 0.28 : 0.12, 'sine', 0.1);
-  }
-}
-
-function createRacers(): Racer[] {
-  const gridDistance = trackLength - 170;
-  const playerStart = pointAtDistance(gridDistance, 0);
-  const allRacers: Racer[] = [
-    {
-      id: 'player',
-      name: 'You',
-      color: '#33afbc',
-      isPlayer: true,
-      position: playerStart.position,
-      velocity: { x: 0, y: 0 },
-      angle: playerStart.angle,
-      speed: 0,
-      boost: 100,
-      lap: 1,
-      progress: gridDistance,
-      totalProgress: 0,
-      lastProgress: gridDistance,
-      lane: 0,
-      targetSpeed: PLAYER_MAX_SPEED,
-      finished: false,
-      finishTime: null,
-      bumpFlash: 0,
-      offTrack: false
-    }
-  ];
-
-  for (let index = 0; index < AI_COUNT; index += 1) {
-    const row = Math.floor((index + 1) / 2);
-    const side = index % 2 === 0 ? -1 : 1;
-    const lane = side * (42 + row * 7);
-    const sample = pointAtDistance(gridDistance - 72 * (index + 1), lane);
-    allRacers.push({
-      id: `ai-${index}`,
-      name: AI_NAMES[index],
-      color: AI_COLORS[index],
-      isPlayer: false,
-      position: sample.position,
-      velocity: { x: 0, y: 0 },
-      angle: sample.angle,
-      speed: 0,
-      boost: 100,
-      lap: 1,
-      progress: wrapDistance(gridDistance - 72 * (index + 1)),
-      totalProgress: -72 * (index + 1),
-      lastProgress: wrapDistance(gridDistance - 72 * (index + 1)),
-      lane,
-      targetSpeed: 650 + index * 12 + Math.random() * 52,
-      finished: false,
-      finishTime: null,
-      bumpFlash: 0,
-      offTrack: false
-    });
-  }
-
-  return allRacers;
-}
-
-function startCountdown() {
-  audio ??= new AudioController();
-  void audio.resume();
-  phase = 'countdown';
-  racers = createRacers();
-  particles = [];
-  countdownStartedAt = performance.now();
-  raceStartedAt = 0;
-  hasFinishedCelebration = false;
-  results.classList.add('hidden');
-  banner.classList.remove('hidden');
-  banner.innerHTML = `<p class="eyebrow">Engines hot</p><h2 id="countdownText">3</h2>`;
-  audio.countdown(3);
-}
-
-function beginRace() {
-  phase = 'racing';
-  raceStartedAt = performance.now();
-  banner.classList.add('hidden');
-}
-
-function finishRace() {
-  phase = 'finished';
-  banner.classList.add('hidden');
-  const standings = rankedRacers();
-  const playerPlace = standings.findIndex((racer) => racer.isPlayer) + 1;
-  results.classList.remove('hidden');
-  results.innerHTML = `
-    <p class="eyebrow">Race Complete</p>
-    <h2>${ordinal(playerPlace)} place!</h2>
-    <ol>${standings
-      .map((racer, index) => `<li><span>${index + 1}. ${racer.name}</span><strong>${formatRaceTime(racer.finishTime ?? performance.now())}</strong></li>`)
-      .join('')}</ol>
-    <button id="restartButton" class="primary-button">Race Again</button>
-  `;
-  results.querySelector<HTMLButtonElement>('#restartButton')?.addEventListener('click', startCountdown);
-}
-
-function update(delta: number, now: number) {
-  if (phase === 'countdown') {
-    const elapsed = (now - countdownStartedAt) / 1000;
-    const countdownText = document.querySelector<HTMLHeadingElement>('#countdownText');
-    const number = Math.max(0, 3 - Math.floor(elapsed));
-    if (countdownText) countdownText.textContent = number === 0 ? 'GO!' : String(number);
-    if (Math.abs(elapsed - 1) < delta) audio?.countdown(2);
-    if (Math.abs(elapsed - 2) < delta) audio?.countdown(1);
-    if (Math.abs(elapsed - 3) < delta) audio?.countdown(0);
-    if (elapsed >= 3.65) beginRace();
-  }
-
-  if (phase === 'racing' || phase === 'finished') {
-    for (const racer of racers) {
-      if (racer.finished) continue;
-      if (racer.isPlayer) updatePlayer(racer, delta);
-      else updateAi(racer, delta, now);
-      updateRacerProgress(racer, now);
-      racer.bumpFlash = Math.max(0, racer.bumpFlash - delta * 4);
-    }
-
-    handleCollisions(delta);
-    updateParticles(delta);
-    updateCamera(delta);
-    updateHud();
-
-    const player = racers[0];
-    audio?.updateEngine(Math.min(1, Math.abs(player.speed) / PLAYER_MAX_SPEED), keys.has(' ') && player.boost > 0 && phase === 'racing');
-
-    if (phase === 'racing' && player.finished && !hasFinishedCelebration) {
-      hasFinishedCelebration = true;
-      audio?.lap();
-      finishRace();
-    }
-  } else {
-    updateCamera(delta);
-    updateHud();
-  }
-}
-
-function updatePlayer(player: Racer, delta: number) {
-  const throttle = pressed('w', 'arrowup');
-  const brake = pressed('s', 'arrowdown');
-  const steerLeft = pressed('a', 'arrowleft');
-  const steerRight = pressed('d', 'arrowright');
-  const boosting = keys.has(' ') && player.boost > 0 && player.speed > 120;
-
-  if (throttle) player.speed += 620 * delta;
-  if (brake) player.speed -= player.speed > 60 ? 840 * delta : 430 * delta;
-  if (!throttle && !brake) player.speed *= 1 - Math.min(0.045, delta * 1.7);
-
-  if (boosting) {
-    player.speed += 930 * delta;
-    player.boost = Math.max(0, player.boost - 35 * delta);
-    emitExhaust(player, '#59f3ff', 2);
-  } else {
-    player.boost = Math.min(100, player.boost + 10 * delta);
-  }
-
-  const nearest = nearestTrackPoint(player.position);
-  player.offTrack = nearest.distance > TRACK_HALF_WIDTH - 8;
-  const maxSpeed = boosting ? BOOST_MAX_SPEED : PLAYER_MAX_SPEED;
-  const surfacePenalty = player.offTrack ? 0.66 : 1;
-  player.speed = clamp(player.speed, -220, maxSpeed * surfacePenalty);
-
-  if (player.offTrack) {
-    player.speed *= 1 - Math.min(0.04, delta * 1.8);
-    if (Math.random() < 0.7) emitExhaust(player, '#b28758', 1);
-  }
-
-  const steerInput = Number(steerRight) - Number(steerLeft);
-  const speedGrip = clamp(Math.abs(player.speed) / PLAYER_MAX_SPEED, 0, 1);
-  player.angle += steerInput * delta * (1.45 + speedGrip * 2.1) * Math.sign(player.speed || 1);
-
-  player.velocity.x = Math.cos(player.angle) * player.speed;
-  player.velocity.y = Math.sin(player.angle) * player.speed;
-  player.position.x += player.velocity.x * delta;
-  player.position.y += player.velocity.y * delta;
-  constrainToTrackBounds(player);
-
-  if (Math.abs(player.speed) > 180 && Math.random() < 0.25) emitExhaust(player, player.offTrack ? '#b28758' : '#c9d8e8', 1);
-}
-
-function updateAi(racer: Racer, delta: number, now: number) {
-  const lookAhead = 130 + Math.abs(racer.speed) * 0.34;
-  const wobble = Math.sin(now / 820 + Number(racer.id.slice(-1)) * 1.7) * 14;
-  const target = pointAtDistance(racer.progress + lookAhead, racer.lane + wobble);
-  const desiredAngle = Math.atan2(target.position.y - racer.position.y, target.position.x - racer.position.x);
-  const turn = normalizeAngle(desiredAngle - racer.angle);
-  racer.angle += clamp(turn, -2.45 * delta, 2.45 * delta);
-
-  const nearest = nearestTrackPoint(racer.position);
-  racer.offTrack = nearest.distance > TRACK_HALF_WIDTH - 18;
-  const cornerIntensity = Math.abs(normalizeAngle(target.angle - pointAtDistance(racer.progress + 20).angle));
-  const desiredSpeed = racer.targetSpeed * (1 - clamp(cornerIntensity * 0.7, 0, 0.34)) * (racer.offTrack ? 0.72 : 1);
-  racer.speed += clamp(desiredSpeed - racer.speed, -520 * delta, 360 * delta);
-
-  if (racer.boost > 18 && Math.abs(turn) < 0.16 && racer.speed > 280 && Math.random() < 0.008) {
-    racer.speed += 160 * delta;
-    racer.boost -= 16 * delta;
-    emitExhaust(racer, '#8cf7ff', 1);
-  } else {
-    racer.boost = Math.min(100, racer.boost + 5 * delta);
-  }
-
-  racer.speed = clamp(racer.speed, 0, 850);
-  racer.velocity.x = Math.cos(racer.angle) * racer.speed;
-  racer.velocity.y = Math.sin(racer.angle) * racer.speed;
-  racer.position.x += racer.velocity.x * delta;
-  racer.position.y += racer.velocity.y * delta;
-  constrainToTrackBounds(racer);
-}
-
-function updateRacerProgress(racer: Racer, now: number) {
-  const nearest = nearestTrackPoint(racer.position);
-  const previousLap = racer.lap;
-  racer.lastProgress = racer.progress;
-  racer.progress = nearest.along;
-  let deltaProgress = racer.progress - racer.lastProgress;
-  if (deltaProgress < -trackLength * 0.5) deltaProgress += trackLength;
-  if (deltaProgress > trackLength * 0.5) deltaProgress -= trackLength;
-  if (deltaProgress > -90) {
-    racer.totalProgress += Math.max(0, deltaProgress);
-    racer.lap = clamp(Math.floor(racer.totalProgress / trackLength) + 1, 1, TOTAL_LAPS);
-    if (racer.isPlayer && racer.lap > previousLap && racer.lap <= TOTAL_LAPS) audio?.lap();
-  }
-
-  if (!racer.finished && racer.totalProgress >= trackLength * TOTAL_LAPS - FINISH_DISTANCE) {
-    racer.finished = true;
-    racer.finishTime = now;
-    racer.speed *= 0.72;
-  }
-}
-
-function constrainToTrackBounds(racer: Racer) {
-  const nearest = nearestTrackPoint(racer.position);
-  if (nearest.distance > TRACK_HALF_WIDTH + 92) {
-    racer.position.x = nearest.position.x + nearest.normal.x * Math.sign(nearest.signedOffset) * (TRACK_HALF_WIDTH + 92);
-    racer.position.y = nearest.position.y + nearest.normal.y * Math.sign(nearest.signedOffset) * (TRACK_HALF_WIDTH + 92);
-    racer.speed *= 0.62;
-  }
-}
-
-function handleCollisions(delta: number) {
-  for (let i = 0; i < racers.length; i += 1) {
-    for (let j = i + 1; j < racers.length; j += 1) {
-      const a = racers[i];
-      const b = racers[j];
-      if (a.finished || b.finished) continue;
-      const dx = b.position.x - a.position.x;
-      const dy = b.position.y - a.position.y;
-      const gap = Math.hypot(dx, dy);
-      const minimum = 42;
-      if (gap > 0 && gap < minimum) {
-        const normal = { x: dx / gap, y: dy / gap };
-        const push = (minimum - gap) * 0.55;
-        a.position.x -= normal.x * push;
-        a.position.y -= normal.y * push;
-        b.position.x += normal.x * push;
-        b.position.y += normal.y * push;
-        const impact = Math.abs(a.speed - b.speed) * 0.18 + 80;
-        a.speed = Math.max(-120, a.speed - impact * delta * 5);
-        b.speed = Math.max(-120, b.speed - impact * delta * 5);
-        a.bumpFlash = 1;
-        b.bumpFlash = 1;
-        camera.shake = Math.max(camera.shake, Math.min(18, impact * 0.04));
-        if (a.isPlayer || b.isPlayer) audio?.crash();
-        for (let spark = 0; spark < 9; spark += 1) {
-          particles.push({
-            position: { x: (a.position.x + b.position.x) / 2, y: (a.position.y + b.position.y) / 2 },
-            velocity: rotate({ x: 70 + Math.random() * 260, y: 0 }, Math.random() * Math.PI * 2),
-            color: Math.random() > 0.45 ? '#ffd166' : '#ffffff',
-            life: 0.32,
-            maxLife: 0.32,
-            size: 2 + Math.random() * 3
-          });
-        }
-      }
-    }
-  }
-}
-
-function updateParticles(delta: number) {
-  particles = particles.filter((particle) => {
-    particle.life -= delta;
-    particle.position.x += particle.velocity.x * delta;
-    particle.position.y += particle.velocity.y * delta;
-    particle.velocity.x *= 1 - Math.min(0.08, delta * 4);
-    particle.velocity.y *= 1 - Math.min(0.08, delta * 4);
-    return particle.life > 0;
-  });
-}
-
-function updateCamera(delta: number) {
-  const player = racers[0];
-  const targetX = player?.position.x ?? WORLD.width / 2;
-  const targetY = player?.position.y ?? WORLD.height / 2;
-  camera.x += (targetX - camera.x) * Math.min(1, delta * 5.5);
-  camera.y += (targetY - camera.y) * Math.min(1, delta * 5.5);
-  camera.shake = Math.max(0, camera.shake - delta * 28);
-}
-
-function render() {
-  const width = canvas.width / devicePixelRatio;
-  const height = canvas.height / devicePixelRatio;
-  context.save();
-  context.scale(devicePixelRatio, devicePixelRatio);
-  context.clearRect(0, 0, width, height);
-
-  const shakeX = (Math.random() - 0.5) * camera.shake;
-  const shakeY = (Math.random() - 0.5) * camera.shake;
-  context.translate(width / 2 - camera.x + shakeX, height / 2 - camera.y + shakeY);
-
-  drawWorld(context);
-  drawTrack(context);
-  for (const particle of particles) drawParticle(context, particle);
-  for (const racer of [...racers].sort((a, b) => a.position.y - b.position.y)) drawRacer(context, racer);
-  context.restore();
-
-  drawVignette(context, width, height);
-  renderMinimap();
-}
-
-function drawWorld(ctx: CanvasRenderingContext2D) {
-  const gradient = ctx.createLinearGradient(0, 0, WORLD.width, WORLD.height);
-  gradient.addColorStop(0, '#102315');
-  gradient.addColorStop(0.5, '#18351f');
-  gradient.addColorStop(1, '#0b1c13');
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, WORLD.width, WORLD.height);
-
-  ctx.globalAlpha = 0.18;
-  ctx.strokeStyle = '#d8f5a2';
-  ctx.lineWidth = 2;
-  for (let x = -100; x < WORLD.width + 100; x += 92) {
-    ctx.beginPath();
-    ctx.moveTo(x, 0);
-    ctx.lineTo(x + 360, WORLD.height);
-    ctx.stroke();
-  }
-  ctx.globalAlpha = 1;
-
-  drawGrandstand(ctx, 1430, 92, 455, 95, '#172336');
-  drawGrandstand(ctx, 1670, 1325, 510, 88, '#2a1731');
-  drawPaddock(ctx);
-}
-
-function drawGrandstand(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, color: string) {
-  ctx.fillStyle = 'rgba(0,0,0,0.24)';
-  roundRect(ctx, x + 10, y + 12, width, height, 16);
-  ctx.fill();
-  ctx.fillStyle = color;
-  roundRect(ctx, x, y, width, height, 16);
-  ctx.fill();
-  for (let row = 0; row < 4; row += 1) {
-    for (let seat = 0; seat < 22; seat += 1) {
-      ctx.fillStyle = ['#33afbc', '#f7b731', '#ff4d6d', '#f8fbff'][seat % 4];
-      ctx.globalAlpha = 0.72;
-      ctx.fillRect(x + 18 + seat * 19, y + 16 + row * 17, 10, 7);
-    }
-  }
-  ctx.globalAlpha = 1;
-}
-
-function drawPaddock(ctx: CanvasRenderingContext2D) {
-  ctx.fillStyle = '#202936';
-  roundRect(ctx, 1040, 620, 430, 245, 24);
-  ctx.fill();
-  ctx.fillStyle = '#101722';
-  roundRect(ctx, 1080, 655, 350, 52, 12);
-  ctx.fill();
-  ctx.fillStyle = '#33afbc';
-  ctx.font = '700 32px Inter, sans-serif';
-  ctx.fillText('APEX RUSH', 1110, 693);
-}
-
-function drawTrack(ctx: CanvasRenderingContext2D) {
-  drawTrackStroke(ctx, TRACK_HALF_WIDTH * 2 + TRACK_EDGE_WIDTH * 2, '#f7f9fb');
-  drawTrackStroke(ctx, TRACK_HALF_WIDTH * 2 + TRACK_EDGE_WIDTH, '#d92238', [36, 32]);
-  drawTrackStroke(ctx, TRACK_HALF_WIDTH * 2, '#29313c');
-  drawTrackStroke(ctx, 7, 'rgba(255,255,255,0.28)', [30, 26]);
-  drawTrackStroke(ctx, 3, 'rgba(255,255,255,0.55)');
-
-  const start = pointAtDistance(trackLength - FINISH_DISTANCE);
-  ctx.save();
-  ctx.translate(start.position.x, start.position.y);
-  ctx.rotate(start.angle + Math.PI / 2);
-  for (let row = -4; row < 4; row += 1) {
-    for (let column = -3; column < 3; column += 1) {
-      ctx.fillStyle = (row + column) % 2 === 0 ? '#ffffff' : '#111827';
-      ctx.fillRect(column * 20, row * 18, 20, 18);
-    }
-  }
-  ctx.restore();
-}
-
-function drawTrackStroke(ctx: CanvasRenderingContext2D, width: number, color: string, dash: number[] = []) {
-  ctx.save();
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-  ctx.lineWidth = width;
-  ctx.strokeStyle = color;
-  ctx.setLineDash(dash);
-  ctx.beginPath();
-  WAYPOINTS.forEach((point, index) => {
-    if (index === 0) ctx.moveTo(point.x, point.y);
-    else ctx.lineTo(point.x, point.y);
-  });
-  ctx.closePath();
-  ctx.stroke();
-  ctx.restore();
-}
-
-function drawRacer(ctx: CanvasRenderingContext2D, racer: Racer) {
-  ctx.save();
-  ctx.translate(racer.position.x, racer.position.y);
-  ctx.rotate(racer.angle);
-
-  ctx.fillStyle = 'rgba(0,0,0,0.32)';
-  roundRect(ctx, -23, -15 + 7, 46, 30, 8);
-  ctx.fill();
-
-  ctx.fillStyle = racer.bumpFlash > 0 ? '#ffffff' : racer.color;
-  roundRect(ctx, -25, -14, 50, 28, 8);
-  ctx.fill();
-
-  ctx.fillStyle = '#07111e';
-  roundRect(ctx, -5, -10, 18, 20, 5);
-  ctx.fill();
-
-  ctx.fillStyle = '#f8fbff';
-  ctx.fillRect(11, -9, 8, 5);
-  ctx.fillRect(11, 4, 8, 5);
-  ctx.fillStyle = '#111827';
-  ctx.fillRect(-18, -18, 12, 7);
-  ctx.fillRect(-18, 11, 12, 7);
-  ctx.fillRect(9, -18, 12, 7);
-  ctx.fillRect(9, 11, 12, 7);
-
-  if (racer.isPlayer) {
-    ctx.strokeStyle = '#8df8ff';
-    ctx.lineWidth = 3;
-    ctx.globalAlpha = 0.75;
-    roundRect(ctx, -31, -20, 62, 40, 12);
-    ctx.stroke();
-  }
-
-  ctx.restore();
-
-  ctx.fillStyle = 'rgba(2,6,23,0.72)';
-  ctx.font = '700 20px Inter, sans-serif';
-  ctx.textAlign = 'center';
-  ctx.fillText(racer.name, racer.position.x, racer.position.y - 32);
-}
-
-function drawParticle(ctx: CanvasRenderingContext2D, particle: Particle) {
-  ctx.save();
-  ctx.globalAlpha = clamp(particle.life / particle.maxLife, 0, 1);
-  ctx.fillStyle = particle.color;
-  ctx.beginPath();
-  ctx.arc(particle.position.x, particle.position.y, particle.size, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.restore();
-}
-
-function drawVignette(ctx: CanvasRenderingContext2D, width: number, height: number) {
-  const gradient = ctx.createRadialGradient(width / 2, height / 2, height * 0.2, width / 2, height / 2, width * 0.72);
-  gradient.addColorStop(0, 'rgba(0,0,0,0)');
-  gradient.addColorStop(1, 'rgba(0,0,0,0.45)');
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, width, height);
-}
-
-function renderMinimap() {
-  const width = miniMap.width / devicePixelRatio;
-  const height = miniMap.height / devicePixelRatio;
-  miniContext.save();
-  miniContext.scale(devicePixelRatio, devicePixelRatio);
-  miniContext.clearRect(0, 0, width, height);
-  miniContext.fillStyle = 'rgba(7, 17, 30, 0.82)';
-  roundRect(miniContext, 0, 0, width, height, 18);
-  miniContext.fill();
-  miniContext.translate(13, 10);
-  const scale = Math.min((width - 26) / WORLD.width, (height - 22) / WORLD.height);
-  miniContext.scale(scale, scale);
-  miniContext.lineWidth = 46;
-  miniContext.strokeStyle = '#344154';
-  miniContext.lineCap = 'round';
-  miniContext.lineJoin = 'round';
-  miniContext.beginPath();
-  WAYPOINTS.forEach((point, index) => {
-    if (index === 0) miniContext.moveTo(point.x, point.y);
-    else miniContext.lineTo(point.x, point.y);
-  });
-  miniContext.closePath();
-  miniContext.stroke();
-  for (const racer of racers) {
-    miniContext.fillStyle = racer.isPlayer ? '#8df8ff' : racer.color;
-    miniContext.beginPath();
-    miniContext.arc(racer.position.x, racer.position.y, racer.isPlayer ? 34 : 24, 0, Math.PI * 2);
-    miniContext.fill();
-  }
-  miniContext.restore();
-}
-
-function updateHud() {
-  const player = racers[0];
-  if (!player) return;
-  const place = rankedRacers().findIndex((racer) => racer.isPlayer) + 1;
-  speedText.textContent = String(Math.max(0, Math.round(Math.abs(player.speed) * 0.42)));
-  lapText.textContent = `${Math.min(TOTAL_LAPS, player.lap)}/${TOTAL_LAPS}`;
-  placeText.textContent = `P${place}`;
-  boostFill.style.width = `${player.boost}%`;
-}
-
-function rankedRacers() {
-  return [...racers].sort((a, b) => {
-    if (a.finished && b.finished) return (a.finishTime ?? 0) - (b.finishTime ?? 0);
-    if (a.finished) return -1;
-    if (b.finished) return 1;
-    return b.totalProgress - a.totalProgress;
-  });
-}
-
-function pointAtDistance(distanceAlong: number, lane = 0): TrackSample {
-  const wrapped = wrapDistance(distanceAlong);
-  const segment = segments.find((item) => wrapped >= item.start && wrapped <= item.start + item.length) ?? segments[segments.length - 1];
-  const amount = clamp((wrapped - segment.start) / segment.length, 0, 1);
-  const x = lerp(segment.a.x, segment.b.x, amount);
-  const y = lerp(segment.a.y, segment.b.y, amount);
-  const tangent = normalize({ x: segment.b.x - segment.a.x, y: segment.b.y - segment.a.y });
-  const normal = { x: -tangent.y, y: tangent.x };
-  return {
-    position: { x: x + normal.x * lane, y: y + normal.y * lane },
-    tangent,
-    normal,
-    angle: Math.atan2(tangent.y, tangent.x)
-  };
-}
-
-function nearestTrackPoint(position: Vec): NearestTrackPoint {
-  let best: NearestTrackPoint | null = null;
-  for (const segment of segments) {
-    const ab = { x: segment.b.x - segment.a.x, y: segment.b.y - segment.a.y };
-    const ap = { x: position.x - segment.a.x, y: position.y - segment.a.y };
-    const amount = clamp(dot(ap, ab) / dot(ab, ab), 0, 1);
-    const projection = { x: segment.a.x + ab.x * amount, y: segment.a.y + ab.y * amount };
-    const tangent = normalize(ab);
-    const normal = { x: -tangent.y, y: tangent.x };
-    const offset = { x: position.x - projection.x, y: position.y - projection.y };
-    const signedOffset = dot(offset, normal);
-    const candidate: NearestTrackPoint = {
-      position: projection,
-      tangent,
-      normal,
-      angle: Math.atan2(tangent.y, tangent.x),
-      distance: Math.hypot(offset.x, offset.y),
-      along: segment.start + segment.length * amount,
-      signedOffset
-    };
-    if (!best || candidate.distance < best.distance) best = candidate;
-  }
-  if (!best) throw new Error('Track has no segments');
-  return best;
-}
-
-function emitExhaust(racer: Racer, color: string, count: number) {
-  for (let index = 0; index < count; index += 1) {
-    const rear = rotate({ x: -28, y: (Math.random() - 0.5) * 17 }, racer.angle);
-    particles.push({
-      position: { x: racer.position.x + rear.x, y: racer.position.y + rear.y },
-      velocity: rotate({ x: -80 - Math.random() * 120, y: (Math.random() - 0.5) * 90 }, racer.angle),
-      color,
-      life: 0.28 + Math.random() * 0.28,
-      maxLife: 0.56,
-      size: 3 + Math.random() * 5
-    });
-  }
-}
-
-function resize() {
-  const rect = canvas.getBoundingClientRect();
-  canvas.width = Math.floor(rect.width * devicePixelRatio);
-  canvas.height = Math.floor(rect.height * devicePixelRatio);
-  miniMap.width = Math.floor(miniMap.clientWidth * devicePixelRatio);
-  miniMap.height = Math.floor(miniMap.clientHeight * devicePixelRatio);
-}
-
-function loop(now: number) {
-  const delta = Math.min(0.033, (now - lastFrame) / 1000);
-  lastFrame = now;
-  update(delta, now);
-  render();
-  requestAnimationFrame(loop);
-}
-
-function pressed(...candidates: string[]) {
-  return candidates.some((candidate) => keys.has(candidate));
-}
-
-function distance(a: Vec, b: Vec) {
-  return Math.hypot(a.x - b.x, a.y - b.y);
-}
-
-function dot(a: Vec, b: Vec) {
-  return a.x * b.x + a.y * b.y;
-}
-
-function normalize(vector: Vec): Vec {
-  const length = Math.hypot(vector.x, vector.y) || 1;
-  return { x: vector.x / length, y: vector.y / length };
-}
-
-function rotate(vector: Vec, angle: number): Vec {
-  const cosine = Math.cos(angle);
-  const sine = Math.sin(angle);
-  return { x: vector.x * cosine - vector.y * sine, y: vector.x * sine + vector.y * cosine };
-}
-
-function normalizeAngle(angle: number) {
-  return Math.atan2(Math.sin(angle), Math.cos(angle));
-}
-
-function wrapDistance(value: number) {
-  return ((value % trackLength) + trackLength) % trackLength;
-}
-
-function clamp(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value));
-}
-
-function lerp(start: number, end: number, amount: number) {
-  return start + (end - start) * amount;
-}
-
-function ordinal(value: number) {
-  const suffix = value === 1 ? 'st' : value === 2 ? 'nd' : value === 3 ? 'rd' : 'th';
-  return `${value}${suffix}`;
-}
-
-function formatRaceTime(finishTime: number) {
-  if (!raceStartedAt) return '--:--';
-  const elapsed = Math.max(0, finishTime - raceStartedAt);
-  const seconds = Math.floor(elapsed / 1000);
-  const millis = Math.floor((elapsed % 1000) / 10).toString().padStart(2, '0');
-  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}.${millis}`;
-}
-
-function trackFinishBuffer() {
-  return 12;
-}
-
-function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
-  const limitedRadius = Math.min(radius, width / 2, height / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + limitedRadius, y);
-  ctx.arcTo(x + width, y, x + width, y + height, limitedRadius);
-  ctx.arcTo(x + width, y + height, x, y + height, limitedRadius);
-  ctx.arcTo(x, y + height, x, y, limitedRadius);
-  ctx.arcTo(x, y, x + width, y, limitedRadius);
-  ctx.closePath();
-}
-
-function requireElement<T extends HTMLElement>(selector: string): T {
-  const element = document.querySelector<T>(selector);
-  if (!element) throw new Error(`Missing required element: ${selector}`);
-  return element;
-}
-
-function requireCanvasContext(targetCanvas: HTMLCanvasElement): CanvasRenderingContext2D {
-  const canvasContext = targetCanvas.getContext('2d');
-  if (!canvasContext) throw new Error('Canvas 2D context is unavailable');
-  return canvasContext;
-}
-
-window.addEventListener('keydown', (event) => {
-  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) event.preventDefault();
-  keys.add(event.key.toLowerCase());
-});
-
-window.addEventListener('keyup', (event) => {
-  keys.delete(event.key.toLowerCase());
-});
-
-window.addEventListener('resize', resize);
-startButton.addEventListener('click', startCountdown);
-racers = createRacers();
-resize();
-requestAnimationFrame(loop);