# Health bar для дестройбл-елементів (2026-08-13)

Референс-скріншот: прямокутний хелз бар з бордером, синя заливка HP,
чорним — вже відняте попередніми ударами, білим — відняте саме поточним
ударом (з коротким затуханням у чорне), число нанесеного урону над баром.
Нехай 10 урону за удар, 100хп у цілого ящика.

## `BreakablePropC` — перехід з дискретного лічильника хітів на HP
`HITS_PER_STAGE`/`hitsOnStage` повністю видалені. `BreakableProp` тепер
несе `currentHp`/`maxHp` (`MAX_HP = 100`, `export`-нутий, щоб `HealthBarC`
рахував той самий `0..1` дріб без дублювання числа) + `startStageNumber`/
`totalPossibleStages` — реальні номери з `_SN` у назвах стейдж-нод (не
вигадані), з яких рахується, скільки HP пошкоджений з коробки крейт вже
має "по дефолту" (пошкоджені S2/S3-старт крейти стартують не з 100).
`hit()` тепер: відняти `HIT_DAMAGE`, повідомити `HealthBarC.onHit(...)`,
знищити на HP<=0 (раніше — "просунувся за останній стейдж"), інакше —
перевести `stageIndex` на `Math.floor((1 - currentHp/maxHp) *
totalPossibleStages)` (з відступом на `startStageNumber`), змаплений у
межі власного (можливо короткого) масиву стейджів.

## `HealthBarC.ts` — новий контролер, world-tracking DOM-бари
Одна мапа `BreakableProp -> BarInstance`, живиться з `BreakablePropC.hit()`
через `onHit`/`onDestroyed` (аналогічний DI-паттерн до `ResourceC.setFlyTarget`).

**Позиціювання**: `position:fixed` + сирі px з `canvasRect` (та ж техніка,
що й `HudC.getWorldAnchorPosition`, лише в протилежний бік — тепер
винесена в `src/utils/screenWorldProjection.ts`, обидва напрямки). Точка
прив'язки — реальний `Box3().setFromObject(prop.root)` (верх+центр X/Z),
не вгаданий офсет.

**Три кольори — чистий CSS, без пофреймової JS-анімації**: `.health-bar__white`
й `.health-bar__blue` — два накладені div. На кожен хіт: білий миттєво
(`transition-duration: 0s`) стрибає на ПОПЕРЕДНІЙ `%`, форс-reflow через
`offsetWidth`, потім і білий (з `transition-delay`), і синій одразу
виставляються на ПОТОЧНИЙ `%` — синій доїжджає без затримки, білий
"зависає" на старому значенні й наздоганяє з лагом, показуючи чорний трек
під собою в проміжку. Ніякого `requestAnimationFrame`/tween — сама
CSS-transition timing і є ефектом.

**Авто-приховування**: `idleTime` рахується щокадру, `>= HIDE_DELAY_S` (2с)
без нового хіта — `is-hiding` клас + `FADE_OUT_MS` (250мс) opacity-transition,
потім видалення з DOM. Скидається на 0 при кожному `onHit`. `onDestroyed`
видаляє бар негайно (порожній бар не має лишатись висіти).

**Числа урону — кілька раундів фідбеку, фінал**:
- Спочатку плавали вгору з затуханням — користувач попросив натомість
  різку появу непрозорого числа (`-webkit-text-stroke`, не text-shadow-глов)
  з різким скейл-панчем до 1.5x + ротейтом і поверненням, і тільки ПОТІМ
  затуханням (не рухом).
- Ротейт — послідовно звужувався: спершу довільний напрямок/кут, потім
  користувач уточнив "тільки по годинниковій стрілці, до 2 години дня"
  (тобто 0..60°, `--damage-rotate`, рандомізується в JS на кожен спавн,
  читається в keyframe через `var()`).
- **Баг знайдений і виправлений**: затухання на спокої (force=0, у
  контексті джойстика — не плутати з цим, тут йдеться про сам панч)
  показувало прозору прогалину замість базового кольору, бо альфа
  інтерполювалась до 0 — фікс: альфа фіксована, змінюється лише
  RGB-канал (той самий принцип пізніше повторився і в джойстику, див.
  нижче).
- Тривалість/розмір/швидкість анімації (920мс, +20% розмір шрифту,
  expo-out крива "швидкий старт — повільний кінець") — прямі числові
  правки за проханням користувача.

## `src/css/health-bar.css` — новий файл
Слідує тому ж house convention, що й `ui.css` (одна `--health-bar-width`
змінна, `--lvh` не сирий `vh`) — **окремо зазначено користувачем не
чіпати**: файл (як і `ui.css`) свідомо не отримав landscape
`@media`-блоку і досі на `vh`, не `rem`/`%` — відомий, прийнятий
відступ від Day 8 чекліста, відкладений на потім.