codex-bot/vela-salah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Salah 0.6: restore user-confirmed smooth v0.3 native list

Browse Source
This commit is contained in:
codex-bot
2026-09-12 13:22:30 +01:00
parent 1c20c2927c
commit d7e707e800
7 changed files with 37 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -18
View File
@@ -19,24 +19,19 @@ Morocco (Ministry of Habous), matching AlAdhan `method=21`:
All computation happens **on the watch** — no GPS, no network. Pure solar math
(same Meeus approach as the sundial) lives in `src/common/prayer.js`.
## Screen (v0.5)
## Screen (v0.6)
- Pure #000000 AMOLED background, large 50px clock, no swipe hint
- Prayer names above their times, in fixed 104px native list rows
- After scrolling stops, the nearest-center prayer gets a 60px time and 28px
label; other rows use 30px times and 20px labels
- No font resizing or row-array replacement during gesture/inertial scrolling
- Duplicate stop notifications do not repaint unchanged focus; periodic refresh
defers while scrolling and resumes normally after hiding/showing the app
- Scroll viewport 320×264 at x73/y101 (center y233); 80px end spacers
- Fixed countdown below the list; lavender next-prayer highlight
- Normal system back exits; calculation logic unchanged
- Restores the exact native list markup, row styles and page logic from v0.3,
which the user confirmed scrolled smoothly on their watch
- Removes ALL scroll handlers, zoom logic and dynamic font-style bindings
- Fixed 28px prayer names and 36px times, side by side in 80px rows
- Pure black background; enlarged 50px header clock; no swipe hint
- Next-prayer countdown above the list; normal system back exits
User reported watch lag in v0.4. A 500-event VM replay measured 500 row-array
replacements in v0.4 versus zero during scrolling in v0.5. This verifies reduced
update work, NOT device frame rate. All automated tests and release build pass;
on-watch smoothness still needs confirmation. `preview-0.4.png` remains an
illustrative static layout mock; the settled appearance is unchanged.
The user reported v0.4 and v0.5 lag during swiping (not only when stopping).
`tests/native-scroll.cjs` verifies parity with the smooth v0.3 baseline and
absence of the zoom path. v0.6 tests/build pass; device smoothness still needs
confirmation. Old preview images document earlier releases, not v0.6.
## Project layout
@@ -62,8 +57,7 @@ npm run release
node tests/prayer.cjs
node tests/page.cjs
node tests/amoled.cjs
node tests/focus.cjs
node tests/scroll-performance.cjs
node tests/native-scroll.cjs
```
## Install
src/manifest.json
+2 -2
View File
@@ -2,8 +2,8 @@
"package": "com.ilias.salah",
"name": "SALAH",
"icon": "/common/icon.png",
"versionName": "0.5",
"versionCode": 5,
"versionName": "0.6",
"versionCode": 6,
"minAPILevel": 1,
"deviceTypeList": [
"watch"
src/pages/index/index.ux
+8 -38
View File
@@ -6,11 +6,11 @@
<text class="bannerLabel">{{ nextName }} in</text>
<text class="bannerTime">{{ countdown }}</text>
</div>
<list class="prayers" id="prayers" onscroll="onScroll" onscrollend="onScrollEnd">
<list class="prayers" id="prayers">
<list-item type="spacer" class="spacer"><div></div></list-item>
<list-item type="prayer" for="{{ row in rows }}" tid="key" class="row {{ row.key === nextKey ? 'rowNext' : '' }}">
<text style="{{ row.nameStyle }}" class="rowName {{ row.key === nextKey ? 'nameNext' : '' }}">{{ row.label }}</text>
<text style="{{ row.timeStyle }}" class="rowTime {{ row.key === nextKey ? 'timeNext' : '' }}">{{ row.time }}</text>
<text class="rowName {{ row.key === nextKey ? 'nameNext' : '' }}">{{ row.label }}</text>
<text class="rowTime {{ row.key === nextKey ? 'timeNext' : '' }}">{{ row.time }}</text>
</list-item>
<list-item type="spacer" class="spacer"><div></div></list-item>
</list>
@@ -46,7 +46,6 @@ export default {
},
onInit() {},
onShow() {
this._scrolling = false
this.update()
this.timer = setInterval(() => this.update(), 15000) // 15s cadence
},
@@ -56,35 +55,7 @@ export default {
onDestroy() {
clearInterval(this.timer)
},
onScroll(event) {
if (!event || typeof event.scrollY !== 'number' || !isFinite(event.scrollY)) return
// Non-template bookkeeping only while the native list is moving.
this._scrollY = Math.max(0, Math.min(520, event.scrollY))
this._scrolling = event.scrollState !== 0
if (event.scrollState === 0) this.onScrollEnd()
},
onScrollEnd() {
this._scrolling = false
this.applyFocus()
},
applyFocus() {
const focused = Math.round((this._scrollY || 0) / 104)
let changed = false
const rows = this.rows.map((row, index) => {
const timeSize = index === focused ? '60px' : '30px'
const nameSize = index === focused ? '28px' : '20px'
if (row.timeStyle && row.timeStyle.fontSize === timeSize &&
row.nameStyle && row.nameStyle.fontSize === nameSize) return row
changed = true
return Object.assign({}, row, {
timeStyle: { fontSize: timeSize },
nameStyle: { fontSize: nameSize }
})
})
if (changed) this.rows = rows
},
update() {
if (this._scrolling) return
const now = new Date()
const hh = String(now.getHours()).padStart(2, '0')
const mm = String(now.getMinutes()).padStart(2, '0')
@@ -105,7 +76,6 @@ export default {
passed: t[key] < nowMin,
rowStyle: { width: ROW_WIDTHS[i] + 'px' }
}))
this.applyFocus()
}
}
</script>
@@ -113,15 +83,15 @@ export default {
.page { width: 466px; height: 466px; background-color: #000000; }
.city { position: absolute; top: 12px; left: 103px; width: 260px; height: 26px; color: #aaa5b5; font-size: 20px; text-align: center; }
.clock { position: absolute; top: 35px; left: 103px; width: 260px; height: 56px; color: #ffffff; font-size: 50px; text-align: center; }
.banner { position: absolute; top: 383px; left: 53px; width: 360px; height: 36px; background-color: #000000; flex-direction: row; justify-content: center; align-items: center; }
.banner { position: absolute; top: 104px; left: 53px; width: 360px; height: 36px; background-color: #000000; flex-direction: row; justify-content: center; align-items: center; }
.bannerLabel { color: #c5a3ff; font-size: 24px; margin-right: 8px; }
.bannerTime { color: #ffffff; font-size: 26px; font-weight: bold; }
.prayers { position: absolute; top: 101px; left: 73px; width: 320px; height: 264px; flex-direction: column; background-color: #000000; }
.prayers { position: absolute; top: 146px; left: 73px; width: 320px; height: 240px; flex-direction: column; background-color: #000000; }
.spacer { width: 320px; height: 80px; background-color: #000000; }
.row { width: 320px; height: 104px; background-color: #000000; flex-direction: column; justify-content: center; align-items: center; padding-left: 10px; padding-right: 10px; }
.row { width: 320px; height: 80px; background-color: #000000; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 10px; padding-right: 10px; }
.rowNext { border-width: 1px; border-color: #a779ef; border-radius: 18px; }
.rowName { width: 298px; height: 30px; text-align: center; color: #d0cbd6; font-size: 28px; }
.rowName { color: #d0cbd6; font-size: 28px; }
.nameNext { color: #c5a3ff; font-weight: bold; }
.rowTime { width: 298px; height: 70px; text-align: center; color: #ffffff; font-size: 60px; }
.rowTime { color: #ffffff; font-size: 36px; }
.timeNext { color: #c5a3ff; font-weight: bold; }
</style>
tests/focus.cjs
-40
View File
@@ -1,40 +0,0 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const vm = require('node:vm')
const src = fs.readFileSync('src/pages/index/index.ux', 'utf8')
const body = src.match(/<script>([\s\S]*?)<\/script>/)[1].replace(/import\s+\w+\s+from\s+'[^']*';?/, '').replace('export default', 'globalThis.spec =')
const ctx = {prayer: require('../src/common/prayer.js'), setInterval: () => 1, clearInterval: () => {}}
vm.createContext(ctx); vm.runInContext(body, ctx)
const p = Object.assign({}, ctx.spec, JSON.parse(JSON.stringify(ctx.spec.private)))
p.update()
assert.equal(typeof p.onScroll, 'function', 'scroll handler drives center magnification')
const size = i => parseFloat(p.rows[i].timeStyle.fontSize)
p.onScroll({scrollY: 0, scrollState: 0})
assert.equal(size(0), 60, 'first centered prayer gets 60px time')
assert.ok(size(1) < size(0))
p.onScroll({scrollY: 104, scrollState: 0})
assert.equal(size(1), 60)
assert.equal(size(0), size(2), 'symmetric shrink around center')
p.onScroll({scrollY: 52, scrollState: 0})
assert.equal(size(1), 60, 'nearest row wins after stopping halfway')
assert.equal(size(0), 30)
p.onScroll({scrollY: 520, scrollState: 0})
assert.equal(size(5), 60, 'last prayer can be magnified')
p.update()
assert.equal(size(5), 60, 'clock refresh preserves scroll focus')
for (const offset of [-100, 9999]) {
p.onScroll({scrollY: offset, scrollState: 0})
p.rows.forEach(row => assert.ok(parseFloat(row.timeStyle.fontSize) >= 30 && parseFloat(row.timeStyle.fontSize) <= 60))
}
const before = JSON.stringify(p.rows)
for (const event of [undefined, {}, {scrollY: NaN}, {scrollY: Infinity}]) p.onScroll(event)
assert.equal(JSON.stringify(p.rows), before, 'invalid events do not corrupt styles')
assert.ok(!src.includes('SWIPE TO SCROLL'))
assert.match(src, /onscroll="onScroll"/)
assert.match(src, /style="\{\{ row.timeStyle \}\}"/)
assert.match(src, /style="\{\{ row.nameStyle \}\}"/)
function css(c,k) { return parseFloat(src.match(new RegExp('\\.'+c+'\\s*\\{([^}]+)'))[1].match(new RegExp(k+':\\s*([^;]+)'))[1]) }
assert.equal(css('prayers','top') + css('prayers','height') / 2, 233, 'magnification center is physical screen center')
assert.equal(css('row','height'), 104, 'fixed row geometry prevents scroll feedback')
assert.ok(css('clock','font-size') > 42, 'header clock enlarged too')
console.log('Center magnification, settled focus, end rows, refresh preservation, invalid events and wiring passed')
tests/native-scroll.cjs
+15
View File
@@ -0,0 +1,15 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const {execFileSync} = require('node:child_process')
const src = fs.readFileSync('src/pages/index/index.ux','utf8')
const baseline = execFileSync('git',['show','8e660f4:src/pages/index/index.ux'],{encoding:'utf8'})
assert.ok(!/onscroll|onScroll|applyFocus|timeStyle|nameStyle|_scrolling|_scrollY/.test(src), 'remove the entire scroll-driven zoom path')
assert.equal(src.match(/<list\b[\s\S]*?<\/list>/)[0], baseline.match(/<list\b[\s\S]*?<\/list>/)[0], 'native list markup matches user-confirmed smooth v0.3')
assert.equal(src.match(/<script>[\s\S]*?<\/script>/)[0], baseline.match(/<script>[\s\S]*?<\/script>/)[0], 'page logic matches smooth v0.3')
for(const name of ['prayers','spacer','row','rowName','rowTime','rowNext','nameNext','timeNext']) {
const re = new RegExp('\\.'+name+'\\s*\\{[^}]+}')
assert.equal(src.match(re)[0],baseline.match(re)[0],name+' uses proven static styling')
}
assert.ok(!src.includes('SWIPE TO SCROLL'))
assert.match(src,/font-size: 50px;/,'keep enlarged header clock')
console.log('Exact v0.3 list, row styles and script parity verified; zoom code absent; larger clock and no hint retained')
tests/page.cjs
-2
View File
@@ -94,8 +94,6 @@ function page() {
p.onHide = spec.onHide
p.onDestroy = spec.onDestroy
p.update = spec.update
p.applyFocus = spec.applyFocus
p.onScroll = spec.onScroll
p.rows = []
return p
}
tests/scroll-performance.cjs
-38
View File
@@ -1,38 +0,0 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const vm = require('node:vm')
const src = fs.readFileSync('src/pages/index/index.ux', 'utf8')
const body = src.match(/<script>([\s\S]*?)<\/script>/)[1].replace(/import\s+\w+\s+from\s+'[^']*';?/, '').replace('export default', 'globalThis.spec =')
const ctx = {prayer: require('../src/common/prayer.js'), setInterval: () => 1, clearInterval: () => {}}
vm.createContext(ctx); vm.runInContext(body, ctx)
const p = Object.assign({}, ctx.spec, JSON.parse(JSON.stringify(ctx.spec.private)))
p.update()
let rows = p.rows, writes = 0
Object.defineProperty(p, 'rows', {get: () => rows, set: value => {writes++; rows = value}})
const original = JSON.stringify(rows)
for (let i=0; i<500; i++) p.onScroll({scrollY: i, scrollState: i < 250 ? 1 : 2})
console.log('Row-array replacements during 500 gesture/inertia events:', writes)
assert.equal(writes, 0, 'native scrolling must not rebuild reactive rows')
assert.equal(JSON.stringify(rows), original, 'no font changes while scrolling')
p.update()
assert.equal(writes, 0, 'periodic refresh must defer during scrolling')
p.onScroll({scrollY: 520, scrollState: 0})
assert.equal(parseFloat(p.rows[5].timeStyle.fontSize), 60, 'last row grows after stop')
assert.ok(writes <= 1, 'one focus update at stop')
const settled = writes
p.onScrollEnd()
assert.equal(writes, settled, 'duplicate stop event is a no-op')
p.onScroll({scrollY: 208, scrollState: 1})
p.onScrollEnd()
assert.equal(parseFloat(p.rows[2].timeStyle.fontSize), 60, 'scrollend fallback applies nearest row')
assert.equal(parseFloat(p.rows[1].timeStyle.fontSize), 30)
const saved = JSON.stringify(p.rows)
for (const e of [undefined, {}, {scrollY: NaN}, {scrollY: Infinity}]) p.onScroll(e)
assert.equal(JSON.stringify(p.rows), saved)
p.onScroll({scrollY: 312, scrollState: 1})
p.onHide()
p.onShow()
assert.equal(p._scrolling, false, 'hiding during a swipe must not freeze refresh after resume')
assert.equal(parseFloat(p.rows[3].timeStyle.fontSize), 60)
assert.match(src, /onscrollend="onScrollEnd"/)
console.log('Scroll workload, deferred refresh, settled focus and duplicate-event checks passed')