# ShipperBadge
Thẻ shipper giao đơn online: ảnh hoặc mặt shipper, tên và trạng thái đơn (đang lấy hàng, đang giao, đã giao); kèm marker nhỏ cho bản đồ giao hàng.

## Khi nào dùng
- Danh sách xe đang giao ở bản đồ Shipper ("🛵 3 xe").
- Một thẻ báo trạng thái đơn của từng shipper.
- Marker `tt-shipper-pin` đặt trên ảnh bản đồ.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Thẻ | `tt-shipper` | Ảnh 44px, tên .9rem, trạng thái .78rem |
| Gọn | `tt-shipper tt-shipper--compact` | Ảnh 32px, hàng nhiều shipper |
| Marker bản đồ | `tt-shipper-pin` | 38px, bong bóng trạng thái phía trên; `is-flip` khi xe chạy sang trái |
| Tâm trạng mặt | `tt-shipper--mood-normal`, `--mood-happy`, `--mood-angry` | Chọn cột trong `ship.webp` |

## Cấu trúc
```html
<div class="tt-shipper is-going tt-shipper--mood-happy">
  <img class="tt-shipper__img" src="assets/Shippers/6.png" alt="">
  <span class="tt-shipper__body">
    <span class="tt-shipper__name">Shipper Thỏ Vàng</span>
    <span class="tt-sr-only" data-tt-state>Đang vui</span>
    <span class="tt-shipper__status tt-num">🛵 Đang giao · 3 phút</span>
  </span>
</div>
```
Mặt từ atlas: thay `<img>` bằng `<span class="tt-shipper__face" aria-hidden="true" style="background-image:url(assets/Sprites/ship.webp);--tt-row:0"></span>` (`ship.webp` 675×440: 3 cột tâm trạng × 2 hàng shipper, ô 225×220). Tâm trạng của ShipperBadge chỉ là cột mặt trong `ship.webp` (không có huy hiệu); mỗi thẻ có lớp `--mood-*` phải kèm chữ `<span class="tt-sr-only" data-tt-state>` ("Bình thường" / "Đang vui" / "Đang giận") để không chỉ dựa vào hình mặt. Marker: `<span class="tt-shipper-pin"><span class="tt-shipper-pin__bubble">🛵 Đang chạy</span><img class="tt-shipper-pin__img" src="assets/Shippers/6.png" alt="Shipper Thỏ Vàng"></span>`.

## Trạng thái
| Trạng thái | Lớp | Chữ gợi ý |
|---|---|---|
| Đang lấy hàng | mặc định (không cần CSS); `is-pickup` chỉ là lớp đánh dấu cho JS | "Đang lấy hàng", viền `gold` |
| Đang giao | `is-going` | "🛵 Đang giao · 3 phút", viền `pink` |
| Đã giao | `is-done` | "✓ Đã giao", viền `mint` |

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

## Khả năng tiếp cận
- Trạng thái luôn có chữ (và ký hiệu 🛵 / ✓), màu viền chỉ là điểm nhấn; chữ `ink` trên nền pha 14% đạt ≥7:1 ở `hc`.
- Tâm trạng: thẻ dùng `--mood-*` có chữ `tt-sr-only[data-tt-state]` nên màu hay nét mặt không là tín hiệu duy nhất.
- Ảnh shipper cạnh tên: `alt=""` hoặc `aria-hidden`; marker trên bản đồ cần `alt` là tên shipper.
- Bong bóng marker chữ 8px theo nguồn (rất nhỏ): chỉ để nhắc, thông tin chính nằm ở thẻ.
- Cập nhật phút bằng `textContent`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đổi `is-*` cùng với chữ trạng thái | Chỉ đổi màu viền |
| Lật marker bằng `is-flip` | Lật cả thẻ |
| Dùng `assets/Shippers/6.png` hoặc mặt `ship.webp` cho shipper | Dùng `assets/Shippers/1–5.png` (khách đi đường) hay `faces.webp` của khách cho shipper |

## Nguồn
`.shippermap-status-badge` (viền 1.5px vàng, .78rem 800, bo 10px), `.shipper-unit` (38×38), `.shipper-img` (drop-shadow `0 4px 6px`), `.shipper-bubble` (+ `::after`, 8px 800, viền 1px `#f59e0b`) — css/style.css dòng 4270, 4340–4390; markup bản đồ index.html dòng 169–197, `MapShipperRunner` và `shipBg(row, e, w, h)` — js/game.js (`6.png` quay mặt sang phải như 1–5 nên không cần lật khi xe chạy sang phải; xem `FRONT_PED_POOLS`).
- `1.png`–`5.png` trong game là khách đi dạo phố (`FRONT_PED_POOLS`), không phải shipper; chỉ `6.png` (Shipper Thỏ Vàng) và các mặt trong `ship.webp` là shipper.
- Khác nguồn có chủ đích: viền trạng thái 2px và bo `radius-pill` (nguồn 1.5px, 10px) để đồng bộ viền 2px và pill của các thẻ khác trong hệ thống.
- Bổ sung có chủ đích: thẻ có tên và trạng thái đơn ("Đang lấy hàng", "Đang giao · 3 phút", "Đã giao") cùng biến thể `--compact`; game chưa có thẻ riêng.