# XiDachTable
Khung bàn Xì Dách Trân Châu, người chơi làm nhà cái: ví, mốc cược, các ghế khách, khu nhà cái, thanh nút Bốc Thêm / Dừng Bốc / So Toàn Bàn / Ván mới, banner diễn biến và bảng luật.

## Khi nào dùng
- Màn minigame Xì Dách mở từ quán trà, thay cho cửa sổ `.xidach-card` của game.
- Ghép sẵn `MinigameWallet`, `BetChips`, `MinigameResult`, `CardHand`, `XiDachSeat` và `PlayingCard`; bàn chỉ lo bố cục, bảng luật và việc chuyển nhóm nút.
- Không chia bài, không tính điểm, không có tỉ lệ: code của bạn quyết định và truyền trạng thái vào.

## Biến thể
| Phần | Lớp | Nội dung |
|---|---|---|
| Khung | `tt-mgframe tt-xidach` | `tt-mgframe` (khung chung với Bầu Cua: nền `panel`, viền 3.5px `counter`, bo 22px, rộng tối đa 480px) + `tt-xidach` (gốc định vị cho bảng luật) |
| Ví | `tt-mgwallet tt-mgwallet--wide` | Tiêu đề, `tt-xidach__head-actions` (Luật chơi + ✕), thanh Két tiền |
| Mốc cược | `tt-xidach__chips` > `tt-betchips--compact tt-betchips--framed` | Nhãn "Mốc cược chuẩn nhà con…" + 5 chip |
| Khách | `tt-xidach__table` > `tt-xidach__players` | Lưới `XiDachSeat` cột tối thiểu 95px; trống thì `tt-xidach__empty` |
| Nhà cái | `tt-xidach__dealer` | `CardHand` nhà cái + thanh nút `tt-xidach__actions` |
| Banner | `tt-mgresult tt-mgresult--compact` | Dòng diễn biến ván |
| Bảng luật | `tt-xidach__rules` | Hộp thoại phủ kín khung, `hidden` khi đóng |

## Cấu trúc
```html
<div class="tt-mgframe tt-xidach" role="group" aria-label="Bàn Xì Dách Trân Châu">
  <section class="tt-mgwallet tt-mgwallet--wide" aria-label="Ví Xì Dách">
    <header class="tt-mgwallet__header">
      <h3 class="tt-mgwallet__title"><span>🧋 Xì Dách Trân Châu</span></h3>
      <div class="tt-xidach__head-actions">
        <button type="button" class="tt-button tt-button--small tt-button--ghost" data-action="rules" aria-haspopup="dialog">📖 Luật chơi</button>
        <button type="button" class="tt-mgwallet__close" data-action="close" aria-label="Đóng minigame">✕</button>
      </div>
    </header>
    <div class="tt-mgwallet__bar">…Két tiền quán…</div>
  </section>
  <div class="tt-xidach__chips"><div class="tt-betchips tt-betchips--compact tt-betchips--framed">…</div></div>
  <div class="tt-xidach__table">
    <div class="tt-xidach__players">…các tt-xdseat…</div>
    <section class="tt-xidach__dealer" aria-label="Khu vực Chủ Quán">
      <div class="tt-cardhand tt-cardhand--dealer">…</div>
      <div class="tt-xidach__actions" data-actions="play">
        <button type="button" class="tt-button tt-button--small tt-button--accent tt-button--ghost" data-action="hit" aria-describedby="banner">🧋 Bốc Thêm</button>
        <button type="button" class="tt-button tt-button--small tt-button--ghost" data-action="stand" aria-describedby="banner">🛑 Dừng Bốc</button>
        <button type="button" class="tt-button tt-button--small tt-button--ghost" data-action="settle-all" aria-describedby="banner">🔍 So Toàn Bàn</button>
      </div>
      <div class="tt-xidach__actions" data-actions="end" hidden>
        <button type="button" class="tt-button tt-button--primary" data-action="new-round">🧋 Chia Thẻ Ván Mới</button>
      </div>
    </section>
    <div class="tt-mgresult tt-mgresult--compact" id="banner" role="status" aria-live="polite"><span class="tt-mgresult__text">…</span></div>
  </div>
  <div class="tt-xidach__rules" role="dialog" aria-modal="true" aria-labelledby="rules-title" hidden>
    <h3 class="tt-xidach__rules-title" id="rules-title">📖 LUẬT CHƠI XÌ DÁCH TRÂN CHÂU</h3>
    <ul class="tt-xidach__rules-list"><li><span aria-hidden="true">⚡</span> <strong>Xì Dách</strong>: …</li></ul>
    <button type="button" class="tt-button tt-button--small tt-button--accent tt-button--ghost tt-xidach__rules-close" data-action="rules-close">Đã hiểu</button>
  </div>
</div>
```
Bảng luật phải là con trực tiếp của `tt-xidach`: khi mở, mọi con khác của khung được đặt `inert`. Đặt khung trong thẻ cuộn của minigame vì header ví dính đầu (`position: sticky`).

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đang chơi | Hiện nhóm `data-actions="play"` (Bốc Thêm, Dừng Bốc, So Toàn Bàn), ẩn nhóm `end` |
| Hết ván / chưa chia | `setEnded(true)`: hiện nút "Chia Thẻ Ván Mới", ẩn ba nút kia |
| Nút chưa đủ điều kiện | `disabled`; lý do nằm ở banner (`aria-describedby="banner"`), ví dụ "chưa đủ tuổi, hãy Bốc thêm" |
| Mốc cược | `betChips.setDisabled(true)` khi ván đang diễn ra |
| Bảng luật mở | Phủ kín khung (`z-index: 10`), phần còn lại `inert`, focus vào "Đã hiểu" |

