murals: add precise wall-size number inputs synced with the sliders

9492cb5b046855869d587542dcc123038b72ebba · 2026-08-06 08:25:18 -0700 · steve

Each wall dimension now has a number field (half-foot precision) beside its
range slider, kept in two-way sync — typing mirrors the slider and rescales the
scene; dragging mirrors the number; out-of-range entries clamp on commit.
Widened wall ranges (8–80 ft W, 8–30 ft H) so precise entry is meaningful.

Files touched

M public/murals.html

Diff

commit 9492cb5b046855869d587542dcc123038b72ebba
Author: steve <steve@designerwallcoverings.com>
Date:   Thu Aug 6 08:25:18 2026 -0700

    murals: add precise wall-size number inputs synced with the sliders
    
    Each wall dimension now has a number field (half-foot precision) beside its
    range slider, kept in two-way sync — typing mirrors the slider and rescales the
    scene; dragging mirrors the number; out-of-range entries clamp on commit.
    Widened wall ranges (8–80 ft W, 8–30 ft H) so precise entry is meaningful.
---
 public/murals.html | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/public/murals.html b/public/murals.html
index 1b7d566..cc402fa 100644
--- a/public/murals.html
+++ b/public/murals.html
@@ -54,6 +54,9 @@
   .ctrls select,.ctrls input[type=range]{font:inherit}
   .ctrls select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14px}
   .ctrls output{font-family:Georgia,serif;color:var(--ink);font-size:15px}
+  .wall-row{display:flex;align-items:center;gap:10px}
+  .wall-row input[type=number]{width:64px;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
+  .wall-row input[type=range]{flex:1;min-width:90px}
   .scene{position:relative;width:100%;background:linear-gradient(#f4eee4,#efe9df);border:1px solid var(--line);border-radius:10px;overflow:hidden;user-select:none;touch-action:none}
   .floor{position:absolute;left:0;right:0;bottom:0;background:var(--floor);border-top:2px solid #c9bda9}
   .baseboard{position:absolute;left:0;right:0;background:#fff;border-top:1px solid #cfc4b2;border-bottom:1px solid #cfc4b2}
@@ -207,10 +210,16 @@
           <input id="murH" type="number" min="3" max="16" step="0.5" value="12" style="width:76px;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px">
         </div>
         <div class="f">Wall width — <output id="wwOut"></output>
-          <input id="wallW" type="range" min="24" max="60" step="1" value="32">
+          <div class="wall-row">
+            <input id="wallWnum" type="number" min="8" max="80" step="0.5" value="32" aria-label="Wall width in feet">
+            <input id="wallW" type="range" min="8" max="80" step="1" value="32">
+          </div>
         </div>
         <div class="f">Wall height — <output id="whOut"></output>
-          <input id="wallH" type="range" min="12" max="20" step="1" value="14">
+          <div class="wall-row">
+            <input id="wallHnum" type="number" min="8" max="30" step="0.5" value="14" aria-label="Wall height in feet">
+            <input id="wallH" type="range" min="8" max="30" step="1" value="14">
+          </div>
         </div>
         <div class="f">Room scene
           <div class="scene-presets" id="scenePresets"></div>
@@ -373,8 +382,8 @@ async function boot(){
   document.addEventListener('keydown', e => { if(e.key==='Escape') $('#provModal').classList.remove('open'); });
 
   $('#selMural').addEventListener('change', e => selectMural(e.target.value));
-  $('#wallW').addEventListener('input', drawScene);
-  $('#wallH').addEventListener('input', drawScene);
+  wireWall('wallWnum', 'wallW', 8, 80);
+  wireWall('wallHnum', 'wallH', 8, 30);
   $('#murW').addEventListener('input', centerMural);
   $('#murH').addEventListener('input', centerMural);
   $('#btnCenter').addEventListener('click', centerMural);
@@ -458,7 +467,23 @@ function selectMural(code){
   centerMural();           // also draws
 }
 
-function wallDims(){ return { W:+$('#wallW').value, H:+$('#wallH').value }; }
+// The number inputs are the source of truth for wall size (they allow precise,
+// half-foot entry); the range sliders mirror them. wireWall() keeps both in sync.
+function wallDims(){ return { W:+$('#wallWnum').value || 32, H:+$('#wallHnum').value || 14 }; }
+function wireWall(numId, rangeId, mn, mx){
+  const num = $('#'+numId), rng = $('#'+rangeId);
+  rng.addEventListener('input', () => { num.value = rng.value; drawScene(); });
+  num.addEventListener('input', () => {
+    const v = +num.value;
+    if(!isNaN(v)) rng.value = Math.min(mx, Math.max(mn, Math.round(v)));
+    drawScene();
+  });
+  num.addEventListener('change', () => {            // clamp the field itself on commit
+    let v = +num.value; if(isNaN(v)) v = +rng.value;
+    v = Math.min(mx, Math.max(mn, v));
+    num.value = v; rng.value = Math.round(v); drawScene();
+  });
+}
 
 // ── custom mural size: the user enters width/height and the signature chips
 // re-arrange to fill it at true print scale (~1.9 × 0.85 ft per signature).

← 16ef809 auto-save: 2026-08-06T08:19:59 (1 files) — apps/mobile/packa · back to CelebritySignatures · auto-save: 2026-08-06T09:20:28 (13 files) — .gitignore serve 56c46cb →