Rally

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RALLY//APEX — Neon Gravel Run</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<style>
/* ── css: base ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');*{box-sizing:border-box}html,body,#app,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#091119;color:#f5f1e8;font-family:'Barlow Condensed',sans-serif}#scene{position:absolute;inset:0;width:100%;height:100%;display:block}#hud{position:absolute;z-index:2;inset:0 0 auto;padding:24px 32px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;text-shadow:0 2px 4px #0008}.brand strong{font-size:32px;line-height:.9;letter-spacing:2px;font-weight:900}.brand strong span{color:#ff5b38}.eyebrow{display:block;font:700 10px 'Space Mono';letter-spacing:2px;color:#aeb9ba;margin-bottom:5px}.stats{display:flex;gap:28px;margin-left:20px}.stat span,.gear span,.rpm span{display:block;color:#9ca9ad;font:700 10px 'Space Mono';letter-spacing:1px}.stat b{font:700 22px 'Space Mono';letter-spacing:-1px}.telemetry{display:flex;align-items:center;gap:18px}.speed{display:flex;align-items:baseline;gap:7px}.speed b{font:900 54px 'Space Mono';line-height:.8;color:#fff}.speed small{font:700 11px 'Space Mono';color:#ff7657}.gear{text-align:center}.gear b{font:900 28px 'Space Mono';color:#ff6847}.rpm{width:126px}.rpmbar{height:6px;background:#ffffff30;margin-top:7px;overflow:hidden}.rpmbar i{display:block;height:100%;width:20%;background:linear-gradient(90deg,#48d08c,#ffd24a,#ff563d);transition:width .1s}.panel{position:absolute;z-index:5;inset:0;background:#061019aa;display:grid;place-items:center}.hidden{display:none}.panel-card{background:#101d25f2;border:1px solid #ffffff2a;border-top:4px solid #ff5b38;padding:35px 55px;text-align:center;box-shadow:0 20px 80px #0008}.panel-card h1{font-size:64px;margin:0 0 20px;letter-spacing:3px}.panel-card p{font:14px 'Space Mono';color:#b8c3c3}.panel-card p b{color:#fff}.panel-card button,button{font:700 13px 'Space Mono';padding:13px 20px;margin:8px;border:1px solid #ff6847;background:#ff6847;color:#10181c;cursor:pointer}.panel-card button+button{background:transparent;color:#fff;border-color:#ffffff44}#message{position:absolute;z-index:3;inset:0;display:grid;place-items:center;pointer-events:none}.count{font-size:150px;font-weight:900;font-style:italic;text-shadow:0 5px 0 #c13824;animation:pulse .8s ease-in-out infinite}.hint{position:absolute;bottom:9%;font:11px 'Space Mono';color:#d6dfdc;letter-spacing:1px}.panel~#scene{z-index:0}#minimap{position:absolute;z-index:3;right:28px;bottom:24px;background:#09151dcc;border:1px solid #ffffff33;padding:8px 8px 6px}#minimap canvas{display:block;width:180px;height:130px}#minimap span{display:block;font:9px 'Space Mono';color:#93a4a2;margin-top:5px}.touch{display:none}#touch{display:none}@keyframes pulse{50%{transform:scale(1.08);opacity:.7}}@media(max-width:700px){#hud{padding:14px}.brand strong{font-size:24px}.stats{gap:10px}.stat b{font-size:14px}.telemetry{position:absolute;top:70px;left:14px}.speed b{font-size:38px}.rpm{display:none}.hint{font-size:8px;text-align:center;bottom:20%}#minimap{right:12px;bottom:12px;transform:scale(.72);transform-origin:bottom right}#touch{display:grid;position:absolute;z-index:4;bottom:16px;left:15px;grid-template-columns:52px 52px 52px;gap:5px}#touch button{margin:0;padding:0;height:42px;background:#13232dcc;color:#fff;border-color:#ffffff44}#touch .gas{grid-column:3;grid-row:1/3;height:89px;background:#ff5b38;color:#111}.hand{grid-column:1/3!important;font-size:9px!important}}
</style>
</head>
<body>
<main id="game"><div id="hud"><div class="brand"><span class="eyebrow">OFF-ROAD CHAMPIONSHIP</span><strong>RALLY<span>//</span>APEX</strong></div><div class="stats"><div class="stat"><span>TIME</span><b id="time">00:00.00</b></div><div class="stat"><span>BEST LAP</span><b id="best">--:--.--</b></div><div class="stat"><span>LAP</span><b><i id="lap">1</i> / 3</b></div></div><div class="telemetry"><div class="speed"><b id="speed">000</b><small>KM/H</small></div><div class="gear"><span>GEAR</span><b id="gear">N</b></div><div class="rpm"><span>RPM</span><div class="rpmbar"><i id="rpmbar"></i></div></div></div></div><div id="minimap"><canvas id="map" width="180" height="130"></canvas><span>STAGE 01 · PINE RIDGE</span></div><div id="message"><div class="count" id="count">3</div><div class="hint">ARROWS / WASD TO DRIVE&nbsp; · &nbsp;SPACE HANDBRAKE&nbsp; · &nbsp;C CAMERA</div></div><div id="pause" class="panel hidden"><div class="panel-card"><span class="eyebrow">RACE CONTROL</span><h1>PAUSED</h1><button id="resume">RESUME</button><button id="restart">RESTART STAGE</button></div></div><div id="finish" class="panel hidden"><div class="panel-card"><span class="eyebrow">STAGE COMPLETE</span><h1>FINISH!</h1><p>FINAL TIME <b id="finalTime">00:00.00</b></p><p>BEST LAP <b id="finalBest">--:--.--</b></p><button id="finishRestart">RUN IT AGAIN</button></div></div><div id="touch"><button data-key="ArrowLeft">◀</button><button data-key="ArrowRight">▶</button><button data-key="ArrowDown">▼</button><button class="gas" data-key="ArrowUp">▲</button><button class="hand" data-key="Space">DRIFT</button></div><canvas id="scene"></canvas></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* Procedural rally stage: all geometry is built at runtime. */
const T = THREE;
const canvas = document.getElementById('scene');
const renderer = new T.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = T.PCFSoftShadowMap;
const scene = new T.Scene();
scene.background = new T.Color(0x9bb6bd);
scene.fog = new T.Fog(0x9bb6bd, 90, 330);
const camera = new T.PerspectiveCamera(62, innerWidth / innerHeight, .1, 500);
const clock = new T.Clock();
const hemi = new T.HemisphereLight(0xd7edee, 0x4b5c45, 1.8);
scene.add(hemi);
const sun = new T.DirectionalLight(0xffe8bd, 2.5);
sun.position.set(-80, 120, 60);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
scene.add(sun);
const mat = (c, rough = 1) => new T.MeshStandardMaterial({ color: c, roughness: rough });
const asphalt = mat(0x303538), shoulder = mat(0x9b8467), grass = mat(0x3d6a4c), pine = mat(0x184735), trunk = mat(0x563d2b), red = mat(0xe84932), white = mat(0xf2eee2), dark = mat(0x14191b), yellow = mat(0xf3c83c), rock = mat(0x687274);
const points = [];
const N = 80;
for (let i = 0; i < N; i++) {
    const a = i / N * Math.PI * 2;
    const r = 92 + 14 * Math.sin(a * 3) + 8 * Math.sin(a * 5 + 1);
    points.push(new T.Vector3(Math.cos(a) * r, 4 * Math.sin(a * 2) + 2 * Math.sin(a * 5), Math.sin(a) * r * .68));
}
function nearest(pos) { let best = 0, dist = 1e9; for (let i = 0; i < N; i++) {
    const d = pos.distanceToSquared(points[i]);
    if (d < dist) {
        dist = d;
        best = i;
    }
} return { i: best, d: Math.sqrt(dist) }; }
function box(s, p, m) { const o = new T.Mesh(new T.BoxGeometry(s.x, s.y, s.z), m); o.position.copy(p); o.castShadow = o.receiveShadow = true; scene.add(o); return o; }
function tree(p, scale = 1) { const g = new T.Group(); g.position.copy(p); const t = new T.Mesh(new T.CylinderGeometry(1.1 * scale, 1.5 * scale, 7 * scale, 6), trunk); t.position.y = 3.5 * scale; g.add(t); for (let i = 0; i < 3; i++) {
    const c = new T.Mesh(new T.ConeGeometry((5 - i * .8) * scale, 7 * scale, 7), pine);
    c.position.y = (7 + i * 3) * scale;
    g.add(c);
} scene.add(g); }
function buildTrack() {
    const ground = box(new T.Vector3(500, 1, 500), new T.Vector3(0, -3, 0), grass);
    ground.receiveShadow = true;
    for (let i = 0; i < N; i++) {
        const p = points[i], q = points[(i + 1) % N], mid = p.clone().add(q).multiplyScalar(.5);
        const len = p.distanceTo(q) + 3;
        const ang = Math.atan2(q.x - p.x, q.z - p.z);
        for (const w of [0, 1, -1]) {
            const strip = box(new T.Vector3(w ? 3 : 12, .35, len), mid.clone().add(new T.Vector3(Math.cos(ang) * w * 8, 0, Math.sin(ang) * w * 8)), w ? shoulder : asphalt);
            strip.rotation.y = ang;
            strip.castShadow = strip.receiveShadow = true;
        }
    }
    for (let i = 0; i < 130; i++) {
        const a = Math.random() * Math.PI * 2, r = 112 + Math.random() * 65;
        tree(new T.Vector3(Math.cos(a) * r, -1.8, Math.sin(a) * r * .68), .65 + Math.random() * .8);
    }
    for (let i = 0; i < 18; i++) {
        const idx = Math.floor(i * N / 18), p = points[idx], q = points[(idx + 1) % N], side = i % 2 ? 1 : -1;
        const d = q.clone().sub(p).normalize();
        const s = new T.Vector3(-d.z, 0, d.x).multiplyScalar(side * 9);
        box(new T.Vector3(.35, 2, .35), p.clone().add(s).setY(p.y + 1), white);
        box(new T.Vector3(4, .7, .2), p.clone().add(s).setY(p.y + 2), i % 3 ? yellow : red);
    }
}
buildTrack();
const car = new T.Group();
scene.add(car);
const body = box(new T.Vector3(3.4, 1, 6), new T.Vector3(), red);
body.position.set(0, 1.6, 0);
body.parent = car;
const hood = box(new T.Vector3(3, 0.6, 2.1), new T.Vector3(0, 2.3, -1.3), red);
hood.parent = car;
const cabin = box(new T.Vector3(2.5, 1.1, 2.5), new T.Vector3(0, 2.45, 1), dark);
cabin.parent = car;
const spoiler = box(new T.Vector3(4, .18, .5), new T.Vector3(0, 2.8, 2.65), yellow);
spoiler.parent = car;
for (const x of [-1.8, 1.8])
    for (const z of [-1.9, 1.9]) {
        const w = new T.Mesh(new T.CylinderGeometry(.65, .65, .38, 12), dark);
        w.rotation.z = Math.PI / 2;
        w.position.set(x, 1, z);
        w.parent = car;
    }
