# BauCuaBoard
Bàn cược Bầu Cua 6 ô linh vật Bầu · Cua · Tôm · Cá · Gà · Nai: ảnh, tên, badge tiền đã cược, nút bớt cược và ô trúng ×1/×2/×3 sau khi mở bát.

## Khi nào dùng
- Màn minigame Bầu Cua Trân Châu: bấm một ô để đặt chip đang chọn (`BetChips`) lên linh vật đó.
- Ghép với `MinigameWallet` (đầu trang), `DiceBowl` (cột phải), `BetChips`, `MinigameResult`.
- Chỉ hiển thị cược và kết quả do code truyền vào, không có logic tỉ lệ hay trả thưởng.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Khung thẻ | `tt-mgframe` | Khung ngoài chung của hai minigame (nền `panel`, viền `counter` 3.5px, bo 22px, bóng `shadow-modal`, rộng tối đa 480px); bọc ví, bàn, chip, nút phụ và banner |
| Bố cục chính | `tt-baucua` | Lưới bàn cược 1fr + cột đĩa 125px (110px ở màn ≤ 380px) |
| Bàn | `tt-baucua__board` | Lưới 2 cột × 3 hàng, nền `bg`, viền `counter` 2.5px |
| Ô | `tt-baucua__cell` | Bọc nút ô, badge và nút bớt; `data-id` = `bau`, `cua`, `ga`, `tom`, `nai`, `ca` |
| Hàng nút phụ | `tt-baucua__actions` + `tt-baucua__action` | Chọn lại, Nhân đôi ×2 (`.bc-sub-btn`) |

## Cấu trúc
```html
<div class="tt-mgframe">
  <!-- MinigameWallet ở đầu khung -->
<div class="tt-baucua">
  <div class="tt-baucua__board" role="group" aria-label="Bàn cược 6 linh vật">
    <div class="tt-baucua__cell" data-id="bau" data-bet="50000">
      <button type="button" class="tt-baucua__tile">
        <img class="tt-baucua__img" src="assets/Minigame/bau.png" alt="">
        <span class="tt-baucua__name">Bầu<span class="tt-baucua__count" hidden></span></span>
      </button>
      <span class="tt-baucua__badge tt-num" aria-hidden="true">50k</span>
      <button type="button" class="tt-baucua__sub" aria-label="Bớt cược Bầu">−</button>
    </div>
    <!-- 5 ô còn lại: cua, ga, tom, nai, ca -->
  </div>
  <div class="tt-dicebowl is-open">…</div>
</div>
  <!-- BetChips, tt-baucua__actions, MinigameResult -->
</div>
```
Thứ tự ô trong lưới (hàng ngang): Bầu · Cua / Gà · Tôm / Nai · Cá. Ảnh linh vật nằm trong `assets/Minigame/`; tên đã có chữ nên ảnh `alt=""`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Chưa cược | Badge và nút bớt `hidden` |
| Đã cược | Badge `warn` góc phải trên ghi số tiền; nút bớt tròn góc trái trên |
| Hover | Ô nhấc 2px, viền `pink` |
| `is-hit` (trúng) | Viền `gold`, vòng `gold` 3px, nền vàng nhạt, nhịp phóng .6s, chữ "×2" cạnh tên |
| `disabled` (đang lắc) | Mờ 50%, không bấm được |

## Hành vi JS
`TTMU.bauCuaBoard(root, { onBet, onUndo })` gắn một lần lên `.tt-baucua__board` (gắn lần hai trả về `null`), trả về `{ setBet, setHits, setDisabled, destroy }`.

- `onBet(id)` khi bấm ô, `onUndo(id)` khi bấm nút bớt: chỉ khi người dùng thao tác, bạn tự tính số tiền theo chip đang chọn.
- `setBet(id, amount)` cập nhật badge và nhãn đọc; `setHits({ bau: 2, ca: 1 })` hiện ô trúng và "×n"; `setHits(null)` xoá; `setDisabled(true)` khoá khi đang lắc. Các hàm này không gọi callback.

```js
var board = TTMU.bauCuaBoard(document.querySelector('.tt-baucua__board'), {
  onBet: function (id) { bets[id] += chipValue; board.setBet(id, bets[id]); }
});
board.setHits({ bau: 1, cua: 1, tom: 1 }); // lúc mới vào, như game: đĩa mở sẵn Bầu, Cua, Tôm
```
Vì `DiceBowl` mở sẵn (xem README của nó), ô Bầu · Cua · Tôm sáng ngay từ đầu; bắt đầu lượt mới thì `setHits(null)`, `setDisabled(true)` rồi `bowl.roll(faces)`. Khung `tt-mgframe` là khối chung: `MinigameWallet` có mục "Khung thẻ" mô tả.

## Token sử dụng
`bg`, `counter`, `die-face`, `tile-line`, `tile-win`, `stage-ink`, `gold`, `pink`, `warn`, `on-fill`, `panel`, `ink`, `outline`, `radius-8/10/12/16/round`, `space-6/8/10`.

## Khả năng tiếp cận
- Mỗi ô là `<button>` có nhãn đọc được, do JS cập nhật: "Bầu, đang cược 50k", "Bầu, chưa cược", "Bầu, đang cược 50k, trúng 2 lần". Badge `aria-hidden` vì nhãn đã nói số tiền.
- Nút bớt là `<button>` có `aria-label="Bớt cược Bầu"`; bàn là `role="group"` có `aria-label`.
- Ô trúng không chỉ khác màu: vòng 3px, nền đổi và chữ "×n".
- Animation nhịp phóng tắt khi `prefers-reduced-motion` (base). Mục tiêu bấm nút bớt 28px (đạt 24px của WCAG 2.2).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Gọi `setDisabled(true)` suốt lúc lắc | Cho đặt cược khi bát đang lắc |
| Gọi `setHits(null)` trước ván mới | Để ô trúng của ván cũ |
| Giữ nhãn tên chữ ("Bầu") dù ảnh đã có chữ | Bỏ tên để chỉ dựa vào ảnh |

## Nguồn
`.baucua-card` (thành `tt-mgframe`), `.bc-main-layout`, `.bc-board`, `.bc-tile`, `.bc-tile.winner`, `.bc-tile-img`, `.bc-tile-name`, `.bc-tile-badge`, `.bc-sub-btn`, `.bc-actions-row` — css/baucua.css; `MASCOTS`, `tilesHtml` trong js/baucua.js.
- Ô nền trắng cố định (`die-face`) và tên `stage-ink` vì ảnh chibi vẽ cho nền sáng, kể cả theme Đêm dịu; viền ô `#ead7bd` là `tile-line` (đậm hơn ở Tương phản cao).
- Trúng: `#f59e0b` đổi sang `gold`; nền `#fef9c3` là `tile-win`. Badge `#ef4444` đổi sang `warn`.
- Nút bớt cược từng ô là bổ sung theo yêu cầu; game gốc chỉ có "Chọn Lại" và "Nhân Đôi" dùng `.bc-sub-btn` (hai nút này ở `tt-baucua__action`).
- Ô là `<button>` thật thay cho `<div onclick>` của game; chữ tên viết hoa bằng CSS.