feedback1 final: merge the client fixes for GitHub issues #5 (prep camera follows the folded shop) and #8 item 5 (operators no longer stay placeholders)

Conflicts resolved keeping both sides:
- CHANGELOG 0.1.1 界面: the three gaps lines, then the issue #5 and #8 lines.
- DESIGN: the branch's "§21.26 Client fixes for GitHub issues #5 and #8" follows the gaps' §21.26 as §21.27; its
  references in §9 (setCamera `shop`, the model fallback), §17.1 (the quiet budget) and §19.8 (the collapsed shop)
  now point at §21.27.

public/js/ui/fieldHost.js

@@ -1,6 +1,8 @@
 // Field view loader: mounts the Pixi render engine (public/js/render/app.js → createFieldView, DESIGN §9)
 // into a host element, falling back to the DOM view (fallbackField.js) when the engine is missing, times
 // out or throws. Every call into the view goes through a guard so a render bug can never crash the HUD.
+// The shared asset store gets the game data's copy of the asset manifest (`seedAssets`, public issue #8 item 5), and the
+// prep cameras the HUD bands they keep clear (`hudBands`; the folded shop's band: public issue #5).
 //
 // `?render=fallback` (or globalThis.__SP_RENDER__ = 'fallback') skips the engine (dev / mock harness);
 // `?render=engine` never falls back silently (errors are logged and the fallback still mounts).
@@ -43,41 +45,85 @@ export function hudPadding(kind, size) {
  * 2.15rem measured) and the shop bar's top edge above the viewport's bottom (css/screens/game-shop.css .shopbar
  * bottom .2rem + .shopbar__row padding .1rem ×2 + card height 2.24rem, plus its 2 px + 1 px borders). The shop bar
  * sits on the viewport's bottom edge even on a notched phone (css/devices.css, DESIGN §18.1).
+ * The folded shop (public issue #5): the tab's top edge (.shopbar-tab bottom .2rem + padding .08rem ×2 + its .44rem
+ * button, plus its 2 px + 1 px borders; it sits inside the HUD layer, above the bottom safe-area inset) and the corner
+ * buttons' top edge (css/screens/game.css .gm__corner bottom .24rem + a .56rem row — the fallback when the corner
+ * cannot be measured: on phones its buttons grow to 34 px and below 768 CSS px of width they wrap into two rows,
+ * css/devices.css).
  */
-export const HUD_REM = Object.freeze({ bondStripBottom: 2.16, shopBarTop: 2.64, shopBarBorderPx: 3 });
+export const HUD_REM = Object.freeze({
+  bondStripBottom: 2.16, shopBarTop: 2.64, shopBarBorderPx: 3, shopTabTop: 0.8, shopTabBorderPx: 3, cornerTop: 0.8,
+});
 
 /**
- * CSS px of HUD along the top edge (top bar + bond strip) and the bottom edge (the shop bar) of the viewport during
- * prep — the own board ('prep') or the Final Assault half ('bossPrep'); null for every other camera. The prep camera
- * keeps the bench / temp rows and the field's back row clear of them (render/projection.js clearHud; user playtest
- * #5 item 9: the rem floor of 40 px makes the HUD relatively taller on phones in landscape and the shop bar covered
- * the bench). The prep camera is the shop camera whether or not the bar is collapsed, so the band assumes the bar —
- * also for an eliminated player's own board (no shop bar: the band only costs size there, while a camera following
- * the bar's presence would have to re-frame whenever it appears, e.g. when the private state arrives after the prep
- * camera was set). Scouting a teammate's board uses the 'normal' camera: no band. An armed shop card (two-tap buy,
- * css/screens/game-shop.css .scard.is-armed) rises 4 px above the bar's top on a phone and covers the bench pads'
- * near corners by ≈ 3 px while it stays armed — less than under the unchanged official camera at 1920×1080 (13 px
- * above the bar, ≈ 11 px over the pads).
+ * CSS px of HUD along the top edge (top bar + bond strip) and the bottom edge of the viewport during prep — the own
+ * board ('prep') or the Final Assault half ('bossPrep'); null for every other camera. The prep camera keeps the bench /
+ * temp rows and the field's back row clear of them (render/projection.js clearHud; user playtest #5 item 9: the rem
+ * floor of 40 px makes the HUD relatively taller on phones in landscape and the shop bar covered the bench).
+ * The bottom band is the shop bar's — also for an eliminated player's own board (no shop bar: the band only costs size
+ * there, while a camera following the bar's presence would have to re-frame whenever it appears, e.g. when the private
+ * state arrives after the prep camera was set) — unless `opts.shop === false`: the player folded the shop (收起) and the
+ * own prep board moved to the official shop-collapsed camera (public issue #5: the board did not grow; screens/game.js
+ * asks for it only while a folded bar is shown). Its band is the higher of the folded tab (bottom right) and the corner
+ * buttons' hit areas (交流 / ⚙ / 📖 / ⛶, bottom left, measured by `cornerBand`: on a narrow phone two rows of 34 px buttons
+ * with 44 px touch areas) — under the official collapsed camera the bench's left pads reach under the corner, and with
+ * the tab alone it would cover bench pad 0 at the user's 756×366 Android and the near edge of pads 0–2 at 844×390; both
+ * are 1-D bands like the bar's, so every bench pad stays fully pressable. Scouting a
+ * teammate's board uses the 'normal' camera: no band. An armed shop card (two-tap buy, css/screens/game-shop.css
+ * .scard.is-armed) rises 4 px above the bar's top on a phone and covers the bench pads' near corners by ≈ 3 px while it
+ * stays armed — less than under the unchanged official camera at 1920×1080 (13 px above the bar, ≈ 11 px over the pads).
  * @param {string} kind
  * @param {{ width: number, height: number }} size
+ * @param {{ shop?: boolean }} [opts] `shop: false` = the folded shop's band
  * @returns {{ top: number, bottom: number }|null}
  */
