This is a practice Ruby Haxe Haxe + OpenFL JavaScript / CSS3 project. To simulate... DICE.
What can a die do? Well. It can roll.
What properties are of it? It has 6 sides (typically, though some DnD ones have more). What happens when a die is rolled? It lands! One one of the six sides. The die then shows the result. And the roll is complete. So we have a begin state. A rolling state. Rolls typically take a few seconds. And the final result state. In which the roll is complete, and the result is displayed for us all to see.
Application's execution goes something like this:
---> Ai ---> Display --> Input --- (and repeat)
Ai() does the heavy lifting and logic.
Display() renders stuff to the screen.
Input() accepts user input, translates it for Ai.
Organizing & separating code into these three paradigms, then enforcing consistent flow between them - seems to help one keep a good mental model of the app's execution flow. Or maybe it's just CRA-ZAY.
For the homescreen UI animations:
daneden.me/animate/
For an excellent primer on 3D CSS:
desandro.github.io/3dtransforms/
Handy way to auto-prefix CSS:
github.com/ai/autoprefixer/
Works in Firefox, Chrome/Safari