Play Shell Charts (historical)

Lifecycle: HISTORICAL SUPPORTING
Recovered from legacy wiki path content/current/architecture/charts_play-shell-dock-ux.md (attic copy retained; not deleted).
Prefer current SSOT pages for production decisions. Last promoted: 2026-07-20.

Charts — Funday play shell, dock, drawer, immersive UX

Mermaid views: regular vs pressing issues use node classDef colors (green / amber / red).

---

1 — Screen layers (bird’s eye)

---
config:
  theme: forest
  look: handDrawn
---
flowchart TB
  %% 🎨 Severity hints on concepts
  classDef regular fill:#bbf7d0,stroke:#166534,color:#14532d
  classDef watch fill:#fde68a,stroke:#b45309,color:#78350f
  classDef hot fill:#fecaca,stroke:#b91c1c,color:#7f1d1d

  NAV["🧭 Navbar<br/>site chrome"]:::regular
  subgraph MAIN["🖼️ Play column (insets when drawer open)"]
    VP["🧱 GameViewport<br/>iframe / native"]:::regular
    HUD["📊 GameHUD<br/>optional chips"]:::regular
  end
  DR["🗂️ GameDrawer<br/>lobby · match · chat"]:::watch
  DK["🚢 GameDock<br/>icons + platform"]:::regular

  NAV --> MAIN
  MAIN --> DK
  DR -. overlaps right .- MAIN

  TOK["📐 Tokens<br/>--nav-h --dock-h --drawer-w"]:::hot
  TOK -.-> MAIN
  TOK -.-> DK
  TOK -.-> DR

---

2 — Who talks to whom (sequence)

---
config:
  theme: forest
  look: handDrawn
---
sequenceDiagram
  autonumber
  participant G as 🎮 Game embed
  participant B as 🔌 Bridge
  participant C as 📦 gameContext
  participant D as 🚢 GameDock
  participant W as 🗂️ GameDrawer
  participant N as 🌐 Nakama

  G->>B: funday:dock:set {actions}
  B->>C: merge actions
  C->>D: render icon buttons + title tooltip
  D->>W: openDrawer('lobby') on Lobby click
  W->>N: list / join / match data
  N-->>W: presences, chat
  W->>G: funday:match-state (via postToGame)

---

3 — Drawer + Lobby button (state)

---
config:
  theme: forest
  look: handDrawn
---
stateDiagram-v2
  [*] --> Closed: load /play

  Closed --> OpenLobby: 🖱️ tap Lobby on dock<br/>or auto-open MP
  OpenLobby --> Closed: ✖ close drawer<br/>match stays connected

  OpenLobby --> OpenLobby: drawer shows<br/>lobby list + chat

  note right of OpenLobby
    Lobby BUTTON stays on bottom dock (left area).
    CONTENT of lobby lives in the right drawer.
    Visual link: active / pressed state on Lobby
    while open (recommended polish).
  end note

---

4 — Shared dock vocabulary (mind map)

---
config:
  theme: forest
  look: handDrawn
---
mindmap
  root((🚢 Universal dock))
    🏠 Lobby
      opens right drawer
      icon Clipboard
    🔁 Restart / Reset
      confirm destructive
    ℹ️ Howto / Help
      modal or overlay
    🌐 Online / Reconnect
      network sanity
    🔊 Volume
      mute toggle
    ⚙️ Settings
      per-game prefs
    🏆 Leaderboard
      platform mini LB
    💬 Feedback
      bugs / praise
    ⛶ Fullscreen
      immersive shell
    ✖ Exit
      history.back

---

5 — Player journey (find multiplayer)

---
config:
  theme: forest
  look: handDrawn
---
journey
  title 🎯 Get into a match
  section Land
    Open game from catalog: 5: Player
  section Dock
    See 🏠 Lobby icon + tooltip: 4: Player
    Tap Lobby: 5: Player
  section Drawer
    New / Join / Refresh: 4: Player
    Read lobby chat: 3: Player
  section Match
    Host starts: 5: Player
    Match chat auto: 4: Player

---

6 — Immersive fullscreen (target / future)

---
config:
  theme: forest
  look: handDrawn
---
flowchart LR
  classDef regular fill:#bbf7d0,stroke:#166534
  classDef watch fill:#fde68a,stroke:#b45309
  classDef hot fill:#fecaca,stroke:#b91c1c

  FS["⛶ Fullscreen / minimal chrome"]:::watch

  FS --> TL["↖️ Top-left<br/>☰ reopen top bar<br/>icon only"]:::regular
  FS --> BR["↘️ Bottom-right<br/>👤 / 💬 strip<br/>peek chat"]:::regular
  FS --> PIN["📌 Pin drawer<br/>opaque vs glass"]:::hot
  FS --> CHAT["💭 Bubbles fade<br/>Scribblaz guesses"]:::hot

  CHAT -. SSOT .- N["🌐 Nakama channels<br/>lobby vs match"]:::regular

---

7 — Issue heat (pie, rough priority mix)

---
config:
  theme: forest
  look: handDrawn
---
pie showData
  title 🌡️ Where UX pain clusters (conceptual)
  "🟢 Clear icon + tooltip pattern" : 35
  "🟡 Drawer / dock / fullscreen edge cases" : 40
  "🔴 Chat SSOT across game + shell" : 25

---

Links (authoritative)

• Mermaid theming
• DaisyUI tooltip — title + data-tip for icon-first bars
• WCAG 2.2 Target Size — 24×24 CSS px minimum (dock uses ~44px height ✓)