Background Paths
Background Paths
Back to Blog

PIG Dice Game: Tiny UI, Clear State, Fun UX

Published on 10th December 2023 - 10:10

This was a pure front‑end exercise: build the classic PIG dice game with semantic HTML, SASS, and vanilla JavaScript. I focused on three things: (1) readable state transitions (idle → rolling → locked), (2) tight DOM updates to avoid layout thrash, and (3) tiny interactions that make it feel ‘alive’ (roll animation, subtle shake on busts). The game uses a simple state machine and ARIA live regions so screen readers announce score changes. Why it matters: small projects are where you practice restraint. Clear state + clear DOM updates = predictable UI, which scales to larger apps.