# REDESIGN-NOTES.md — mechanic/flow เปลี่ยนจากงาน wireframe (2026-09-04)

> จดระหว่างออกแบบ wireframe redesign ทีละหน้า (NEXT-SESSION.md flow).
> พวกนี้ = **เปลี่ยนกติกา/flow เดิม** ไม่ใช่แค่ re-theme → ต้องอัปเดต CLAUDE.md + handoff/*
> ก่อน build จริง. capture ไว้ก่อน ไม่ต้องแก้ spec ตอนนี้.

## Frame 1–2 · Loading → Login
- **[FLOW] เพิ่ม Google login** ข้าง Discord. handoff/frame-02 เดิมมีแค่ Discord + Guest.
  → ต้อง wire Google OAuth ฝั่ง server (route ใหม่ คู่กับ POST /auth/discord) + client discord.ts pattern.
- ปุ่ม Discord/Google เป็น icon สี่เหลี่ยม 56×56 แถวเดียวกัน (visual).
- Panel login กว้าง 70% ชิดขวา, โลโก้ย่อไปพักซ้าย (visual).

## Frame 3 · Lobby
- **[FLOW] Join code**: ช่องรหัสผ่านโผล่ **เฉพาะเมื่อห้องนั้นมีรหัส** (ไม่ใช่โชว์ตลอด).
  → client ต้องรู้ว่าห้อง has-password ก่อน/ตอนกรอกโค้ด. server อาจต้องตอบ flag hasPassword
    หลังกรอก code (2 step) หรือ probe endpoint. ต้องออกแบบ intent เพิ่ม.
- **[FLOW] Invite ผ่าน URL**: เพื่อนส่งลิงก์ → เปิดมา **ลง login ก่อน** (guest ก็ได้) →
  login เสร็จ **เด้ง modal invite** ให้กดเข้าห้องเลย + **dismiss ได้** (ไปเล่นเอง).
  handoff frame-02/03 มี takeInvite() อยู่แล้ว แต่พฤติกรรม "เด้ง modal + dismiss" ต้อง confirm/ปรับ.
- **[MECHANIC] จับคู่ (quick match) countdown**:
  - กดจับคู่ → ปุ่มเปลี่ยนเป็น **"ยกเลิกจับคู่"** + เริ่มนับเวลา.
  - **countdown 1 นาที** ถ้าหมดเวลา = ยกเลิกอัตโนมัติ ต้องกดใหม่.
  - **3 วินาทีแรก ระบบยังไม่เริ่มจับคู่จริง** (กันกดผิด — grace period).
  → เดิม quickMatch เป็น one-shot ไม่มี timeout/cancel. ต้องเพิ่ม client timer + intent CANCEL_MATCH
    + server matchmaking ที่มี 60s TTL + 3s grace. ทบทวน QUICK_MATCH ปัจจุบัน.
- video (กฏการเล่น) + tour: **จะทำใหม่ทีหลัง** (tour เดิมถูกลบไปแล้วตาม frame-09a). placeholder ไว้ก่อน.
- score "1,250" ตัดทิ้ง (ไม่มี persistence) — ยืนยันตาม frame-03 decision 2.

## Frame 4 · เข้าห้อง (เปลี่ยนใหญ่)
- **[VISUAL] ทิ้ง camera fly-in เดิม** (handoff frame-04 ทั้งเฟรม decisions 1–8 ที่พูดเรื่องบิน/โต๊ะหลอก).
  เปลี่ยนเป็น **ประตูปิดจากซ้าย-ขวา มีโลโก้กลาง ปิดแบบกระแทก+เด้งนิดหน่อย (overshoot) แล้วเปิดเป็นโต๊ะ**.
  → decoy tables, one-camera-no-cut fly-in ตกไป. door = 3D plane 2 บาน + โลโก้กลาง.
    guard "เล่นครั้งเดียวตอน fresh join, reload ไม่ซ้ำ" ยังคงเดิม.

## Frame 5 · ห้องรอ (layout ใหม่ · แก้รอบ 2)
- **[VISUAL] กระดานกลม zoom เต็มจอ** เป็นพื้นหลัง (ไม่ใช่โต๊ะเล็กกลางจอแล้ว). ไม่มี avatar บนกระดาน.
- **[VISUAL] roster = grid 3×2 กลางจอ กว้าง 60%** — **มีแต่ชื่อ** ไม่มี avatar/sector/card
  เพราะ card จะสุ่มตอนเริ่มเกม (โชว์ก่อน=สับสน). บังกระดานตอนรอ (ตั้งใจ).
- ช่องผู้เล่นที่**กำลังเข้า = spinner loading**. ช่องว่าง = "— ว่าง —".
- ➕/➖ บอท อยู่ท้าย roster.
- **[VISUAL] ปุ่มเริ่มเกมมุมขวาล่าง** — <3 คน = disabled.
- **[FLOW] กดเริ่มเกม → fade roster ออก + หมุนกระดาน พร้อมสุ่มกระดาน** → เข้าหน้า gameplay.
  (แทน countdown 3-2-1 แบบเดิม? — ต้องยืนยันว่ายังมี 3-2-1 ไหม หรือหมุนกระดานแทน. server countdown เดิมอาจปรับ.)

## Frame 9 · กระดาน (TURN) — ทำ 5 variant ให้เลือก (2026-09-04)
- **[VISUAL] บนกระดานไม่โชว์เงื่อนไข sector** — โชว์แค่ $×N. **ถึงช่องค่อยเผย** popup
  (เงิน + เงื่อนไข + จั่ว3/เปิดดีล). ทับแนวเดิมที่ board.webp มีเงื่อนไข baked ทุกช่อง.
- **[MECHANIC?] 4 มุมกระดานกลม = ช่องพิเศษ** (ตัวคูณสูง + เงื่อนไขยาก) — ล้อกับกระดานเก่าที่มุมแรง.
  ตัวเลข/เงื่อนไขจริงยังไม่ล็อก → ต้องออกแบบ boardSpaces ใหม่ตอน build.
- **[VISUAL] ไม่ต้องเห็นครบทุกอย่าง** — กดที่ผู้เล่นเพื่อดูรายละเอียด (popover เงิน/ไพ่/sector).
- 5 variants ใน frame-09-board-variants.html: A orbit ชิพรอบกระดาน · B dock ล่าง ·
  C การ์ด 4 มุม+ลูกเต๋ากลาง · D focus+ลิ้นชัก (โล่งสุด) · E timeline ลำดับเทิร์นบนหัว.
  **MEKICK เลือกแนว D → ทำต่อเป็น frame-09-board-focus.html (Focus v2):**
- **[VISUAL] ห้าม fix สี sector ต่อคน** — ไพ่ sector ถือได้ 0–6 ใบ สีตายตัวจะโกหก.
  ใช้เลขลำดับเทิร์นแทนจุดสี. popover ผู้เล่นไม่เผยชนิดไพ่ (เผยแค่จำนวน).
- **[VISUAL] list ลิ้นชักเรียงตามลำดับเทิร์น — คนปัจจุบันบนสุด** (▶) แล้วไล่คิว 2,3,4…
  เทิร์นจบ = list เลื่อนจัดใหม่ (animate).
- **[VISUAL] กรอบชื่อ 3 สี ทอง/เงิน/ทองแดง (🥇🥈🥉) ตามเงินอันดับ 1–3** — ที่เหลือกรอบปกติ.
  mebar ของเราก็เปลี่ยนกรอบตามอันดับ. เสมอกัน: คนก่อนในลำดับเทิร์นได้เหรียญก่อน (ยังไม่ล็อก).

## ทุกหน้า (global)
- **[VISUAL] BG = รูปภาพ + effect ให้ดูไม่นิ่ง** (parallax / particle / subtle motion) — เพิ่มทีหลัง.
  wireframe ตอนนี้ใช้ grid placeholder ไว้ก่อน. ยังไม่ล็อกชนิด effect.