tips, instructions, better selection display

diff --git a/main.coffee b/main.coffee
index 0467055..9db18fe 100644 (file)
--- a/main.coffee
+++ b/main.coffee
@@ -237,12 +237,30 @@ init_board = ->
        # (neighbors, above, down)
        init_board_layout()
 
        # (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()
 $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
 
        # color the selected tiles according to whether they're a word or not
        if word.length

@@ -338,6 +356,8 @@ blip_selection = ->
                                sliders[i] = false
                save_game()
 
                                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
 activate_selection = ->
        word = selected_word()
        if word.length < 3

@@ -348,7 +368,7 @@ activate_selection = ->
                # FIXME make this automatically part of the selection display
                log "Not on word list: \"#{word}\""
                return
                # 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
        score += word_score
        $score_display.html score
        # FIXME make some kind of animation showing score gain

@@ -416,7 +436,8 @@ $board = null
 html_tiles = []
 init_html_board = ->
        $('#loading').remove()
 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')
        $score_display = $('#score')
        $score_display.html score
        $definition_body = $('#definition_body')

@@ -528,7 +549,7 @@ extract_wiktionary_definiton = (html) ->
 
 
 look_up_definition = (word) ->
 
 
 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
        $.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

@@ -608,5 +629,6 @@ init_game = ->
        init_board()
        init_html_board()
        init_start_over_link()
        init_board()
        init_html_board()
        init_start_over_link()

+       update_selection_display()

 
 $(init_game)
 
 $(init_game)

diff --git a/style.less b/style.less
index a1ec6e4..fc4f0e0 100644 (file)
--- a/style.less
+++ b/style.less
@@ -5,7 +5,7 @@
 @board-height: @board-inner-height + @board-pad * 2;
 @column-pad: 10px;
 @right-width: 250px;
 @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;
 @tabtab-height: 20px; // also in main.coffee
 @tab-height: 150px; // also in main.coffee
 @tab-pad: 5px;

@@ -14,6 +14,8 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);

+@selected-color: #ffa;
+@selected-good-color: #cfc;

 
 body {
        background: #eef;
 
 body {
        background: #eef;

@@ -68,6 +70,21 @@ body {
                height: @tabtab-height * 4 + @tab-height;
                width: @right-width;
        }
                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;
        }
        .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
                margin-top: 5px;
        }

@@ -132,11 +149,11 @@ body {
        box-shadow: 1px 1px 2px #666;
 }
 .tile.selected, .tile.selected_word {
        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 {
        box-shadow: inset 1px 1px 5px #444;
 }
 .tile.selected_word {

-       background-color: #cfc;
+       background-color: @selected-good-color;

 }
 #loading {
        position: absolute;
 }
 #loading {
        position: absolute;

diff --git a/template.html b/template.html
index d5668fc..1621587 100644 (file)
--- a/template.html
+++ b/template.html
@@ -36,8 +36,9 @@ cat style.css
                        <h1>HexBog</h1>
                        <div id="subhead">&mdash; A simple word game &mdash;</div>
 
                        <h1>HexBog</h1>
                        <div id="subhead">&mdash; A simple word game &mdash;</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">
 
                        <div id="tabs">
                                <div id="instructions" class="selected-tab" style="height: 150px">