dsh-piggy 0.25.0

package/src/client/tabs/card.js

@@ -0,0 +1,110 @@
+// @ts-check
+/**
+ * 居民卡页签（B9，照动森居民卡 + animal-island-ui Form 页的卡片）。
+ *
+ * 淡色点点底的卡（女孩粉、男孩蓝）：左边头像，右边名字和等级；下面「标签：值」
+ * 一行行（生日 / 星座 / 性格 / 口头禅），签名单独一个气泡，最底下一行收藏数。
+ * 口头禅和签名旁边的铅笔按钮就地改，改的时候轮询不重画（见 panel.js）。
+ * 加冕在主屏自己的 App 里（tabs/crown.js）；加冕后卡上多一行「形态」。
+ * @module dsh-piggy/client/tabs/card
+ */
+
+import { ART_URL } from '../constants.js'
+import { button, el } from '../dom.js'
+
+/** How long each editable field may be (mirrors data/profile.js). */
+var LIMITS = { catchphrase: 6, motto: 24 }
+
+export function renderCardTab(ui) {
+  var p = ui.view.pig
+  var profile = ui.view.profile
+  if (p === null) return
+  if (profile === null) {
+    ui.content.appendChild(el('div', 'dp-empty', '重启 dsh 之后才有居民卡'))
+    return
+  }
+  var card = el('div', 'dp-vcard')
+  card.setAttribute('data-sex', p.sex !== null ? p.sex.key : 'none')
+
+  var top = el('div', 'dp-vcard-top')
+  var avatar = el('div', 'dp-vcard-avatar')
+  if (p.stage.art !== null) {
+    var img = /** @type {HTMLImageElement} */ (el('img', 'dp-vcard-img'))
+    img.src = ART_URL + p.stage.art + '.svg'
+    img.alt = ''
+    avatar.appendChild(img)
+  } else {
+    avatar.appendChild(el('span', 'dp-vcard-e', p.stage.emoji))
+  }
+  top.appendChild(avatar)
+  var who = el('div', 'dp-vcard-who')
+  who.appendChild(el('b', 'dp-vcard-name', p.name + (p.sex !== null ? ' ' + p.sex.symbol : '')))
+  who.appendChild(el('span', 'dp-vcard-sub', 'Lv.' + p.level.level + ' ' + p.level.titleEmoji + p.level.titleLabel))
+  who.appendChild(el('span', 'dp-vcard-sub', p.stage.label))
+  top.appendChild(who)
+  card.appendChild(top)
+
+  card.appendChild(field('生日', profile.birthday))
+  if (profile.zodiac !== null) card.appendChild(field('星座', profile.zodiac.emoji + ' ' + profile.zodiac.label))
+  if (profile.personality !== null) card.appendChild(field('性格', profile.personality.emoji + ' ' + profile.personality.label))
+  var forms = ui.view.forms
+  var worn = forms === null ? null : forms.forms.find(function (f) { return f.current }) || null
+  if (worn !== null) card.appendChild(field('形态', worn.emoji + ' ' + worn.label))
+  card.appendChild(editableField(ui, 'catchphrase', '口头禅', profile.catchphrase))
+  card.appendChild(editableField(ui, 'motto', '签名', profile.motto))
+
+  var c = profile.counts
+  card.appendChild(el('div', 'dp-vcard-foot',
+    '养了 ' + c.days + ' 天 · 证书 ' + c.certificates + ' · 纪念品 ' + c.souvenirs + ' · 毕业 ' + c.graduations))
+  ui.content.appendChild(card)
+}
+
+/** 「标签：值」 —— the value in a cream pill, like the reference form. */
+function field(label, value) {
+  var row = el('div', 'dp-vcard-row')
+  row.appendChild(el('span', 'dp-vcard-label', label + '：'))
+  row.appendChild(el('span', 'dp-vcard-value', value))
+  return row
+}
+
+/**
+ * A field the owner can change in place. The motto gets its own speech
+ * bubble rather than a pill: it is the pig talking.
+ */
+function editableField(ui, key, label, value) {
+  var editing = ui.cardEdit !== null && ui.cardEdit.field === key
+  var row = el('div', 'dp-vcard-row' + (key === 'motto' ? ' dp-vcard-motto-row' : ''))
+  row.appendChild(el('span', 'dp-vcard-label', label + '：'))
+  if (editing) {
+    var input = /** @type {HTMLInputElement} */ (el('input', 'dp-input dp-vcard-input'))
+    input.value = ui.cardEdit.draft
+    input.maxLength = LIMITS[key]
+    input.setAttribute('data-card-input', key)
+    input.addEventListener('input', function () { ui.cardEdit = { field: key, draft: input.value } })
+    var save = button('dp-mini', { 'data-card-save': key }, function () {
+      var text = (ui.cardEdit === null ? '' : ui.cardEdit.draft).trim()
+      ui.cardEdit = null
+      if (text !== '') ui.send(key, { text: text })
+      ui.renderContent()
+    })
+    save.textContent = '好'
+    var cancel = button('dp-mini dp-mini-plain', { 'data-card-cancel': key }, function () {
+      ui.cardEdit = null
+      ui.renderContent()
+    })
+    cancel.textContent = '算了'
+    row.appendChild(input)
+    row.appendChild(save)
+    row.appendChild(cancel)
+    return row
+  }
+  row.appendChild(el('span', key === 'motto' ? 'dp-vcard-value dp-vcard-motto' : 'dp-vcard-value', key === 'motto' ? '「' + value + '」' : value))
+  var pencil = button('dp-vcard-edit', { 'data-card-edit': key }, function () {
+    ui.cardEdit = { field: key, draft: value }
+    ui.renderContent()
+  })
+  pencil.textContent = '✏️'
+  pencil.title = '改' + label
+  row.appendChild(pencil)
+  return row
+}

