index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gravity Simulator</title>
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <div id="controls">
    <h3>Controls</h3>
    <!-- Options are generated from PRESETS in src/presets.ts rather than
         written out here: a scene is initial conditions plus the arithmetic
         that makes them orbit, so the markup cannot be its source of truth the
         way the sliders below are. Empty on purpose. -->
    <label>
      Scene:
      <select id="presetSelect" class="control-select"></select>
    </label>
    <!-- Paired on one row rather than stacked: the panel is a single column and
         every full-width button pushes Clear All and Pause closer to the fold.
         See KNOWNISSUES.md. -->
    <div class="button-row" style="margin-top: 4px;">
      <button id="reloadPresetBtn">Reload</button>
      <button id="shareBtn" class="share">Copy Link</button>
    </div>
    <div id="shareStatus" class="note note-line" style="margin-top: 4px;"></div>
    <div id="panelBody">
    <div class="section">New Bodies</div>
    <label>
      Mass: <span id="massValue">200</span>
      <input type="range" id="massSlider" min="100" max="5000" value="200" step="50">
    </label>
    <label>
      Vector Range: <span id="rangeValue">150</span>px
      <input type="range" id="rangeSlider" min="100" max="500" value="150" step="50">
    </label>
    <!-- Sizes and the camera fold away, and Physics below them: a single
         column cannot show everything at once, and these are the sections a
         viewer sets once and leaves. What stays open is what gets used while
         watching — the mass of the next body, the overlays, the field mode, and
         the buttons. See KNOWNISSUES.md on the panel's height budget. -->
    <details class="section" id="renderSection">
      <summary>Render Settings</summary>
      <label>
        Object Size: <span id="objectSizeValue">1.0</span>x
        <input type="range" id="objectSizeSlider" min="0.3" max="3.0" value="1.0" step="0.1">
      </label>
      <label>
        Arrow Size: <span id="arrowSizeValue">1.0</span>x
        <input type="range" id="arrowSizeSlider" min="0.3" max="3.0" value="1.0" step="0.1">
      </label>
      <!-- Arrow length and hue are normalized against the range present in the
           current frame, which is what keeps them legible and what makes two
           frames incomparable. This pins that range; the legend says when it is
           pinned, because a locked scale on a collapsing scene saturates. -->
      <label>
        <input type="checkbox" id="lockScale"> Lock scale
      </label>
    </details>
    <details class="section" id="cameraSection">
      <summary>Camera</summary>
      <div style="font-size: 11px; margin: 5px 0; color: #666; font-weight: normal;">
        <span style="font-size: 10px;">Scroll wheel to zoom<br>Middle-click or Ctrl+drag to pan</span>
      </div>
      <button id="resetCameraBtn" style="width: 100%; margin-top: 5px;">Reset Camera</button>
    </details>
    <label>
      <input type="checkbox" id="showVectors" checked> Show Vector Field
    </label>
    <label>
      <input type="checkbox" id="showParticleVectors" checked> Show Particle Vectors
    </label>
    <label>
      <input type="checkbox" id="showTrails" checked> Show Trails
    </label>
    <!-- Collapsed by default: the defaults inside are the ones to want, and an
         always-open section pushed Clear All and Pause below the fold in an
         800px-tall window. Both dropdowns are generated from TypeScript
         (INTEGRATOR_LABELS, COLLISION_MODE_LABELS) for the same reason the
         scene list is — the schemes and modes are code, not markup. -->
    <details class="section" id="physicsSection">
      <summary>Physics</summary>
      <label style="font-size: 11px;">
        Scheme:
        <select id="integratorSelect" class="control-select"></select>
      </label>
      <label>
        <input type="checkbox" id="adaptiveStepping" checked> Adaptive Sub-steps
      </label>
      <label style="font-size: 11px;">
        Contact:
        <select id="collisionSelect" class="control-select"></select>
      </label>
      <!-- Inline rather than stacked: every full-width slider pushes Clear All
           and Pause closer to the fold when this section is open. -->
      <label style="font-size: 11px;">
        Bounciness: <span id="restitutionValue">0.5</span>
        <input type="range" id="restitutionSlider" min="0" max="1" value="0.5" step="0.05"
               style="width: 90px; vertical-align: middle;">
      </label>
      <label style="font-size: 11px;">
        Forces:
        <select id="forceModeSelect" class="control-select"></select>
      </label>
    </details>
    <div class="section" style="font-weight: normal;">
      <!-- Options generated from FIELD_MODE_LABELS in src/VectorField.ts, for
           the same reason the scene list is. -->
      <label style="font-size: 11px; margin-top: 0;">
        Field:
        <select id="fieldModeSelect" class="control-select"></select>
      </label>
    </div>
    </div>
    <div class="button-row panel-actions">
      <button id="clearBtn">Clear All</button>
      <button id="pauseBtn">Pause</button>
    </div>
  </div>
  
  <div id="info">
    <strong>Click</strong> to add objects<br>
    <strong>Drag</strong> to add velocity<br>
    <strong>Shift+click</strong> a body to follow it &nbsp; <strong>D</strong> for readouts<br>
    <!-- Filled in by main.ts: which body the camera is holding, whether the
         overlay is up, and — the reason this line exists at all — a word when a
         followed body is absorbed and the camera lets go on its own. -->
    <div id="followStatus" class="note note-line"></div>
    <!-- Filled in only while a body is followed, at the same four-times-a-second
         cadence as the debug overlay. -->
    <div id="followReadout" class="note"></div>
    Objects: <span id="objectCount">0</span> &nbsp; Sub-steps: <span id="subStepCount">1</span>
    &nbsp; Forces: <span id="forceModeLabel">exact</span>
    &nbsp; Zoom: <span id="zoomValue">100</span>%
    <div id="particleList">
      <!-- Particle list will be populated here -->
    </div>
  </div>
  
  <div id="legend">
    <strong id="legendTitle">Vector Field:</strong><br>
    <div id="legendRamp">
      <span class="swatch" style="color: #ff0000;">●</span> Strong
      <span id="legendMax" style="color: #444;">—</span><br>
      <span class="swatch" style="color: #ffff00;">●</span> Medium-High<br>
      <span class="swatch" style="color: #00ff00;">●</span> Medium<br>
      <span class="swatch" style="color: #00ffff;">●</span> Medium-Low<br>
      <span class="swatch" style="color: #0000ff;">●</span> Weak
      <span id="legendMin" style="color: #444;">—</span>
    </div>
    <!-- Filled in each frame from the range actually on screen. Arrow length
         and hue are normalized against that range, so without the numbers the
         picture has no absolute scale at all — see KNOWNISSUES.md. -->
    <div id="legendScale">
      log scale, per unit mass
    </div>
    <div class="legend-section">
      <strong>Particle Vectors:</strong><br>
      <span class="swatch" style="color: #ff8800;">→</span> Gravitational Force<br>
      <span class="swatch" style="color: #00ffff;">→</span> Velocity (Movement)
    </div>
  </div>
  
  <script type="module" src="/src/main.ts"></script>
</body>
</html>