dsh-piggy 0.25.0

package/src/client/tabs/study.js

@@ -0,0 +1,128 @@
+// @ts-check
+/**
+ * 学习页签（B8：动森手机式方块）。
+ *
+ * 第一层：学段方块（小学 … 学无止境）+ 兴趣。锁住的学段变灰，但点得进去看。
+ * 第二层：学段里是九门课的方块，点一下就去上这一节；兴趣里是兴趣课方块，点一下就去学。
+ * B4 起每门课各算各的课时：同一个学段里，正在这一段的能上，念完的打勾，还没到的上锁。
+ * @module dsh-piggy/client/tabs/study
+ */
+
+import { STAGES } from '../constants.js'
+import { el } from '../dom.js'
+import { drillHeader, drillTo, tile, tileGrid } from '../widgets.js'
+
+/** The drill key that opens the interest courses instead of a stage. */
+export const INTEREST_TAB = 'interest'
+
+/** One colour per stage, so the inner layer still says which stage it is. */
+var STAGE_COLOR = { primary: 'yellow', middle: 'teal', college: 'blue', graduate: 'purple', beyond: 'pink' }
+var INTEREST_COLOR = 'orange'
+/** Stages this client does not know (an older host's ladder) take colours in turn. */
+var FALLBACK_COLORS = ['yellow', 'teal', 'blue', 'purple', 'pink', 'green', 'lime']
+
+/** Where a subject stands relative to one stage: 'current' | 'done' | 'ahead'. */
+function standing(sub, stage) {
+  if (stage === null || sub.stageKey === '') return 'current'
+  if (sub.stageKey === stage.key) return 'current'
+  if (stage.upTo !== null && sub.lessons >= stage.upTo) return 'done'
+  return 'ahead'
+}
+
+export function renderStudyTab(ui) {
+  if (ui.view.subjects.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '宿主还没提供课程表。'))
+    return
+  }
+  var open = ui.drill.study
+  if (open === INTEREST_TAB && ui.view.interests.length > 0) {
+    renderInterests(ui)
+    return
+  }
+  var stage = null
+  for (var d = 0; d < ui.view.stages.length; d += 1) if (ui.view.stages[d].key === open) stage = ui.view.stages[d]
+  if (stage === null) {
+    renderStages(ui)
+    return
+  }
+  renderSubjects(ui, stage)
+}
+
+/** The top layer: one tile per stage, then 兴趣. */
+function renderStages(ui) {
+  // Prefer the host's own ladder: a client that hard-codes the stages would
+  // keep offering one the host has never heard of.
+  var stageList = ui.view.stages.length > 0 ? ui.view.stages : STAGES
+  var grid = tileGrid()
+  for (var s = 0; s < stageList.length; s += 1) {
+    (function (entry, index) {
+      var locked = entry.unlocked === false
+      var finished = entry.upTo === null || entry.upTo === undefined ? 0
+        : ui.view.subjects.filter(function (sub) { return sub.lessons >= entry.upTo }).length
+      grid.appendChild(tile({
+        emoji: entry.emoji || '📚', label: entry.label,
+        color: STAGE_COLOR[entry.key] ?? FALLBACK_COLORS[index % FALLBACK_COLORS.length],
+        locked: locked, tag: locked ? '🔒' : '', badge: finished > 0 ? '✓' + finished : '',
+        data: { 'data-stage': entry.key },
+        onPick: function () { drillTo(ui, 'study', entry.key) },
+      }))
+    })(stageList[s], s)
+  }
+  if (ui.view.interests.length > 0) {
+    var certified = ui.view.interests.filter(function (entry) { return entry.certified }).length
+    grid.appendChild(tile({
+      emoji: '🎯', label: '兴趣', color: INTEREST_COLOR,
+      badge: certified > 0 ? '📜' + certified : '',
+      data: { 'data-stage': INTEREST_TAB },
+      onPick: function () { drillTo(ui, 'study', INTEREST_TAB) },
+    }))
+  }
+  ui.content.appendChild(grid)
+}
+
+/** Inside a stage: the nine subjects. Tap one that is at this stage to go to class. */
+function renderSubjects(ui, stage) {
+  drillHeader(ui, 'study', stage.emoji + ' ' + stage.label,
+    stage.minutes + ' 分钟 · ' + stage.tuition + ' 🪙 · +' + stage.gain)
+  var color = STAGE_COLOR[stage.key] ?? FALLBACK_COLORS[Math.max(0, ui.view.stages.indexOf(stage)) % FALLBACK_COLORS.length]
+  var grid = tileGrid()
+  for (var i = 0; i < ui.view.subjects.length; i += 1) {
+    (function (sub) {
+      var where = standing(sub, stage)
+      var note
+      if (where === 'done') note = '✓ 毕业'
+      else if (where === 'ahead') note = '🔒 ' + (sub.stageLabel || '没到')
+      else if (stage.upTo !== null) note = (sub.lessons - stage.from) + '/' + (stage.upTo - stage.from) + ' 节'
+      else note = sub.lessons + ' 节'
+      grid.appendChild(tile({
+        emoji: sub.emoji, label: sub.label, color: color, soft: true, note: note,
+        disabled: where !== 'current' || !ui.view.canGoOut,
+        dim: where === 'current' && !sub.affordable,
+        data: { 'data-subject': sub.key },
+        onPick: function () { ui.send('study', { subject: sub.key }) },
+      }))
+    })(ui.view.subjects[i])
+  }
+  ui.content.appendChild(grid)
+}
+
+/** Inside 兴趣: every interest course; tap to go. Five of one earns its certificate. */
+function renderInterests(ui) {
+  var after = ui.view.interests[0].certificateAfter
+  drillHeader(ui, 'study', '🎯 兴趣', after > 0 ? '上满 ' + after + ' 次拿证' : '')
+  var grid = tileGrid()
+  for (var n = 0; n < ui.view.interests.length; n += 1) {
+    (function (entry) {
+      var note = entry.certificate === '' ? entry.cost + ' 🪙'
+        : (entry.certified ? '📜 有证' : '📜 ' + entry.times + '/' + entry.certificateAfter)
+      grid.appendChild(tile({
+        emoji: entry.emoji, label: entry.label, color: INTEREST_COLOR, soft: true, note: note,
+        disabled: !ui.view.canGoOut,
+        dim: !entry.affordable,
+        data: { 'data-interest': entry.key },
+        onPick: function () { ui.send('interest', { interest: entry.key }) },
+      }))
+    })(ui.view.interests[n])
+  }
+  ui.content.appendChild(grid)
+}