package/src/client/tabs/crown.js

@@ -0,0 +1,59 @@
+// @ts-check
+/**
+ * 加冕 App：每种形态一块（data/evolution.js 的 FORMS，猪猪王是第一种，以后还会加）。
+ * 左边是那个形态的立绘，右边名字和条件，条件一条条打勾，齐了就能点加冕。
+ * 已经是的那种标「当前形态」。
+ * @module dsh-piggy/client/tabs/crown
+ */
+
+import { ART_URL } from '../constants.js'
+import { button, el } from '../dom.js'
+
+export function renderCrownTab(ui) {
+  var forms = ui.view.forms
+  if (forms === null) {
+    ui.content.appendChild(el('div', 'dp-empty', '重启 dsh 之后才有加冕'))
+    return
+  }
+  if (ui.view.dead) ui.content.appendChild(el('div', 'dp-empty', '它走了，救回来才能加冕'))
+  for (var f = 0; f < forms.forms.length; f += 1) ui.content.appendChild(formBlock(ui, forms.forms[f]))
+}
+
+/** One form: its picture, its conditions as ticked chips, and the button once they are all met. */
+function formBlock(ui, form) {
+  var box = el('div', form.current ? 'dp-crown dp-crown-now' : 'dp-crown')
+  box.setAttribute('data-form', form.key)
+  var top = el('div', 'dp-crown-top')
+  var pic = el('div', 'dp-crown-pic')
+  if (form.art !== '') {
+    var img = /** @type {HTMLImageElement} */ (el('img', 'dp-crown-img'))
+    img.src = ART_URL + form.art + '.svg'
+    img.alt = ''
+    pic.appendChild(img)
+  } else {
+    pic.appendChild(el('span', null, form.emoji))
+  }
+  top.appendChild(pic)
+  var side = el('div', 'dp-crown-side')
+  side.appendChild(el('div', 'dp-crown-head', form.emoji + ' ' + form.label))
+  if (form.current) {
+    side.appendChild(el('div', 'dp-crown-done', '✓ 当前形态'))
+  } else {
+    var chips = el('div', 'dp-crown-reqs')
+    for (var r = 0; r < form.requirements.length; r += 1) {
+      var row = form.requirements[r]
+      chips.appendChild(el('span', row.met ? 'dp-crown-req dp-crown-ok' : 'dp-crown-req',
+        (row.met ? '✓ ' : '✗ ') + row.label + ' ' + Math.min(row.have, row.need) + '/' + row.need))
+    }
+    side.appendChild(chips)
+  }
+  top.appendChild(side)
+  box.appendChild(top)
+  if (!form.current) {
+    var go = button('dp-btn dp-btn-wide', { 'data-crown': form.key }, function () { ui.send('crown', { form: form.key }) })
+    go.textContent = form.ready ? '👑 加冕' : '条件齐了就能加冕'
+    go.disabled = !form.ready
+    box.appendChild(go)
+  }
+  return box
+}

