How the Casino Count pages work
Currently, the Casino Count environment houses 2 countdowns: NYE and Three Months, Three Millionaires (3M3M). This article will talk about the 3M3M set up.
The Countdown Pages
Titled “Next Drawing” and “Next Drawing (Vertical),” these two pages are powered by ACF fields on “Next Drawing.” The background is set with the Featured Image. Each page is displayed on 1080p screens, so the pages should always be designed for 1080p screens (landscape or portrait).
The UX
When the countdown ends, some Javascript fires to set the main element to display:none!important;. The Casino associates then draw a winner, update the “Winner” page and then navigate to it.
Scoping Styles and ACF Fields
Both the styles and ACF fields are scoped to the page templates, and each page template has .three-months class (and/or a modifier like .three-months__vertical).
The Gradient
The gradient is built with PHP so that its colors can be set with ACF fields.