for (const x of [-1.15, 1.15]) {
    const l = box(new T.Vector3(.45, .3, .12), new T.Vector3(x, 1.75, 3.03), red);
    l.parent = car;
}
let pos = points[0].clone().add(new T.Vector3(0, 1, 0)), velocity = 0, steer = 0, yaw = Math.atan2(points[1].x - points[0].x, points[1].z - points[0].z), progress = 0, lap = 1, started = false, paused = false, finished = false, raceTime = 0, lapStart = 0, best = Number(localStorage.rallyBest || 0), camMode = 0;
const keys = new Set();
addEventListener('keydown', e => { keys.add(e.code); if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(e.code))
    e.preventDefault(); if (e.code === 'KeyP')
    togglePause(); if (e.code === 'KeyR')
    restart(); if (e.code === 'KeyC')
    camMode = 1 - camMode; audio(); });
addEventListener('keyup', e => keys.delete(e.code));
document.querySelectorAll('#touch button').forEach(b => { b.addEventListener('touchstart', e => { e.preventDefault(); keys.add(b.dataset.key || ''); }); b.addEventListener('touchend', () => keys.delete(b.dataset.key || '')); });
function audio() { if (!ac) {
    ac = new AudioContext();
    osc = ac.createOscillator();
    gain = ac.createGain();
    osc.connect(gain);
    gain.connect(ac.destination);
    osc.start();
    gain.gain.value = 0;
} }
let ac = null, osc = null, gain = null;
function beep(freq) { audio(); if (!ac || !osc || !gain)
    return; osc.frequency.setValueAtTime(freq, ac.currentTime); gain.gain.setValueAtTime(.06, ac.currentTime); gain.gain.exponentialRampToValueAtTime(.001, ac.currentTime + .18); }