package/src/client/tabs/dev.js

@@ -0,0 +1,101 @@
+// @ts-check
+/**
+ * 调试页签。
+ *
+ * 仅开发者模式可见：改数值、改时间、一键拿齐。
+ * @module dsh-piggy/client/tabs/dev
+ */
+
+import { button, el } from '../dom.js'
+
+export function renderDevTab(ui) {
+  ui.content.appendChild(el('div', 'dp-dev-note', '🔧 开发者模式 · 构建 v' + (ui.view.version === '' ? '未知' : ui.view.version) + ' · Ctrl+Shift+D 关闭'))
+  if (ui.view.pig !== null && ui.view.pig.ageForced) {
+    ui.content.appendChild(el('div', 'dp-dev-note',
+      '⚠️ 年龄是调试改的（HUD 上有 🔧）—— 按「⏪ 年龄归零」才会重新按真实时间算'))
+  }
+
+  var p = ui.view.pig
+  if (p === null) {
+    ui.content.appendChild(el('div', 'dp-empty', '还没有猪。先「拆开纸盒」再调。'))
+    return
+  }
+
+  /** A row of small buttons under a caption. */
+  function group(title, entries) {
+    var head = el('div', 'dp-title')
+    head.appendChild(el('b', null, title))
+    ui.content.appendChild(head)
+    var wrap = el('div', 'dp-dev-row')
+    for (var i = 0; i < entries.length; i += 1) {
+      (function (entry) {
+        var btn = button('dp-mini dp-dev-btn', { 'data-dev': entry.key }, function () { entry.run() })
+        btn.textContent = entry.label
+        wrap.appendChild(btn)
+      })(entries[i])
+    }
+    ui.content.appendChild(wrap)
+  }
+
+  var patch = function (body) { ui.send('dev', { patch: body }) }
+
+  group('状态', [
+    { key: 'full', label: '😊 满状态', run: function () { patch({ satiety: 100, happiness: 100, cleanliness: 100, health: 5 }) } },
+    { key: 'hungry', label: '🍎 饿', run: function () { patch({ satiety: 10 }) } },
+    { key: 'dirty', label: '🫧 脏', run: function () { patch({ cleanliness: 10 }) } },
+    { key: 'lonely', label: '🥺 孤单', run: function () { patch({ happiness: 10 }) } },
+    { key: 'sleepy', label: '💤 困', run: function () { patch({ satiety: 90, happiness: 90, cleanliness: 90 }) } },
+  ])
+
+  // Five chains since B3: stage 1 of each, the last stage of one, and a cure.
+  group('生病', [
+    { key: 'cold1', label: '🤧 感冒', run: function () { patch({ illness: { chain: 0, stage: 1 }, health: 4 }) } },
+    { key: 'cough1', label: '😷 咳嗽', run: function () { patch({ illness: { chain: 1, stage: 1 }, health: 4 }) } },
+    { key: 'belly1', label: '🤢 肚子胀', run: function () { patch({ illness: { chain: 2, stage: 1 }, health: 4 }) } },
+    { key: 'dizzy1', label: '😵 头晕', run: function () { patch({ illness: { chain: 3, stage: 1 }, health: 4 }) } },
+    { key: 'skin1', label: '🩹 瘙痒', run: function () { patch({ illness: { chain: 4, stage: 1 }, health: 4 }) } },
+    { key: 'cold4', label: '☠️ 肺炎', run: function () { patch({ illness: { chain: 0, stage: 4 }, health: 1 }) } },
+    { key: 'cure', label: '💚 治好', run: function () { patch({ illness: null, health: 5 }) } },
+  ])
+
+  // The body follows the level since B2: these jump straight to each stage.
+  group('等级', [
+    { key: 'box', label: '📦 纸盒', run: function () { patch({ hatched: false }) } },
+    { key: 'lv1', label: '幼年 Lv1', run: function () { patch({ hatched: true, level: 1 }) } },
+    { key: 'lv10', label: '青年 Lv10', run: function () { patch({ level: 10 }) } },
+    { key: 'lv40', label: '成年 Lv40', run: function () { patch({ level: 40 }) } },
+    { key: 'lv60', label: '满级 Lv60', run: function () { patch({ level: 60 }) } },
+    { key: 'real', label: '⏪ 天数归零', run: function () { ui.send('ageFromNow') } },
+  ])
+
+  group('资源', [
+    { key: 'coin100', label: '🪙 +100', run: function () { patch({ coins: p.coins + 100 }) } },
+    { key: 'coin999', label: '🪙 9999', run: function () { patch({ coins: 9999 }) } },
+    { key: 'traits', label: '🧠+5 ✨+5 💪+5', run: function () { patch({ traits: { intel: 5, charm: 5, strong: 5 } }) } },
+    { key: 'all', label: '🎁 一键拿齐', run: function () { ui.send('giveAll') } },
+  ])
+
+  group('时间', [
+    { key: 'real', label: '×1 真实', run: function () { ui.send('timeScale', { scale: 1 }) } },
+    { key: 'fast12', label: '×12', run: function () { ui.send('timeScale', { scale: 12 }) } },
+    { key: 'fast30', label: '×30', run: function () { ui.send('timeScale', { scale: 30 }) } },
+    { key: 'fast60', label: '×60', run: function () { ui.send('timeScale', { scale: 60 }) } },
+  ])
+
+  group('生死', [
+    { key: 'kill', label: '💀 弄死', run: function () { patch({ dead: true }) } },
+    { key: 'revive', label: '✨ 复活', run: function () { patch({ dead: false, health: 5 }) } },
+    { key: 'adopt', label: '📦 领养', run: function () { ui.send('adopt') } },
+    { key: 'reset', label: '🔄 重置', run: function () { ui.send('reset') } },
+  ])
+
+  group('面板', [
+    { key: 'open', label: '展开/收起', run: function () { ui.setOpen(ui.host.getAttribute('data-open') !== 'true') } },
+    { key: 'away1', label: '⏩ +1 小时', run: function () { patch({ __advanceMs: 3600000 }) } },
+    { key: 'away24', label: '⏩ +1 天', run: function () { patch({ __advanceMs: 86400000 }) } },
+  ])
+
+  ui.content.appendChild(el('div', 'dp-dev-note',
+    '当前：' + p.stage.label + ' · 健康 ' + p.health + ' · 🪙 ' + p.coins
+    + (p.illness === null ? '' : ' · ' + p.illness.name)))
+}

