This is Bart's sample solution for the challenge set at the end of instalment 77 of the Programming by Stealth series.
This game is built using the components listed below. We've looked at most of these components in detail at various points throughout the series, but there are a few we've not seen before.
Previously Seen Components
- The Bootstrap Grid
- The entire page is layed out using the Bootstrap Grid.
- A Bootstrap Navigation Bar
- The main menu at the top of the game is a Bootstrap Navbar.
- A Bootstrap Spinner
- While the game-play interface is loading a Bootstrap Spinner is displayed.
- Bootstrap Alerts
- The user feedback above and below the grid of buttons is rendered using Bootstrap Alerts.
- Bootstrap Button Groups
- The buttons for guessing numbers are grouped together as Bootstrap Button Groups.
- Bootstrap Modal Dialogues
- The messages shown to users when they give up or win are rendered as Bootstrap Modals.
- jQuery
- The jQuery library is used liberally throught the code. It's used to add all the event handlers, to fetch the random number from the server via AJAX, to manipulate the DOM to change the look of guess buttons after they have been guessed, and to interact with various Bootstrap components including the Modals and Popovers.
- Mustache
- The game UI and all messages to the player are generated using Mustache templates.
- Font Awesome 5
- The various gliphicons used throught the interface are all from the free version of Font Awesome 5.
Un-seen Components
- The is.js Micro-check Library
- Data validation is done using the wonderfully intuitive is.js type checking library.
- Bootstrap Popovers
- The small messages that appear under the buttons when the player makes a guess are Bootstrap Popovers.
- A Bootstrap Card
- This asside is rendered as a Bootstrap Card.