## Hành vi JS
`TTMU.xiDachTable(root, { onAction })` gắn một lần (gắn lần hai trả về `null`) và trả về `{ rulesOpen, showRules(flag), setEnded(flag), enable(name, flag), destroy() }`.

```js
var table = TTMU.xiDachTable(document.querySelector('.tt-xidach'), {
  onAction: function (name) {          // 'hit' | 'stand' | 'settle-all' | 'new-round' | 'close'
    if (name === 'new-round') { startRound(); table.setEnded(false); }
  }
});
table.enable('hit', false);            // khoá Bốc Thêm
```
- `onAction` chỉ gọi khi người dùng bấm nút `[data-action]`; `setEnded`, `enable`, `showRules` từ code không gọi callback.
- `rules` và `rules-close` do bàn tự xử lý: mở bảng luật, chuyển focus, trả focus về nút Luật chơi khi đóng; Esc đóng bảng luật; Tab và Shift+Tab xoay vòng trong bảng (đúng `aria-modal`). Bảng mở sẵn lúc gắn JS cũng được khoá `inert` ngay, và `destroy()` khi bảng còn mở sẽ gỡ `inert`. Esc không đóng cả minigame, việc đó để code của bạn làm.
- Hàng chip, ghế, tay bài, lá bài gắn riêng bằng `TTMU.betChips`, `TTMU.xiDachSeat`, `TTMU.cardHand`, `TTMU.playingCard`.

## Token sử dụng
`panel`, `bg`, `counter`, `ink`, `soft`, `pink-d`, `line`, `shadow-modal`, `radius-16`, `space-4/6/8/10/12/14/16`, cùng token của các khối con.

## Khả năng tiếp cận
- Bảng luật `role="dialog" aria-modal="true" aria-labelledby`, nằm trong khung nên `z-index: 10` (lớp nổi toàn màn hình của Dialog là 100050; bảng này không phủ cả trang). Mở bảng thì phần còn lại `inert`, đóng thì trả focus.
- Mọi hành động là `<button>` thật; nút ✕ có `aria-label`. Banner `role="status"` đọc diễn biến mới.
- Nút bị khoá có lý do bằng chữ ở banner, liên kết bằng `aria-describedby`.
- Ở Tương phản cao, chữ đạt 7:1 và viền, vòng chọn đạt 3:1 (đã chạy `node scripts/audit.js hc`, kể cả trạng thái mở bảng luật và So Toàn Bàn).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt banner ngay dưới nhà cái và cập nhật `textContent` mỗi lượt | Báo diễn biến chỉ bằng toast thoáng qua |
| Khoá mốc cược lúc ván đang chạy | Để đổi mức cược giữa ván |
| Dùng `data-actions` và `setEnded` để đổi nhóm nút | Tự gỡ và dựng lại thanh nút mỗi lượt |

## Nguồn
`.xidach-card` / `.xd-card-container`, `.xd-header`, `.xd-title`, `.xd-head-actions`, `.xd-btn-sm`, `.xd-table`, `.xd-players-area`, `.xd-dealer-area`, `.xd-action-bar`, `.xd-btn(-hit|-stand|-xet-all|-new-round)`, `.xd-result-banner`, `.xd-rules-overlay`, `.xd-rules-list`, `.xd-chips-*` — css/xidach.css; `renderUI()` (nhãn nút, tiêu đề, bảng luật) trong js/xidach.js.
- Bốn nút của game (xanh dương / nâu / cam / xanh lá) dùng chung `tt-button` (Bốc Thêm nhấn `accent`, Ván mới là `--primary`); nhãn giữ chữ của game.
- Bảng luật giữ nguyên chữ của game (12 mục từ "Chủ Quán" đến "Đoàn kiểm tra ATTP", `<b>` thành `<strong>`). Giao diện đoàn kiểm tra thật (`.police-*`, biên bản phạt) nằm ngoài phạm vi khối này và chưa có trong design system.
- Phần mở modal toàn màn hình (`.xidach-modal`, nền `rgba(18,12,10,.9)`, `#xdBtn`) không thuộc khung bàn; khung bàn giữ nền `panel`, viền `counter` 3.5px, bo 22px và bóng `shadow-modal`.