ucfopen#9 Tab order is worked out, letter grid highlighting fixed and…

… it seems like repetitive readings have been squashed.
FrenjaminBanklin · May 20, 2019 · e7df88d · e7df88d
1 parent ea7bea4
commit e7df88d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/src/player.coffee b/src/player.coffee
@@ -61,7 +61,7 @@ Namespace('Crossword').Engine = do ->
 	NEXT_RECURSE_LIMIT    = 8 # number of characters in a row we'll try to jump forward before dying
 
 	CLUE_HELP_TEXT        = 'Press the I key to receive additional instructions. '
-	CLUE_BASE_TEXT        = 'Use the Up and Down arrow keys to navigate between clues. Press the Return or Enter key to automatically select the answer grid and move to the first letter tile for this word. '
+	CLUE_BASE_TEXT        = 'Use the Up and Down arrow keys to navigate between clues. Press the Return or Enter key to select the first letter tile for this word in the answer grid. Press the Tab key to move to the submit button. '
 	CLUE_HINT_TEXT        = 'Press the H key to receive a hint and reduce this answer\'s value by '
 	CLUE_FREE_WORD_TEXT   = 'Press the F key to have this word\'s letters filled in automatically. '
 
@@ -162,8 +162,6 @@ Namespace('Crossword').Engine = do ->
 		# keep focus on the last letter that was highlighted whenever we move the board around
 		$('#board').click -> _highlightPuzzleLetter false
 
-		$('#board').focus -> _boardFocused
-
 		$('#board').keydown _boardKeyDownHandler
 		$('#printbtn').click (e) ->
 			Crossword.Print.printBoard(_instance, _questions)
@@ -501,11 +499,9 @@ Namespace('Crossword').Engine = do ->
 				preventDefault = false
 		if preventDefault then keyEvent.preventDefault()
 
-	_boardFocused = () ->
-		_dom('board-reader').innerHTML = ''
-		_updateClue()
-
-	_cluesFocused = () ->
+	_cluesFocused = (e) ->
+		console.log 'clue list focused'
+		e.preventDefault()
 		_dom('clue-reader').innerHTML = ''
 		_updateClueReader()
 
@@ -520,6 +516,7 @@ Namespace('Crossword').Engine = do ->
 			_curClue++
 			if _curClue >= _questions.length then _curClue = 0
 
+		target = {target: $('#clue_'+_curClue)[0]}
 		_clueMouseOver target
 		_updateClueReader()
 
@@ -732,7 +729,7 @@ Namespace('Crossword').Engine = do ->
 				_highlightPuzzleLetter()
 				return
 			when 9
-				preventDefault = false
+				return
 			when 13 #enter
 				# go to the next clue, based on the clue that is currently selected
 				highlightedClue = $(".clue.highlight")
@@ -971,18 +968,24 @@ Namespace('Crossword').Engine = do ->
 
 	# highlight submit button if all letters are filled in
 	_checkIfDone = ->
+		console.log 'HERE BE THE NEW CHECKS?'
+		_dom('submit-progress-reader').innerHTML = ''
 		done = true
+		unfinishedWord = null
 
 		forEveryQuestion (i, letters, x, y, dir) ->
 			forEveryLetter x, y, dir, letters, (letterLeft, letterTop, l) ->
 				if letters[l] != ' '
 					if _dom("letter_#{letterLeft}_#{letterTop}").value == ''
+						unfinishedWord = _dom("letter_#{letterLeft}_#{letterTop}").getAttribute('data-q')
 						done = false
 						return
 		if done
 			$('.arrow_box').show()
 			_dom('checkBtn').classList.add 'done'
+			_dom('submit-progress-reader').innerHTML = 'All characters filled.'
 		else
+			_dom('submit-progress-reader').innerHTML = 'There are empty letter tiles.'
 			_dom('checkBtn').classList.remove 'done'
 			$('.arrow_box').hide()
 

diff --git a/src/player.html b/src/player.html
@@ -25,30 +25,30 @@
 	<body>
 		<div class="header"
 			aria-labelledby='title'
-			aria-describedby='instructions'
 			tabindex='1'>
 			<div class='logo'></div>
-			<h1 id='title'></h1>
+			<h1 id='title'
+				aria-label='Use the Tab key to select the list of clues.'></h1>
 			<div class='icon-print' id='printbtn' title='Print' aria-hidden></div>
 			<div class='icon-zoomout' id='zoomout' title='Zoom Out' aria-hidden></div>
-			<div id='instructions'
-				class='reader-instructions'>
-				Use the Tab key to switch between the list of words and the answer grid.
-			</div>
+			<div id='submit-progress-reader' class='reader-instructions'>There are empty letter tiles.</div>
 			<div class='submitholder'>
-				<input type='button' id='checkBtn' class='button submit' value='Submit Answers' tabindex='4'>
+				<input type='button' id='checkBtn'
+					class='button submit'
+					value='Submit Answers'
+					aria-describedby='submit-progress-reader'
+					tabindex='3'>
 			</div>
 		</div>
 		<div id='board-reader' class='reader-instructions' aria-live='polite'></div>
 		<div id="board" class="screen board"
-			aria-describedby='board-reader'
-			tabindex='3'>
+			aria-describedby='board-reader'>
 			<div id="movable-container">
 				<div id='movable' class='crossword-board'></div>
 			</div>
 		</div>
 
-		<div id='clue-reader' class='reader-instructions' aria-live='polite'></div>
+		<div id='clue-reader' class='reader-instructions'></div>
 		<div id='clues'
 			role='list'
 			aria-describedby='clue-reader'