dsh-piggy 0.25.0

package/src/client/panel.js

@@ -0,0 +1,319 @@
+// @ts-check
+/**
+ * 面板渲染：开关面板、切页签、把快照画到 DOM 上
+ *
+ * 只通过 ctx 读写外壳的状态与元素（getter/setter 转发），不直接碰全局。
+ * @module dsh-piggy/client/panel
+ */
+import { syncPigArt } from './art.js'
+import { DEV_TAB, OPEN_KEY, TABS, UPDATE_TAB } from './constants.js'
+import { button, el } from './dom.js'
+import { normalize } from './normalize.js'
+import { writeStore } from './storage.js'
+import { CSS } from './styles.js'
+import { renderBagTab } from './tabs/bag.js'
+import { renderCardTab } from './tabs/card.js'
+import { renderCrownTab } from './tabs/crown.js'
+import { appHeader, renderHome } from './tabs/home.js'
+import { renderDevTab } from './tabs/dev.js'
+import { renderUpdateTab, updatesBridge } from './tabs/update.js'
+import { renderShopTab } from './tabs/shop.js'
+import { renderStatusTab } from './tabs/status.js'
+import { renderStudyTab } from './tabs/study.js'
+import { renderTravelTab } from './tabs/travel.js'
+import { renderWorkTab } from './tabs/work.js'
+import { str } from './values.js'
+
+/** News that gets through 免打扰. */
+var URGENT_KINDS = ['sick', 'worse', 'death', 'cured', 'revived']
+
+export function createPanel(ctx) {
+      var AWAY_LINE = {
+        work: '在忙',
+        study: '在念书',
+        trip: '在路上',
+      }
+
+      function setOpen(next) {
+        ctx.isOpen = next
+        ctx.host.setAttribute('data-open', next ? 'true' : 'false')
+        // Collapsed must be the pig and *nothing else*. One switch hides the
+        // whole panel now that the pig is not inside it — and driving visibility
+        // from the DOM rather than only from CSS makes it something a test can
+        // actually assert.
+        ctx.card.hidden = !next
+        // The hud rides with the panel: a bare pig in the corner should not have
+        // a name and a coin count floating beside it.
+        ctx.hud.hidden = !next
+        if (!next) ctx.bubble.hidden = true
+        writeStore(OPEN_KEY, next ? 'true' : 'false')
+        if (next) {
+          renderContent()
+          ctx.fitPanel()
+        } else {
+          // Back to the default anchor so the next open starts from a clean
+          // slate. `auto` (not '') keeps the stylesheet's bottom from re-applying
+          // alongside a stale top.
+          ctx.card.style.right = ''
+          ctx.card.style.top = 'auto'
+          ctx.card.style.bottom = ''
+          ctx.card.style.maxHeight = ''
+          ctx.card.style.maxWidth = ''
+        }
+      }
+
+      function select(next) {
+        ctx.tab = next
+        ctx.picker = null
+        // Opening a tile tab always starts at its top layer.
+        if (next in ctx.drill) { ctx.drill[next] = null; ctx.drill.pick = null }
+        renderContent()
+        for (var k in ctx.icons) ctx.icons[k].setAttribute('data-active', k === ctx.tab ? 'true' : 'false')
+      }
+
+      /**
+       * Repaint the panel body, keeping the reader's place.
+       *
+       * The body is rebuilt from scratch on every poll; without saving the
+       * offset, a long shelf jumped back to the top every four seconds.
+       */
+      function renderContent() {
+        var scrollTop = ctx.content.scrollTop
+        paintContent()
+        ctx.content.scrollTop = scrollTop
+      }
+
+      function paintContent() {
+        ctx.content.textContent = ''
+        for (var k = 0; k < TABS.length; k += 1) {
+          ctx.icons[TABS[k].key].setAttribute('data-active', TABS[k].key === ctx.tab ? 'true' : 'false')
+        }
+        if (ctx.host.getAttribute('data-open') !== 'true') return
+
+        // Only the host-version warning sits above every tab; the pig's own
+        // banners (away / sick / gone) live on the status tab (B9).
+        if (ctx.view.legacy) {
+          var legacy = el('div', 'dp-alert dp-legacy')
+          legacy.appendChild(el('b', null, '⚠️ 宿主是旧版本'))
+          legacy.appendChild(el('div', null, '金币、健康、打工、商店这些是新增的，重启 dsh（不是刷新页面）之后才会出现。'))
+          ctx.content.appendChild(legacy)
+        }
+        if (ctx.view.pig === null) {
+          ctx.content.appendChild(el('div', 'dp-empty', '门口放着一个纸盒，里面窸窸窣窣 📦'))
+          var grid = el('div', 'dp-actions')
+          var hatch = button('dp-btn dp-btn-wide', { 'data-action': 'hatch' }, function () { ctx.send('hatch') })
+          hatch.appendChild(el('span', null, '🥚'))
+          hatch.appendChild(el('span', null, '拆开纸盒'))
+          grid.appendChild(hatch)
+          ctx.content.appendChild(grid)
+          return
+        }
+
+        // B9: the home screen first; every app gets a 「‹」 back to it on its
+        // top layer (inside a category the app's own 「‹」 goes up a layer).
+        var apps = TABS.concat(updatesBridge() !== null ? [UPDATE_TAB] : [], ctx.devMode ? [DEV_TAB] : [])
+        if (ctx.tab === 'home') {
+          renderHome(ctx, apps)
+          ctx.fitPanel()
+          return
+        }
+        var drilled = ctx.tab in ctx.drill && ctx.drill[ctx.tab] !== null
+        var app = apps.find(function (entry) { return entry.key === ctx.tab })
+        if (app !== undefined && !drilled) appHeader(ctx, app, ctx.tab === 'shop' ? '🪙 ' + ctx.view.pig.coins : '')
+
+        if (ctx.tab === 'status') renderStatusTab(ctx)
+        else if (ctx.tab === 'card') renderCardTab(ctx)
+        else if (ctx.tab === 'crown') renderCrownTab(ctx)
+        else if (ctx.tab === 'study') renderStudyTab(ctx)
+        else if (ctx.tab === 'work') renderWorkTab(ctx)
+        else if (ctx.tab === 'shop') renderShopTab(ctx)
+        else if (ctx.tab === 'travel') renderTravelTab(ctx)
+        else if (ctx.tab === 'dev') renderDevTab(ctx)
+        else if (ctx.tab === 'update') renderUpdateTab(ctx)
+        else renderBagTab(ctx)
+
+        // Every tab is a different height, so the fit is recomputed after each
+        // render rather than only on open.
+        ctx.fitPanel()
+      }
+
+      function render(next) {
+        ctx.view = normalize(next)
+        // Never leave the study tab parked on a stage the pig cannot attend —
+        // but only until the user picks one themselves: after that the poll
+        // must not yank their choice away.
+        var stageEntry = null
+        var firstOpen = null
+        for (var s = 0; s < ctx.view.stages.length; s += 1) {
+          var entry = ctx.view.stages[s]
+          if (entry.unlocked !== false && firstOpen === null) firstOpen = entry.key
+          if (entry.key === ctx.stage) stageEntry = entry
+        }
+        // The 兴趣 button is not a stage; leave it selected.
+        if (!ctx.stagePicked && firstOpen !== null && (stageEntry === null || stageEntry.unlocked === false)) ctx.stage = firstOpen
+        ctx.host.setAttribute('data-dead', ctx.view.dead ? 'true' : 'false')
+        ctx.host.setAttribute('data-open', ctx.isOpen ? 'true' : 'false')
+        ctx.host.setAttribute('data-dev', ctx.devMode ? 'true' : 'false')
+        // Drives both the prop and the pig's own activity animation.
+        ctx.host.setAttribute('data-away', ctx.view.activity === null ? 'false' : ctx.view.activity.kind)
+        if (ctx.view.activity === null) {
+          ctx.work.hidden = true
+        } else {
+          ctx.work.hidden = false
+          ctx.prop.textContent = ctx.view.activity.emoji
+          ctx.progressFill.style.width = ctx.view.activity.progress + '%'
+          ctx.work.setAttribute('data-kind', ctx.view.activity.kind)
+          ctx.work.title = (AWAY_LINE[ctx.view.activity.kind] ?? '在外面') + '：' + ctx.view.activity.label
+        }
+
+        if (ctx.view.hatched !== true) {
+          ctx.pigArt.hidden = true
+          ctx.pigArt.removeAttribute('src')
+          ctx.pigEmoji.hidden = false
+          ctx.pigEmoji.textContent = ctx.view.boxStage.emoji
+          ctx.pig.removeAttribute('data-art')
+          ctx.pig.setAttribute('data-mood', 'box')
+          // Size comes from the host so the box and the pig can never drift.
+          ctx.host.style.setProperty('--pig-size', ctx.view.boxStage.size + 'px')
+          ctx.soul.hidden = true
+          ctx.host.setAttribute('data-soul', 'false')
+          ctx.host.setAttribute('data-faded', 'false')
+          ctx.host.setAttribute('data-unhatched', 'true')
+          ctx.pokeHint.hidden = false
+          ctx.hudName.textContent = '一个' + ctx.view.boxStage.label
+          ctx.hudCoins.textContent = '点开拆开它'
+          ctx.hudHealth.textContent = ''
+          ctx.lastStage = null
+        } else {
+          const pigStage = ctx.view.pig.stage
+          // A drawn stage shows its sprite; everything else is the emoji.
+          if (pigStage.art !== null) {
+            ctx.pigArt.hidden = false
+            ctx.pigEmoji.hidden = true
+            ctx.pig.setAttribute('data-art', pigStage.art)
+            ctx.pig.setAttribute('data-art-actions', pigStage.actionArt ? 'true' : 'false')
+            ctx.host.setAttribute('data-art-actions', pigStage.actionArt ? 'true' : 'false')
+            ctx.pig.setAttribute('data-activity', ctx.view.activity === null ? '' : ctx.view.activity.kind)
+            syncPigArt(ctx.pig, ctx.pigArt)
+          } else {
+            ctx.pigArt.hidden = true
+            ctx.pigArt.removeAttribute('src')
+            ctx.pigEmoji.hidden = false
+            ctx.pigEmoji.textContent = pigStage.emoji
+            ctx.pig.removeAttribute('data-art')
+            ctx.pig.removeAttribute('data-art-actions')
+            ctx.host.removeAttribute('data-art-actions')
+          }
+          // Literally grows up: the stage carries its own size.
+          ctx.host.style.setProperty('--pig-size', pigStage.size + 'px')
+          ctx.pig.setAttribute('data-mood', ctx.view.pig.mood)
+          ctx.host.setAttribute('data-soul', ctx.view.pig.soul ? 'true' : 'false')
+          // Old age reads as a faded coat, since every stage is the same pig.
+          ctx.host.setAttribute('data-faded', pigStage.faded ? 'true' : 'false')
+          ctx.host.setAttribute('data-unhatched', 'false')
+          ctx.pokeHint.hidden = true
+          ctx.soul.hidden = ctx.view.pig.soul !== true
+          ctx.pig.setAttribute('data-stage', pigStage.key)
+          // 装扮挂在猪身上（见 .dp-slot），名字牌上不再重复一遍。
+          ctx.dressSlots.textContent = ''
+          for (var wd = 0; wd < ctx.view.dress.length; wd += 1) {
+            var piece = ctx.view.dress[wd]
+            if (!piece.worn || piece.slot === '') continue
+            // 加冕后的样子自带王冠披风，盖住的位置不挂装扮（东西还在背包里）。
+            if (pigStage.hides.indexOf(piece.slot) >= 0) continue
+            var node = el('span', 'dp-slot', piece.emoji)
+            node.setAttribute('data-slot', piece.slot)
+            ctx.dressSlots.appendChild(node)
+          }
+          ctx.hudName.textContent = ctx.view.pig.name
+            + (ctx.view.pig.sex !== null ? ' ' + ctx.view.pig.sex.symbol : '')
+            + ' Lv.' + ctx.view.pig.level.level
+            + ' · ' + pigStage.label
+            + (ctx.view.pig.ageLabel ? ' · ' + ctx.view.pig.ageLabel : '')
+            + (ctx.view.pig.ageForced ? ' 🔧' : '')
+          ctx.hudCoins.textContent = '🪙 ' + ctx.view.pig.coins
+          ctx.hudHealth.textContent = '💚 ' + ctx.view.pig.health + '/' + ctx.view.maxHealth
+          // Growing up is announced with the same flourish a level-up used to get.
+          if (ctx.lastStage !== null && pigStage.key !== ctx.lastStage) {
+            ctx.react('levelup', 950)
+            ctx.burst(['✨', '🎉', '⭐'], 4)
+            ctx.showBubble('我长大啦！' + pigStage.emoji, 2600)
+          }
+          ctx.lastStage = pigStage.key
+        }
+
+        // 猪头上的日常提示：能签到就先显示签到，否则显示礼包。
+        // 点一下直接领；点击不再冒泡到场景，免得同时被当成摸猪/拖动。
+        var daily = ctx.view.daily
+        var dailyAction = daily.canSignIn ? 'signIn' : (daily.unclaimed > 0 ? 'openGift' : null)
+        ctx.dailyHint.hidden = dailyAction === null || ctx.view.pig === null
+        if (dailyAction !== null) {
+          ctx.dailyHint.textContent = dailyAction === 'signIn' ? '📅' : '🎁'
+          ctx.dailyHint.title = dailyAction === 'signIn'
+            ? '签到第 ' + daily.signInDay + '/' + daily.cycle + ' 天'
+            : '有 ' + daily.unclaimed + ' 个在线礼包'
+          // 动作放在 data-action 上，监听只在外壳里注册一次（见 index.js），
+          // 免得每 4 秒重绘都往上挂一个 listener。
+          ctx.dailyHint.setAttribute('data-action', dailyAction)
+        }
+
+        // Alerts on the icon bar itself, so a collapsed pig still warns.
+        // The study icon lights when there is a course to take right now:
+        // idle, the stage on screen is unlocked, and it still has a subject.
+        var studyStage = null
+        for (var st = 0; st < ctx.view.stages.length; st += 1) {
+          if (ctx.view.stages[st].key === ctx.stage) studyStage = ctx.view.stages[st]
+        }
+        var studyOpen = ctx.view.canGoOut && (studyStage === null || studyStage.unlocked !== false)
+        // B4: no stage ladder any more, so "a course to take" is simply one the
+        // pig can afford (older hosts still send stages, handled above).
+        var hasCourse = studyOpen && ctx.view.subjects.some(function (subject) {
+          var onStage = studyStage === null || studyStage.subjects.length === 0 || studyStage.subjects.indexOf(subject.key) >= 0
+          return onStage && subject.affordable
+        })
+        ctx.icons.study.setAttribute('data-alert', hasCourse ? 'true' : 'false')
+        ctx.icons.shop.setAttribute('data-alert', ctx.view.pig !== null && ctx.view.pig.illness !== null ? 'true' : 'false')
+        // 加冕: a form is waiting to be picked.
+        ctx.icons.crown.setAttribute('data-alert', ctx.view.forms !== null && ctx.view.forms.forms.some(function (f) { return f.ready }) ? 'true' : 'false')
+        ctx.icons.travel.setAttribute('data-alert', ctx.view.pig !== null && ctx.view.pig.coins >= 400 ? 'true' : 'false')
+
+        for (var i = 0; i < ctx.view.pending.length; i += 1) {
+          var event = ctx.view.pending[i]
+          // Messages carry an id that only goes up; two from the same instant
+          // ("病情加重" then "走了") used to collapse into the first one.
+          // Hosts older than the id still dedupe on the timestamp.
+          if (event.id > 0 ? event.id <= ctx.lastPendingId : event.at <= ctx.lastPendingAt) continue
+          if (event.id > 0) ctx.lastPendingId = event.id
+          ctx.lastPendingAt = Math.max(ctx.lastPendingAt, event.at)
+          if (event.kind === 'line') {
+            showPigLine(event)
+            continue
+          }
+          // 免打扰: routine news stays quiet; illness and death still speak.
+          if (ctx.view.dialogue.quiet && URGENT_KINDS.indexOf(event.kind) < 0) continue
+          ctx.toast(str(event.text, '猪有新消息'))
+          if (event.kind === 'coronation') { ctx.react('levelup', 950); ctx.burst(['👑', '✨'], 3) }
+          else if (event.kind === 'levelup') { ctx.react('levelup', 950); ctx.burst(['✨', '🎉'], 3) }
+          else if (event.kind === 'cured') { ctx.react('cure', 900); ctx.burst(['💚', '✨'], 3) }
+          else if (event.kind === 'death') ctx.react('refuse', 700)
+          else if (event.kind === 'work') { ctx.react('away', 900); ctx.burst(['🪙', '💰'], 3) }
+          else if (event.kind === 'study') { ctx.react('away', 900); ctx.burst(['📚', '✨'], 3) }
+          else if (event.kind === 'trip') { ctx.react('away', 900); ctx.burst(['🧳', '🎁'], 3) }
+        }
+
+        // Typing a new name: a repaint would drop the input and its focus.
+        if ((ctx.ownerEdit !== null || ctx.pigNameEdit !== null) && ctx.tab === 'status') return
+        if (ctx.cardEdit !== null && ctx.tab === 'card') return
+        renderContent()
+      }
+
+  /** A line from the pig goes in its bubble, with the owner's reply buttons under it. */
+  function showPigLine(event) {
+    var lineId = event.id
+    ctx.showLine(event.text, event.replies, function (index) {
+      ctx.send('reply', { line: lineId, index: index })
+    })
+  }
+
+  return { setOpen, select, renderContent, render }
+}