function fmt(v) { const m = Math.floor(v / 60), s = (v % 60).toFixed(2).padStart(5, '0'); return `${String(m).padStart(2, '0')}:${s}`; }
function restart() { pos = points[0].clone().add(new T.Vector3(0, 1, 0)); velocity = 0; progress = 0; lap = 1; raceTime = 0; lapStart = 0; started = false; finished = false; paused = false; document.getElementById('finish').classList.add('hidden'); document.getElementById('pause').classList.add('hidden'); countdown(); }
function countdown() { const el = document.getElementById('count'); let n = 3; el.textContent = '3'; const t = setInterval(() => { n--; if (n > 0) {
    el.textContent = String(n);
    beep(440 + n * 100);
}
else {
    el.textContent = 'GO!';
    started = true;
    beep(880);
    setTimeout(() => document.getElementById('message').style.display = 'none', 650);
    clearInterval(t);
} }, 800); }
function togglePause() { if (finished || !started)
    return; paused = !paused; document.getElementById('pause').classList.toggle('hidden', !paused); }
(document.getElementById('resume')).addEventListener('click', togglePause);
(document.getElementById('restart')).addEventListener('click', restart);
(document.getElementById('finishRestart')).addEventListener('click', restart);
function update(dt) {
    if (!started || paused || finished)
        return;
    raceTime += dt;
    const gas = keys.has('ArrowUp') || keys.has('KeyW'), brake = keys.has('ArrowDown') || keys.has('KeyS'), hand = keys.has('Space');
    const near = nearest(pos);
    const off = Math.max(0, near.d - 7);
    const grip = off > 4 ? .45 : 1;
    const target = gas ? 1 : brake ? -.45 : 0;
    velocity += (target * grip - velocity) * dt * (gas || brake ? 2.4 : 1.1);
    if (hand)
        velocity *= .985;
    velocity = Math.max(-.35, Math.min(1, velocity));
    const turn = (keys.has('ArrowLeft') || keys.has('KeyA') ? -1 : 0) + (keys.has('ArrowRight') || keys.has('KeyD') ? 1 : 0);
    steer += (turn - steer) * dt * 7;
    yaw += steer * velocity * dt * 1.8;
    pos.x += Math.sin(yaw) * velocity * dt * 38;
    pos.z += Math.cos(yaw) * velocity * dt * 38;
    pos.y += (points[near.i].y + 1 - pos.y) * dt * 5;
    if (off > 17) {
        velocity *= .92;
        pos.x += (points[near.i].x - pos.x) * dt * .2;
        pos.z += (points[near.i].z - pos.z) * dt * .2;
    }
    const ni = nearest(pos).i;
    if (ni < 3 && progress > N - 8) {
        lap++;
        const lt = raceTime - lapStart;
        lapStart = raceTime;
        if (lap > 3)
            finish();
        else if (!best || lt < best) {
            best = lt;
            localStorage.rallyBest = String(best);
        }
    }
    progress = ni;
    hud(near.d, grip, hand);
}
function finish() { finished = true; document.getElementById('finalTime').textContent = fmt(raceTime); document.getElementById('finalBest').textContent = best ? fmt(best) : '--:--.--'; document.getElementById('finish').classList.remove('hidden'); beep(1040); }
function hud(d, grip, hand) { const km = Math.round(Math.abs(velocity) * 165); document.getElementById('speed').textContent = String(km).padStart(3, '0'); document.getElementById('lap').textContent = String(Math.min(lap, 3)); document.getElementById('time').textContent = fmt(raceTime); document.getElementById('best').textContent = best ? fmt(best) : '--:--.--'; document.getElementById('gear').textContent = velocity < .05 ? 'N' : velocity < .35 ? '2' : velocity < .68 ? '3' : '4'; document.getElementById('rpmbar').style.width = `${20 + Math.abs(velocity) * 70}%`; }
function drawMap() { const c = document.getElementById('map'), x = c.getContext('2d'); x.clearRect(0, 0, 180, 130); x.strokeStyle = '#c9d4c8'; x.lineWidth = 3; x.beginPath(); points.forEach((p, i) => { const xx = 90 + p.x * .42, yy = 65 + p.z * .42; i ? x.lineTo(xx, yy) : x.moveTo(xx, yy); }); x.closePath(); x.stroke(); const q = nearest(pos); x.fillStyle = '#ff6246'; x.beginPath(); x.arc(90 + points[q.i].x * .42, 65 + points[q.i].z * .42, 4, 0, 7); x.fill(); }
function render() { requestAnimationFrame(render); const dt = Math.min(clock.getDelta(), .05); update(dt); car.position.copy(pos); car.rotation.y = yaw; const back = new T.Vector3(-Math.sin(yaw) * 12, 7, -Math.cos(yaw) * 12); if (camMode)
    back.y = 15; const target = pos.clone().add(new T.Vector3(0, 1.5, 0)); camera.position.lerp(pos.clone().add(back), .09); camera.lookAt(target); renderer.setSize(innerWidth, innerHeight, false); drawMap(); renderer.render(scene, camera); }
addEventListener('resize', () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); });
countdown();
render();
};

// ── types: globals.d.ts ──
__mods["globals.d.ts"] = function (exports) {};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"65f377ee-c100-4b99-a265-312e218de93b","tokensIn":705433,"tokensOut":21693,"tokensTotal":727126,"turns":17,"toolCalls":22,"failedToolCalls":1,"timestamp":"2026-07-31T03:32:35.589Z"} -->