package/src/client/tabs/travel.js

@@ -0,0 +1,89 @@
+// @ts-check
+/**
+ * 旅行页签。
+ *
+ * 目的地与纪念品收藏。
+ * @module dsh-piggy/client/tabs/travel
+ */
+
+import { button, el } from '../dom.js'
+import { formatMinutes } from '../format.js'
+import { CSS } from '../styles.js'
+
+export function renderTravelTab(ui) {
+  if (ui.view.trips.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '宿主还没提供目的地。'))
+    return
+  }
+  var list = el('div', 'dp-list')
+  for (var i = 0; i < ui.view.trips.length; i += 1) {
+    (function (trip) {
+      var row = el('div', 'dp-item')
+      row.appendChild(el('span', null, trip.emoji))
+      var grow = el('div', 'dp-grow')
+      grow.appendChild(el('div', null, trip.label))
+      grow.appendChild(el('div', 'dp-dim', formatMinutes(trip.minutes) + ' · ' + trip.cost + ' 🪙'
+        + (trip.bestRarity ? ' · 可带回 ' + trip.bestRarityEmoji + trip.bestRarity : '')))
+      row.appendChild(grow)
+      var go = button('dp-mini', { 'data-trip': trip.key }, function () { ui.send('trip', { trip: trip.key }) })
+      go.textContent = '出发'
+      go.disabled = !ui.view.canGoOut || !trip.affordable
+      row.appendChild(go)
+      list.appendChild(row)
+    })(ui.view.trips[i])
+  }
+  ui.content.appendChild(list)
+
+  var souvenirs = ui.view.pig.souvenirs
+  var head = el('div', 'dp-title')
+  head.style.marginTop = '10px'
+  head.appendChild(el('b', null, '🎁 纪念品 ' + souvenirs.length))
+  ui.content.appendChild(head)
+  if (souvenirs.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '还没出过远门。'))
+    return
+  }
+
+  var chips = el('div', 'dp-grid')
+  for (var s = 0; s < souvenirs.length; s += 1) {
+    (function (entry) {
+      var chip = button('dp-item', { 'data-souvenir': entry.key }, function () {
+        ui.souvenirPick = ui.souvenirPick === entry.key ? null : entry.key
+        ui.renderContent()
+      })
+      chip.appendChild(el('span', null, entry.emoji))
+      var grow = el('div', 'dp-grow')
+      grow.appendChild(el('div', null, entry.label))
+      grow.appendChild(el('div', 'dp-dim', entry.rarityEmoji + entry.rarityLabel
+        + (entry.price > 0 ? ' · 值 ' + entry.price + ' 🪙' : '')))
+      chip.appendChild(grow)
+      chips.appendChild(chip)
+    })(souvenirs[s])
+  }
+  ui.content.appendChild(chips)
+
+  // The story card: tapping a souvenir is how the pig tells you where it
+  // went and what it brought back.
+  var picked = null
+  for (var q = 0; q < souvenirs.length; q += 1) if (souvenirs[q].key === ui.souvenirPick) picked = souvenirs[q]
+  if (picked !== null) {
+    // Named uniquely: the CSS-guard test maps `var x = el(...)` names to
+    // classes, and reusing `card` here shadowed the real .dp-card entry.
+    var souvenirCard = el('div', 'dp-locked')
+    souvenirCard.appendChild(el('div', null, picked.emoji + ' ' + picked.label + ' · ' + picked.rarityEmoji + picked.rarityLabel
+      + (picked.fromLabel === '' ? '' : ' · 来自' + picked.fromLabel)))
+    souvenirCard.appendChild(el('div', null, picked.story === ''
+      ? '（这只纪念品是旧版本带回来的，没有留下故事。）'
+      : '「' + picked.story + '」'))
+    if (picked.price > 0) {
+      var sell = button('dp-mini', { 'data-sell': picked.key }, function () {
+        ui.souvenirPick = null
+        ui.send('sell', { souvenir: picked.key })
+      })
+      sell.textContent = '卖掉 +' + picked.price + ' 🪙'
+      sell.style.marginTop = '6px'
+      souvenirCard.appendChild(sell)
+    }
+    ui.content.appendChild(souvenirCard)
+  }
+}