package/src/client/scene.js

@@ -0,0 +1,113 @@
+// @ts-check
+/**
+ * 场景搭建：注入样式与字体，建出猪、气泡、进度条、图标栏与面板骨架。
+ *
+ * 只创建 DOM，不绑定事件、不读状态（见 docs/CONVENTIONS.md）；
+ * 事件与渲染由 shell 负责。
+ * @module dsh-piggy/client/scene
+ */
+import { MOUNTED } from './constants.js'
+import { el } from './dom.js'
+import { CSS } from './styles.js'
+
+/** Build the widget once and hand every element back to the shell. */
+export function createScene() {
+var font = document.createElement('link')
+font.rel = 'stylesheet'
+font.href = 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900'
+  + '&family=Noto+Sans+SC:wght@400;500;700&display=swap'
+document.head.appendChild(font)
+
+var style = document.createElement('style')
+style.textContent = CSS
+document.head.appendChild(style)
+
+var host = document.createElement('div')
+host.setAttribute(MOUNTED, '')
+
+var card = el('div', 'dp-card')
+// The pig lives beside the panel, not inside it, so it stays transparent
+// and unmoved when the panel opens.
+var scene = el('div', 'dp-scene')
+
+var hud = el('div', 'dp-hud')
+var hudName = el('div', null, '猪猪')
+var hudCoins = el('div', null, '🪙 0')
+var hudHealth = el('div', null, '💚 5/5')
+hud.appendChild(hudName)
+hud.appendChild(hudCoins)
+hud.appendChild(hudHealth)
+scene.appendChild(hud)
+
+var bubble = el('div', 'dp-bubble', '')
+bubble.hidden = true
+scene.appendChild(bubble)
+
+// What the pig is doing while it is out: a prop to work/read/travel with,
+// and a line showing how far through it is. Sits to the pig's left, so the
+// pig itself never shifts when it appears.
+var work = el('div', 'dp-work')
+var prop = el('span', 'dp-prop', '💼')
+var progressWrap = el('div', 'dp-progress')
+var progressFill = document.createElement('i')
+progressWrap.appendChild(progressFill)
+work.appendChild(prop)
+work.appendChild(progressWrap)
+work.hidden = true
+scene.appendChild(work)
+
+// Shown while the box is still shut, so it reads as something to poke
+// rather than a decorative cardboard box sitting in the corner.
+var pokeHint = el('div', 'dp-poke-hint')
+pokeHint.appendChild(el('span', null, '👆'))
+pokeHint.appendChild(el('span', null, '戳三下'))
+pokeHint.hidden = true
+scene.appendChild(pokeHint)
+
+// 签到 / 在线礼包的小气泡，位置在猪头上，样式在 css-tabs.js。
+var dailyHint = el('button', 'dp-daily')
+dailyHint.hidden = true
+scene.appendChild(dailyHint)
+
+var soul = el('span', 'dp-soul', '👻')
+soul.hidden = true
+scene.appendChild(soul)
+
+// Drawn stages (the piglet, the elder pig) use an <img>; the rest fall
+// back to the emoji. Both live in the pig box so the layout never cares.
+var pigArt = document.createElement('img')
+pigArt.className = 'dp-pig-img'
+pigArt.alt = ''
+pigArt.hidden = true
+var pigEmoji = el('span', 'dp-pig-emoji', '🐖')
+var pig = el('div', 'dp-pig')
+pig.appendChild(pigArt)
+pig.appendChild(pigEmoji)
+// 装扮点位：每个点位挂一件，位置全在 CSS 里（.dp-slot[data-slot=…]）。
+var dressSlots = el('div', 'dp-dress')
+pig.appendChild(dressSlots)
+scene.appendChild(pig)
+// Right-click is not discoverable on its own, so the native tooltip says so.
+scene.title = '左键摸摸 · 右键打开面板 · 拖动可移动'
+
+var bar = el('div', 'dp-bar')
+
+var content = el('div', 'dp-content')
+
+// Panel first, pig second: as flex siblings in a bottom-anchored column,
+// the pig ends up at a fixed screen position whether the panel is open or
+// not, and the panel can only ever grow upwards from it.
+card.appendChild(content)
+card.appendChild(bar)
+host.appendChild(card)
+host.appendChild(scene)
+if (document.body !== null && document.body !== undefined) {
+  document.body.appendChild(host)
+} else {
+  document.addEventListener('DOMContentLoaded', function () {
+    try { document.body.appendChild(host) } catch (error) { /* shell not ready */ }
+  }, { once: true })
+}
+
+  return { font, style, host, card, scene, hud, hudName, hudCoins, hudHealth, bubble, work, prop, progressWrap, progressFill, pokeHint, dailyHint, soul, pigArt, pigEmoji, pig, dressSlots, bar, content }
+}

