# spinJoy

跑在「Vyin AI 影城大廳機器人」同一台機器上的新案，沿用同一套 kiosk 設計系統。

## 機器（四片螢幕）

| 螢幕 | 尺寸 | 備註 |
|---|---|---|
| Center | 1280×800 橫 | 觸控主螢幕，主要互動 |
| Side F（前） | 1080×1920 直 | 跟 Center 同一面，不能觸控 |
| Side B（後） | 1080×1920 直 | 機器人背面，不能觸控 |
| Kebbi 臉 | 1024×600 | 只能播 115 支內建表情 |

所有數值以 Center 1280×800 絕對像素寫，不是 RWD。

## 怎麼看

```
node tools/serve.mjs 8091      # 或 python3 -m http.server 8091
```

開 http://localhost:8091/ 。不要用 file:// 開。純 HTML / CSS / JS，沒有建置工具，路徑全部相對。

## 對外預覽

```
./tools/deploy-cf.sh            # Cloudflare Pages → https://spinjoy-review.pages.dev（production）
./tools/deploy-cf.sh --preview  # 預覽網址
```

第一次要 `npx --yes wrangler@4 login`。不會上傳上一案整包與 design-briefs。

## 檔案

| 路徑 | 是什麼 |
|---|---|
| `css/tokens.css`、`css/components.css` | 設計系統本體（token `--kiosk-*`、元件 `.kv-*`），來源上一案 v4.3.7 |
| `index.html` | 樣式指南（Foundations） |
| `screens.html` | 畫面範例（Screens） |
| `js/start.js`、`js/moments.js` | 點擊開始轉場、Micro Moments 時序 |
| `css/guide.css`、`js/guide.js`、`js/side-promo.js` | 樣式指南 / 範例頁的相依檔 |
| `assets/placeholder/` | 佔位圖（迪士尼素材的替身），見 `assets/README.md` |
| `assets/kebbi/` | Kebbi 115 支表情預覽影片 |
| `tools/` | `serve.mjs` 本機伺服器、`make-placeholders.mjs` 佔位圖產生器 |
| `docs/` | 工作記錄 `log.md`、決策 `decisions.md`、規格 |
| `kiosk-design-system-2026-11-09/` | 上一案整包，**只參考、不進版控**（含授權素材）。規格書在它的 `README.md`、`START-HERE.md` |

## 規則

1. 設計系統本體改動時，在檔頭「spinJoy · 來源」段加一行日期 + 改了什麼。
2. 上一案的迪士尼素材（campaign / side / audio）不能用。
3. 上一案的 `film-*`、`prototype*`、`js/event.js`、`js/kebbi-script.js` 只參考，不整包沿用。
4. 重要決定記在 `docs/decisions.md`。