oiwmiodev/vela-snake
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 7 Wiki Activity

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

Browse Source
This commit is contained in:
Omarchy-Big-PC
2026-09-13 22:48:16 +01:00
parent 7f48cde7d9
commit b19717141e
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.ux
+7 -5
View File
@@ -81,6 +81,8 @@ export default {
onShow() { onShow() {
if (this.destroyed) return if (this.destroyed) return
this.visible = true this.visible = true
this.crownAnchor = 233
try { this.$element('scroller').scrollTo({ top: 233 }) } catch (err) {}
this.records.sync() this.records.sync()
this.startTimer() this.startTimer()
}, },
@@ -176,7 +178,7 @@ export default {
onCrownScroll(e) { onCrownScroll(e) {
if (this.destroyed) return if (this.destroyed) return
const top = e && typeof e.scrollTop === 'number' ? e.scrollTop : 0 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) const d = top - (this.crownAnchor == null ? center : this.crownAnchor)
this.crownAnchor = top this.crownAnchor = top
if (d === 0) return if (d === 0) return
@@ -228,10 +230,10 @@ export default {
background-color: #000000; background-color: #000000;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* scrollable strip: dial centered in a 1398px-tall content so the crown /* scrollable travel: dial centered in 932px content, 233px of crown travel
always has travel to scroll against; page re-centers after each event */ each way; onReady + onscroll snap back to the center offset (233) */
padding-top: 466px; padding-top: 233px;
padding-bottom: 466px; padding-bottom: 233px;
} }
.dial { .dial {
width: 466px; height: 466px; width: 466px; height: 466px;
tests/page.cjs
+6 -6
View File
@@ -72,17 +72,17 @@ assert.doesNotMatch(ux, /transform\s*:/);
// crown path: scroll deltas become queued 90° turns, board stays centered // crown path: scroll deltas become queued 90° turns, board stays centered
c = mk(); c = mk();
c.visible = true; c.visible = true;
c.crownAnchor = 466; c.crownAnchor = 233;
c.onCrownScroll({ scrollTop: 466 + 40 }); // one notch "down" c.onCrownScroll({ scrollTop: 233 + 40 }); // one notch "down"
c.onCrownScroll({ scrollTop: 466 }); c.onCrownScroll({ scrollTop: 233 });
assert.equal(c.queue.length, 1, 'one turn queued after one crown notch'); 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'); 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.queue.length, 2, 'queue capped at 2');
assert.equal(c.dir.x, 1, 'no reversal emitted, x unchanged'); assert.equal(c.dir.x, 1, 'no reversal emitted, x unchanged');
assert.equal(c.dir.y, 0, 'no reversal emitted, y unchanged'); assert.equal(c.dir.y, 0, 'no reversal emitted, y unchanged');
c.onCrownScroll({ scrollTop: 466 }); c.onCrownScroll({ scrollTop: 233 });
c.tick(); c.tick();
assert.equal(JSON.stringify(c.dir), JSON.stringify({ x: 0, y: 1 }), 'first queued turn consumed'); assert.equal(JSON.stringify(c.dir), JSON.stringify({ x: 0, y: 1 }), 'first queued turn consumed');