ucfopen#30 Added buttons to reach the keyboard instructions and intro…

… screen in the sidebar. Refreshed icomoon files and renamed 'tutorial' to 'instructions'.

src/creator.scss

@@ -158,7 +158,7 @@ body {
 					content: ' ';
 				}
 				&:after {
-					content: "\e600";
+					content: "\e984";
 					font-family: 'icomoon';
 					position:absolute;
 					top: 50%;
@@ -221,11 +221,11 @@ h1 {
 }
 
 .icon-spinner2:before {
-	content: "\e600";
+	content: "\e984";
 }
 .icon-close {
 	&:before {
-		content: "\e602";
+		content: "\ea0f";
 		font-size: 20px;
 	}
 
@@ -237,7 +237,7 @@ h1 {
 	}
 }
 .icon-plus:before {
-	content: "\e601";
+	content: "\ea0a";
 }
 
 div.criticism {
@@ -608,4 +608,4 @@ input[type=checkbox]:checked + label.checktoggle {
 	100% {
 		transform: translate(0px,0px);
 	}
-}
+}

src/player.coffee

@@ -84,33 +84,42 @@ Namespace('WordSearch').Engine = do ->
 
 		document.getElementById('intro-instructions').addEventListener 'keypress', ->
 			_showKeyboardInstructions()
-			document.getElementById('tutorial-dismiss').focus()
+			document.getElementById('instructions-dismiss').focus()
 		document.getElementById('intro-instructions').addEventListener 'click', _showKeyboardInstructions
 
-		document.getElementById('intro-dismiss').addEventListener 'keypress', (e) ->
-			e.preventDefault()
-			e.stopPropagation()
+		document.getElementById('intro-dismiss').addEventListener 'keypress', ->
 			_introDismissed = true
 			_makeBoardUsable()
 			# questionable timeout to avoid this keypress being picked up by the board after it receives focus
 			setTimeout (->
 				document.getElementById('board').focus()
 			), 100
 
-		document.getElementById('intro-dismiss').addEventListener 'click', () ->
+		document.getElementById('intro-dismiss').addEventListener 'click', ->
 			_introDismissed = true
 			_makeBoardUsable()
 
-		document.getElementById('tutorial-dismiss').addEventListener 'keypress', (e) ->
-			e.preventDefault()
-			e.stopPropagation()
+		document.getElementById('instructions-dismiss').addEventListener 'keypress', ->
 			_hideKeyboardInstructions()
-			document.getElementById('intro-instructions').focus()
+			if _introDismissed
+				document.getElementById('show-instructions').focus()
+			else
+				document.getElementById('intro-instructions').focus()
 
-		document.getElementById('tutorial-dismiss').addEventListener 'click', _hideKeyboardInstructions
+		document.getElementById('instructions-dismiss').addEventListener 'click', _hideKeyboardInstructions
 
 		document.getElementById('board').addEventListener 'keyup', _handleBoardKeyupEvent
 
+		document.getElementById('show-intro').addEventListener 'keypress', ->
+			_showIntro()
+			document.getElementById('intro-instructions').focus()
+		document.getElementById('show-intro').addEventListener 'click', _showIntro
+
+		document.getElementById('show-instructions').addEventListener 'keypress', ->
+			_showKeyboardInstructions()
+			document.getElementById('instructions-dismiss').focus()
+		document.getElementById('show-instructions').addEventListener 'click', _showKeyboardInstructions
+
 		document.getElementById('checkbtn').addEventListener 'click', _confirmDone
 		document.getElementById('checkbtn').addEventListener 'keyup', _doneButtonKeyupEvent
 
@@ -123,19 +132,24 @@ Namespace('WordSearch').Engine = do ->
 		# once everything is drawn, set the height of the player
 		Materia.Engine.setHeight()
 
+	_showIntro = ->
+		_introDismissed = false
+		_showbyId 'intro'
+
 	_showKeyboardInstructions = ->
-		document.getElementById('tutorial').removeAttribute('inert')
-		document.getElementById('tutorial').classList.add 'show'
+		# document.getElementById('instructions').removeAttribute('inert')
+		# document.getElementById('instructions').classList.add 'show'
+		_showbyId 'instructions'
 
 		# this isn't strictly necessary but doing it every time doesn't hurt
 		document.getElementById('intro').setAttribute('inert', 'true')
 
 	_hideKeyboardInstructions = ->
 		if _introDismissed
-			_makeBoardUsable
+			_makeBoardUsable()
 		else
 			document.getElementById('intro').removeAttribute 'inert'
-			_hideById 'tutorial'
+			_hideById 'instructions'
 
 	# show confirmation menu and autofocus the cancel button
 	_doneButtonKeyupEvent = (e) ->
@@ -302,10 +316,10 @@ Namespace('WordSearch').Engine = do ->
 
 	# show the "are you done" warning
 	_confirmDone = ->
-		document.getElementById('game').setAttribute('inert', 'true')
 		_showbyId 'confirm'
 
 	_showbyId = (targetId) ->
+		document.getElementById('game').setAttribute('inert', 'true')
 		document.getElementById(targetId).removeAttribute 'inert'
 		document.getElementById(targetId).classList.add 'show'
 		document.getElementById('backgroundcover').classList.add 'show'
@@ -315,14 +329,14 @@ Namespace('WordSearch').Engine = do ->
 		document.getElementById(targetId).classList.remove 'show'
 
 	_makeBoardUsable = ->
-		document.getElementById('game').removeAttribute('inert')
-		# rather than have multiple functions to do the same thing, inert all the dialogs
+		# rather than have multiple functions to do the same thing, hide/inert all the dialogs
 		_hideById 'confirm'
 		_hideById 'intro'
-		_hideById 'tutorial'
-
+		_hideById 'instructions'
 		document.getElementById('backgroundcover').classList.remove 'show'
 
+		document.getElementById('game').removeAttribute('inert')
+
 	_hideConfirmationDialog = (e) ->
 		_makeBoardUsable()
 		# a keyboard event triggered this, autofocus the 'done' button

src/player.html

@@ -22,6 +22,14 @@
 				<canvas id='canvas' width=620 height=550></canvas>
 			</div>
 			<div id='sidebar' class='main-element'>
+				<div>
+					<button id='show-intro'
+						class='icon-tutorial'>
+					</button>
+					<button id='show-instructions'
+						class='icon-keyboard'>
+					</button>
+				</div>
 				<h1>Terms</h1>
 				<div id='terms'></div>
 				<div id='checkbtn'
@@ -63,7 +71,7 @@ <h1>Terms</h1>
 					Let's Go
 				</button>
 			</dialog>
-			<dialog id='tutorial'>
+			<dialog id='instructions'>
 				<div class='caption'>
 					<header>Keyboard Controls</header>
 					<p>
@@ -81,10 +89,10 @@ <h1>Terms</h1>
 					</p>
 					<p>
 						When you have selected a range of letters, press <span class='bold'>space</span> again to finalize the selection.
-						If the selected range corresponds to one of the words in the term list, it will be marked as complete.
+						If the selected range corresponds to one of the words in the term list, it will be marked as found.
 					</p>
 				</div>
-				<button id='tutorial-dismiss' class='submit action-button'>
+				<button id='instructions-dismiss' class='submit action-button'>
 					Okay
 				</button>
 			</dialog>

src/player.scss

@@ -5,6 +5,50 @@ $green: #70bd34;
 	padding:0px;
 }
 
+@font-face {
+	font-family: 'icomoon';
+	src:url('assets/font/icomoon.eot');
+	src:url('assets/font/icomoon.eot?#iefix') format('embedded-opentype'),
+		url('assets/font/icomoon.ttf') format('truetype'),
+		url('assets/font/icomoon.woff') format('woff'),
+		url('assets/font/icomoon.svg#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class*="icon-"] {
+	font-family: 'icomoon';
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	font-size: 20px;
+	color: #fff;
+	border: none;
+	outline: none;
+	background: none;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	margin-right: 8px;
+	cursor: pointer;
+	transition: linear 0.075s;
+
+	&:hover,
+	&:focus {
+		color: $green;
+	}
+}
+
+.icon-tutorial:before {
+	content: "\ea09";
+}
+.icon-keyboard:before {
+	content: "\e955";
+}
+
 body {
 	background: #2f3944;
 	font-family: 'Ruda', arial;
@@ -64,7 +108,7 @@ button {
 }
 
 #intro,
-#tutorial,
+#instructions,
 #confirm {
 	display: none;
 	margin: 0 auto;