Skip to content

Commit

Permalink
ucfopen#9 Cleaned up some vocabulary, moved some stuff around, still …
Browse files Browse the repository at this point in the history 
…trying to figure stuff out.
  • Loading branch information
@FrenjaminBanklin
FrenjaminBanklin committed May 24, 2019
1 parent 365e44d commit f39c51d
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 34 deletions.
41 changes: 27 additions & 14 deletions src/player.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,16 @@ 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 select the first letter tile for this word in the answer grid. Press the Tab key to move to the submit button. '
CLUE_CHECK_TEXT = 'Press the C key to check if all of this word\'s letters have been filled in. '
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. '
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 clue in the letter grid. Press the Tab key to move to the submit button. '
CLUE_CHECK_TEXT = 'Press the C key to check if all of this clue\'s letters have been filled in. '
CLUE_HINT_TEXT = 'Press the H key to receive a hint and reduce the value of a correct answer to this clue by '
CLUE_FREE_WORD_TEXT = 'Press the F key to have this clue\'s letter tiles in the letter grid filled in automatically. '

BOARD_HELP_TEXT = 'Hold the Alt key and press the I key to receive additional instructions. '
BOARD_CLUE_TEXT = 'Hold the Alt key and press the C key to hear the clue or clues for this space. '
BOARD_LETTERS_TEXT = 'Hold the Alt key and press the W key to hear the letters currently provided for the word or words this space is in. '
BOARD_LOCATION_TEXT = 'Hold the Alt key and press the L key to describe the spaces adjacent to this space. '
BOARD_BASE_TEXT = 'Press the Tab key to return to the clue list. Press the Return or Enter key to select the next word and automatically move to the first letter tile for that word. '
BOARD_CLUE_TEXT = 'Hold the Alt key and press the C key to hear the clue or clues this tile is included in. '
BOARD_LETTERS_TEXT = 'Hold the Alt key and press the W key to hear the letters currently provided for the clue or clues this tile is included in. '
BOARD_LOCATION_TEXT = 'Hold the Alt key and press the L key to describe the tiles adjacent to this tile. '
BOARD_BASE_TEXT = 'Press the Tab key to return to the clue list. Press the Return or Enter key to select the next clue and automatically move to the first letter tile for that clue. '

# Called by Materia.Engine when your widget Engine should start the user experience.
start = (instance, qset, version = '1') ->
Expand Down Expand Up @@ -117,6 +117,7 @@ Namespace('Crossword').Engine = do ->

# once everything is drawn, set the height of the player
Materia.Engine.setHeight()
_dom('widget-header').focus()

# getElementById and cache it, for the sake of performance
_dom = (id) -> _domCache[id] || (_domCache[id] = document.getElementById(id))
Expand Down Expand Up @@ -166,7 +167,11 @@ Namespace('Crossword').Engine = do ->
$('#board').keydown _boardKeyDownHandler
$('#printbtn').click (e) ->
Crossword.Print.printBoard(_instance, _questions)
$('#printbtn').keyup (e) ->
if e.keyCode is 13 then Crossword.Print.printBoard(_instance, _questions)
$('#zoomout').click _zoomOut
$('#zoomout').keyup (e) ->
if e.keyCode is 13 then _zoomOut()
$('#alertbox .button.cancel').click _hideAlert
$('#checkBtn').click ->
_showAlert "Are you sure you're done?", 'Yep, Submit', 'No, Cancel', _submitAnswers
Expand Down Expand Up @@ -488,7 +493,8 @@ Namespace('Crossword').Engine = do ->
_updateClueReader()
when 72 #h
unless _questions[_curClue].options.hint is '' or _usedHints[_curClue]
_getHint _curClue
# _getHint _curClue
_hintConfirm {target: $('#hintbtn_'+_curClue)[0]}
_updateClueReader()
when 73 #i
clue = _questions[_curClue]
Expand Down Expand Up @@ -620,7 +626,7 @@ Namespace('Crossword').Engine = do ->

_describeLocationForCurrentLetter = ->
# describe the letter's location and current value
combinedLocationText = _getWordPositionForCurrentLetter()
combinedLocationText = 'Current location: ' + _getWordPositionForCurrentLetter()
# also describe the letters in adjacent cells
above = _checkLetterInLocation _curLetter.x, _curLetter.y - 1
left = _checkLetterInLocation _curLetter.x - 1, _curLetter.y
Expand Down Expand Up @@ -688,7 +694,7 @@ Namespace('Crossword').Engine = do ->
else
combinedMessage += 'Last character: ' + lastKey.toUpperCase() + '. '

combinedMessage += _getWordPositionForCurrentLetter()
combinedMessage += 'Current location: ' + _getWordPositionForCurrentLetter()

combinedMessage += BOARD_HELP_TEXT

