Перейти к содержанию

dice_board — UI и медиа

Веб (интерактив)

Компоненты

Компонент Описание
BoardGrid 6×6 CSS grid, клетки 48×48px min
Cell states: empty, own, opponent, highlight-candidate, center
DiceDisplay Два кубика с CSS-анимацией броска (animate-dice-roll)
TurnIndicator Имя текущего игрока
RerollBadge «Доп. бросок» при center hit

Цвета (default theme)

Элемент HEX
Поле фон #f5e6d3
Сетка #8b7355
Highlight candidate #ffd54f opacity 0.6
Center cells #e8d4b8 border dashed
Player 1 token #c62828
Player 2 token #1565c0
Player 3 token #2e7d32
Player 4 token #6a1b9a

Взаимодействие

  1. Кнопка «Бросить» → disabled после броска до выбора клетки
  2. Кликабельны только candidates (+ validation own-cell rule)
  3. При захвате — shake animation на клетке 300ms

Telegram (статичный рендер)

media-service template

  • Canvas 512×512 PNG
  • Сетка 6×6, отступ 16px
  • Фишки — круги 80% размера клетки
  • Подсветка кандидатов — жёлтая обводка 4px
  • Кубики — в углу caption area или overlay top-right

Inline keyboard

[ (4,2) ]  [ (2,4) ]
[ 🎲 Бросить ]        ← только если phase RollDice

Callback data: db:cell:4:2, db:roll

Caption template

🎲 4 и 2 | Ход: @player
Выберите клетку или бросьте кубики

При захвате:

♟ Снята фишка @opponent → (4,2)

Ассеты (файлы Phase 2)

assets/dice_board/
  cell_empty.png
  cell_center.png
  token_p1.png ... token_p4.png
  dice_1.png ... dice_6.png

NFR

NFR-022: max 1 MB per frame

Связанные документы