A Javascript application which creates a wheel-of-fortune using HTML5 Canvas.
This is a personal toy web application created in 2015 to explore HTML5 Canvas and the development workflow for a Javascript project which was state of the art at that time. I chose Backbone as the application framework and Grunt for task automation. For easy data manipulation, I wanted to load the wheel data from a google spreadsheet using the Google Sheets API.
After 7 year of inactivity, in 2021, I updated the app to use the Goggle Sheets API V4 API. V3 has been deactivated in 2020. Other major changes include a migration from bower to yarn, updated dependencies and support for Hi-DPI displays.
- Create a a Google spreadsheet with the first column holding the labels and the second the selection weight of each element (see this example) and publish it.
- Clone this repository and rename Gruntfile.sample.js as Gruntfile.js and edit the initialRoute parameter in the template task (<sheet_id> is the key of your spreadsheet as defined by the Google Sheets API and <api_key> an API key which authorizes the requests).
- Run
yarn install && yarn exec grunt build server, which builds the app in the build/ directory and starts a server at localhost:7878 with this directory as it's root. Open a browser and enter the URL of the server. - Spin the wheel ;)