armawebtron.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#050713">
  <meta name="description" content="Armawebtron: a bundled GPL 3D lightcycle arena game with local AI opponents on RetroPlay.">
  <link rel="icon" href="assets/favicon.ico?v=gamecube-1">
  <title>RetroPlay — Armawebtron</title>
  <style>
    :root{--paper:#edf0f7;--ink:#07101d;--cyan:#28ddff;--violet:#8d5bff;--lime:#d9ff56;--line:rgba(7,16,29,.18);--mono:ui-monospace,SFMono-Regular,Menlo,monospace}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:#e8edf4;font:14px/1.5 Arial,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(rgba(7,16,29,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(7,16,29,.04) 1px,transparent 1px),radial-gradient(circle at 80% 9%,rgba(141,91,255,.2),transparent 30%),radial-gradient(circle at 16% 82%,rgba(40,221,255,.18),transparent 28%);background-size:34px 34px,34px 34px,auto,auto}main{position:relative;width:min(1160px,calc(100% - 34px));margin:auto;padding:25px 0 48px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.brand{color:var(--ink);font:600 30px/.9 Arial;text-decoration:none;letter-spacing:-.11em}.brand b{color:#196eae;font-weight:500}.back,.utility{border:1px solid var(--line);padding:9px 12px;color:var(--ink);background:rgba(255,255,255,.55);font:10px var(--mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase;cursor:pointer}.eyebrow{margin:42px 0 12px;color:#196eae;font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em}.eyebrow span{color:var(--ink);padding-right:13px;margin-right:13px;border-right:1px solid var(--line)}h1{max-width:850px;margin:0;font-size:clamp(40px,7vw,82px);line-height:.87;letter-spacing:-.09em;font-weight:500}.intro{max-width:810px;margin:22px 0 30px;color:#2d4b67;font-size:16px}.runtime-panel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.52);box-shadow:12px 14px 0 rgba(7,16,29,.07)}.runtime-play-area{min-width:0;overflow:hidden;background:#050713;border:1px solid #112858;box-shadow:inset 0 0 0 1px rgba(40,221,255,.45)}.runtime-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#050713}.runtime-play-area:fullscreen{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#050713}.runtime-play-area:fullscreen .runtime-frame{width:100%;height:100%;aspect-ratio:auto}.runtime-results{display:grid;align-content:start;gap:12px;padding:7px}.kicker{color:#196eae;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.runtime-status{min-height:108px;padding:12px;border:1px solid rgba(7,16,29,.25);background:#071126;color:#d7fbff;font:11px/1.45 var(--mono);white-space:pre-wrap}.runtime-facts{margin:0;display:grid;border-top:1px solid var(--line)}.runtime-facts div{padding:9px 0;border-bottom:1px solid var(--line)}dt{color:#52718f;font:9px var(--mono);text-transform:uppercase}dd{margin:3px 0 0;font-size:12px}.runtime-controller-status{color:#52718f;font:10px var(--mono)}.runtime-pad-wrap{display:none}.notice{margin:25px 0 0;padding:15px 18px;border-left:3px solid #196eae;background:rgba(25,110,174,.08);color:#294f70;font-size:13px}.notice strong{color:var(--ink)}.notice a{color:#10588f;font-weight:700}@media(max-width:760px){main{width:min(100% - 22px,680px);padding-top:16px}.runtime-panel{grid-template-columns:1fr}.intro{font-size:14px}.runtime-pad-wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px;background:linear-gradient(135deg,#071126,#102c5c);touch-action:none}.runtime-dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:5px}.runtime-pad{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--cyan);border-radius:50%;color:#edfeff;background:#09254d;font:700 13px var(--mono);touch-action:none}.runtime-pad.is-active{transform:translateY(1px);background:var(--lime);color:#07101d}.runtime-dpad .runtime-pad:nth-child(1){grid-column:2}.runtime-dpad .runtime-pad:nth-child(2){grid-row:2}.runtime-dpad .runtime-pad:nth-child(3){grid-row:2;grid-column:3}.runtime-dpad .runtime-pad:nth-child(4){grid-row:3;grid-column:2}.runtime-actions{display:grid;gap:6px}.runtime-actions .runtime-pad{border-color:#b3a2ff}.runtime-touch-note{max-width:152px;margin:0;color:#d6e7ff;font:9px/1.35 var(--mono);text-align:center}.runtime-touch-note strong{color:#fff}.runtime-play-area:fullscreen .runtime-pad-wrap{display:flex}}@media(min-width:761px){.runtime-play-area:fullscreen .runtime-pad-wrap{display:none}}
  </style>
</head>
<body>
  <main>
    <header><a class="brand" href="./" aria-label="Return to RetroPlay">RETRO<b>PLAY</b></a><a class="back" href="./">← World index</a></header>
    <p class="eyebrow"><span>// AWT-3D</span>Upstream GPL runtime / local lightcycle arena</p>
    <h1>Leave a trail.<br>Own the grid.</h1>
    <p class="intro">Armawebtron is an existing browser-native 3D lightcycle arena game. RetroPlay launches its official local Classic preset immediately with three AI rivals, ten rounds, a neon grid and no account, upload or external server.</p>
    <section class="runtime-panel" data-retro-runtime data-runtime-title="Armawebtron" data-runtime-status-events="false" data-gamepad-primary="KeyA">
      <div class="runtime-play-area">
        <iframe class="runtime-frame" title="Armawebtron 3D lightcycle arena game" src="armawebtron/index.html" allow="autoplay; fullscreen" tabindex="0"></iframe>
        <div class="runtime-pad-wrap" aria-label="Armawebtron PSP touch controls">
          <div class="runtime-dpad"><button class="runtime-pad" data-key="KeyI" aria-label="Jump">▲</button><button class="runtime-pad" data-key="KeyA" aria-label="Turn left">◀</button><button class="runtime-pad" data-key="KeyJ" aria-label="Turn right">▶</button><button class="runtime-pad" data-key="Space" aria-label="Brake">▼</button></div>
          <p class="runtime-touch-note"><strong>PSP TOUCH</strong><br>◀/▶ turn · ▼ brake<br>▲ jump / special<br><output class="runtime-controller-status">Touch ready · Gamepad waiting</output></p>
          <div class="runtime-actions"><button class="runtime-pad" data-key="Escape" aria-label="Open menu">MENU</button><button class="runtime-pad" data-runtime-restart aria-label="Restart local session">↻</button><button class="runtime-pad" data-runtime-fullscreen aria-label="Fullscreen">□</button></div>
        </div>
      </div>
      <aside class="runtime-results"><span class="kicker">Runtime status</span><output class="runtime-status">Starting Armawebtron…</output><dl class="runtime-facts"><div><dt>Runtime</dt><dd>Bundled JavaScript / WebGL</dd></div><div><dt>Content</dt><dd>Local Classic arena with three AI rivals</dd></div><div><dt>Session</dt><dd>Ten rounds and browser-local configuration</dd></div><div><dt>Input</dt><dd>Keyboard / PSP touch / gamepad</dd></div><div><dt>Distribution</dt><dd>GPL-2.0-or-later source and assets</dd></div></dl><button class="utility" data-runtime-fullscreen>Fullscreen</button></aside>
    </section>
    <p class="notice"><strong>Existing open-source game:</strong> this is the upstream <a href="https://github.com/Armawebtron/Armawebtron" target="_blank" rel="noreferrer">Armawebtron project</a>, not a RetroPlay-made game. The browser client and corresponding GPL source are preserved in <code>armawebtron/</code> and <code>third_party/armawebtron/</code>, with the full license at <a href="armawebtron/COPYING" target="_blank">COPYING</a>.</p>
  </main>
  <script src="src/runtime-shell.js"></script>
</body>
</html>