Fix initial scroll position: dial centered on page show, snap-back offset 233

src/pages/index/index.ux

@@ -81,6 +81,8 @@ export default {
   onShow() {
     if (this.destroyed) return
     this.visible = true
+    this.crownAnchor = 233
+    try { this.$element('scroller').scrollTo({ top: 233 }) } catch (err) {}
     this.records.sync()
     this.startTimer()
   },
@@ -176,7 +178,7 @@ export default {
   onCrownScroll(e) {
     if (this.destroyed) return
     const top = e && typeof e.scrollTop === 'number' ? e.scrollTop : 0
-    const center = 466
+    const center = 233
     const d = top - (this.crownAnchor == null ? center : this.crownAnchor)
     this.crownAnchor = top
     if (d === 0) return
@@ -228,10 +230,10 @@ export default {
   background-color: #000000;
   align-items: center;
   justify-content: center;
-  /* scrollable strip: dial centered in a 1398px-tall content so the crown
-     always has travel to scroll against; page re-centers after each event */
-  padding-top: 466px;
-  padding-bottom: 466px;
+  /* scrollable travel: dial centered in 932px content, 233px of crown travel
+     each way; onReady + onscroll snap back to the center offset (233) */
+  padding-top: 233px;
+  padding-bottom: 233px;
 }
 .dial {
   width: 466px; height: 466px;

tests/page.cjs

@@ -72,17 +72,17 @@ assert.doesNotMatch(ux, /transform\s*:/);
 // crown path: scroll deltas become queued 90° turns, board stays centered
 c = mk();
 c.visible = true;
-c.crownAnchor = 466;
-c.onCrownScroll({ scrollTop: 466 + 40 });   // one notch "down"
-c.onCrownScroll({ scrollTop: 466 });
+c.crownAnchor = 233;
+c.onCrownScroll({ scrollTop: 233 + 40 });   // one notch "down"
+c.onCrownScroll({ scrollTop: 233 });
 assert.equal(c.queue.length, 1, 'one turn queued after one crown notch');
-assert.equal(c.crownAnchor, 466, 'scroller re-centered');
+assert.equal(c.crownAnchor, 233, 'scroller re-centered');
 assert.equal(JSON.stringify(c.queue[0]), JSON.stringify({ x: 0, y: 1 }), 'right-facing snake turned clockwise = down');
-c.onCrownScroll({ scrollTop: 466 - 120 });  // three notches back
+c.onCrownScroll({ scrollTop: 233 - 120 });  // three notches back
 assert.equal(c.queue.length, 2, 'queue capped at 2');
 assert.equal(c.dir.x, 1, 'no reversal emitted, x unchanged');
 assert.equal(c.dir.y, 0, 'no reversal emitted, y unchanged');
-c.onCrownScroll({ scrollTop: 466 });
+c.onCrownScroll({ scrollTop: 233 });
 c.tick();
 assert.equal(JSON.stringify(c.dir), JSON.stringify({ x: 0, y: 1 }), 'first queued turn consumed');