package/src/client/storage.js

@@ -0,0 +1,19 @@
+// @ts-check
+/**
+ * 面板自己的小存储：展开状态、位置与开发者模式开关。
+ *
+ * 隐私模式下 localStorage 会抛异常，所以读写都要兜住。
+ * @module dsh-piggy/client/storage
+ */
+export function readStore(key) {
+  try {
+    var value = window.localStorage.getItem(key)
+    // Keys were 'dsh-pig:*' before the rename; read those once so nothing resets.
+    return value !== null ? value : window.localStorage.getItem(key.replace(/^dsh-piggy:/, 'dsh-pig:'))
+  } catch (error) { return null }
+}
+
+
+export function writeStore(key, value) {
+  try { window.localStorage.setItem(key, value) } catch (error) { /* private mode */ }
+}

package/src/client/styles.js

@@ -0,0 +1,13 @@
+// @ts-check
+/**
+ * 样式入口：基础样式 + 页签样式拼成一张表。
+ *
+ * @module dsh-piggy/client/styles
+ */
+import { CSS_BASE } from './css-base.js'
+import { CSS_TABS } from './css-tabs.js'
+import { CSS_TILES } from './css-tiles.js'
+import { CSS_CARD } from './css-card.js'
+
+/** The whole stylesheet, in the order it must be applied. */
+export const CSS = CSS_BASE + CSS_TABS + CSS_TILES + CSS_CARD

