diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux index 4ccb6f7..3b2f43e 100644 --- a/src/pages/index/index.ux +++ b/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; diff --git a/tests/page.cjs b/tests/page.cjs index f2569d8..324975b 100644 --- a/tests/page.cjs +++ b/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');