package/src/client/tabs/home.js

@@ -0,0 +1,72 @@
+// @ts-check
+/**
+ * 主屏（B9，照动森手机）：打开面板先看到一格格 App 方块，点进去是那个页签，
+ * 页签顶上「‹」回主屏。原来挂在底部图标上的提醒，改挂在方块左上角。
+ * @module dsh-piggy/client/tabs/home
+ */
+
+import { el } from '../dom.js'
+import { tile, tileGrid } from '../widgets.js'
+
+/** One colour per app, so the home screen reads at a glance. */
+var APP_COLOR = {
+  status: 'green', card: 'pink', crown: 'purple', study: 'yellow', work: 'orange',
+  shop: 'red', travel: 'blue', bag: 'teal', update: 'lime', dev: 'brown',
+}
+
+/** The home screen: who the pig is, its money, and one tile per app. */
+export function renderHome(ui, apps) {
+  var p = ui.view.pig
+  var head = el('div', 'dp-title')
+  head.appendChild(el('b', null, p.name + (p.sex !== null ? ' ' + p.sex.symbol : '') + ' Lv.' + p.level.level))
+  head.appendChild(el('span', null, '🪙 ' + p.coins))
+  ui.content.appendChild(head)
+  var grid = tileGrid()
+  for (var i = 0; i < apps.length; i += 1) {
+    (function (app) {
+      grid.appendChild(tile({
+        emoji: app.emoji, label: app.label, color: APP_COLOR[app.key] ?? 'blue',
+        tag: alertFor(ui, app.key),
+        data: { 'data-app': app.key },
+        onPick: function () { ui.select(app.key) },
+      }))
+    })(apps[i])
+  }
+  ui.content.appendChild(grid)
+}
+
+/**
+ * The little word on an app's corner: what needs looking at in there. The
+ * status app speaks for the pig itself (gone, ill, out); the others reuse the
+ * alerts the panel already works out for the hidden icon bar.
+ */
+function alertFor(ui, key) {
+  var p = ui.view.pig
+  if (key === 'status') {
+    if (ui.view.dead) return '走了'
+    if (p.illness !== null) return '生病'
+    if (ui.view.activity !== null) return '在外面'
+    return ''
+  }
+  var icon = ui.icons[key]
+  return icon !== undefined && icon.getAttribute('data-alert') === 'true' ? '!' : ''
+}
+
+/**
+ * An app's top row: 「‹」 back to the home screen, the app's name, and one grey
+ * line on the right (the shop's money, say).
+ */
+export function appHeader(ui, app, info) {
+  var row = el('div', 'dp-drill dp-app-head')
+  var back = el('button', 'dp-drill-back')
+  back.setAttribute('data-home', 'true')
+  back.textContent = '‹'
+  back.addEventListener('click', function (event) {
+    if (event && typeof event.stopPropagation === 'function') event.stopPropagation()
+    ui.select('home')
+  })
+  row.appendChild(back)
+  row.appendChild(el('b', 'dp-drill-title', app.emoji + ' ' + app.label))
+  if (info) row.appendChild(el('span', 'dp-drill-info', info))
+  ui.content.appendChild(row)
+}

