Upload 3 files

app.js

@@ -1182,7 +1182,9 @@ const D2R = Math.PI / 180;
 let satGroup = null, orbitLine = null, satCam = null;
 let satEnabled = true, satViewOn = true, satFov = 45;
 let lastFrameTime = performance.now();
-const orbit = { a: 3000, e: 0.1, i: 45, raan: 0, argp: 0, nu: 0, speed: 200 };
+// `speed` is a percentage: 100% = the satellite's true physical rate
+// relative to the simulated time clock (see updateSatellite).
+const orbit = { a: 3000, e: 0.1, i: 45, raan: 0, argp: 0, nu: 0, speed: 100 };
 
 /* Which orbit family the satellite flies: a low lunar orbit around the
    Moon, or a halo orbit about the Earth–Moon L2 point. */
@@ -1319,42 +1321,46 @@ function buildSatellite() {
   orbitLine.visible = satEnabled;
 }
 
-/* Advance the true anomaly using the physical rate (faster at periapsis),
-   scaled by the visualization speed multiplier. */
+/* Advance the satellite along its orbit.
+
+   Motion is driven by the SAME simulated clock as the Sun/Earth, so the
+   satellite only moves while "Animate time" is on Play. The amount of
+   simulated time that passes this frame is:
+       simSeconds = timeRateDays · dt · 86400
+   "Orbit speed" is a percentage on top of that: at 100% the satellite
+   advances at its true physical rate relative to the simulated clock
+   (i.e. in sync with time), and higher values just fast-forward it. */
 function updateSatellite(dt) {
   if (!satEnabled || !satGroup) return;
 
+  // Only move when time is playing (and the speed isn't zeroed).
+  if (!timeAnimating || orbit.speed <= 0) { positionSatellite(); return; }
+
+  const speedFrac = orbit.speed / 100;             // 100% ⇒ 1× real rate
+  const simSeconds = timeRateDays * dt * 86400 * speedFrac;
+
   if (orbitMode === "l2") {
-    // The real L2 halo period is ~14.8 days — ~90× slower than a low
-    // lunar orbit — so at the shared speed multiplier it would look
-    // frozen. Use a visualization rate so the satellite visibly traces
-    // the halo across the speed slider's range.
-    if (orbit.speed > 0) {
-      const degPerSec = 0.03 * orbit.speed; // ~6°/s at the default 200×
-      l2.phase = (l2.phase + degPerSec * dt) % 360;
-      if (l2.phase < 0) l2.phase += 360;
-      const sPh = document.getElementById("s-l2phase");
-      const vPh = document.getElementById("v-l2phase");
-      if (sPh) sPh.value = l2.phase;
-      if (vPh) vPh.textContent = Math.round(l2.phase) + "°";
-    }
+    const degPerSec = 360 / (L2_PERIOD_DAYS * 86400); // real halo rate
+    l2.phase = (l2.phase + degPerSec * simSeconds) % 360;
+    if (l2.phase < 0) l2.phase += 360;
+    const sPh = document.getElementById("s-l2phase");
+    const nPh = document.getElementById("n-l2phase");
+    if (sPh) sPh.value = l2.phase;
+    if (nPh && nPh !== document.activeElement) nPh.value = Math.round(l2.phase);
     positionSatellite();
     return;
   }
 
-  if (orbit.speed > 0) {
-    const e = orbit.e, a = orbit.a;
-    const n = Math.sqrt(MU_MOON / (a * a * a)); // mean motion, rad/s
-    const f = orbit.nu * D2R;
-    const dnu = n * orbit.speed *
-      Math.pow(1 + e * Math.cos(f), 2) / Math.pow(1 - e * e, 1.5); // rad/s
-    orbit.nu = (orbit.nu + (dnu * dt) / D2R) % 360;
-    if (orbit.nu < 0) orbit.nu += 360;
-    const sNu = document.getElementById("s-nu");
-    const vNu = document.getElementById("v-nu");
-    if (sNu) sNu.value = orbit.nu;
-    if (vNu) vNu.textContent = Math.round(orbit.nu) + "°";
-  }
+  const e = orbit.e, a = orbit.a;
+  const n = Math.sqrt(MU_MOON / (a * a * a)); // mean motion, rad/s
+  const f = orbit.nu * D2R;
+  const dnu = n * Math.pow(1 + e * Math.cos(f), 2) / Math.pow(1 - e * e, 1.5); // rad/s
+  orbit.nu = (orbit.nu + (dnu * simSeconds) / D2R) % 360;
+  if (orbit.nu < 0) orbit.nu += 360;
+  const sNu = document.getElementById("s-nu");
+  const nNu = document.getElementById("n-nu");
+  if (sNu) sNu.value = orbit.nu;
+  if (nNu && nNu !== document.activeElement) nNu.value = Math.round(orbit.nu);
   positionSatellite();
 }
 
@@ -1526,18 +1532,23 @@ function toggleSatFullscreen(force) {
   }
 }
 
