Program a HTML5 interface that simulates a vertical slot machine. The interface will work with touch screen or mouse. The user will be able to “pull” the leaver to initiate the “wheel” spin or manually set the “wheels” and push a button to post the options selected. The interface should be sized for a phone in portrait mode. The design will match the attached image.
Modes:
1. Pull the leaver:
a. The user pulls the leaver:
i. Leaver will animate a “snap” movement with a bit of a bounce at the end to simulate a spring-loaded, return to start position.
ii. The three “wheels” will rapidly “spin”
iii. A pleasant casino sound will play
iv. A call to an external page that will return:
1. Ways value
2. Forms value
3. Accents value
4. Number of results
v. The interface will stop the wheels spinning, one at a time in order (1. Ways, 2. Forms, 3. Accents). For each wheel, the animation will “bounce” to simulate a quick, mechanical stop on the value returned by the external page in step [login to view URL] and play a quick “stopping” sound.
1. NOTE: if no value is returned for Ways, Forms, or Accents, the “All” option will be the default
vi. Once the final wheel has “stopped” a “winner” sound will play and the system will show a pop-up that displays the number of results and a button to view the results.
2. Get Photos:
a. The user manually selects the “Ways”, “Forms”, “Accents”, and “Cascades Only”
b. Pushes the button
i. Call to an external page using “GET” that has the options the user selected “Ways”, “Forms”, “Accents”, and “Cascades Only”).
c. Page returns number of results
i. If there is one or more result, a “winner” sound will play and the system will show a pop-up that displays the number of results and a button to view the results.
ii. If there are no results, a “looser” sound will play and the system will show a popup that states: “There are no matches at this time. Would you like to upload an image?” with a button link to another page and a button to close the popup page.