package/src/client/tabs/update.js

@@ -0,0 +1,164 @@
+// @ts-check
+/**
+ * 更新 App（只在桌面版出现，见 apps/desktop）：现在是哪个版本，GitHub 上有哪些版本，
+ * 一键更新到最新，或者挑一个版本换过去；换了还能回到上一个。
+ *
+ * 版本列表一格一个方块，点一个下面出详情卡（更新说明、能不能换、按钮）。
+ * 读写都经过桌面版的 window.piggyShell.updates，不走游戏的路由。
+ * @module dsh-piggy/client/tabs/update
+ */
+
+import { button, el } from '../dom.js'
+import { tile, tileGrid } from '../widgets.js'
+
+/** One panel per page, so the update state can live here. */
+/** @type {any} */
+var state = {
+  current: null, list: null, error: null, loading: false,
+  pick: null, busy: null, fraction: 0, message: null, listening: false,
+}
+
+/** The desktop bridge, or null inside DSH. */
+export function updatesBridge() {
+  var shell = /** @type {any} */ (window).piggyShell
+  return shell && shell.updates ? shell : null
+}
+
+function refresh(ui) {
+  var shell = updatesBridge()
+  if (shell === null || state.loading) return
+  state.loading = true
+  state.error = null
+  if (!state.listening) {
+    state.listening = true
+    shell.updates.onProgress(function (fraction) { state.fraction = fraction; ui.renderContent() })
+  }
+  Promise.all([shell.updates.current(), shell.updates.list()]).then(function (got) {
+    state.current = got[0]
+    if (got[1] && got[1].ok) state.list = got[1].releases
+    else state.error = (got[1] && got[1].reason) || '没问到'
+  }, function () { state.error = '没问到' }).then(function () {
+    state.loading = false
+    ui.renderContent()
+  })
+}
+
+function install(ui, version) {
+  var shell = updatesBridge()
+  if (shell === null) return
+  state.busy = version
+  state.fraction = 0
+  state.message = null
+  ui.renderContent()
+  shell.updates.install(version).then(function (result) {
+    state.message = result.ok ? '换好了，猪马上回来…' : result.reason
+    if (!result.ok) state.busy = null
+    ui.renderContent()
+  })
+}
+
+function rollback(ui) {
+  var shell = updatesBridge()
+  if (shell === null) return
+  state.busy = 'rollback'
+  ui.renderContent()
+  shell.updates.rollback().then(function (result) {
+    state.message = result.ok ? '回去了，猪马上回来…' : result.reason
+    if (!result.ok) state.busy = null
+    ui.renderContent()
+  })
+}
+
+export function renderUpdateTab(ui) {
+  if (updatesBridge() === null) {
+    ui.content.appendChild(el('div', 'dp-empty', '桌面版才有这个'))
+    return
+  }
+  if (state.current === null && state.list === null && state.error === null) refresh(ui)
+  var cur = state.current
+  var head = el('div', 'dp-pick dp-tile-card dp-update-now')
+  head.appendChild(el('div', 'dp-pick-head', cur === null ? '正在看现在的版本…'
+    : '现在 v' + cur.version + (cur.bundled ? '（安装包自带）' : '')))
+  if (cur !== null) head.appendChild(el('div', 'dp-dim', '安装包 ' + cur.shell))
+  if (state.message !== null) head.appendChild(el('div', 'dp-req', state.message))
+  if (state.busy !== null && state.message === null) {
+    head.appendChild(el('div', 'dp-dim', state.busy === 'rollback' ? '正在换回去…' : '下载中 ' + Math.round(state.fraction * 100) + '%'))
+  }
+  var latest = state.list === null ? null : state.list.find(function (r) { return r.blocked === null && !r.prerelease }) || null
+  if (latest !== null && cur !== null && !latest.current) {
+    var up = button('dp-btn dp-btn-wide', { 'data-update-latest': latest.version }, function () { install(ui, latest.version) })
+    up.textContent = '⬆️ 更新到最新 v' + latest.version
+    up.disabled = state.busy !== null
+    head.appendChild(up)
+  } else if (latest !== null) {
+    head.appendChild(el('div', 'dp-req dp-req-ok', '✓ 已经是最新'))
+  }
+  ui.content.appendChild(head)
+
+  if (state.loading && state.list === null) ui.content.appendChild(el('div', 'dp-empty', '正在问 GitHub…'))
+  if (state.error !== null) {
+    ui.content.appendChild(el('div', 'dp-empty', state.error))
+    var again = button('dp-btn dp-btn-wide', { 'data-update-retry': '' }, function () { refresh(ui) })
+    again.textContent = '再试一次'
+    ui.content.appendChild(again)
+  }
+  if (state.list !== null) renderList(ui, state.list)
+
+  if (cur !== null && cur.previous !== null) {
+    var back = button('dp-btn dp-btn-wide dp-update-back', { 'data-update-rollback': '' }, function () { rollback(ui) })
+    back.textContent = '↩️ 回到上一个版本 v' + cur.previous
+    back.disabled = state.busy !== null
+    ui.content.appendChild(back)
+  }
+}
+
+/** Every version as a tile; the picked one opens its notes and button below. */
+function renderList(ui, list) {
+  if (list.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', 'GitHub 上还没有能热更新的版本'))
+    return
+  }
+  var grid = tileGrid()
+  var picked = null
+  for (var i = 0; i < list.length; i += 1) {
+    (function (release, first) {
+      var active = state.pick === release.version
+      if (active) picked = release
+      grid.appendChild(tile({
+        emoji: release.current ? '🐖' : '📦', label: 'v' + release.version, color: 'lime', soft: true, active: active,
+        note: release.date, badge: first && release.blocked === null ? '新' : '',
+        tag: release.current ? '在用' : release.blocked !== null ? '🔒' : '', dim: release.blocked !== null,
+        data: { 'data-release': release.version },
+        onPick: function () { state.pick = active ? null : release.version; ui.renderContent() },
+      }))
+    })(list[i], i === 0)
+  }
+  ui.content.appendChild(grid)
+  if (picked !== null) ui.content.appendChild(details(ui, picked))
+}
+
+function details(ui, release) {
+  var box = el('div', 'dp-pick dp-tile-card dp-update-detail')
+  box.appendChild(el('div', 'dp-pick-head', 'v' + release.version + (release.date ? ' · ' + release.date : '') + (release.prerelease ? ' · 预览版' : '')))
+  if (release.notes) box.appendChild(el('div', 'dp-update-notes', release.notes))
+  var go = button('dp-btn dp-btn-wide', { 'data-update-install': release.version }, function () {
+    if (release.blocked === 'shell') updatesBridge().openPage(release.page)
+    else install(ui, release.version)
+  })
+  if (release.current) {
+    go.textContent = '正在用这个'
+    go.disabled = true
+  } else if (release.blocked === 'shell') {
+    box.appendChild(el('div', 'dp-req', '✗ 要先装 ' + release.minShell + ' 以上的安装包'))
+    go.textContent = '去下载新安装包'
+  } else if (release.blocked === 'save') {
+    box.appendChild(el('div', 'dp-req', '✗ 存档太新，这个版本读不了'))
+    go.textContent = '换不了'
+    go.disabled = true
+  } else {
+    go.textContent = '换到这个版本'
+    go.disabled = state.busy !== null
+  }
+  box.appendChild(go)
+  return box
+}