-/* A slider paired with an editable number input (two-way synced). */
-function bindNum(sliderId, numId, apply) {
+/* A slider paired with an editable number input (two-way synced).
+   An optional (labelId, fmt) pair keeps a descriptive span in sync — e.g.
+   the semi-major-axis altitude readout. */
+function bindNum(sliderId, numId, apply, labelId, fmt) {
   const s = document.getElementById(sliderId);
   const n = document.getElementById(numId);
   if (!s || !n) return;
+  const label = labelId ? document.getElementById(labelId) : null;
   const clamp = (val) => {
     const min = parseFloat(s.min), max = parseFloat(s.max);
     return Math.min(Math.max(val, min), max);
   };
+  const setLabel = (v) => { if (label && fmt) label.textContent = fmt(v); };
   s.addEventListener("input", () => {
     const v = parseFloat(s.value);
     n.value = v;
+    setLabel(v);
     apply(v);
   });
   n.addEventListener("input", () => {
@@ -1545,6 +1556,7 @@ function bindNum(sliderId, numId, apply) {
     if (isNaN(v)) return; // allow mid-typing
     const cv = clamp(v);
     s.value = cv;
+    setLabel(cv);
     apply(cv);
   });
   n.addEventListener("change", () => {
@@ -1552,10 +1564,12 @@ function bindNum(sliderId, numId, apply) {
     if (isNaN(v)) v = parseFloat(s.value);
     n.value = v;
     s.value = v;
+    setLabel(v);
     apply(v);
   });
   // initialize from the slider's current value
   n.value = parseFloat(s.value);
+  setLabel(parseFloat(s.value));
   apply(parseFloat(s.value));
 }
 
@@ -1574,16 +1588,19 @@ function wireSatellite() {
     handler(); // initialize display
   };
 
-  bind("s-a", "v-a", (v) => `${v} km · ${Math.round(v - 1737)} km alt`, (v) => { orbit.a = v; updateOrbitLine(); positionSatellite(); updatePeriodReadout(); });
-  bind("s-e", "v-e", (v) => v.toFixed(2), (v) => { orbit.e = v; updateOrbitLine(); positionSatellite(); });
-  bind("s-i", "v-i", (v) => `${v}°`, (v) => { orbit.i = v; updateOrbitLine(); positionSatellite(); });
-  bind("s-raan", "v-raan", (v) => `${v}°`, (v) => { orbit.raan = v; updateOrbitLine(); positionSatellite(); });
-  bind("s-argp", "v-argp", (v) => `${v}°`, (v) => { orbit.argp = v; updateOrbitLine(); positionSatellite(); });
-  bind("s-nu", "v-nu", (v) => `${Math.round(v)}°`, (v) => { orbit.nu = v; positionSatellite(); });
+  // The six classical orbital elements — each a slider paired with an
+  // editable number input the user can type into directly.
+  bindNum("s-a", "n-a", (v) => { orbit.a = v; updateOrbitLine(); positionSatellite(); updatePeriodReadout(); },
+          "v-a", (v) => `${Math.round(v - 1737)} km alt`);
+  bindNum("s-e", "n-e", (v) => { orbit.e = v; updateOrbitLine(); positionSatellite(); });
+  bindNum("s-i", "n-i", (v) => { orbit.i = v; updateOrbitLine(); positionSatellite(); });
+  bindNum("s-raan", "n-raan", (v) => { orbit.raan = v; updateOrbitLine(); positionSatellite(); });
+  bindNum("s-argp", "n-argp", (v) => { orbit.argp = v; updateOrbitLine(); positionSatellite(); });
+  bindNum("s-nu", "n-nu", (v) => { orbit.nu = v; positionSatellite(); });
 
   // L2 halo controls
-  bind("s-l2amp", "v-l2amp", (v) => `${v} km`, (v) => { l2.amp = v; updateOrbitLine(); positionSatellite(); });
-  bind("s-l2phase", "v-l2phase", (v) => `${Math.round(v)}°`, (v) => { l2.phase = v; positionSatellite(); });
+  bindNum("s-l2amp", "n-l2amp", (v) => { l2.amp = v; updateOrbitLine(); positionSatellite(); });
+  bindNum("s-l2phase", "n-l2phase", (v) => { l2.phase = v; positionSatellite(); });
 
   // Speed and FOV use a slider paired with an editable number input.
   bindNum("s-speed", "n-speed", (v) => { orbit.speed = v; });

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Luna Maps — 3D Moon Explorer</title>
-  <link rel="stylesheet" href="style.css?v=7" />
+  <link rel="stylesheet" href="style.css?v=9" />
 </head>
 <body>
   <div id="app">
@@ -167,30 +167,44 @@
             <div class="period-line">🛰 One orbit ≈ <span id="period-readout">—</span> <span class="period-note">(real time)</span></div>
           </div>
 
-          <!-- Low lunar orbit: classical Keplerian elements -->
+          <!-- Low lunar orbit: classical Keplerian elements.
+               Each is a slider paired with an editable number input. -->
           <div id="lunar-orbit-controls">
             <div class="slider-row">
-              <label for="s-a">Semi-major axis <span id="v-a">3000 km · 1263 km alt</span></label>
-              <input type="range" id="s-a" min="1800" max="8000" step="10" value="3000" />
+              <label for="s-a">Semi-major axis
+                <span class="num-wrap"><input type="number" id="n-a" class="num-input" min="1800" max="12000" step="10" value="3000" aria-label="Semi-major axis (km)" />km</span>
+              </label>
+              <input type="range" id="s-a" min="1800" max="12000" step="10" value="3000" />
+              <div class="sub-note"><span id="v-a">1263 km alt</span></div>
             </div>
             <div class="slider-row">
-              <label for="s-e">Eccentricity <span id="v-e">0.10</span></label>
+              <label for="s-e">Eccentricity
+                <span class="num-wrap"><input type="number" id="n-e" class="num-input" min="0" max="0.7" step="0.01" value="0.1" aria-label="Eccentricity" /></span>
+              </label>
               <input type="range" id="s-e" min="0" max="0.7" step="0.01" value="0.1" />
             </div>
             <div class="slider-row">
-              <label for="s-i">Inclination i <span id="v-i">45°</span></label>
+              <label for="s-i">Inclination i
+                <span class="num-wrap"><input type="number" id="n-i" class="num-input" min="0" max="180" step="1" value="45" aria-label="Inclination (degrees)" />°</span>
+              </label>
               <input type="range" id="s-i" min="0" max="180" step="1" value="45" />
             </div>
             <div class="slider-row">
-              <label for="s-raan">Ascending node Ω <span id="v-raan">0°</span></label>
+              <label for="s-raan">Ascending node Ω
+                <span class="num-wrap"><input type="number" id="n-raan" class="num-input" min="0" max="360" step="1" value="0" aria-label="Right ascension of ascending node (degrees)" />°</span>
+              </label>
               <input type="range" id="s-raan" min="0" max="360" step="1" value="0" />
             </div>
             <div class="slider-row">
-              <label for="s-argp">Arg. of periapsis ω <span id="v-argp">0°</span></label>
+              <label for="s-argp">Arg. of periapsis ω
+                <span class="num-wrap"><input type="number" id="n-argp" class="num-input" min="0" max="360" step="1" value="0" aria-label="Argument of periapsis (degrees)" />°</span>
+              </label>
               <input type="range" id="s-argp" min="0" max="360" step="1" value="0" />
             </div>
             <div class="slider-row">
-              <label for="s-nu">True anomaly ν <span id="v-nu">0°</span></label>
+              <label for="s-nu">True anomaly ν
+                <span class="num-wrap"><input type="number" id="n-nu" class="num-input" min="0" max="360" step="1" value="0" aria-label="True anomaly (degrees)" />°</span>
+              </label>
               <input type="range" id="s-nu" min="0" max="360" step="1" value="0" />
             </div>
           </div>
@@ -203,7 +217,9 @@
               hemisphere that never faces Earth.
             </div>
             <div class="slider-row">
-              <label for="s-l2amp">Halo amplitude <span id="v-l2amp">25000 km</span></label>
+              <label for="s-l2amp">Halo amplitude
+                <span class="num-wrap"><input type="number" id="n-l2amp" class="num-input" min="2000" max="70000" step="500" value="25000" aria-label="Halo amplitude (km)" />km</span>
+              </label>
               <input type="range" id="s-l2amp" min="2000" max="70000" step="500" value="25000" />
             </div>
             <div class="map-toggle">
@@ -214,16 +230,18 @@
               </div>
             </div>
             <div class="slider-row">
-              <label for="s-l2phase">Halo phase <span id="v-l2phase">0°</span></label>
+              <label for="s-l2phase">Halo phase
+                <span class="num-wrap"><input type="number" id="n-l2phase" class="num-input" min="0" max="360" step="1" value="0" aria-label="Halo phase (degrees)" />°</span>
+              </label>
               <input type="range" id="s-l2phase" min="0" max="360" step="1" value="0" />
             </div>
           </div>
 
           <div class="slider-row">
-            <label for="s-speed">Orbit speed
-              <span class="num-wrap"><input type="number" id="n-speed" class="num-input" min="0" max="400" step="1" value="200" aria-label="Orbit speed multiplier" />×</span>
+            <label for="s-speed">Orbit speed <span class="period-note">(100% = synced to time)</span>
+              <span class="num-wrap"><input type="number" id="n-speed" class="num-input" min="0" max="400" step="1" value="100" aria-label="Orbit speed (percent of real rate relative to simulated time)" />%</span>
             </label>
-            <input type="range" id="s-speed" min="0" max="400" step="1" value="200" />
+            <input type="range" id="s-speed" min="0" max="400" step="1" value="100" />
           </div>
 
           <div class="slider-row">
@@ -305,6 +323,6 @@
     }
   }
   </script>
-  <script type="module" src="app.js?v=7"></script>
+  <script type="module" src="app.js?v=9"></script>
 </body>
 </html>

style.css

@@ -187,6 +187,15 @@ html, body {
   height: 14px;
 }
 
+/* secondary note under a slider (e.g. the altitude readout) */
+.sub-note {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--accent-2);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
 .slider-row input[type="range"] {
   -webkit-appearance: none;
   appearance: none;