Flight Simulator

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apex Aero — Flight Dynamics Lab</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* ── css: layout ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#071116;color:#dce8e5;font-family:'Barlow Condensed',Arial,sans-serif}#scene{position:absolute;inset:0}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 35%,rgba(2,9,12,.15) 68%,rgba(1,5,8,.78) 100%)}.topbar{position:absolute;left:0;right:0;top:0;height:76px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(5,13,17,.84),rgba(5,13,17,0));letter-spacing:.08em}.brand{display:flex;gap:12px;align-items:center;min-width:235px}.mark{color:#d0ff64;font-size:25px;line-height:1}.brand strong{display:block;font-size:16px;letter-spacing:.18em;color:#eff8ee}.brand small{display:block;font:10px 'Space Mono';color:#758783;letter-spacing:.14em;margin-top:3px}.mission-tabs{display:flex;gap:8px}.mission{background:rgba(10,25,28,.62);border:1px solid #284043;color:#859997;padding:11px 17px;font:11px 'Space Mono';letter-spacing:.05em;cursor:pointer}.mission.active{color:#d7fa78;border-color:#a8cf51;box-shadow:inset 0 -2px #b8df61}.status{min-width:235px;text-align:right;font:10px 'Space Mono';color:#a3b4af}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#cfff69;box-shadow:0 0 10px #cfff69;margin-right:8px}.left-panel{position:absolute;left:28px;top:112px;width:240px}.eyebrow{font:10px 'Space Mono';letter-spacing:.16em;color:#91a49e}.fleet-card{position:relative;margin-top:15px;padding:15px 14px 14px;background:linear-gradient(135deg,rgba(14,34,38,.92),rgba(7,18,22,.68));border:1px solid #355052;cursor:pointer}.fleet-card.selected{border-color:#c6ec68;box-shadow:0 0 0 1px rgba(198,236,104,.15),inset 0 0 30px rgba(175,220,95,.05)}.fleet-card .accent{position:absolute;left:-1px;top:12px;bottom:12px;width:3px;background:#496367}.fleet-card.selected .accent{background:#cfff69}.fleet-card h3{margin:0 0 3px 13px;font-size:18px;letter-spacing:.09em}.fleet-card p{margin:0 0 13px 13px;color:#819591;font:10px 'Space Mono'}.plane-icon{height:48px;margin-bottom:9px;display:flex;align-items:center;justify-content:center;color:#cfff69;font-size:38px;transform:rotate(-10deg)}.specs{display:flex;gap:12px;margin-left:13px}.specs div{font:9px 'Space Mono';color:#728682}.specs b{display:block;color:#d5e2dc;font-size:11px;margin-bottom:2px}.hint{font:9px 'Space Mono';color:#536965;margin-top:15px}.telemetry{position:absolute;right:28px;top:108px;width:355px;padding:15px 18px;background:rgba(6,18,22,.66);border-left:2px solid #aacd56}.telemetry-head{display:flex;justify-content:space-between;color:#cfff69;font:11px 'Space Mono';letter-spacing:.08em}.utc{color:#607773}.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:17px}.readout span,.gauge>span{display:block;font:9px 'Space Mono';color:#76908a;letter-spacing:.05em}.readout b{display:inline-block;margin-top:2px;font:27px 'Space Mono';color:#f0f7ed}.readout em{font:10px 'Space Mono';color:#9db0a9;font-style:normal;margin-left:3px}.gauges{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.bar{height:4px;background:#243b3c;margin:8px 0}.bar i{display:block;height:100%;width:70%;background:#bfe660;box-shadow:0 0 7px #a6d451}.gauge-meta{display:flex;align-items:baseline;justify-content:space-between}.gauge-meta b{font:14px 'Space Mono';color:#d9ebd2}.gauge-meta small{font:8px 'Space Mono';color:#607773}.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:30px 'Space Mono';color:rgba(218,242,205,.65);text-shadow:0 0 8px #213f34}.bottom-hud{position:absolute;left:28px;right:28px;bottom:25px;display:flex;align-items:end;justify-content:space-between}.control-card{display:flex;gap:25px;color:#839792}.control-card b{display:block;color:#d5e9dc;font:11px 'Space Mono';letter-spacing:.07em}.control-card span{font:9px 'Space Mono';display:block;margin-top:5px}.objective{text-align:center;margin-left:125px}.objective .eyebrow{display:block;margin-bottom:6px}.objective b{font:12px 'Space Mono';color:#d7e9da;letter-spacing:.06em}.radar{width:88px;height:88px;border:1px solid #49635f;border-radius:50%;position:relative;background:radial-gradient(circle,rgba(147,196,95,.08),transparent 65%);overflow:hidden;text-align:center}.radar:before,.radar:after{content:'';position:absolute;background:#31504b;opacity:.55}.radar:before{width:100%;height:1px;top:50%;left:0}.radar:after{height:100%;width:1px;left:50%;top:0}.radar small{position:absolute;top:102%;left:3px;font:8px 'Space Mono';color:#648079}.plane-blip{color:#cfff69;position:absolute;left:42%;top:38%;font-size:13px}.radar-sweep{position:absolute;width:50%;height:1px;background:#b4df5b;left:50%;top:50%;transform-origin:left;animation:sweep 3s linear infinite}.toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);padding:8px 14px;background:#cfff69;color:#102018;font:10px 'Space Mono';opacity:0;transition:.3s}.toast.show{opacity:1}@keyframes sweep{to{transform:rotate(360deg)}}
/* ── css: responsive ── */
@media(max-width:800px){.topbar{padding:14px 16px}.status{display:none}.left-panel{left:16px;top:88px;width:190px}.telemetry{right:16px;top:88px;width:300px}.bottom-hud{left:16px;right:16px}.objective{display:none}.mission-tabs{position:absolute;top:68px;left:16px}.control-card{gap:10px}.control-card div:nth-child(2){display:none}}
</style>
</head>
<body>
<main id="app"><div id="scene"></div><div class="vignette"></div><header class="topbar"><div class="brand"><span class="mark">✦</span><div><strong>APEX AERO</strong><small>FLIGHT DYNAMICS LAB</small></div></div><div class="mission-tabs"><button class="mission active" data-mode="landing">PRECISION / LANDING</button><button class="mission" data-mode="dogfight">COMBAT / DOGFIGHT</button></div><div class="status"><span class="live-dot"></span> SIMULATION LIVE</div></header><aside class="left-panel"><div class="eyebrow">AIRFRAME SELECT</div><div id="fleet"></div><div class="hint">CLICK AIRFRAME TO CONFIGURE</div></aside><section class="telemetry"><div class="telemetry-head"><span id="modeLabel">PRECISION LANDING</span><span class="utc">UTC 14:32:08</span></div><div class="readouts"><div class="readout"><span>ALTITUDE</span><b id="alt">1,240</b><em>FT</em></div><div class="readout"><span>AIRSPEED</span><b id="speed">148</b><em>KTS</em></div><div class="readout"><span>VERTICAL</span><b id="vert">+420</b><em>FPM</em></div><div class="readout"><span>ENGINE</span><b id="engine">78</b><em>%</em></div></div><div class="gauges"><div class="gauge"><span>LIFT / DRAG</span><div class="bar"><i id="liftBar"></i></div><div class="gauge-meta"><b id="lift">1.22</b><small>CL / CD</small></div></div><div class="gauge"><span>G-FORCE</span><div class="bar"><i id="gBar"></i></div><div class="gauge-meta"><b id="gforce">1.04</b><small>G LOAD</small></div></div><div class="gauge"><span>FUEL</span><div class="bar"><i id="fuelBar"></i></div><div class="gauge-meta"><b>84</b><small>% REM</small></div></div></div></section><div class="crosshair">+</div><div class="bottom-hud"><div class="control-card"><div><b>W A S D</b><span>FLIGHT CONTROL</span></div><div><b>SHIFT / CTRL</b><span>THROTTLE</span></div><div><b>R</b><span>RESET AIRCRAFT</span></div></div><div class="objective"><span class="eyebrow">CURRENT OBJECTIVE</span><b id="objective">ALIGN WITH RUNWAY 04 · MAINTAIN 120 KTS</b></div><div class="radar"><div class="radar-sweep"></div><span class="plane-blip">▲</span><small>TACTICAL</small></div></div><div id="toast" class="toast">AIRFRAME CONFIGURED</div></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 });
const fleet = [{ name: 'A-17 KESTREL', role: 'LIGHT INTERCEPTOR', speed: 210, thrust: 1.18, lift: 1.32, agility: 1.25, color: 0xb8dc63, weight: 1.0 }, { name: 'VX-9 MERIDIAN', role: 'MULTIROLE CRUISER', speed: 185, thrust: 1.04, lift: 1.18, agility: .92, color: 0x7aa6a3, weight: 1.35 }, { name: 'R-4 TITAN', role: 'HEAVY STRIKECRAFT', speed: 158, thrust: 1.3, lift: 1.1, agility: .68, color: 0xd08a58, weight: 1.9 }];
let active = fleet[0], mode = 'landing', throttle = .78, pitch = 0, roll = 0, yaw = 0, altitude = 1240, speed = 148, vert = 420, gforce = 1.04, fuel = 84;
let scene, camera, renderer, aircraft, terrain, clock = 0;
const keys = {};
function el(id) { return document.getElementById(id); }
function mat(color, rough = .7) { return new THREE.MeshStandardMaterial({ color, roughness: rough, metalness: .25 }); }
function buildAircraft(p) { const g = new THREE.Group(); const body = new THREE.Mesh(new THREE.CylinderGeometry(.42, .52, 4.6, 12), mat(p.color)); body.rotation.z = Math.PI / 2; g.add(body); const nose = new THREE.Mesh(new THREE.ConeGeometry(.43, 1.35, 12), mat(0xdbe5d5)); nose.rotation.z = -Math.PI / 2; nose.position.x = 2.9; g.add(nose); const wing = new THREE.Mesh(new THREE.BoxGeometry(1.1, .12, 5.8), mat(p.color)); wing.position.x = .15; g.add(wing); const tail = new THREE.Mesh(new THREE.BoxGeometry(.7, .12, 2.0), mat(0x8ca69e)); tail.position.x = -1.85; tail.position.y = .45; g.add(tail); const fin = new THREE.Mesh(new THREE.BoxGeometry(1.4, .1, .12), mat(0x78908c)); fin.position.x = -1.55; fin.position.y = .55; fin.rotation.z = -.3; g.add(fin); const canopy = new THREE.Mesh(new THREE.SphereGeometry(.42, 12, 8), mat(0x17383a, .2)); canopy.scale.set(1.5, .65, .8); canopy.position.set(1.0, .42, 0); g.add(canopy); g.position.set(0, 15, 25); return g; }
function makeWorld() { scene = new THREE.Scene(); scene.background = new THREE.Color(0x88aeb0); scene.fog = new THREE.Fog(0x88aeb0, 90, 420); camera = new THREE.PerspectiveCamera(62, innerWidth / innerHeight, .1, 700); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.setSize(innerWidth, innerHeight); el('scene').appendChild(renderer.domElement); scene.add(new THREE.HemisphereLight(0xc9e6df, 0x1a2826, 1.8)); const sun = new THREE.DirectionalLight(0xffe6b5, 2.5); sun.position.set(-80, 140, 60); scene.add(sun); terrain = new THREE.Group(); scene.add(terrain); const ground = new THREE.Mesh(new THREE.PlaneGeometry(700, 700, 80, 80), mat(0x304c49)); ground.rotation.x = -Math.PI / 2; terrain.add(ground); for (let i = 0; i < 75; i++) {
    const x = (Math.random() - .5) * 500, z = (Math.random() - .5) * 500;
    const h = 5 + Math.random() * 38;
    const m = new THREE.Mesh(new THREE.ConeGeometry(7 + Math.random() * 18, h, 6), mat(i % 3 ? 0x375b55 : 0x527268));
    m.position.set(x, h / 2 - 1, z);
    terrain.add(m);
} const runway = new THREE.Mesh(new THREE.BoxGeometry(22, .12, 180), mat(0x202c2c)); runway.position.set(0, .08, 5); terrain.add(runway); for (let z = -80; z < 100; z += 12) {
    const line = new THREE.Mesh(new THREE.BoxGeometry(.6, .14, 6), mat(0xb6c493));
    line.position.set(0, .16, z);
    terrain.add(line);
} aircraft = buildAircraft(active); scene.add(aircraft); camera.position.set(0, 19, 38); camera.lookAt(0, 15, 0); }
function renderFleet() { const root = el('fleet'); root.innerHTML = ''; fleet.forEach((p, i) => { const d = document.createElement('div'); d.className = 'fleet-card ' + (i === 0 ? 'selected' : ''); d.innerHTML = `<span class="accent"></span><div class="plane-icon">✈</div><h3>${p.name}</h3><p>${p.role}</p><div class="specs"><div><b>${p.speed} KT</b>MAX SPEED</div><div><b>${p.thrust.toFixed(2)} : 1</b>POWER</div><div><b>${p.agility.toFixed(2)}</b>RESPONSE</div></div>`; d.onclick = () => { active = p; document.querySelectorAll('.fleet-card').forEach(x => x.classList.remove('selected')); d.classList.add('selected'); scene.remove(aircraft); aircraft = buildAircraft(p); scene.add(aircraft); showToast(p.name + ' CONFIGURED'); }; root.appendChild(d); }); }
function showToast(s) { el('toast').textContent = s; el('toast').classList.add('show'); setTimeout(() => el('toast').classList.remove('show'), 1500); }
function update(dt) { const forward = keys.KeyW ? 1 : keys.KeyS ? -1 : 0; const steer = (keys.KeyA ? -1 : 0) + (keys.KeyD ? 1 : 0); if (keys.ShiftLeft || keys.ShiftRight)
    throttle = Math.min(1, throttle + dt * .3); if (keys.ControlLeft || keys.ControlRight)
    throttle = Math.max(.05, throttle - dt * .3); pitch += (forward * .18 - pitch) * dt * 2.2; roll += (steer * .42 - roll) * dt * 2.8; yaw += (steer * .12 - yaw) * dt * 1.4; const accel = (active.thrust * throttle - .42 - (speed / active.speed) ** 2 * .38) * 18; speed = Math.max(35, Math.min(active.speed * 1.08, speed + accel * dt)); const lift = (speed / 120) ** 2 * active.lift; vert += (lift * 380 - vert) * dt * .9; altitude += vert / 3600 * dt; if (altitude < 80) {
    altitude = 80;
    vert = Math.max(0, vert * .2);
    speed *= .995;
} if (mode === 'dogfight') {
    vert += (keys.Space ? 620 : 0) * dt;
    altitude = Math.min(8500, altitude);
    gforce = 1 + Math.abs(roll) * 2.2 + Math.abs(pitch) * 1.5;
}
else
    gforce = 1 + Math.abs(roll) * .7; fuel = Math.max(0, fuel - throttle * dt * .018); aircraft.rotation.x = pitch; aircraft.rotation.z = -roll; aircraft.rotation.y += yaw * dt; aircraft.position.y = 10 + altitude / 180; aircraft.position.x += steer * dt * speed * .035; aircraft.position.z -= dt * speed * .09; if (aircraft.position.x > 45)
    aircraft.position.x = -45; if (aircraft.position.x < -45)
    aircraft.position.x = 45; camera.position.lerp(new THREE.Vector3(aircraft.position.x * .3, aircraft.position.y + 5, aircraft.position.z + 22), .06); camera.lookAt(aircraft.position.x, aircraft.position.y, aircraft.position.z - 18); el('alt').textContent = Math.round(altitude).toLocaleString(); el('speed').textContent = Math.round(speed).toString(); el('vert').textContent = (vert >= 0 ? '+' : '') + Math.round(vert); el('engine').textContent = Math.round(throttle * 100).toString(); el('lift').textContent = lift.toFixed(2); el('gforce').textContent = gforce.toFixed(2); el('liftBar').style.width = Math.min(100, lift / 2 * 100) + '%'; el('gBar').style.width = Math.min(100, gforce / 6 * 100) + '%'; el('fuelBar').style.width = fuel + '%'; updateAudio(); renderer.render(scene, camera); }