package/src/client/tabs/work.js

@@ -0,0 +1,106 @@
+// @ts-check
+/**
+ * 打工页签（B9：和学习 / 商店 / 背包一样的方块）。
+ *
+ * 第一层：武力 / 魅力 / 智力 三个大方块，右上角写能干的份数。
+ * 第二层：这类职业的方块；点一个，下面出详情卡 —— 门槛逐条打勾打叉、加成和消耗、「出发」。
+ * @module dsh-piggy/client/tabs/work
+ */
+
+import { button, el } from '../dom.js'
+import { drillHeader, drillTo, tile, tileGrid } from '../widgets.js'
+
+/** The three skills, in the order QQ Pet lists its traits, each with its colour. */
+var SKILLS = [
+  { key: 'strong', emoji: '💪', label: '武力', color: 'orange' },
+  { key: 'charm', emoji: '✨', label: '魅力', color: 'pink' },
+  { key: 'intel', emoji: '🧠', label: '智力', color: 'blue' },
+]
+
+export function renderWorkTab(ui) {
+  if (ui.view.jobs.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '宿主还没提供工作列表。'))
+    return
+  }
+  // Older hosts send no trait per job: one list of every job, no skill layer.
+  var bySkill = ui.view.jobs.some(function (job) { return job.trait !== '' })
+  if (!bySkill) {
+    renderJobs(ui, ui.view.jobs, 'orange')
+    return
+  }
+  var skill = SKILLS.find(function (entry) { return entry.key === ui.drill.work })
+  if (skill === undefined) {
+    renderSkills(ui)
+    return
+  }
+  var chosen = skill
+  drillHeader(ui, 'work', chosen.emoji + ' ' + chosen.label, '')
+  renderJobs(ui, ui.view.jobs.filter(function (job) { return job.trait === chosen.key }), chosen.color)
+}
+
+/** The top layer: one tile per skill, with how many of its jobs the pig can do. */
+function renderSkills(ui) {
+  var grid = tileGrid()
+  for (var s = 0; s < SKILLS.length; s += 1) {
+    (function (skill) {
+      var open = ui.view.jobs.filter(function (job) { return job.trait === skill.key && job.qualified }).length
+      grid.appendChild(tile({
+        emoji: skill.emoji, label: skill.label, color: skill.color,
+        badge: open > 0 ? String(open) : '',
+        data: { 'data-skill': skill.key },
+        onPick: function () { drillTo(ui, 'work', skill.key) },
+      }))
+    })(SKILLS[s])
+  }
+  ui.content.appendChild(grid)
+}
+
+/** Job tiles; the picked one opens its details under the grid. */
+function renderJobs(ui, jobs, color) {
+  var grid = tileGrid()
+  var picked = null
+  for (var i = 0; i < jobs.length; i += 1) {
+    (function (job) {
+      var active = ui.drill.pick === job.key
+      if (active) picked = job
+      var locked = job.qualified === false
+      grid.appendChild(tile({
+        emoji: job.emoji, label: job.label, color: color, soft: true, active: active,
+        note: job.minutes + '分·' + job.coins + '🪙',
+        tag: locked ? '🔒' : '', dim: locked,
+        data: { 'data-job-tile': job.key },
+        onPick: function () {
+          ui.drill.pick = active ? null : job.key
+          ui.renderContent()
+        },
+      }))
+    })(jobs[i])
+  }
+  ui.content.appendChild(grid)
+  if (picked !== null) ui.content.appendChild(jobDetails(ui, picked))
+}
+
+/** 详情: every condition with a tick or a cross, what the job pays and costs, and 出发. */
+function jobDetails(ui, job) {
+  var box = el('div', 'dp-pick dp-tile-card dp-job-detail')
+  box.appendChild(el('div', 'dp-pick-head', job.emoji + ' ' + job.label + ' · ' + (job.qualified ? '条件都够了' : '还差这些')))
+  for (var r = 0; r < job.requirements.length; r += 1) {
+    var need = job.requirements[r]
+    var have = need.kind === 'level' ? '（现在 Lv.' + need.have + '）'
+      : need.kind === 'certificate' ? '（' + need.have + '/' + need.need + ' 次）'
+        : need.kind === 'every' || need.kind === 'anyOf' ? '（' + need.have + '/' + need.need + ' 门）'
+          : '（现在 ' + need.have + ' 节）'
+    box.appendChild(el('div', need.met ? 'dp-req dp-req-ok' : 'dp-req', (need.met ? '✓ ' : '✗ ') + need.text + (need.met ? '' : ' ' + have)))
+  }
+  // A locked job from an older host has no checklist, only the summary line.
+  if (job.requirements.length === 0 && job.lockText) box.appendChild(el('div', 'dp-req', '✗ ' + job.lockText))
+  box.appendChild(el('div', 'dp-dim', job.minutes + ' 分钟 · ' + job.coins + ' 🪙 · '
+    + job.traitEmoji + job.traitLabel + ' ' + job.traitPoints
+    + (job.payPercent > 0 ? '（+' + job.payPercent + '%）' : '')
+    + ' · 饱食 ' + job.satiety + ' · 清洁 ' + job.cleanliness))
+  var go = button('dp-btn dp-btn-wide dp-job-go', { 'data-job': job.key }, function () { ui.send('work', { job: job.key }) })
+  go.textContent = '💼 出发'
+  go.disabled = !ui.view.canGoOut || job.qualified === false
+  box.appendChild(go)
+  return box
+}