package/src/client/tabs/shop.js

@@ -0,0 +1,78 @@
+// @ts-check
+/**
+ * 商店页签（B8：动森手机式方块）。
+ *
+ * 第一层：六个货架方块。第二层：这个货架的货，点方块就是买。
+ * @module dsh-piggy/client/tabs/shop
+ */
+
+import { KIND_ORDER, KIND_TITLE } from '../constants.js'
+import { el } from '../dom.js'
+import { num } from '../values.js'
+import { drillHeader, drillTo, tile, tileGrid } from '../widgets.js'
+
+/** One colour per shelf, so the inner layer still says which shelf it is. */
+export var SHELF_COLOR = { food: 'red', bath: 'teal', toy: 'yellow', dress: 'pink', medicine: 'green', revive: 'purple' }
+
+/** A shelf title 「<emoji> 食物」 split into its emoji and its name. */
+export function shelfParts(kind) {
+  var title = KIND_TITLE[kind] ?? kind
+  var space = title.indexOf(' ')
+  return space < 0 ? ['🛒', title] : [title.slice(0, space), title.slice(space + 1)]
+}
+
+export function renderShopTab(ui) {
+  if (ui.view.shop.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '宿主还没提供货架。'))
+    return
+  }
+  var coins = '🪙 ' + ui.view.pig.coins
+  var shelf = ui.drill.shop
+  if (shelf === null || KIND_ORDER.indexOf(shelf) < 0) {
+    renderShelves(ui)
+    return
+  }
+  var parts = shelfParts(shelf)
+  drillHeader(ui, 'shop', parts[0] + ' ' + parts[1], coins)
+  var grid = tileGrid()
+  var items = ui.view.shop.filter(function (item) { return item.kind === shelf })
+  for (var i = 0; i < items.length; i += 1) grid.appendChild(itemTile(ui, items[i], SHELF_COLOR[shelf]))
+  ui.content.appendChild(grid)
+}
+
+/** The top layer; its title row (with the money) is the app header. */
+function renderShelves(ui) {
+  var grid = tileGrid()
+  for (var k = 0; k < KIND_ORDER.length; k += 1) {
+    (function (kind) {
+      var items = ui.view.shop.filter(function (item) { return item.kind === kind })
+      if (items.length === 0) return
+      var parts = shelfParts(kind)
+      var needed = items.some(function (item) { return item.needed })
+      grid.appendChild(tile({
+        emoji: parts[0], label: parts[1], color: SHELF_COLOR[kind] ?? 'blue',
+        tag: needed ? '需要' : '',
+        data: { 'data-shelf': kind },
+        onPick: function () { drillTo(ui, 'shop', kind) },
+      }))
+    })(KIND_ORDER[k])
+  }
+  ui.content.appendChild(grid)
+}
+
+/** A thing on the shelf: tap to buy. 家当 says 已拥有 or the level it waits for. */
+function itemTile(ui, item, color) {
+  var owned = num(ui.view.inventory[item.key], 0)
+  var note = item.price + ' 🪙'
+  if (item.owned) note = '已拥有'
+  else if (item.kind === 'dress' && item.unlocked === false) note = '🔒 Lv.' + item.level
+  return tile({
+    emoji: item.emoji, label: item.label, color: color, soft: true, note: note,
+    badge: owned > 0 ? '×' + owned : '',
+    tag: item.needed ? '需要' : (item.owned && item.worn ? '穿着' : ''),
+    dim: !item.owned && (!item.affordable || (item.kind === 'dress' && item.unlocked === false)),
+    disabled: item.owned === true,
+    data: { 'data-buy': item.key },
+    onPick: function () { ui.send('buy', { item: item.key }) },
+  })
+}

