There are 2 screens:
Game screen: this is the screen user will see when the page is loaded initially. Upload open, the game will be setup using default settings (4 Truckers, $1000 fund).
When "Start Race" is clicked, the truckers will proceed automatically to the end of line. The winner should be decided randomly by the computer each time (a small bias can be added so each trucker has a different chance of winning in the long run).
After each run, if the player bets on the trucker that has won, the money will be returned to him in double. For example, if the player bets on the green trucker for $500 and it wins, total $1000 will be added back to player's account. However, if bet is placed on wrong losing trucker, the $500 bet will be lost.
Game Setup screen: when user clicks the "Reset" button, the Game Setup screen will be open. This is a different screen from the Game screen but still in the same HTML page.
The previous bets will be cleared (not remembered) after each race.
The “Start Race” button should not be active (clickable) until a bet has been placed.
A player cannot bet more than the current balance in their account. e.g. If a player has a balance of
$100, they cannot bet more than $100 for that race.
The game is over when a player’s account balance is 0 and user need to reset to restart
This is a client side application running in a browser, do not create a server side.
The application should be able to adapt to all screen sizes.
You can use image resources provided.
Although this is a very simple application, it should be well structured such that new features/screens can be added over time without major re-factoring.
The wireframes are a guideline for the UI. You are welcome to use an alternate design/layout that improves upon the usability of these wireframes.