package/src/client/values.js

@@ -0,0 +1,11 @@
+// @ts-check
+/**
+ * 防御性读取：把任何宿主载荷映射成确定的形状。
+ *
+ * @module dsh-piggy/client/values
+ */
+export var isObj = v => typeof v === 'object' && v !== null && !Array.isArray(v)
+export var obj = v => (isObj(v) ? v : {})
+export var arr = v => (Array.isArray(v) ? v : [])
+export var num = (v, dflt) => (typeof v === 'number' && isFinite(v) ? v : dflt)
+export var str = (v, dflt) => (typeof v === 'string' && v !== '' ? v : dflt)

package/src/client/widgets.js

@@ -0,0 +1,126 @@
+// @ts-check
+/**
+ * 页签共用的小组件：属性条、道具选择器、效果行。
+ *
+ * 只负责画，不决定业务规则。
+ * @module dsh-piggy/client/widgets
+ */
+
+import { button, el, meter } from './dom.js'
+import { num } from './values.js'
+
+export function labelledBar(ui, label, value, valueText, variant) {
+  var row = el('div', 'dp-row')
+  row.appendChild(el('span', null, label))
+  row.appendChild(el('b', null, valueText))
+  ui.content.appendChild(row)
+  ui.content.appendChild(meter(value, variant))
+}
+
+export function pickerPanel(ui, action) {
+  var wrap = el('div', 'dp-pick')
+  var asks = { feed: '喂点什么？', bathe: '用哪个洗澡？', play: '拿哪个玩具？' }
+  wrap.appendChild(el('div', 'dp-pick-head', asks[action] ?? '用哪个？'))
+  var list = el('div', 'dp-list')
+  var shelf = ui.view.care[action] ?? []
+  for (var i = 0; i < shelf.length; i += 1) {
+    (function (item) {
+      var row = el('div', 'dp-item')
+      row.appendChild(el('span', null, item.emoji))
+      var grow = el('div', 'dp-grow')
+      grow.appendChild(el('div', null, item.label + (item.default ? '（自带）' : ' ×' + num(item.count, 0))))
+      grow.appendChild(el('div', 'dp-dim', careEffectLine(action, item)))
+      row.appendChild(grow)
+      var use = button('dp-mini', { 'data-care': action + ':' + item.key }, function () {
+        ui.picker = null
+        ui.send(action, { item: item.key })
+      })
+      use.textContent = '用'
+      row.appendChild(use)
+      list.appendChild(row)
+    })(shelf[i])
+  }
+  wrap.appendChild(list)
+  var cancel = button('dp-cancel', {}, function () { ui.picker = null; ui.renderContent() })
+  cancel.textContent = '算了'
+  wrap.appendChild(cancel)
+  return wrap
+}
+
+export function careEffectLine(action, item) {
+  var parts = []
+  if (action === 'feed') {
+    parts.push('饱食 +' + item.satiety)
+    if (item.happiness) parts.push('心情 +' + item.happiness)
+  } else if (action === 'bathe') {
+    parts.push('清洁 +' + item.cleanliness)
+    if (item.happiness) parts.push('心情 +' + item.happiness)
+  } else {
+    parts.push('心情 +' + item.happiness)
+    if (item.satiety) parts.push('饱食 ' + item.satiety)
+  }
+  return parts.join(' · ')
+}
+
+// ---------------------------------------------------------------------------
+// 方块（动森手机那种）：学习 / 商店 / 背包的两层都用它（B8，用户 2026-10-01）。
+// 第一层是彩色大方块；点进去整屏换成第二层，左上角「‹ 返回」。
+// ---------------------------------------------------------------------------
+
+/** The grid tiles sit in: always three columns. */
+export function tileGrid() {
+  return el('div', 'dp-tiles')
+}
+
+/**
+ * One tile: a coloured rounded square with a big emoji, one short line under
+ * it, an optional second line, a count in the top-right corner and a small
+ * tag in the top-left. `soft` is the paler second-layer look.
+ * @param {{ emoji: string, label: string, color: string, note?: string, badge?: string, tag?: string,
+ *   soft?: boolean, locked?: boolean, dim?: boolean, disabled?: boolean, active?: boolean,
+ *   data?: Record<string, string>, onPick: () => void }} spec
+ */
+export function tile(spec) {
+  var node = button('dp-tile' + (spec.soft ? ' dp-tile-soft' : ''), spec.data ?? {}, function () { spec.onPick() })
+  node.setAttribute('data-color', spec.color)
+  if (spec.locked) node.setAttribute('data-locked', 'true')
+  if (spec.dim) node.setAttribute('data-dim', 'true')
+  if (spec.active) node.setAttribute('data-active', 'true')
+  if (spec.disabled === true) node.disabled = true
+  var icon = el('span', 'dp-tile-icon')
+  icon.appendChild(el('span', 'dp-tile-e', spec.emoji))
+  if (spec.badge) icon.appendChild(el('b', 'dp-tile-badge', spec.badge))
+  if (spec.tag) icon.appendChild(el('b', 'dp-tile-tag', spec.tag))
+  node.appendChild(icon)
+  node.appendChild(el('span', 'dp-tile-n', spec.label))
+  if (spec.note) node.appendChild(el('span', 'dp-tile-note', spec.note))
+  return node
+}
+
+/**
+ * Open a category (or go back with `key` null). The new layer starts at the
+ * top: the old scroll offset belonged to a different screen.
+ * @param {object} ui
+ * @param {'study'|'shop'|'bag'|'work'} tab
+ * @param {string|null} key
+ */
+export function drillTo(ui, tab, key) {
+  ui.drill[tab] = key
+  ui.drill.pick = null
+  ui.renderContent()
+  ui.content.scrollTop = 0
+}
+
+/**
+ * The second layer's top row: 「‹」 back, the category's name, and one grey
+ * line of what is true for everything in it (so no tile has to repeat it).
+ */
+export function drillHeader(ui, tab, title, info) {
+  var row = el('div', 'dp-drill')
+  var back = button('dp-drill-back', { 'data-back': tab }, function () { drillTo(ui, tab, null) })
+  back.textContent = '‹'
+  row.appendChild(back)
+  row.appendChild(el('b', 'dp-drill-title', title))
+  if (info) row.appendChild(el('span', 'dp-drill-info', info))
+  ui.content.appendChild(row)
+}