let audioCtx = null, engineOsc = null, engineGain = null, windGain = null;
function initAudio() { if (audioCtx)
    return; audioCtx = new AudioContext(); engineOsc = audioCtx.createOscillator(); engineGain = audioCtx.createGain(); windGain = audioCtx.createGain(); engineOsc.type = 'sawtooth'; engineOsc.connect(engineGain); engineGain.connect(audioCtx.destination); engineOsc.start(); engineGain.gain.value = .018; const wind = audioCtx.createBufferSource(); const buf = audioCtx.createBuffer(1, audioCtx.sampleRate * 2, audioCtx.sampleRate); const data = buf.getChannelData(0); for (let i = 0; i < data.length; i++)
    data[i] = (Math.random() * 2 - 1) * .25; wind.buffer = buf; wind.loop = true; wind.connect(windGain); windGain.connect(audioCtx.destination); wind.start(); windGain.gain.value = .004; }
function updateAudio() { if (!audioCtx || !engineOsc || !engineGain || !windGain)
    return; engineOsc.frequency.value = 85 + throttle * 145 + speed * .18; engineGain.gain.value = .012 + throttle * .025; windGain.gain.value = Math.min(.06, .004 + speed / 2600 + Math.abs(pitch) * .03); }
function start() { renderFleet(); makeWorld(); document.querySelectorAll('.mission').forEach(b => b.addEventListener('click', () => { document.querySelectorAll('.mission').forEach(x => x.classList.remove('active')); b.classList.add('active'); mode = b.dataset.mode || 'landing'; el('modeLabel').textContent = mode === 'dogfight' ? 'COMBAT DOGFIGHT' : 'PRECISION LANDING'; el('objective').textContent = mode === 'dogfight' ? 'BREAK LOCK · SUSTAIN HIGH-G TURN · CLOSE RANGE' : 'ALIGN WITH RUNWAY 04 · MAINTAIN 120 KTS'; showToast(mode === 'dogfight' ? 'DOGFIGHT SCENARIO ACTIVE' : 'LANDING SCENARIO ACTIVE'); })); addEventListener('pointerdown', () => { initAudio(); }, { once: true }); addEventListener('keydown', e => { initAudio(); keys[e.code] = true; if (e.code === 'KeyR') {
    aircraft.position.set(0, 15, 25);
    altitude = 1240;
    speed = 148;
} }); addEventListener('keyup', e => keys[e.code] = false); addEventListener('resize', () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); let last = performance.now(); const loop = (t) => { const dt = Math.min(.05, (t - last) / 1000); last = t; clock += dt; update(dt); requestAnimationFrame(loop); }; requestAnimationFrame(loop); }
start();
};

// ── 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":"77080cf1-74f8-46f5-a3a4-e2ddb8f6a6ae","tokensIn":714208,"tokensOut":24380,"tokensTotal":738588,"turns":22,"toolCalls":26,"failedToolCalls":3,"timestamp":"2026-07-31T03:02:35.413Z"} -->