-export function hudBands(kind, size) {
+export function hudBands(kind, size, opts) {
   if (kind !== 'prep' && kind !== 'bossPrep') return null;
+  const folded = !!opts && opts.shop === false;
+  const h = size?.height || 1080;
   let rem = 100;
   let safeTop = 0;
+  let safeBottom = 0;
+  let corner = 0;
   try {
     rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 100;
-    // the HUD layer starts below the top safe-area inset (css/devices.css .gm__hud)
-    safeTop = Math.max(0, document.querySelector('.gm__hud')?.getBoundingClientRect().top || 0);
+    // the HUD layer starts below the top safe-area inset and ends above the bottom one (css/devices.css .gm__hud)
+    const hud = document.querySelector('.gm__hud')?.getBoundingClientRect();
+    safeTop = Math.max(0, hud?.top || 0);
+    if (folded) {
+      if (hud && hud.bottom > 0) safeBottom = Math.max(0, h - hud.bottom);
+      corner = cornerBand(h);
+    }
   } catch { /* ignore */ }
-  const h = size?.height || 1080;
+  const bottom = folded
+    ? Math.max(safeBottom + rem * HUD_REM.shopTabTop + HUD_REM.shopTabBorderPx, corner || safeBottom + rem * HUD_REM.cornerTop)
+    : rem * HUD_REM.shopBarTop + HUD_REM.shopBarBorderPx;
   return {
     top: Math.min(h * 0.4, safeTop + rem * HUD_REM.bondStripBottom),
-    bottom: Math.min(h * 0.4, rem * HUD_REM.shopBarTop + HUD_REM.shopBarBorderPx),
+    bottom: Math.min(h * 0.4, bottom),
   };
 }
 
+/**
+ * CSS px from the viewport's bottom edge (`h` high) up to the top of the corner buttons' hit areas (交流 / ⚙ / 📖 / ⛶,
+ * .gm__corner), 0 when they are not on the page. On a touch screen every one of them takes taps from an invisible area
+ * of at least --tap-min (44 px) centred on it (css/devices.css touch targets), 5 px above a 34 px phone button — a bench
+ * pad edge there is not pressable.
+ * @param {number} h
+ */
+function cornerBand(h) {
+  const btns = document.querySelectorAll('.gm__corner .gm__gear, .gm__corner .ewheel__btn');
+  if (!btns || !btns.length) return 0;
+  const root = document.documentElement;
+  const tap = root?.classList?.contains('sp-coarse') ? parseFloat(getComputedStyle(root).getPropertyValue('--tap-min')) || 0 : 0;
+  let top = Infinity;
+  for (const b of btns) {
+    const r = b.getBoundingClientRect();
+    if (r && r.height > 0) top = Math.min(top, r.top + r.height / 2 - Math.max(r.height, tap) / 2);
+  }
+  return top < Infinity ? Math.max(0, h - top) : 0;
+}
+
 function renderPref() {
   try {
     const q = new URLSearchParams(globalThis.location?.search || '').get('render');
@@ -116,6 +162,27 @@ export function guardView(view, kind) {
   return safe;
 }
 
+/**
+ * Hand the game data's copies of /data/assets.json and /data/local-assets.json (data.js 'assets' / 'local': the match
+ * screen waits for them, gameComponents GAME_FILES) to the asset store, now or when they land: it then never downloads
+ * the manifest a second time — after a page reload (a phone browser discarding a background tab, Chrome's Memory Saver)
+ * that second download was the one createFieldView waited ≤ 4 s for, and a slow or failed one left every operator the
+ * image-less placeholder (public issue #8 item 5). Without a copy the store fetches and retries by itself.
+ * @param {{ seed?: (m: any) => boolean, seedLocal?: (m: any) => boolean }} store public/js/assets.js store
+ */
+export function seedAssets(store) {
+  if (!store) return;
+  const give = (name, fn) => {
+    if (typeof fn !== 'function') return;
+    const now = data.get(name);
+    if (now) { fn(now); return; }
+    // still loading (or failed): adopt it if it lands; a later success of the store's own fetch makes this a no-op
+    Promise.resolve(data.load(name)).then((m) => { if (m) fn(m); }, () => {});
+  };
+  give('assets', store.seed?.bind(store));
+  give('local', store.seedLocal?.bind(store));
+}
+
 /**
  * Create a field view in `host`: the render engine when available, else the DOM fallback.
  * @param {HTMLElement} host
@@ -128,7 +195,10 @@ export async function mountFieldView(host) {
     try {
       // the shared asset store (public/js/assets.js) keeps its Spine cache across remounts (next match, reconnect)
       const am = await withTimeout(import('../assets.js'), LOAD_TIMEOUT_MS, 'asset store import').catch(() => null);
-      if (am?.assets && typeof am.assets.ready === 'function') opts.assets = am.assets;
+      if (am?.assets && typeof am.assets.ready === 'function') {
+        opts.assets = am.assets;
+        seedAssets(am.assets);
+      }
       const mod = await withTimeout(import('../render/app.js'), LOAD_TIMEOUT_MS, 'render engine import');
       if (typeof mod?.createFieldView !== 'function') throw new Error('createFieldView missing');
       const view = await withTimeout(Promise.resolve(mod.createFieldView(host, opts)), LOAD_TIMEOUT_MS, 'createFieldView');

public/js/ui/gameLogic.js

@@ -91,6 +91,37 @@ export function prepCamera(pub, myId) {
   return { kind: 'bossPrep', opts: { side: idx % 2 === 1 ? 'R' : 'L' } };
 }
 
+/**
+ * The own prep board's camera request with the shop bar's state (public issue #5 "准备阶段，收起商店界面时，界面并不会进行
+ * 缩放"): `prepCamera` plus `shop: !folded` — a folded shop (收起) takes the official shop-collapsed camera
+ * (configBlackBoard left_prepare_camera_param / *_boss_prepare_*, render/projection.js presetCamera `shop: false`) and
+ * the folded shop's HUD band (ui/fieldHost.js hudBands), an open one the shop camera. `folded` = the shop bar is shown
+ * and folded (an eliminated player's board, which shows no bar, keeps the shop camera).
+ * @returns {{ kind: 'prep'|'bossPrep', opts: { rect?: object, side: 'L'|'R', shop: boolean } }}
+ */
+export function prepCameraFor(pub, myId, folded = false) {
+  const c = prepCamera(pub, myId);
+  return { kind: c.kind, opts: { ...c.opts, shop: !folded } };
+}
+
+/**
+ * The camera request a fold / unfold of the shop bar needs right now (public issue #5), or null: only while the own prep
+ * board is on screen (`ownPrep`: prep, not a teammate's scouted board, not a battle), never over the enemy pen (`pen`: it
+ * folds the shop itself and returns to the camera it left), deferred while a piece is dragged or its direction is chosen
+ * (`busy`: the drop target and the wheel sit on tiles of the camera in use — the caller asks again once that ends), and
+ * nothing when the current request (`current` { kind, opts }) already has that shop state.
+ * @param {{ pub: any, myId: string|null, ownPrep: boolean, folded: boolean, pen?: boolean, busy?: boolean,
+ *   current?: { kind: string, opts?: { shop?: boolean } }|null }} s
+ * @returns {{ kind: 'prep'|'bossPrep', opts: object }|null}
+ */
+export function foldCamera(s) {
+  if (!s || !s.ownPrep || s.pen || s.busy) return null;
+  const want = prepCameraFor(s.pub, s.myId, !!s.folded);
+  const cur = s.current;
+  if (cur && cur.kind === want.kind && (cur.opts?.shop !== false) === want.opts.shop) return null;
+  return want;
+}
+
 /**
  * The field the own pieces are deployed on (server/match/Match.js deployFieldOf): 'bossL' / 'bossR' in the prep of a
  * boss round (the same pairing as `prepCamera`), else 'normal'. Placement legality (`placementContext` → `deployMap`