package/src/client/tabs/bag.js

@@ -0,0 +1,203 @@
+// @ts-check
+/**
+ * 背包页签（B8：动森手机式方块，跟商店一个样子）。
+ *
+ * 第一层：食物 / 洗浴 / 玩具 / 药品 / 复活 / 装扮 / 日记 / 纪念品，右上角写件数，空的变灰。
+ * 第二层：道具点一下就用；装扮点一下穿上或脱下；日记和纪念品点一下，下面显示全文 / 故事。
+ * @module dsh-piggy/client/tabs/bag
+ */
+
+import { KIND_ORDER } from '../constants.js'
+import { button, el } from '../dom.js'
+import { num } from '../values.js'
+import { drillHeader, drillTo, tile, tileGrid } from '../widgets.js'
+import { SHELF_COLOR, shelfParts } from './shop.js'
+
+/** The consumable shelves, in shop order; 装扮 is its own category below. */
+var CONSUMABLES = KIND_ORDER.filter(function (kind) { return kind !== 'dress' })
+
+/** The non-shelf categories: what they are called and how they look. */
+var EXTRA = {
+  dress: { emoji: '👕', label: '装扮', color: 'pink' },
+  diary: { emoji: '📔', label: '日记', color: 'brown' },
+  souvenir: { emoji: '🎁', label: '纪念品', color: 'blue' },
+}
+
+/** 「2026-10-01」 → 「10-01」: the tile only has room for the month and day. */
+function shortDay(day) {
+  return day.length >= 10 ? day.slice(5) : day
+}
+
+export function renderBagTab(ui) {
+  var open = ui.drill.bag
+  if (open === 'dress') renderDress(ui)
+  else if (open === 'diary') renderDiary(ui)
+  else if (open === 'souvenir') renderSouvenirs(ui)
+  else if (open !== null && CONSUMABLES.indexOf(open) >= 0) renderItems(ui, open)
+  else renderCategories(ui)
+}
+
+/** What the pig owns of one shelf, with counts. */
+function ownedOf(ui, kind) {
+  return ui.view.shop.filter(function (item) {
+    return item.kind === kind && num(ui.view.inventory[item.key], 0) > 0
+  })
+}
+
+function renderCategories(ui) {
+  var grid = tileGrid()
+  for (var k = 0; k < CONSUMABLES.length; k += 1) {
+    (function (kind) {
+      var items = ownedOf(ui, kind)
+      var count = items.reduce(function (sum, item) { return sum + num(ui.view.inventory[item.key], 0) }, 0)
+      var parts = shelfParts(kind)
+      grid.appendChild(tile({
+        emoji: parts[0], label: parts[1], color: SHELF_COLOR[kind] ?? 'blue',
+        badge: count > 0 ? String(count) : '', dim: count === 0,
+        tag: items.some(function (item) { return item.needed }) ? '需要' : '',
+        data: { 'data-bag': kind },
+        onPick: function () { drillTo(ui, 'bag', kind) },
+      }))
+    })(CONSUMABLES[k])
+  }
+  var counts = {
+    dress: ui.view.dress.filter(function (item) { return item.owned }).length,
+    diary: ui.view.diary.length,
+    souvenir: ui.view.pig.souvenirs.length,
+  }
+  for (var key in EXTRA) {
+    (function (category) {
+      var spec = EXTRA[category]
+      grid.appendChild(tile({
+        emoji: spec.emoji, label: spec.label, color: spec.color,
+        badge: counts[category] > 0 ? String(counts[category]) : '', dim: counts[category] === 0,
+        data: { 'data-bag': category },
+        onPick: function () { drillTo(ui, 'bag', category) },
+      }))
+    })(key)
+  }
+  ui.content.appendChild(grid)
+}
+
+/** A consumable shelf: tap an item to use it. */
+function renderItems(ui, kind) {
+  var parts = shelfParts(kind)
+  drillHeader(ui, 'bag', parts[0] + ' ' + parts[1], '点一下就用')
+  var items = ownedOf(ui, kind)
+  if (items.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '空的'))
+    return
+  }
+  var grid = tileGrid()
+  for (var i = 0; i < items.length; i += 1) {
+    (function (item) {
+      grid.appendChild(tile({
+        emoji: item.emoji, label: item.label, color: SHELF_COLOR[kind] ?? 'blue', soft: true,
+        badge: '×' + num(ui.view.inventory[item.key], 0), tag: item.needed ? '需要' : '',
+        data: { 'data-use': item.key },
+        onPick: function () { ui.send('use', { item: item.key }) },
+      }))
+    })(items[i])
+  }
+  ui.content.appendChild(grid)
+}
+
+/** 家当: tap to put it on or take it off; one piece per slot. */
+function renderDress(ui) {
+  var owned = ui.view.dress.filter(function (item) { return item.owned })
+  var worn = owned.filter(function (item) { return item.worn }).length
+  drillHeader(ui, 'bag', '👕 装扮', worn + ' 件穿着')
+  if (owned.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '还没有装扮'))
+    return
+  }
+  var grid = tileGrid()
+  for (var i = 0; i < owned.length; i += 1) {
+    (function (item) {
+      grid.appendChild(tile({
+        emoji: item.emoji, label: item.label, color: EXTRA.dress.color, soft: true,
+        note: item.slotLabel, tag: item.worn ? '穿着' : '', active: item.worn,
+        data: { 'data-wear': item.key },
+        onPick: function () { ui.send('wear', { item: item.key, on: !item.worn }) },
+      }))
+    })(owned[i])
+  }
+  ui.content.appendChild(grid)
+}
+
+/** 日记: one tile per day, newest first; the picked day's page opens below. */
+function renderDiary(ui) {
+  drillHeader(ui, 'bag', '📔 日记', ui.view.diary.length + ' 篇')
+  if (ui.view.diary.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '还没有日记'))
+    return
+  }
+  var grid = tileGrid()
+  var picked = null
+  for (var d = 0; d < ui.view.diary.length; d += 1) {
+    (function (entry) {
+      var active = ui.drill.pick === entry.day
+      if (active) picked = entry
+      grid.appendChild(tile({
+        emoji: '📔', label: shortDay(entry.day), color: EXTRA.diary.color, soft: true, active: active,
+        data: { 'data-diary': entry.day },
+        onPick: function () {
+          ui.drill.pick = active ? null : entry.day
+          ui.renderContent()
+        },
+      }))
+    })(ui.view.diary[d])
+  }
+  ui.content.appendChild(grid)
+  if (picked !== null) {
+    var page = el('div', 'dp-pick dp-tile-card dp-diary-page')
+    page.appendChild(el('div', 'dp-pick-head', picked.day))
+    page.appendChild(el('div', null, picked.text))
+    ui.content.appendChild(page)
+  }
+}
+
+/** 纪念品: tap one for its story, and sell it from there. */
+function renderSouvenirs(ui) {
+  var list = ui.view.pig.souvenirs
+  drillHeader(ui, 'bag', '🎁 纪念品', list.length + ' 件')
+  if (list.length === 0) {
+    ui.content.appendChild(el('div', 'dp-empty', '收藏册还空着'))
+    return
+  }
+  var grid = tileGrid()
+  var picked = null
+  for (var s = 0; s < list.length; s += 1) {
+    (function (entry, index) {
+      var id = entry.key + '#' + index
+      var active = ui.drill.pick === id
+      if (active) picked = entry
+      grid.appendChild(tile({
+        emoji: entry.emoji, label: entry.label, color: EXTRA.souvenir.color, soft: true, active: active,
+        note: entry.rarityEmoji + entry.rarityLabel,
+        data: { 'data-souvenir': id },
+        onPick: function () {
+          ui.drill.pick = active ? null : id
+          ui.renderContent()
+        },
+      }))
+    })(list[s], s)
+  }
+  ui.content.appendChild(grid)
+  if (picked === null) return
+  var story = el('div', 'dp-pick dp-tile-card')
+  story.appendChild(el('div', 'dp-pick-head', picked.emoji + ' ' + picked.label
+    + (picked.fromLabel === '' ? '' : ' · ' + picked.fromLabel)))
+  story.appendChild(el('div', null, picked.story === '' ? '（旧版本带回来的，没有故事）' : '「' + picked.story + '」'))
+  if (picked.price > 0) {
+    var sold = picked
+    var sell = button('dp-mini', { 'data-sell': sold.key }, function () {
+      ui.drill.pick = null
+      ui.send('sell', { souvenir: sold.key })
+    })
+    sell.textContent = '卖掉 +' + sold.price + ' 🪙'
+    sell.style.marginTop = '6px'
+    story.appendChild(sell)
+  }
+  ui.content.appendChild(story)
+}