---
id: 64822757-c4fa-4b5e-b204-663f5b5729eb
type: solution
title: "Dice display redesign with team colors"
tags: [strat-gameplay-webapp, vue, typescript, frontend, ui, dice, svg, testing]
importance: 0.6
confidence: 0.8
created: "2026-01-24T06:16:51.786864+00:00"
updated: "2026-01-24T06:16:51.786864+00:00"
---

Redesigned dice display UI for Strat-O-Matic game webapp. Created DiceShapes.vue with SVG d6 (square) and d20 (hexagon) shapes. Applied home team's dice_color to d6 dice, white for resolution d20, amber for chaos d20 when WP/PB triggered. Added automatic text contrast based on color luminance. Consolidated pitcher/batter cards below diamond with active card highlighting based on dice roll (d6_one: 1-3=batter, 4-6=pitcher). Backend: Added dice_color fields to GameState and runners_on_base param to roll_ab for chaos check skipping. Added 34 tests for DiceShapes component.