WebFund 2013F: Tutorial 8 - Revision history

Soma at 16:09, 25 October 2013

2013-10-25T16:09:14Z

← Older revision		Revision as of 16:09, 25 October 2013
Line 8:		Line 8:
	* Then, add a quit button:		* Then, add a quit button:
	** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.		** Add the button to the page in <tt>index.html</tt> (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 <tt>letterpaint.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the ~~sound~~ 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.)		** Style the quit button in a fashion similar to the info button in <tt>letterpaint.css</tt> (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 <tt>letterpaint.js</tt>:		** In <tt>letterpaint.js</tt>:
	*** Add a quitbutton variable similar to the one for sound or info.		*** Add a quitbutton variable similar to the one for sound or info.

Soma at 16:08, 25 October 2013

2013-10-25T16:08:25Z

← Older revision		Revision as of 16:08, 25 October 2013
Line 8:		Line 8:
	* Then, add a quit button:		* Then, add a quit button:
	** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.		** Add the button to the page in <tt>index.html</tt> (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 <tt>letterpaint.css</tt> (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.)		** Style the quit button in a fashion similar to the info button in <tt>letterpaint.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the sound 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 <tt>letterpaint.js</tt>:		** In <tt>letterpaint.js</tt>:
	*** Add a quitbutton variable similar to the one for sound or info.		*** Add a quitbutton variable similar to the one for sound or info.

Soma at 15:53, 25 October 2013

2013-10-25T15:53:00Z

← Older revision		Revision as of 15:53, 25 October 2013
Line 1:		Line 1:
	~~'''This tutorial is not yet finalized'''~~
	In this tutorial you will be modifying [https://homeostasis.scs.carleton.ca/~soma/webfund-2013f/letterpaint-demo.zip letterpaint-demo]. Note the client-side code is from [https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/ this HTML5 canvas tutorial].		In this tutorial you will be modifying [https://homeostasis.scs.carleton.ca/~soma/webfund-2013f/letterpaint-demo.zip letterpaint-demo]. Note the client-side code is from [https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/ this HTML5 canvas tutorial].

Mbingham at 14:16, 25 October 2013

2013-10-25T14:16:03Z

← Older revision		Revision as of 14:16, 25 October 2013
Line 9:		Line 9:
	* Then, add a quit button:		* Then, add a quit button:
	** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.		** Add the button to the page in <tt>index.html</tt> (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 <tt>~~letterscript~~.css</tt> (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.)		** Style the quit button in a fashion similar to the info button in <tt>letterpaint.css</tt> (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 <tt>letterpaint.js</tt>:		** In <tt>letterpaint.js</tt>:
	*** Add a quitbutton variable similar to the one for sound or info.		*** Add a quitbutton variable similar to the one for sound or info.

Soma at 02:23, 24 October 2013

2013-10-24T02:23:50Z

← Older revision		Revision as of 02:23, 24 October 2013
Line 9:		Line 9:
	* Then, add a quit button:		* Then, add a quit button:
	** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.		** Add the button to the page in <tt>index.html</tt> (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 <tt>letterscript.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the info button.		** Style the quit button in a fashion similar to the info button in <tt>letterscript.css</tt> (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 <tt>letterpaint.js</tt>:		** In <tt>letterpaint.js</tt>:
	*** Add a quitbutton variable similar to the one for sound or info.		*** Add a quitbutton variable similar to the one for sound or info.

Soma at 02:23, 24 October 2013

2013-10-24T02:23:09Z

← Older revision		Revision as of 02:23, 24 October 2013
Line 9:		Line 9:
	* Then, add a quit button:		* Then, add a quit button:
	** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.		** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.
	** Style the button in a fashion similar to the info button in <tt>letterscript.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the ~~sound~~ button.		** Style the quit button in a fashion similar to the info button in <tt>letterscript.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the info button.
	** In <tt>letterpaint.js</tt>:		** In <tt>letterpaint.js</tt>:
	*** Add a quitbutton variable similar to the one for sound or info.		*** Add a quitbutton variable similar to the one for sound or info.

Soma at 02:21, 24 October 2013

2013-10-24T02:21:53Z

← Older revision		Revision as of 02:21, 24 October 2013
Line 1:		Line 1:
	'''This tutorial is not yet finalized'''		'''This tutorial is not yet finalized'''
			In this tutorial you will be modifying [https://homeostasis.scs.carleton.ca/~soma/webfund-2013f/letterpaint-demo.zip letterpaint-demo]. Note the client-side code is from [https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/ this HTML5 canvas tutorial].

	~~To add a quit button:~~		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).
	* Add the ~~button to the page in <tt>index.html</tt> (make~~ it ~~the letter Q) similar to the information~~ and ~~sound buttons.~~
	* Style the button in a fashion similar to the info button in <tt>letterscript.css</tt> (look for the #infos attributes). Note ~~you will have to change~~ the ~~offset; otherwise the button will overlap~~ with the ~~sound button.~~
	* In <tt>letterpaint~~.js</tt>:~~
	** Add a quitbutton variable similar to the ~~one for sound or info.~~
	** Add an event listener for the quit button, referring to a <tt>quit()</~~tt> callback function.~~
	** Define <tt>quit(~~)</tt>, having it set the value of <tt>window.location</tt>~~ to be the ~~URL you wish to visit when you quit ("/"~~).

	~~Tasks~~:		Do the following:
	* 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.		* First, play with the game normally and using the developer tools to inspect the page.
	* '''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.		* Then, add a quit button:
			** Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.
			** Style the button in a fashion similar to the info button in <tt>letterscript.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the sound button.
			** In <tt>letterpaint.js</tt>:
			*** Add a quitbutton variable similar to the one for sound or info.
			*** Add an event listener for the quit button, referring to a <tt>quit()</tt> callback function.
			*** Define <tt>quit()</tt>, having it set the value of <tt>window.location</tt> 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.

Soma at 01:48, 24 October 2013

2013-10-24T01:48:37Z

← Older revision		Revision as of 01:48, 24 October 2013
Line 8:		Line 8:
	** Add an event listener for the quit button, referring to a <tt>quit()</tt> callback function.		** Add an event listener for the quit button, referring to a <tt>quit()</tt> callback function.
	** Define <tt>quit()</tt>, having it set the value of <tt>window.location</tt> to be the URL you wish to visit when you quit ("/").		** Define <tt>quit()</tt>, having it set the value of <tt>window.location</tt> to be the URL you wish to visit when you quit ("/").

			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.

Soma: Created page with "'''This tutorial is not yet finalized''' To add a quit button: * Add the button to the page in `index.html` (make it the letter Q) similar to the information and sound..."

2013-10-24T01:38:07Z

Created page with "'''This tutorial is not yet finalized''' To add a quit button: * Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound..."

New page

'''This tutorial is not yet finalized'''

To add a quit button:
* Add the button to the page in <tt>index.html</tt> (make it the letter Q) similar to the information and sound buttons.
* Style the button in a fashion similar to the info button in <tt>letterscript.css</tt> (look for the #infos attributes). Note you will have to change the offset; otherwise the button will overlap with the sound button.
* In <tt>letterpaint.js</tt>:
** Add a quitbutton variable similar to the one for sound or info.
** Add an event listener for the quit button, referring to a <tt>quit()</tt> callback function.
** Define <tt>quit()</tt>, having it set the value of <tt>window.location</tt> to be the URL you wish to visit when you quit ("/").

WebFund 2013F: Tutorial 8 - Revision history

Soma at 16:09, 25 October 2013

Soma at 16:08, 25 October 2013

Soma at 15:53, 25 October 2013

Mbingham at 14:16, 25 October 2013

Soma at 02:23, 24 October 2013

Soma at 02:23, 24 October 2013

Soma at 02:21, 24 October 2013

Soma at 01:48, 24 October 2013

Soma: Created page with "'''This tutorial is not yet finalized''' To add a quit button: * Add the button to the page in index.html (make it the letter Q) similar to the information and sound..."

Soma: Created page with "'''This tutorial is not yet finalized''' To add a quit button: * Add the button to the page in `index.html` (make it the letter Q) similar to the information and sound..."