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 Simulator</title>
<style>
/* ── css: base ── */
*{box-sizing:border-box}html,body,#app,#sim{margin:0;width:100%;height:100%;overflow:hidden;background:#050c12;color:#e9f5f2;font-family:Arial,Helvetica,sans-serif}#sim{position:relative}#view{position:absolute;width:100%;height:100%;display:block}#vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,8,13,.28) 100%);z-index:1}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* ── css: ui ── */
#topbar{position:absolute;z-index:3;top:0;left:0;right:0;height:72px;padding:17px 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#07131bda,transparent);letter-spacing:.12em}.brand{display:flex;gap:10px;align-items:center}.mark{color:#ff7a3d;font-size:25px}.brand b{font-size:15px;display:block;letter-spacing:.21em}.brand small{color:#83a9ad;font-size:8px;letter-spacing:.23em}.brand,#modePill,#menuBtn{font-size:10px}#modePill{color:#a6c9c4;border:1px solid #547077;padding:8px 12px}#menuBtn{border:1px solid #96afb0;padding:10px 14px;font-size:9px}#hud{z-index:3;position:absolute;pointer-events:none;top:19%;left:50%;transform:translateX(-50%);width:525px;height:220px;display:flex;justify-content:space-between;align-items:center;color:#dff8f2;text-shadow:0 1px 2px #000}.tape{width:100px;text-align:center;border-top:1px solid #7ca9a5;border-bottom:1px solid #7ca9a5;padding:8px 0}.tape label{font-size:8px;letter-spacing:.18em;display:block;color:#9fc4be}.tape strong{font-size:31px;font-weight:400;line-height:1.1;display:block}.tape em{font-size:8px;font-style:normal;color:#9fc4be}.attitude{position:relative;width:220px;height:220px;border:1px solid #8db6ae;border-radius:50%;overflow:hidden}.horizon{position:absolute;height:2px;background:#f2f1d5;width:150%;left:-25%;top:50%;transition:transform .1s}.horizon span{position:absolute;left:50%;top:-4px;height:10px;border-left:2px solid #f2f1d5}.pitch-scale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:.65}.pitch-scale i{width:38px;border-top:1px solid #cae0d9}.pitch-scale i:nth-child(odd){width:20px}.bank{position:absolute;top:15px;left:0;right:0;text-align:center;font-size:10px}.flight-path{position:absolute;top:calc(50% - 12px);left:calc(50% - 10px);font-size:25px;color:#ff9c55}#readouts{z-index:3;position:absolute;right:29px;bottom:64px;width:170px;font-size:9px;letter-spacing:.12em}#readouts>div{display:grid;grid-template-columns:52px 1fr;align-items:center;border-top:1px solid #6b8b8b;padding:8px 0}#readouts span{color:#9ab9b5}#readouts b{font-size:13px;text-align:right;color:#f3fbf6}#readouts i{grid-column:1/3;height:3px;background:#314b50;margin-top:5px}#readouts u{display:block;height:100%;width:34%;background:#ff7541}#alerts{position:absolute;z-index:3;bottom:28px;left:30px;font-size:9px;letter-spacing:.14em;color:#b7d2cc;display:flex;gap:9px;align-items:center}#statusDot{width:7px;height:7px;border-radius:100%;background:#63d8a9;box-shadow:0 0 8px #63d8a9}#help{z-index:3;position:absolute;left:50%;transform:translateX(-50%);bottom:26px;font-size:8px;letter-spacing:.1em;color:#9ab6b3;white-space:nowrap}#help b{color:#f3fbf6}#crosshair{display:none;position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid #ff9a59;border-radius:50%;z-index:3}#crosshair i:first-child{position:absolute;height:8px;left:23px;top:-5px;border-left:1px solid #ff9a59}#crosshair i:last-child{position:absolute;width:8px;top:23px;left:-5px;border-top:1px solid #ff9a59}#message{position:absolute;z-index:4;top:70%;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.16em;color:#ffb273;text-shadow:0 2px 5px #000}
/* ── css: menu ── */
.panel{position:absolute;z-index:5;top:92px;left:30px;width:365px;padding:25px 27px 24px;background:linear-gradient(125deg,#0c1d25f0,#071117e8);border:1px solid #52727a;box-shadow:0 20px 45px #0008;transition:transform .4s,opacity .3s}.panel.hidden{transform:translateX(-410px);opacity:0;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.18em;color:#79b7b0}.panel h1{font-size:31px;line-height:.97;letter-spacing:.01em;margin:16px 0 19px;font-weight:400}.panel h1 em{color:#ff7840;font-style:normal}.plane{width:100%;padding:11px 10px;text-align:left;border:1px solid #345159;margin:6px 0;display:grid;grid-template-columns:36px 1fr auto;align-items:center;transition:.2s}.plane:hover,.plane.selected{border-color:#ef7948;background:#17313a}.plane b{font-size:17px;color:#ff8552}.plane strong{font-size:11px;letter-spacing:.08em}.plane small{display:block;color:#89a8a8;font-size:8px;margin-top:3px;letter-spacing:.08em}.plane em{font-size:9px;font-style:normal;color:#94c4b8}.divider{border-top:1px solid #355159;margin:18px 0}.missions{display:flex;gap:7px;margin:10px 0 18px}.mission{flex:1;padding:10px 8px;text-align:left;border:1px solid #38555b;font-size:9px;line-height:1.3;letter-spacing:.11em}.mission b{display:block;color:#ff7e49;font-size:12px;margin-bottom:4px}.mission.active{background:#18343b;border-color:#a4c8be}#launch{width:100%;padding:13px;background:#ef7141;color:#061015;text-align:left;font-weight:bold;font-size:10px;letter-spacing:.16em}#launch span{float:right;font-size:17px;line-height:8px}
</style>
</head>
<body>
<div id="sim"><canvas id="view"></canvas><div id="vignette"></div><section id="topbar"><div class="brand"><span class="mark">▲</span><div><b>APEX AERO</b><small>FLIGHT OPERATIONS</small></div></div><div id="modePill">TRAINING / APPROACH</div><button id="menuBtn">MISSION SELECT</button></section><section id="hud"><div class="tape speed"><label>AIRSPEED</label><strong id="speed">000</strong><em>KTS</em></div><div class="attitude"><div class="pitch-scale"><i></i><i></i><i></i><i></i><i></i></div><div class="horizon" id="horizon"><span></span></div><div class="bank" id="bank">0°</div><div class="flight-path">+</div></div><div class="tape alt"><label>ALTITUDE</label><strong id="alt">0000</strong><em>FT</em></div></section><section id="readouts"><div><span>THR</span><b id="throttle">34%</b><i><u id="throttleBar"></u></i></div><div><span>AOA</span><b id="aoa">+3.2°</b></div><div><span>G LOAD</span><b id="gload">1.00 G</b></div><div><span>RPM</span><b id="rpm">2,480</b></div></section><section id="alerts"><div id="statusDot"></div><span id="status">FLIGHT CONTROL · NOMINAL</span></section><section id="help"><b>W/S</b> THROTTLE &nbsp; <b>↑ ↓ ← →</b> PITCH / ROLL &nbsp; <b>Q/E</b> YAW &nbsp; <b>SPACE</b> GUNS &nbsp; <b>R</b> RESET</section><aside id="menu" class="panel"><div class="eyebrow">HANGAR · SELECT AIRFRAME</div><h1>Choose your<br><em>edge.</em></h1><div id="planes"></div><div class="divider"></div><div class="eyebrow">MISSION PROFILE</div><div class="missions"><button class="mission active" data-mode="landing"><b>01</b><span>PRECISION<br>APPROACH</span></button><button class="mission" data-mode="dogfight"><b>02</b><span>HIGH-G<br>DOGFIGHT</span></button></div><button id="launch">BEGIN FLIGHT <span>→</span></button></aside><div id="crosshair"><i></i><i></i></div><div id="message"></div></div>
<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 V = (x = 0, y = 0, z = 0) => ({ x, y, z });
const dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
const len = (a) => Math.hypot(a.x, a.y, a.z);
const norm = (a) => { const l = len(a) || 1; return V(a.x / l, a.y / l, a.z / l); };
const fleet = [
    { name: 'FALCON M-9', code: 'M9', desc: 'MULTIROLE INTERCEPTOR', max: 780, thrust: 95000, mass: 11800, wing: 28, lift: 1.38, drag: .028, response: 1.42, color: '#ff7444' },
    { name: 'STRIX A-21', code: 'A21', desc: 'AGILE STRIKE FIGHTER', max: 710, thrust: 76000, mass: 8700, wing: 24, lift: 1.55, drag: .031, response: 1.78, color: '#62d5c2' },
    { name: 'ORION T-6', code: 'T6', desc: 'ADVANCED TRAINER', max: 420, thrust: 23000, mass: 5300, wing: 19, lift: 1.72, drag: .036, response: .95, color: '#f5bd62' }
];
let selected = 0, mode = 'landing', running = false;
let pos = V(0, 38, 0), vel = V(0, 0, 68), pitch = .02, roll = 0, yaw = 0, throttle = .34, last = performance.now(), fired = 0;
const cvs = document.querySelector('#view'), ctx = cvs.getContext('2d');
const $ = (s) => document.querySelector(s);
function resize() { cvs.width = innerWidth * devicePixelRatio; cvs.height = innerHeight * devicePixelRatio; ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); }
addEventListener('resize', resize);
resize();
function height(x, z) { return 4 + 11 * Math.sin(x * .004) * Math.cos(z * .003) + 7 * Math.sin((x + z) * .009) + 28 * Math.exp(-((x - 650) ** 2 + (z - 300) ** 2) / 950000) + 18 * Math.exp(-((x + 900) ** 2 + (z - 1000) ** 2) / 650000); }
function terrain() {
    const w = innerWidth, h = innerHeight;
    ctx.fillStyle = '#78b6cc';
    ctx.fillRect(0, 0, w, h);
    const grad = ctx.createLinearGradient(0, h * .35, 0, h);
    grad.addColorStop(0, '#b9d8d3');
    grad.addColorStop(.24, '#527579');
    grad.addColorStop(1, '#122d2b');
    ctx.fillStyle = grad;
    ctx.fillRect(0, h * .38, w, h * .62);
    ctx.save();
    ctx.translate(w / 2, h * .45);
    ctx.rotate(-roll * .18);
    for (let layer = 0; layer < 5; layer++) {
        ctx.beginPath();
        let base = h * .16 + layer * 55;
        ctx.moveTo(-w, base);
        for (let x = -w; x < w * 1.5; x += 28) {
            let y = base + Math.sin(x * .006 + layer * 4 + yaw * .7) * 35 + Math.sin(x * .019 - layer) * 15;
            ctx.lineTo(x, y);
        }
        ctx.lineTo(w * 1.5, h);
        ctx.lineTo(-w, h);
        ctx.closePath();
        ctx.fillStyle = ['#7d9c98', '#5b7e7c', '#426866', '#2c5452', '#1c4441'][layer];
        ctx.fill();
    }
    ctx.restore();
    // runway / world grid
    ctx.save();
    ctx.translate(w / 2, h * .67);
    ctx.rotate(-roll * .12);
    ctx.fillStyle = '#425152';
    ctx.fillRect(-52, -30, 104, 250);
    ctx.fillStyle = '#d7d9c8';
    for (let y = -10; y < 220; y += 30)
        ctx.fillRect(-3, y, 6, 16);
    ctx.strokeStyle = '#bec5b7';
    ctx.lineWidth = 2;
    ctx.strokeRect(-48, -30, 96, 280);
    ctx.restore();
}
function aircraft() { const w = innerWidth, h = innerHeight; ctx.save(); ctx.translate(w / 2, h * .72); ctx.rotate(roll * .08); ctx.fillStyle = 'rgba(10,22,27,.78)'; ctx.beginPath(); ctx.moveTo(-145, 95); ctx.lineTo(-50, 33); ctx.lineTo(-12, 26); ctx.lineTo(-3, -22); ctx.lineTo(3, -22); ctx.lineTo(12, 26); ctx.lineTo(50, 33); ctx.lineTo(145, 95); ctx.lineTo(25, 76); ctx.lineTo(0, 56); ctx.lineTo(-25, 76); ctx.closePath(); ctx.fill(); ctx.strokeStyle = fleet[selected].color; ctx.globalAlpha = .7; ctx.stroke(); ctx.restore(); }
function draw() { terrain(); aircraft(); }
function setUI() { const speed = len(vel) * 1.944; const alt = Math.max(0, (pos.y - height(pos.x, pos.z)) * 3.281); $('#speed').textContent = Math.round(speed).toString().padStart(3, '0'); $('#alt').textContent = Math.round(alt).toString().padStart(4, '0'); $('#throttle').textContent = Math.round(throttle * 100) + '%'; $('#throttleBar').style.width = (throttle * 100) + '%'; $('#aoa').textContent = ((pitch * 18) + 3).toFixed(1).replace(/^/, '+') + '°'; $('#gload').textContent = (1 + Math.abs(roll) * .55 + Math.abs(pitch) * .35).toFixed(2) + ' G'; $('#rpm').textContent = Math.round(700 + throttle * 6200).toLocaleString(); $('#horizon').style.transform = `translateY(${pitch * 150}px) rotate(${roll}rad)`; $('#bank').textContent = Math.round(roll * 57.3) + '°'; }
function physics(dt) {
    if (!running)
        return;
    const p = fleet[selected], keys = down;
    throttle = Math.max(0, Math.min(1, throttle + ((keys.KeyW ? 1 : 0) - (keys.KeyS ? 1 : 0)) * dt * .32));
    const inpPitch = ((keys.ArrowDown ? 1 : 0) - (keys.ArrowUp ? 1 : 0));
    const inpRoll = ((keys.ArrowRight ? 1 : 0) - (keys.ArrowLeft ? 1 : 0));
    const inpYaw = ((keys.KeyE ? 1 : 0) - (keys.KeyQ ? 1 : 0));
    pitch += inpPitch * p.response * dt * .48;
    roll += inpRoll * p.response * dt * .7;
    yaw += inpYaw * dt * .4;
    pitch *= 1 - dt * .35;
    roll *= 1 - dt * .22;
    pitch = Math.max(-.48, Math.min(.48, pitch));
    roll = Math.max(-1.28, Math.min(1.28, roll));
    const speed = len(vel), density = Math.exp(-Math.max(0, pos.y) / 8500), forward = V(Math.sin(yaw) * Math.cos(pitch), Math.sin(pitch), Math.cos(yaw) * Math.cos(pitch));
    const lift = p.lift * p.wing * speed * speed * .004 * density * (.32 + Math.max(-.1, pitch + .16));
    const drag = (p.drag * speed * speed * (1 + Math.abs(pitch) * 2) + .0007 * lift * lift / (speed * speed + 20)) / p.mass;
    const accel = p.thrust * throttle / p.mass;
    vel.x += (forward.x * accel - vel.x * drag) * dt;
    vel.y += (forward.y * accel + lift / p.mass - 9.81 - vel.y * drag) * dt;
    vel.z += (forward.z * accel - vel.z * drag) * dt;
    pos.x += vel.x * dt;
    pos.y += vel.y * dt;
    pos.z += vel.z * dt;
    const g = height(pos.x, pos.z) + 1.4;
    if (pos.y < g) {
        pos.y = g;
        if (vel.y < -8) {
            vel.y *= -.16;
            $('#status').textContent = 'HARD LANDING · CHECK AIRFRAME';
        }
        else {
            vel.y = 0;
            $('#status').textContent = 'GROUND CONTACT · ROLLING';
        }
    }
    else
        $('#status').textContent = speed < 38 ? 'STALL WARNING · INCREASE THRUST' : 'FLIGHT CONTROL · NOMINAL';
    if (fired > 0)
        fired -= dt;
    setUI();
}
const down = {};
addEventListener('keydown', e => { down[e.code] = true; if (e.code === 'Space') {
    e.preventDefault();
    fired = .18;
    $('#message').textContent = 'CANNON BURST';
    setTimeout(() => $('#message').textContent = '', 250);
} if (e.code === 'KeyR')
    reset(); });
addEventListener('keyup', e => down[e.code] = false);
function reset() { pos = V(0, mode === 'landing' ? 38 : 480, 0); vel = V(0, 0, mode === 'landing' ? 68 : 175); pitch = 0; roll = 0; yaw = 0; throttle = mode === 'landing' ? .34 : .72; $('#status').textContent = 'FLIGHT CONTROL · NOMINAL'; }
function populate() { const box = $('#planes'); fleet.forEach((p, i) => { const b = document.createElement('button'); b.className = 'plane ' + (i === selected ? 'selected' : ''); b.innerHTML = `<b>${p.code}</b><span><strong>${p.name}</strong><small>${p.desc}</small></span><em>${p.max} KT</em>`; b.onclick = () => { selected = i; populate(); }; box.appendChild(b); }); document.querySelectorAll('.mission').forEach(x => x.addEventListener('click', () => { mode = x.dataset.mode; document.querySelectorAll('.mission').forEach(q => q.classList.remove('active')); x.classList.add('active'); $('#modePill').textContent = mode === 'landing' ? 'TRAINING / APPROACH' : 'COMBAT / DOGFIGHT'; })); }
populate();
$('#menuBtn').onclick = () => $('#menu').classList.toggle('hidden');
$('#launch').onclick = () => { running = true; reset(); $('#menu').classList.add('hidden'); $('#crosshair').style.display = mode === 'dogfight' ? 'block' : 'none'; $('#message').textContent = mode === 'dogfight' ? 'BANDIT CONTACT · WEAPONS HOT' : 'CLEARED FOR APPROACH'; setTimeout(() => $('#message').textContent = '', 1800); };
function loop(t) { const dt = Math.min(.033, (t - last) / 1000); last = t; physics(dt); draw(); requestAnimationFrame(loop); }
requestAnimationFrame(loop);
setUI();
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"typescript","sessionId":"3873be7c-cfa9-4517-a5ca-68890285bbe3","tokensIn":74945,"tokensOut":5620,"tokensTotal":80565,"turns":9,"toolCalls":12,"failedToolCalls":0,"timestamp":"2026-07-31T17:55:53.493Z"} -->