# Character
Chân dung nhân vật dùng chung cho khách, nhân viên và bạn bè: ảnh tròn hoặc vuông bo góc, tên, vai trò và huy hiệu tâm trạng; mặt khách cắt từ atlas `assets/Sprites/faces.webp`.

## Khi nào dùng
- Hiển thị một nhân vật có tên: khách ở làn, người đánh giá, nhân viên, bạn bè.
- Cần tâm trạng (bình thường, vui, giận) đổi theo diễn biến, kèm huy hiệu để không chỉ dựa vào hình.
- Chỉ cần ảnh tròn nhỏ không tên thì dùng Avatar.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Vừa (mặc định) | `tt-character` | Ảnh 60px (`.tfc.big`) |
| Nhỏ | `tt-character tt-character--sm` | Ảnh 40px (`.tfc`), tên .78rem |
| Lớn | `tt-character tt-character--lg` | Ảnh 88px, hồ sơ nhân vật |
| Vuông | `tt-character--square` | Ảnh bo 14px, hợp nhân viên và bạn bè |
| Có thoại | `tt-character--say` | Thêm `tt-character__say` chứa `tt-bubble` dưới tên |
| Xếp dọc | `tt-character--stacked` | Ảnh trên, chữ giữa dưới |
| Tâm trạng | `tt-character--mood-normal`, `--mood-happy`, `--mood-angry` | Chọn cột atlas và huy hiệu PNG (bình thường: không có huy hiệu) |

## Cấu trúc
```html
<div class="tt-character tt-character--mood-happy">
  <span class="tt-character__figure">
    <span class="tt-character__face" aria-hidden="true"
      style="background-image:url(assets/Sprites/faces.webp);--tt-row:3"></span>
    <span class="tt-character__mood" aria-hidden="true">
      <img class="tt-character__mood-img tt-character__mood-img--happy" src="assets/Stickers/stk_heart.png" alt="">
      <img class="tt-character__mood-img tt-character__mood-img--angry" src="assets/Icons/ic_angry.png" alt="">
    </span>
  </span>
  <span class="tt-character__body">
    <span class="tt-character__name">Cô Lan</span>
    <span class="tt-character__role">Khách <span class="tt-sr-only" data-tt-state>Đang vui</span></span>
  </span>
</div>
```
- Atlas `faces.webp` 675×1980: 3 cột (tâm trạng) × 9 hàng (khách), ô 225×220. Người dùng đặt `background-image` và `--tt-row` (0–8) ở `style`; cột do lớp `--mood-*` quyết định.
- Ảnh nhân viên, bạn bè: thay `__face` bằng `<img class="tt-character__img" src="assets/Avatars/b00.png" alt="">`.
- Mặt shipper (`ship.webp`, 2 hàng) dùng ở ShipperBadge, không dùng ở đây.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `--mood-normal` | Cột 0, không có huy hiệu (trạng thái mặc định, chữ sr-only vẫn đọc "Bình thường") |
| `--mood-happy` | Cột 1, huy hiệu `stk_heart.png` viền `mint` |
| `--mood-angry` | Cột 2, huy hiệu `ic_angry.png` viền `warn` |

## Hành vi JS
`TTMU.character(el)` gắn một lần cho `.tt-character`, trả về `{ mood, setMood(m), destroy() }` (gắn lần hai trả về `null`).
```js
var c = TTMU.character(document.querySelector('.tt-character'));
c.setMood('happy'); // đổi lớp --mood-* (ô atlas, huy hiệu) và chữ sr-only [data-tt-state] (tự tạo nếu thiếu)
```
`setMood` với giá trị lạ bị bỏ qua. Không có thao tác người dùng nên không có `onChange`.

## Token sử dụng
`bg`, `panel`, `line`, `ink`, `soft`, `mint`, `warn`, `space-2/4/8/10/12`, `radius-round`, `radius-14`.

## Khả năng tiếp cận
- Tâm trạng có ba lớp: ô atlas, huy hiệu PNG (giận, vui), và chữ `tt-sr-only[data-tt-state]` mà screen reader đọc được, kể cả ở tâm trạng bình thường.
- Ảnh khi tên đã nằm cạnh: `aria-hidden="true"` (atlas) hoặc `alt=""` (img). Huy hiệu là trang trí (`aria-hidden`).
- Viền huy hiệu `mint` / `warn` đạt 3:1 ở `hc`; ở bốn theme gốc huy hiệu vẫn phân biệt bằng hình (trái tim, mặt giận).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Luôn kèm chữ tên và (nếu cần) chữ tâm trạng | Chỉ dựa vào màu viền huy hiệu |
| Giữ `--tt-row` trong 0–8 | Tự đặt `background-size` khác tỉ lệ atlas |
| Dùng `tt-bubble` bên trong `__say` | Tự vẽ bong bóng mới |

## Nguồn
`.who .face`, `.tfc` (40×39), `.tfc.big` (60×59), `.tfc.rf` — css/style.css; `faceBg(who, e, w, h)` (`background-size: w*3 h*9`, ô 225×220) và `faceOf` (cột 2 khi kiên nhẫn dưới 30%) — js/game.js dòng 5246–5248.
- Bổ sung có chủ đích: cỡ lớn 88px, biến thể vuông, huy hiệu tâm trạng bằng PNG (`ic_angry`, `stk_heart`), biến thể xếp dọc và có thoại.