groove-dev 0.27.112 → 0.27.113

package/codex-test/offroad-nitro-racer/src/game/Renderer.ts

@@ -0,0 +1,224 @@
+import { Car } from './Car';
+import { Effects } from './Effects';
+import { Track } from './Track';
+import { roundedRect } from './math';
+
+export type Camera = { x: number; y: number; zoom: number; shakeX: number; shakeY: number };
+
+export class Renderer {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private pixelRatio = 1;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Canvas 2D context unavailable');
+    this.ctx = ctx;
+    this.resize();
+    window.addEventListener('resize', () => this.resize());
+  }
+
+  get width(): number {
+    return this.canvas.clientWidth;
+  }
+
+  get height(): number {
+    return this.canvas.clientHeight;
+  }
+
+  resize(): void {
+    this.pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    this.canvas.width = Math.floor(width * this.pixelRatio);
+    this.canvas.height = Math.floor(height * this.pixelRatio);
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+    this.ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+  }
+
+  render(track: Track, cars: Car[], player: Car, effects: Effects, camera: Camera): void {
+    const ctx = this.ctx;
+    ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+    ctx.clearRect(0, 0, this.width, this.height);
+
+    const gradient = ctx.createLinearGradient(0, 0, this.width, this.height);
+    gradient.addColorStop(0, '#70451f');
+    gradient.addColorStop(0.45, '#b67635');
+    gradient.addColorStop(1, '#6c3b1f');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, this.width, this.height);
+
+    ctx.save();
+    ctx.translate(this.width / 2 + camera.shakeX, this.height / 2 + camera.shakeY);
+    ctx.scale(camera.zoom, camera.zoom * 0.86);
+    ctx.translate(-camera.x, -camera.y);
+
+    this.drawGroundNoise(ctx, camera);
+    this.drawTrack(ctx, track);
+    this.drawPickups(ctx, track);
+    this.drawObstacles(ctx, track);
+    effects.render(ctx);
+
+    const sortedCars = [...cars].sort((a, b) => a.y + a.airborne - (b.y + b.airborne));
+    for (const car of sortedCars) this.drawCar(ctx, car, car === player);
+
+    ctx.restore();
+  }
+
+  private drawGroundNoise(ctx: CanvasRenderingContext2D, camera: Camera): void {
+    ctx.save();
+    ctx.globalAlpha = 0.22;
+    for (let i = 0; i < 130; i++) {
+      const x = Math.floor((camera.x - 900) / 90) * 90 + ((i * 277) % 1900);
+      const y = Math.floor((camera.y - 650) / 70) * 70 + ((i * 163) % 1400);
+      ctx.fillStyle = i % 6 === 0 ? '#5c341f' : '#d29554';
+      ctx.beginPath();
+      ctx.ellipse(x, y, 18 + (i % 4) * 8, 5, (i % 9) * 0.5, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  private drawTrack(ctx: CanvasRenderingContext2D, track: Track): void {
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
+    ctx.strokeStyle = '#5b3d2c';
+    ctx.lineWidth = track.roughWidth;
+    this.strokeLoop(ctx, track.points);
+
+    ctx.strokeStyle = '#9a6131';
+    ctx.lineWidth = track.width;
+    this.strokeLoop(ctx, track.points);
+
+    ctx.setLineDash([34, 34]);
+    ctx.strokeStyle = 'rgba(255, 220, 137, 0.34)';
+    ctx.lineWidth = 5;
+    this.strokeLoop(ctx, track.points);
+    ctx.setLineDash([]);
+
+    for (let i = 0; i < track.checkpoints.length; i++) {
+      const p = track.checkpoints[i];
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.fillStyle = i === 0 ? 'rgba(80,255,190,0.35)' : 'rgba(255,255,255,0.14)';
+      ctx.fillRect(-95, -5, 190, 10);
+      ctx.restore();
+    }
+  }
+
+  private drawPickups(ctx: CanvasRenderingContext2D, track: Track): void {
+    for (const pickup of track.pickups) {
+      if (!pickup.active) continue;
+      ctx.save();
+      ctx.translate(pickup.x, pickup.y);
+      ctx.rotate(performance.now() * 0.004);
+      ctx.fillStyle = '#32f5ff';
+      ctx.shadowColor = '#32f5ff';
+      ctx.shadowBlur = 18;
+      ctx.beginPath();
+      ctx.moveTo(0, -26);
+      ctx.lineTo(20, 0);
+      ctx.lineTo(0, 26);
+      ctx.lineTo(-20, 0);
+      ctx.closePath();
+      ctx.fill();
+      ctx.shadowBlur = 0;
+      ctx.fillStyle = '#06343b';
+      ctx.font = 'bold 20px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('N', 0, 1);
+      ctx.restore();
+    }
+  }
+
+  private drawObstacles(ctx: CanvasRenderingContext2D, track: Track): void {
+    for (const obstacle of track.obstacles) {
+      ctx.save();
+      ctx.translate(obstacle.x, obstacle.y);
+      if (obstacle.kind === 'bump') {
+        ctx.fillStyle = '#c88a4c';
+        ctx.strokeStyle = '#5f3925';
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        ctx.ellipse(0, 0, obstacle.radius, obstacle.radius * 0.36, 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+      } else if (obstacle.kind === 'cactus') {
+        ctx.fillStyle = '#216941';
+        ctx.fillRect(-8, -34, 16, 68);
+        ctx.fillRect(-25, -12, 50, 13);
+      } else if (obstacle.kind === 'barrel') {
+        ctx.fillStyle = '#c14c32';
+        ctx.strokeStyle = '#621f1c';
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        ctx.arc(0, 0, obstacle.radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+      } else {
+        ctx.fillStyle = '#4b4038';
+        ctx.beginPath();
+        ctx.ellipse(0, 0, obstacle.radius, obstacle.radius * 0.8, 0.4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+  }
+
+  private drawCar(ctx: CanvasRenderingContext2D, car: Car, isPlayer: boolean): void {
+    ctx.save();
+    ctx.translate(car.x, car.y);
+    ctx.globalAlpha = 0.35;
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.ellipse(0, 18 + car.airborne * 0.18, car.width * 0.76, car.length * 0.42, car.angle, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.globalAlpha = 1;
+    ctx.translate(0, -car.airborne * 0.2);
+    ctx.rotate(car.angle);
+
+    ctx.fillStyle = '#171717';
+    roundedRect(ctx, -car.length * 0.46, -car.width * 0.72, car.length * 0.92, car.width * 1.44, 8);
+    ctx.fill();
+
+    ctx.fillStyle = car.color;
+    roundedRect(ctx, -car.length * 0.5, -car.width * 0.5, car.length, car.width, 10);
+    ctx.fill();
+
+    ctx.fillStyle = car.accent;
+    roundedRect(ctx, -2, -car.width * 0.42, car.length * 0.26, car.width * 0.84, 6);
+    ctx.fill();
+
+    ctx.fillStyle = '#dbeafe';
+    roundedRect(ctx, -car.length * 0.2, -car.width * 0.32, car.length * 0.22, car.width * 0.64, 5);
+    ctx.fill();
+
+    ctx.fillStyle = '#24211f';
+    for (const y of [-car.width * 0.62, car.width * 0.62]) {
+      roundedRect(ctx, -car.length * 0.38, y - 5, 22, 10, 3);
+      ctx.fill();
+      roundedRect(ctx, car.length * 0.14, y - 5, 22, 10, 3);
+      ctx.fill();
+    }
+
+    if (isPlayer) {
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 4;
+      ctx.strokeRect(-car.length * 0.58, -car.width * 0.58, car.length * 1.16, car.width * 1.16);
+    }
+
+    ctx.restore();
+  }
+
+  private strokeLoop(ctx: CanvasRenderingContext2D, points: { x: number; y: number }[]): void {
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}

package/codex-test/offroad-nitro-racer/src/game/Track.ts

@@ -0,0 +1,158 @@
+import { TAU, Vec2, clamp, distance } from './math';
+
+export type Terrain = 'track' | 'sand' | 'rough' | 'mud';
+
+export type TrackSample = {
+  terrain: Terrain;
+  grip: number;
+  speedMultiplier: number;
+  nearest: Vec2;
+  distanceFromCenter: number;
+  progress: number;
+};
+
+export type Obstacle = Vec2 & { radius: number; kind: 'rock' | 'cactus' | 'barrel' | 'bump' };
+export type Pickup = Vec2 & { radius: number; active: boolean; respawn: number };
+
+const CHECKPOINTS = 12;
+
+export class Track {
+  readonly width = 230;
+  readonly roughWidth = 390;
+  readonly lapsToWin = 3;
+  readonly center: Vec2 = { x: 0, y: 0 };
+  readonly points: Vec2[] = [];
+  readonly checkpoints: Vec2[] = [];
+  readonly obstacles: Obstacle[] = [];
+  readonly pickups: Pickup[] = [];
+
+  constructor() {
+    for (let i = 0; i < 220; i++) {
+      const t = i / 220;
+      const a = t * TAU;
+      const wobble = Math.sin(a * 3) * 55 + Math.cos(a * 5) * 24;
+      this.points.push({
+        x: Math.cos(a) * (890 + wobble) + Math.cos(a * 2.2) * 75,
+        y: Math.sin(a) * (550 + Math.sin(a * 4) * 50) + Math.sin(a * 1.5) * 60,
+      });
+    }
+
+    for (let i = 0; i < CHECKPOINTS; i++) {
+      this.checkpoints.push(this.pointAt(i / CHECKPOINTS));
+    }
+
+    this.obstacles.push(
+      { ...this.offsetPoint(0.11, -170), radius: 32, kind: 'rock' },
+      { ...this.offsetPoint(0.19, 145), radius: 30, kind: 'cactus' },
+      { ...this.offsetPoint(0.27, -60), radius: 58, kind: 'bump' },
+      { ...this.offsetPoint(0.36, 150), radius: 34, kind: 'barrel' },
+      { ...this.offsetPoint(0.48, -160), radius: 36, kind: 'rock' },
+      { ...this.offsetPoint(0.57, 60), radius: 60, kind: 'bump' },
+      { ...this.offsetPoint(0.68, 165), radius: 34, kind: 'cactus' },
+      { ...this.offsetPoint(0.78, -145), radius: 36, kind: 'barrel' },
+      { ...this.offsetPoint(0.88, 75), radius: 54, kind: 'bump' },
+    );
+
+    for (const t of [0.14, 0.31, 0.45, 0.62, 0.82]) {
+      this.pickups.push({ ...this.offsetPoint(t, 0), radius: 28, active: true, respawn: 0 });
+    }
+  }
+
+  update(delta: number): void {
+    for (const pickup of this.pickups) {
+      if (!pickup.active) {
+        pickup.respawn -= delta;
+        if (pickup.respawn <= 0) pickup.active = true;
+      }
+    }
+  }
+
+  startPosition(index: number): Vec2 & { angle: number } {
+    const base = this.pointAt(0.985);
+    const next = this.pointAt(0.995);
+    const angle = Math.atan2(next.y - base.y, next.x - base.x);
+    const side = index % 2 === 0 ? -1 : 1;
+    return {
+      x: base.x - Math.sin(angle) * side * 45 - Math.cos(angle) * index * 42,
+      y: base.y + Math.cos(angle) * side * 45 - Math.sin(angle) * index * 42,
+      angle,
+    };
+  }
+
+  sample(x: number, y: number): TrackSample {
+    let nearest = this.points[0];
+    let nearestIndex = 0;
+    let best = Infinity;
+
+    for (let i = 0; i < this.points.length; i++) {
+      const d = Math.hypot(x - this.points[i].x, y - this.points[i].y);
+      if (d < best) {
+        best = d;
+        nearest = this.points[i];
+        nearestIndex = i;
+      }
+    }
+
+    const mud = Math.sin((x + 260) * 0.006) * Math.cos((y - 180) * 0.008) > 0.72;
+    const terrain: Terrain = best < this.width / 2 ? (mud && best > 46 ? 'mud' : 'track') : best < this.roughWidth / 2 ? 'sand' : 'rough';
+
+    const traits = {
+      track: { grip: 1, speedMultiplier: 1 },
+      mud: { grip: 0.62, speedMultiplier: 0.72 },
+      sand: { grip: 0.72, speedMultiplier: 0.82 },
+      rough: { grip: 0.46, speedMultiplier: 0.56 },
+    }[terrain];
+
+    return {
+      terrain,
+      grip: traits.grip,
+      speedMultiplier: traits.speedMultiplier,
+      nearest,
+      distanceFromCenter: best,
+      progress: nearestIndex / this.points.length,
+    };
+  }
+
+  nextCheckpoint(current: number): Vec2 {
+    return this.checkpoints[current % this.checkpoints.length];
+  }
+
+  consumePickup(pos: Vec2): boolean {
+    for (const pickup of this.pickups) {
+      if (pickup.active && distance(pos, pickup) < pickup.radius + 26) {
+        pickup.active = false;
+        pickup.respawn = 9;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  pointAt(progress: number): Vec2 {
+    const wrapped = ((progress % 1) + 1) % 1;
+    const index = wrapped * this.points.length;
+    const a = Math.floor(index) % this.points.length;
+    const b = (a + 1) % this.points.length;
+    const t = index - Math.floor(index);
+    return {
+      x: this.points[a].x + (this.points[b].x - this.points[a].x) * t,
+      y: this.points[a].y + (this.points[b].y - this.points[a].y) * t,
+    };
+  }
+
+  private offsetPoint(progress: number, offset: number): Vec2 {
+    const p = this.pointAt(progress);
+    const n = this.pointAt(progress + 0.006);
+    const angle = Math.atan2(n.y - p.y, n.x - p.x);
+    return {
+      x: p.x - Math.sin(angle) * offset,
+      y: p.y + Math.cos(angle) * offset,
+    };
+  }
+}
+
+export function checkpointDistance(progress: number, checkpointIndex: number): number {
+  const target = checkpointIndex / CHECKPOINTS;
+  const ahead = target >= progress ? target - progress : target + 1 - progress;
+  return clamp(ahead, 0, 1);
+}

package/codex-test/offroad-nitro-racer/src/game/UI.ts

@@ -0,0 +1,96 @@
+import { Car } from './Car';
+import { Track } from './Track';
+
+export type UiState = 'menu' | 'countdown' | 'racing' | 'paused' | 'finished';
+
+export type UiData = {
+  state: UiState;
+  countdown: number;
+  player: Car;
+  track: Track;
+  elapsed: number;
+  message: string;
+  winner: string;
+};
+
+export class UI {
+  private root: HTMLDivElement;
+
+  constructor(root: HTMLDivElement) {
+    this.root = root;
+  }
+
+  render(data: UiData): void {
+    if (data.state === 'menu') {
+      this.root.className = 'overlay overlay--active';
+      this.root.innerHTML = `
+        <section class="panel hero">
+          <p class="eyebrow">Desert cup</p>
+          <h1>Offroad Nitro Racer</h1>
+          <p class="lede">Chunky arcade dirt racing with drifting, boosts, bumps, and ruthless AI trucks.</p>
+          <div class="controls-grid">
+            <span>Drive</span><strong>Arrows / WASD</strong>
+            <span>Nitro</span><strong>Space</strong>
+            <span>Pause</span><strong>Esc</strong>
+            <span>Restart</span><strong>R</strong>
+          </div>
+          <button class="primary">Press Enter to Race</button>
+        </section>
+      `;
+      return;
+    }
+
+    if (data.state === 'paused') {
+      this.root.className = 'overlay overlay--active';
+      this.root.innerHTML = `
+        <section class="panel compact">
+          <p class="eyebrow">Pit stop</p>
+          <h2>Paused</h2>
+          <p>Press Esc to resume or R to restart.</p>
+        </section>
+      `;
+      return;
+    }
+
+    if (data.state === 'finished') {
+      const won = data.winner === data.player.name;
+      this.root.className = 'overlay overlay--active';
+      this.root.innerHTML = `
+        <section class="panel hero">
+          <p class="eyebrow">Race complete</p>
+          <h1>${won ? 'You Win!' : 'You Lose'}</h1>
+          <p class="lede">${won ? 'Nitro glory across the desert.' : `${data.winner} reached the flag first.`}</p>
+          <div class="result-row"><span>Final position</span><strong>${ordinal(data.player.rank)}</strong></div>
+          <div class="result-row"><span>Time</span><strong>${formatTime(data.elapsed)}</strong></div>
+          <button class="primary">Press R to Restart</button>
+        </section>
+      `;
+      return;
+    }
+
+    this.root.className = 'overlay';
+    this.root.innerHTML = `
+      <div class="hud hud--top">
+        <div class="hud-card"><span>Lap</span><strong>${Math.min(data.player.lap, data.track.lapsToWin)} / ${data.track.lapsToWin}</strong></div>
+        <div class="hud-card"><span>Position</span><strong>${ordinal(data.player.rank)}</strong></div>
+        <div class="hud-card"><span>Speed</span><strong>${Math.round(data.player.speed * 0.42)} mph</strong></div>
+        <div class="hud-card"><span>Timer</span><strong>${formatTime(data.elapsed)}</strong></div>
+      </div>
+      <div class="nitro-stack">${Array.from({ length: data.player.maxNitro }, (_, i) => `<i class="${i < data.player.nitroCharges ? 'full' : ''}"></i>`).join('')}</div>
+      ${data.state === 'countdown' ? `<div class="countdown">${data.countdown > 0.25 ? Math.ceil(data.countdown) : 'GO!'}</div>` : ''}
+      ${data.message ? `<div class="toast">${data.message}</div>` : ''}
+    `;
+  }
+}
+
+export function formatTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
+  const tenths = Math.floor((seconds % 1) * 10);
+  return `${minutes}:${secs}.${tenths}`;
+}
+
+function ordinal(value: number): string {
+  const suffix = value === 1 ? 'st' : value === 2 ? 'nd' : value === 3 ? 'rd' : 'th';
+  return `${value}${suffix}`;
+}

package/codex-test/offroad-nitro-racer/src/game/math.ts

@@ -0,0 +1,42 @@
+export type Vec2 = { x: number; y: number };
+
+export const TAU = Math.PI * 2;
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+export function length(x: number, y: number): number {
+  return Math.hypot(x, y);
+}
+
+export function distance(a: Vec2, b: Vec2): number {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+export function normalizeAngle(angle: number): number {
+  while (angle > Math.PI) angle -= TAU;
+  while (angle < -Math.PI) angle += TAU;
+  return angle;
+}
+
+export function angleTo(from: Vec2, to: Vec2): number {
+  return Math.atan2(to.y - from.y, to.x - from.x);
+}
+
+export function dot(ax: number, ay: number, bx: number, by: number): number {
+  return ax * bx + ay * by;
+}
+
+export function rand(min: number, max: number): number {
+  return min + Math.random() * (max - min);
+}
+
+export function roundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void {
+  ctx.beginPath();
+  ctx.roundRect(x, y, w, h, r);
+}

package/codex-test/offroad-nitro-racer/src/main.ts

@@ -0,0 +1,24 @@
+import './style.css';
+import { Game } from './game/Game';
+
+const app = document.querySelector<HTMLDivElement>('#app');
+
+if (!app) {
+  throw new Error('Missing #app root');
+}
+
+app.innerHTML = `
+  <div class="shell">
+    <canvas id="game" aria-label="Offroad Nitro Racer game canvas"></canvas>
+    <div id="overlay" class="overlay"></div>
+  </div>
+`;
+
+const canvas = document.querySelector<HTMLCanvasElement>('#game');
+const overlay = document.querySelector<HTMLDivElement>('#overlay');
+
+if (!canvas || !overlay) {
+  throw new Error('Missing game canvas or overlay');
+}
+
+new Game(canvas, overlay).start();