SNAKE game v0.3: round screen, swipe control

- 16x16 grid, 320px board centered on round 466 screen, designWidth 466
- pure snake logic in src/common/snake.js (step/turn/rotateDir/spawnFood, TDD'd)
- for-directive segment rendering, show-gated game-over overlay, 300ms tick
- swipe direction input (crown rotation confirmed unsupported on Vela S4)
- tests: snake logic + page wiring

src/pages/index/index.ux

@@ -0,0 +1,180 @@
+<template>
+  <div class="page" onswipe="onSwipe">
+    <stack class="dial">
+      <div class="board"></div>
+      <div class="food" style="left: {{ food.left }}px; top: {{ food.top }}px;"></div>
+      <div class="{{ seg.cls }}" for="{{ seg in snake }}" style="left: {{ seg.left }}px; top: {{ seg.top }}px;"></div>
+      <div class="overlay" show="{{ over }}" onclick="onTap">
+        <text class="overText">GAME OVER</text>
+        <text class="overSub">{{ scoreText }}</text>
+        <text class="overHint">tap to play again</text>
+      </div>
+      <text class="score">{{ scoreText }}</text>
+      <text class="hint">swipe to move</text>
+    </stack>
+  </div>
+</template>
+<script>
+import snake from '../../common/snake.js'
+
+const CELL = 20
+const GRID = 16
+const OFFSET = 73
+
+export default {
+  private: {
+    snake: [],
+    food: { left: '73px', top: '73px' },
+    scoreText: 'SCORE 0',
+    over: false
+  },
+  onInit() {
+    this.dir = { x: 1, y: 0 }
+    this.pending = null
+    this.reset()
+  },
+  onShow() {
+    this.timer = setInterval(() => this.tick(), 300)
+  },
+  onHide() {
+    clearInterval(this.timer)
+  },
+  onDestroy() {
+    clearInterval(this.timer)
+  },
+  reset() {
+    this.model = snake.initialSnake()
+    this.foodModel = snake.spawnFood(this.model, GRID)
+    this.dir = { x: 1, y: 0 }
+    this.pending = null
+    this.over = false
+    this.rebuild()
+  },
+  tick() {
+    if (this.over) return
+    if (this.pending) {
+      this.dir = snake.turn(this.dir, this.pending)
+      this.pending = null
+    }
+    const r = snake.step(this.model, this.dir, this.foodModel, GRID)
+    if (!r.alive) {
+      this.over = true
+      clearInterval(this.timer)
+      return
+    }
+    this.model = r.snake
+    if (r.ate) {
+      this.foodModel = snake.spawnFood(this.model, GRID)
+    }
+    this.rebuild()
+  },
+  restart() {
+    this.reset()
+    clearInterval(this.timer)
+    this.timer = setInterval(() => this.tick(), 300)
+  },
+  onSwipe(e) {
+    if (this.over) return
+    const d = e.direction
+    let v
+    if (d === 'left') v = { x: -1, y: 0 }
+    else if (d === 'right') v = { x: 1, y: 0 }
+    else if (d === 'up') v = { x: 0, y: -1 }
+    else if (d === 'down') v = { x: 0, y: 1 }
+    else return
+    this.pending = v
+  },
+  onTap() {
+    if (this.over) this.restart()
+  },
+  rebuild() {
+    const out = []
+    for (let i = 0; i < this.model.length; i++) {
+      const s = this.model[i]
+      out.push({
+        left: (OFFSET + s.x * CELL + 1) + 'px',
+        top: (OFFSET + s.y * CELL + 1) + 'px',
+        cls: i === 0 ? 'seg head' : 'seg'
+      })
+    }
+    this.snake = out
+    this.food = {
+      left: (OFFSET + this.foodModel.x * CELL + 3) + 'px',
+      top: (OFFSET + this.foodModel.y * CELL + 3) + 'px'
+    }
+    this.scoreText = 'SCORE ' + (this.model.length - 3)
+  }
+}
+</script>
+<style>
+.page {
+  width: 466px; height: 466px;
+  background-color: #000000;
+  align-items: center;
+  justify-content: center;
+}
+.dial {
+  width: 466px; height: 466px;
+}
+.board {
+  position: absolute; left: 71px; top: 71px;
+  width: 320px; height: 320px;
+  border-radius: 26px;
+  border-width: 2px;
+  border-color: #2a3040;
+  background-color: #0a0f1a;
+}
+.seg {
+  position: absolute;
+  width: 18px; height: 18px;
+  border-radius: 4px;
+  background-color: #35c26a;
+}
+.seg.head {
+  background-color: #7cf0a0;
+}
+.food {
+  position: absolute;
+  width: 14px; height: 14px;
+  border-radius: 7px;
+  background-color: #ff5a5a;
+}
+.score {
+  position: absolute; left: 0px; top: 24px;
+  width: 466px;
+  color: #9aa0aa;
+  font-size: 22px;
+  text-align: center;
+}
+.hint {
+  position: absolute; left: 0px; top: 408px;
+  width: 466px;
+  color: #3a4052;
+  font-size: 18px;
+  text-align: center;
+}
+.overlay {
+  position: absolute; left: 0px; top: 160px;
+  width: 466px;
+  flex-direction: column;
+  align-items: center;
+}
+.overText {
+  height: 40px;
+  color: #ffffff;
+  font-size: 32px;
+  text-align: center;
+}
+.overSub {
+  height: 32px;
+  color: #f3a633;
+  font-size: 24px;
+  text-align: center;
+}
+.overHint {
+  height: 30px;
+  color: #9aa0aa;
+  font-size: 20px;
+  text-align: center;
+}
+</style>