# DiceBowl
Đĩa xóc sứ xanh với bát úp (`xocdia.png`) và 3 xúc xắc mặt linh vật: mặc định mở sẵn hiện 3 mặt (như game), úp bát chỉ khi đang lắc, kèm nút Lắc.

## Khi nào dùng
- Cột phải của màn Bầu Cua, cạnh `BauCuaBoard`.
- Bất cứ chỗ nào cần "lắc rồi mở" ba xúc xắc linh vật.
- Component chỉ hiển thị kết quả bạn truyền vào (`roll(faces)`); việc chọn mặt và tính tiền nằm ở code của game.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mở bát (mặc định) | `tt-dicebowl is-open` | Game bắt đầu ở trạng thái này: bát bay lên và mờ đi, hiện Bầu, Cua, Tôm, nút "Lắc" |
| Đang lắc | `tt-dicebowl is-shaking` | Bát lắc .12s lặp lại, nút "Đang lắc" bị khoá |
| Úp | `tt-dicebowl is-covered` | Chỉ là trạng thái trung gian do code điều khiển (bát đậy, nút "Mở bát"); game luôn mở đĩa, không có bước bấm "Mở bát" |

## Cấu trúc
```html
<div class="tt-dicebowl is-open">
  <div class="tt-dicebowl__plate">
    <div class="tt-dicebowl__bowl"><img class="tt-dicebowl__bowl-img" src="assets/Minigame/xocdia.png" alt=""></div>
    <div class="tt-dicebowl__dice">
      <div class="tt-dicebowl__die"><img class="tt-dicebowl__face" data-face="bau" src="assets/Minigame/bau.png" alt="Bầu"></div>
      <div class="tt-dicebowl__die"><img class="tt-dicebowl__face" data-face="cua" src="assets/Minigame/cua.png" alt="Cua"></div>
      <div class="tt-dicebowl__die"><img class="tt-dicebowl__face" data-face="tom" src="assets/Minigame/tom.png" alt="Tôm"></div>
    </div>
  </div>
  <p class="tt-dicebowl__status" role="status" aria-live="polite">Đã mở đĩa: Bầu, Cua, Tôm</p>
  <button type="button" class="tt-dicebowl__roll">Lắc</button>
</div>
```
Khởi tạo như game: mở sẵn Bầu, Cua, Tôm (cùng `board.setHits({ bau: 1, cua: 1, tom: 1 })` ở `BauCuaBoard`). `__status` và `__roll` là tuỳ chọn; nút ẩn bằng thuộc tính `hidden` (luật nền của `00-base.css` thắng `display` của nút). Mỗi `__face` có `data-face` là id linh vật (`bau`, `cua`, `tom`, `ca`, `ga`, `nai`); ảnh mặt mới lấy cùng thư mục với ảnh mặt đầu tiên.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Úp (trung gian) | Bát phủ kín đĩa; xúc xắc `aria-hidden` để không lộ kết quả |
| Đang lắc | Bát rung `tt-dicebowl-shake`; tắt khi `prefers-reduced-motion` |
| Mở | Bát tịnh tiến lên 120px, thu 0.85, mờ đi; xúc xắc được đọc lại |
| Nút `disabled` | Mờ 50% (lúc đang lắc) |

## Hành vi JS
`TTMU.diceBowl(el, { onRoll, onOpen, faceSrc })` gắn một lần (gắn lần hai trả về `null`), trả về `{ state, faces, roll, open, reset, destroy }`.

- `roll(faces, { duration, onDone })`: `faces` là mảng id linh vật; úp bát, đặt mặt, lắc rồi tự mở sau `duration` ms (mặc định 1400; 0 = lắc tới khi gọi `open()`). Trả về `false` nếu `faces` rỗng hoặc có id lạ.
- `open()` mở bát với mặt hiện có; `reset()` úp lại và trả mặt về như markup ban đầu.
- `onRoll()` khi người dùng bấm "Lắc" lúc đang mở (bạn chọn mặt rồi gọi `roll`); `onOpen(faces)` khi người dùng bấm "Mở bát" (chỉ xảy ra nếu code đặt bát về trạng thái úp; mở bát không phải một lượt chơi nên đừng tính tiền ở đây, hãy tính trong `onDone` của `roll`). `roll` / `open` / `reset` gọi từ code không gọi hai callback này. Không truyền `onRoll` thì bấm "Lắc" lúc đang mở không làm gì; khi đó hãy ẩn nút (`hidden`) hoặc tự gọi `roll()` từ nút của bạn.

```js
var bowl = TTMU.diceBowl(document.querySelector('.tt-dicebowl'), {
  onRoll: function () { bowl.roll(pickThreeFaces(), { onDone: showResult }); }
});
```

## Token sử dụng
`plate-hi`, `plate-mid`, `plate-lo`, `plate-line`, `die-face`, `counter`, `tile-line`, `pink`, `pink-d`, `on-pink`, `soft`, `outline`, `awning-white`, `shadow-press`, `shadow-press-down`, `radius-8/16/round`, `space-4/6/8/10`.

## Khả năng tiếp cận
- Nút "Mở bát" / "Lắc" là `<button>` thật, nhãn đổi theo trạng thái; khoá bằng `disabled` khi đang lắc.
- `__status` là `role="status"` đọc "Hộp đang đậy", "Đang lắc hộp...", "Đã mở đĩa: Bầu, Cua, Tôm".
- Ảnh xúc xắc có `alt` là tên linh vật; bát là ảnh trang trí `alt=""`.
- Chuyển động bát .45s là của game (dài hơn mức .25s thông thường); `prefers-reduced-motion` rút về gần như tức thì.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Truyền kết quả vào `roll(faces)` từ code game | Mong component tự chọn mặt hay tính tỉ lệ |
| Đặt `DiceBowl` vào cột 125px của `tt-baucua` | Kéo nút Lắc ra ngoài khối |
| Giữ `data-face` khớp `alt` của ảnh | Để `alt` rỗng cho mặt xúc xắc |

## Nguồn
`.bc-plate-wrap`, `.bc-plate`, `.bc-bowl`, `.bc-bowl.open`, `.bc-bowl.shaking`, `.bc-dice-box`, `.bc-die`, `.bc-roll-btn` — css/baucua.css; `renderUI`, `roll` trong js/baucua.js.
- Đĩa và xúc xắc là vật thể trong game nên dùng token cố định `plate-*`, `die-face` (viền đĩa đậm hơn ở Tương phản cao).
- Nút `.bc-roll-btn` (hồng, bóng 3D, chữ 1.15rem) dùng `pink`, `pink-d`, `shadow-press`; nhãn rút gọn "Lắc" / "Đang lắc" (và "Mở bát" ở trạng thái úp) cho vừa cột 125px thay "🧋 MỞ HỘP MAY MẮN" của game, vốn luôn là nút lắc (js/baucua.js `roll`).
- Giữ nguyên thời gian xóc 1400ms của game làm mặc định; logic xáo mặt và tỉ lệ nhà cái của game không được đưa vào.