# (neighbors, above, down)
init_board_layout()
-$selection_display = null # initialized by init_html_board
+$big_tip = null # initialized by init_html_board
+$little_tip = null # initialized by init_html_board
$score_display = null # initialized by init_html_board
$definition_body = null # initialized by init_html_board
update_selection_display = ->
word = selected_word()
- $selection_display.html word
+ $big_tip.removeClass('good')
+ if word.length > 0
+ $big_tip.html word
+ if word.length < 3
+ $little_tip.html "Click more tiles (3 minimum)"
+ else
+ if is_word word
+ if word.indexOf(word.substr(word.length - 1)) < word.length - 1
+ last = 'last '
+ else
+ last = ''
+ $little_tip.html "Click the #{last}\"#{word.substr(word.length - 1)}\" for #{score_for word} points"
+ $big_tip.addClass('good')
+ else
+ $little_tip.html "\"#{word}\" is not in the word list."
+ else
+ $big_tip.html "← Click a word"
+ $little_tip.html "(tiles must be touching)"
# color the selected tiles according to whether they're a word or not
if word.length
sliders[i] = false
save_game()
+score_for = (word) -> Math.round(Math.pow(1.7, word.length))
+
activate_selection = ->
word = selected_word()
if word.length < 3
# FIXME make this automatically part of the selection display
log "Not on word list: \"#{word}\""
return
- word_score = Math.round(Math.pow(1.7, word.length))
+ word_score = score_for word
score += word_score
$score_display.html score
# FIXME make some kind of animation showing score gain
html_tiles = []
init_html_board = ->
$('#loading').remove()
- $selection_display = $('#selection')
+ $big_tip = $('#big_tip')
+ $little_tip = $('#little_tip')
$score_display = $('#score')
$score_display.html score
$definition_body = $('#definition_body')
look_up_definition = (word) ->
- $definition_body.html "Looking up definition for \"#{word}\"."
+ $definition_body.html "Looking up definition for \"#{word}\"..."
$.ajax({
url: "http://en.wiktionary.org/w/api.php?action=parse&format=json&page=#{word}"
jsonpCallback: "lud_#{word}" # always use the same callback for the same word so it's cacheable
init_board()
init_html_board()
init_start_over_link()
+ update_selection_display()
$(init_game)
@board-height: @board-inner-height + @board-pad * 2;
@column-pad: 10px;
@right-width: 250px;
-@tabs-top: 120px;
+@tabs-top: 150px;
@tabtab-height: 20px; // also in main.coffee
@tab-height: 150px; // also in main.coffee
@tab-pad: 5px;
@tab-color: #ddf;
@tabtab-color: darken(@tab-color, 3%);
+@selected-color: #ffa;
+@selected-good-color: #cfc;
body {
background: #eef;
height: @tabtab-height * 4 + @tab-height;
width: @right-width;
}
+ #big_tip {
+ font-size: 24px;
+ font-weight: bold;
+ color: darken(@selected-color, 66%);
+ text-align: center;
+ }
+ #big_tip.good {
+ color: darken(@selected-good-color, 66%);
+ }
+ #score_container {
+ font-weight: bold;
+ }
+ #little_tip {
+ text-align: center;
+ }
.tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
margin-top: 5px;
}
box-shadow: 1px 1px 2px #666;
}
.tile.selected, .tile.selected_word {
- background-color: #ffa;
+ background-color: @selected-color;
box-shadow: inset 1px 1px 5px #444;
}
.tile.selected_word {
- background-color: #cfc;
+ background-color: @selected-good-color;
}
#loading {
position: absolute;
<h1>HexBog</h1>
<div id="subhead">— A simple word game —</div>
- <div>Selection: "<span id="selection"></span>"</div>
- <div>Score: <span id="score">0</span></div>
+ <div id="big_tip"></div>
+ <div id="little_tip"></div>
+ <div id="score_container">Score: <span id="score">0</span></div>
<div id="tabs">
<div id="instructions" class="selected-tab" style="height: 150px">