index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Microduck RL playground</title>
    <style>
      :root {
        --ink: #08080c;
        --yellow: #ffd23f;
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        background: var(--ink);
        color: rgba(255, 255, 255, 0.85);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        overflow: hidden;
      }
      #scene { position: fixed; inset: 0; }
      #scene canvas { display: block; }
      .halftone {
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
        background-size: 21px 21px;
        mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
      }
      /* Top-left corner: what this is */
      #brand {
        position: fixed;
        top: 1.4rem;
        left: 1.6rem;
        z-index: 10;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.8;
      }
      #brand b { color: var(--yellow); font-weight: 600; }
      #loading {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        text-align: center;
        padding: 0 2rem;
        z-index: 20;
      }
      /* Bottom edges: controls left, key hints right */
      #hud {
        position: fixed;
        bottom: 1.4rem;
        left: 1.6rem;
        right: 1.6rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
        z-index: 10;
        pointer-events: none;
      }
      #hud .stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        pointer-events: auto;
      }
      #hud .row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      #hud button {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.8);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.5rem 1rem;
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
      }
      #hud button:hover { background: rgba(255, 255, 255, 0.1); }
      #hud button.on {
        background: #ffc61e;
        border-color: #ffc61e;
        color: #08080c;
      }
      /* Colour swatches */
      #swatches { gap: 0.6rem; }
      #swatches button {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.18);
      }
      #swatches button:hover { transform: scale(1.15); }
      #swatches button.on {
        border-color: #fff;
        transform: scale(1.15);
      }
      #hud .keys {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.4);
        text-align: right;
        line-height: 1.9;
        pointer-events: auto;
      }
      #hud .keys b { color: rgba(255, 255, 255, 0.75); font-weight: 600; }
      #pad-hint { display: none; }
      body.pad-connected #pad-hint { display: inline; }
      #stats {
        position: fixed;
        top: 1.4rem;
        right: 1.6rem;
        z-index: 10;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-align: right;
        color: rgba(255, 255, 255, 0.4);
        line-height: 1.7;
        font-variant-numeric: tabular-nums;
      }
      #stats b { color: var(--yellow); font-weight: 600; }
      @media (max-width: 700px) {
        #hud { flex-direction: column; align-items: flex-start; }
        #hud .keys { display: none; }
        #brand .sub { display: none; }
      }
    </style>
  </head>
  <body>
    <div id="scene"></div>
    <div class="halftone"></div>
    <div id="brand">
      <b>Microduck</b> &middot; real trained policies<br />
      <span class="sub">MuJoCo + ONNX, live in your browser</span>
    </div>
    <div id="stats"></div>
    <div id="hud" hidden>
      <div class="stack">
        <div class="row">
          <button id="btn-walk" class="on">Run</button>
          <button id="btn-sit">Sit</button>
          <button id="btn-roulade">Roulade</button>
        </div>
        <div class="row" id="swatches"></div>
      </div>
      <div class="keys">
        <b>&uarr;/&darr;</b> forward / back &nbsp; <b>&larr;/&rarr;</b> turn &nbsp; <b>A/E</b> strafe<br />
        <b>Space</b> roulade &nbsp; <b>R</b> reset &nbsp; drag to orbit &nbsp; scroll to zoom<br />
        <span id="pad-hint">gamepad: sticks move &nbsp; <b>X</b> roulade &nbsp; <b>&dArr;</b> sit &nbsp; <b>RT</b> quack</span>
      </div>
    </div>
    <div id="loading">Compiling physics&hellip;</div>

    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
        }
      }
    </script>
    <!-- rl.js is imported dynamically with the private-space ?__sign JWT
         appended: a plain src attribute can 401 when the browser blocks the
         *.static.hf.space auth cookie inside the hub iframe. -->
    <script type="module">
      const sign = new URLSearchParams(location.search).get("__sign");
      const suffix = sign ? `?__sign=${encodeURIComponent(sign)}` : "";
      import(`./rl.js${suffix}`);
    </script>
  </body>
</html>