WebFund 2013F: Tutorial 8

In this tutorial you will be modifying letterpaint-demo. Note the client-side code is from this HTML5 canvas tutorial.

First, download the app, unzip it, and get it running as usual. Note this app is just the default express application with the letterpaint game added to the public/ directory (and minor modifications to the index page).

Do the following:

• First, play with the game normally and using the developer tools to inspect the page.
• Then, add a quit button:
  • Add the button to the page in index.html (make it the letter Q) similar to the information and sound buttons.
  • Style the quit button in a fashion similar to the info button in letterpaint.css (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the info button. (If you do not customize the CSS for the button at all, it will take on the default navbutton properties and overlap with the sound button.)
  • In letterpaint.js:
    • Add a quitbutton variable similar to the one for sound or info.
    • Add an event listener for the quit button, referring to a quit() callback function.
    • Define quit(), having it set the value of window.location to be the URL you wish to visit when you quit ("/").
• Finally, do one or more of the following tasks:
  • Make the info screen be dismissed when you click anywhere on it (rather than just by clicking on the info button again).
  • Add a counter to the bottom right that tracks the score - how many letters have been traced correctly.
  • Bonus (HARD): Send scores to the server on quit. Save the highest score and have that displayed somewhere in the letterpaint game (say, in the middle of the top bar). The high score should be updated from the server at the start of every game.