package/src/client/tabs/status.js

@@ -0,0 +1,223 @@
+// @ts-check
+/**
+ * 状态页签。
+ *
+ * 属性条、三维、体重金币与照顾入口。
+ * @module dsh-piggy/client/tabs/status
+ */
+
+import { CARE_LABEL, MODES } from '../constants.js'
+import { button, el } from '../dom.js'
+import { labelledBar, pickerPanel } from '../widgets.js'
+
+export function renderStatusTab(ui) {
+  var p = ui.view.pig
+  if (p === null) return
+  renderBanners(ui)
+  labelledBar(ui, '🍚 饱食', p.satiety, p.satiety + '%')
+  labelledBar(ui, '❤️ 心情', p.happiness, p.happiness + '%', 'dp-mood')
+  labelledBar(ui, '🫧 清洁', p.cleanliness, p.cleanliness + '%', 'dp-clean')
+  labelledBar(ui, '💚 健康', p.healthPercent, p.health + '/' + ui.view.maxHealth, 'dp-health')
+
+  var traits = el('div', 'dp-traits')
+  traits.appendChild(el('span', null, '🧠 智力 ' + p.traits.intel))
+  traits.appendChild(el('span', null, '✨ 魅力 ' + p.traits.charm))
+  traits.appendChild(el('span', null, '💪 武力 ' + p.traits.strong))
+  ui.content.appendChild(traits)
+
+  var info = el('div', 'dp-row')
+  info.appendChild(el('span', null, '⚖️ 体重 ' + p.weight))
+  info.appendChild(el('b', null, '🪙 ' + p.coins))
+  ui.content.appendChild(info)
+
+  // 签到进度：一行小字，不抢注意力（礼包攒着的时候顺带说一句）。
+  var daily = ui.view.daily
+  var dailyLine = el('div', 'dp-row')
+  dailyLine.appendChild(el('span', null, '📅 签到'))
+  dailyLine.appendChild(el('b', null, '第 ' + daily.signInDay + '/' + daily.cycle + ' 天'
+    + (daily.canSignIn ? ' · 今天还没签' : '')
+    + (daily.unclaimed > 0 ? ' · 🎁 ' + daily.unclaimed : '')))
+  ui.content.appendChild(dailyLine)
+
+  var lvl = el('div', 'dp-row')
+  lvl.appendChild(el('span', null, '⭐ 等级'))
+  lvl.appendChild(el('b', null, 'Lv.' + p.level.level + ' ' + p.level.titleEmoji + p.level.titleLabel
+    + (p.level.maxed ? ' · 满级' : ' · 还差 ' + Math.ceil(p.level.toNext) + ' 成长')))
+  ui.content.appendChild(lvl)
+
+  var age = el('div', 'dp-row')
+  age.appendChild(el('span', null, '🏠 陪伴'))
+  age.appendChild(el('b', null, p.ageLabel + (p.ageForced ? ' 🔧' : '') + (p.daysToNextStage === null ? ' · 已长成' : '')))
+  ui.content.appendChild(age)
+
+  var grid = el('div', 'dp-actions')
+  for (var i = 0; i < MODES.length; i += 1) {
+    (function (key) {
+      var info = ui.view.actions[key]
+      var shelf = ui.view.care[key] ?? []
+      var needsItem = shelf.length > 0
+      var btn = button('dp-btn', { 'data-action': key }, function () {
+        // Feeding, washing and playing all spend something, so the button
+        // opens the pig's bag instead of guessing what to use.
+        if (needsItem) {
+          ui.picker = ui.picker === key ? null : key
+          ui.renderContent()
+        } else {
+          ui.send(key)
+        }
+      })
+      btn.setAttribute('data-open-picker', ui.picker === key ? 'true' : 'false')
+      btn.appendChild(el('span', null, CARE_LABEL[key][1]))
+      btn.appendChild(el('span', null, CARE_LABEL[key][0]))
+      if (needsItem) btn.appendChild(el('span', 'dp-count', String(shelf.length)))
+      // Trust but verify: a dead pig cannot be cared for even if the host
+      // forgot to clear its readiness flags.
+      if (!info.ready || ui.view.dead) {
+        btn.disabled = true
+        if (ui.view.dead) btn.appendChild(el('span', 'dp-wait', '—'))
+        else if (info.waitSeconds > 0) btn.appendChild(el('span', 'dp-wait', info.waitSeconds + 's'))
+        else if (info.blocked === 'away') btn.appendChild(el('span', 'dp-wait', '不在家'))
+      }
+      grid.appendChild(btn)
+    })(MODES[i])
+  }
+  ui.content.appendChild(grid)
+
+  if (ui.picker !== null && (ui.view.care[ui.picker] ?? []).length > 0) ui.content.appendChild(pickerPanel(ui, ui.picker))
+
+  ui.content.appendChild(talkRow(ui))
+
+  if (p.memories.length > 0) {
+    ui.content.appendChild(el('div', 'dp-memo', p.memories.slice(-3).join('\n')))
+  }
+}
+
+/**
+ * B6: what the pig calls its owner, and 免打扰 — one row, two small controls.
+ * While the name is being typed, polls leave the panel alone (see panel.js),
+ * so the input keeps its focus.
+ */
+function talkRow(ui) {
+  var row = el('div', 'dp-row dp-talk')
+  // 用户 2026-10-01：别把称呼印在面板上（「叫你『大爹』」那行删了），
+  // 只留两个改名按钮 —— 一个改主人称呼，一个改猪的名字。
+  if (ui.ownerEdit !== null || ui.pigNameEdit !== null) {
+    var forPig = ui.pigNameEdit !== null
+    var input = /** @type {HTMLInputElement} */ (el('input', 'dp-input'))
+    input.value = forPig ? ui.pigNameEdit : ui.ownerEdit
+    input.maxLength = 16
+    input.setAttribute(forPig ? 'data-pig-input' : 'data-owner-input', 'true')
+    input.addEventListener('input', function () {
+      if (forPig) ui.pigNameEdit = input.value
+      else ui.ownerEdit = input.value
+    })
+    var save = button('dp-mini', { 'data-name-save': forPig ? 'pig' : 'owner' }, function () {
+      var name = ((forPig ? ui.pigNameEdit : ui.ownerEdit) || '').trim()
+      if (forPig) ui.pigNameEdit = null
+      else ui.ownerEdit = null
+      if (name !== '') ui.send(forPig ? 'name' : 'owner', { name: name })
+      ui.renderContent()
+    })
+    save.textContent = '好'
+    var cancel = button('dp-mini dp-mini-plain', { 'data-name-cancel': 'true' }, function () {
+      ui.ownerEdit = null
+      ui.pigNameEdit = null
+      ui.renderContent()
+    })
+    cancel.textContent = '算了'
+    row.appendChild(input)
+    row.appendChild(save)
+    row.appendChild(cancel)
+    return row
+  }
+  var renameOwner = button('dp-mini dp-mini-plain', { 'data-owner-edit': 'true' }, function () {
+    ui.ownerEdit = ui.view.dialogue.ownerName
+    ui.renderContent()
+  })
+  renameOwner.textContent = '✏️ 称呼'
+  renameOwner.title = '现在叫「' + ui.view.dialogue.ownerName + '」'
+  var renamePig = button('dp-mini dp-mini-plain', { 'data-pig-edit': 'true' }, function () {
+    ui.pigNameEdit = ui.view.pig === null ? '' : ui.view.pig.name
+    ui.renderContent()
+  })
+  renamePig.textContent = '✏️ 名字'
+  renamePig.title = ui.view.pig === null ? '猪还没来' : '现在叫「' + ui.view.pig.name + '」'
+  var quiet = button('dp-mini dp-mini-plain', { 'data-quiet': ui.view.dialogue.quiet ? 'on' : 'off' }, function () {
+    ui.send('quiet', { on: !ui.view.dialogue.quiet })
+  })
+  quiet.textContent = ui.view.dialogue.quiet ? '🔕 免打扰中' : '🔔 免打扰'
+  row.appendChild(renameOwner)
+  row.appendChild(renamePig)
+  row.appendChild(quiet)
+  return row
+}
+
+/**
+ * The pig's banners — gone, sick, or out — at the top of the status tab only
+ * (B9: they used to sit above every tab, the shop included).
+ */
+function renderBanners(ui) {
+  if (ui.view.pig !== null && ui.view.dead) {
+    var dead = el('div', 'dp-alert dp-dead')
+    dead.appendChild(el('b', null, '🪦 ' + ui.view.pig.name + ' 走了' + (ui.view.pig.soul ? '，灵魂还留在墓碑上 👻' : '')))
+    dead.appendChild(el('div', null, ui.view.pig.soul
+      ? '用还魂丹可以把它叫回来，也可以领养新的'
+      : '背包里的还魂丹就能救回来'))
+    ui.content.appendChild(dead)
+    // Adopting is available the moment the pig dies — not only once the
+    // soul turns up a day later. Waiting a day to start over was a
+    // mistake: the grave is already a dead end with nothing to do.
+    var adoptWrap = el('div', 'dp-actions')
+    var adopt = button('dp-btn dp-btn-wide', { 'data-action': 'adopt' }, function () { ui.send('adopt') })
+    adopt.appendChild(el('span', null, '📦'))
+    adopt.appendChild(el('span', null, '领养新猪'))
+    adoptWrap.appendChild(adopt)
+    ui.content.appendChild(adoptWrap)
+  } else if (ui.view.pig !== null && ui.view.pig.illness !== null) {
+    var illness = ui.view.pig.illness
+    var sick = el('div', 'dp-alert dp-sick')
+    sick.appendChild(el('b', null, '🤒 ' + illness.name + '（第 ' + illness.stage + '/4 期）'))
+    // B3: every stage has its own cure, and the wrong one makes it worse,
+    // so the alert always names the exact medicine.
+    sick.appendChild(el('div', null, '需要「' + illness.cureEmoji + illness.cure + '」—— 吃错药会加重'))
+    var needed = null
+    var shelf = ui.view.shop || []
+    for (var c = 0; c < shelf.length; c += 1) {
+      if (shelf[c].needed) needed = shelf[c]
+    }
+    // Hosts from before B3 do not flag the cure: match it by stage tier,
+    // then by name.
+    for (var t = 0; needed === null && t < shelf.length; t += 1) {
+      if (shelf[t].kind === 'medicine' && shelf[t].tier === illness.stage) needed = shelf[t]
+    }
+    for (var n = 0; needed === null && n < shelf.length; n += 1) {
+      if (shelf[n].label === illness.cure) needed = shelf[n]
+    }
+    if (ui.view.canGoOut) {
+      sick.appendChild(el('div', 'dp-dim', '带病出门报酬减半、病情更快'))
+    }
+    if (needed !== null && ui.view.canGoOut && ui.view.pig.coins < needed.price) {
+      sick.appendChild(el('div', 'dp-dim', '还差 ' + needed.price + ' 🪙 买「' + needed.label + '」，先去打工'))
+    }
+    ui.content.appendChild(sick)
+    if (illness.doctorFee !== null) {
+      var clinic = el('div', 'dp-actions')
+      var doctor = button('dp-btn dp-btn-wide', { 'data-action': 'doctor' }, function () { ui.send('doctor') })
+      doctor.appendChild(el('span', null, '🏥'))
+      doctor.appendChild(el('span', null, '看医生（' + illness.doctorFee + ' 🪙）'))
+      clinic.appendChild(doctor)
+      ui.content.appendChild(clinic)
+    }
+  } else if (ui.view.pig !== null && ui.view.activity !== null) {
+    var away = el('div', 'dp-alert dp-work')
+    away.appendChild(el('b', null, ui.view.activity.emoji + ' 在外面：' + ui.view.activity.label))
+    away.appendChild(el('div', null, '还有 ' + ui.view.activity.secondsLeft + ' 秒'))
+    ui.content.appendChild(away)
+    var wrap = el('div', 'dp-actions')
+    var call = button('dp-btn dp-btn-wide', { 'data-action': 'calloff' }, function () { ui.send('calloff') })
+    call.appendChild(el('span', null, '↩️'))
+    call.appendChild(el('span', null, '叫它回来'))
+    wrap.appendChild(call)
+    ui.content.appendChild(wrap)
+  }
+}