Expand Down Expand Up @@ -900,7 +906,7 @@ Namespace('Crossword').Engine = do ->
return if e.target.classList.contains 'disabled'
# only do it if the parent clue is highlighted
if _dom('clue_' + e.target.getAttribute('data-i')).classList.contains 'highlight'
_showAlert "Receiving a hint will result in a #{_qset.options.hintPenalty}% penalty for this question", 'Okay', 'Nevermind', ->
_showAlert "Receiving a hint will result in a #{_qset.options.hintPenalty}% penalty for this question.", 'Okay', 'Nevermind', ->
_getHint e.target.getAttribute 'data-i'

# fired by the free word buttons
Expand Down Expand Up @@ -990,7 +996,6 @@ 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
Expand All @@ -1002,12 +1007,20 @@ Namespace('Crossword').Engine = do ->
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.'
question = _questions[unfinishedWord]
missing = null
for index in Object.keys question.locations
location = question.locations[index]
missing = location.index + 1 if _dom("letter_#{location.x}_#{location.y}").value == ''

_dom('submit-progress-reader').innerHTML = question.prefix + ' is missing a letter in position ' + missing + '.'

_dom('checkBtn').classList.remove 'done'
$('.arrow_box').hide()

Expand Down
58 changes: 38 additions & 20 deletions src/player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,50 @@
<meta charset="utf-8" />

<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="player.css" data-embed>
<link rel="stylesheet" type="text/css" href="player.css">
<link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,300|Delius+Unicase' rel='stylesheet' type='text/css'>

<!-- REQUIRED MATERIA JAVASCRIPT -->
<script src="materia.enginecore.js"></script>

<!-- OPTIONAL MATERIA JAVASCRIPT -->
<script src="print.js" data-embed></script>

<!-- YOUR PREREQUISITES -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="hammer.min.js"></script>

<!-- MAIN PLAYER SCRIPT -->
<script src="player.js" data-embed></script>
<script src="player.js"></script>
</head>

<body>
<div class="header"
aria-labelledby='title'
tabindex='1'>
<div id='widget-header'
class='header'>
<div class='logo'></div>
<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>
<h1 id='title' aria-describedby='widget-reader' tabindex='1'></h1>
<div id='title-instructions' class='reader-instructions'>Use the Tab key to select the list of clues.</div>
<div id='keyboard-instructions'
class='invisible-until-focused button'
aria-labelledby='title-instructions'
tabindex='2'>
Keyboard Instructions
</div>
<div id='printbtn'
class='icon-print'
title='Print'
aria-label='Print. Press the Enter key to produce a printout for this Crossword puzzle.'
tabindex='6'></div>
<div id='zoomout'
class='icon-zoomout'
title='Zoom Out'
aria-label='Zoom Out. Press the Enter key to select the letter grid.'
tabindex='7'></div>
<div class='submitholder'>
<div id='submit-progress-reader' class='reader-instructions'>There are empty letter tiles.</div>
<input id='checkBtn'
type='button'
class='submit button'
value='Submit Answers'
aria-describedby='submit-progress-reader'
tabindex='3'>
tabindex='4'>
</div>
</div>
<div id='board-reader' class='reader-instructions' aria-live='polite'></div>
Expand All @@ -53,14 +63,14 @@
<div id='clues'
role='list'
aria-describedby='clue-reader'
tabindex='2'>
tabindex='3'>
<span style='display:none'>Clues</span>
</div>

<div id='controlbar'>
<span id='freeWordsRemaining'
tabindex='-1'
aria-hidden>
<div id='controlbar'
tabindex='-1'
aria-hidden>
<span id='freeWordsRemaining'>
</span>
</div>
<div id='specialInput' class='down'>
Expand Down Expand Up @@ -98,10 +108,18 @@
</div>

<div id='backgroundcover' class='fade'></div>
<div id='alertbox' class='fade' tabindex='4'>
<div id='alertbox'
class='fade'
aria-labelledby='alertcaption alert-instructions'
tabindex='5'>
<div id='alertcaption'></div>
<input id='cancelbtn' class='cancel button' type='button'>
<div id='alert-instructions' class='reader-instructions'>Use the Tab key to cancel or confirm.</div>
<input id='cancelbtn'
aria-label='Cancel.'
class='cancel button'
type='button'>
<input id='okbtn'
aria-label='Confirm.'
type='button'
class='submit button'
aria-describedby='submit-progress-reader'>
Expand Down
12 changes: 12 additions & 0 deletions src/player.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -535,4 +535,16 @@ input {
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}

.invisible-until-focused {
opacity: 0;
position: absolute;
right: 50%;
top: 70px;
text-align: center;
display: inline-block;
}
.invisible-until-focused:focus {
opacity: 1;
}

0 comments on commit f39c51d

Please sign in to comment.