JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
make selection display clickable (when it's a word)
[hexbog.git] / main.coffee
index 99d2e43..015ce7c 100644 (file)
@@ -80,45 +80,45 @@ board_col_top_px = []
 score = 0
 board = new Array(board_tiles) # letters ("Qu" or single letter)
 board_neighbors = [] # array of tile numbers "next to" this one
-board_top_px = [] # array of pixel coordinates for top of column
+tile_top_px = [] # array of pixel coordinates for top of column
 board_left_px = [] # array of pixel coordinates for left of column
 board_aboves = [] # array of tile numbers above, starting from top
 board_below = [] # tile number of next tile below or false
 
-slides = []
 selected = []
 
 letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
 letter_distribution = [
-        9 # A
-        2 # B
-        2 # C
-        4 # D
-       14 # E
-        2 # F
-        3 # G
-        2 # H
-        7 # I
-        1 # J
-        1 # K
-        4 # L
-        2 # M
-        6 # N
-        8 # O
-        2 # P
-        1 # Q
-        6 # R
-        7 # S
-        6 # T
-        2 # U
-        2 # V
-        2 # W
-        1 # X
-        2 # Y
-        1 # Z
+       14355 # a
+        3968 # b
+        6325 # c
+        7045 # d
+       20258 # e
+        2739 # f
+        5047 # g
+        4372 # h
+       13053 # i
+         516 # j
+        2600 # k
+        9631 # l
+        5115 # m
+       10082 # n
+       11142 # o
+        5292 # p
+         287 # qu
+       12341 # r
+       16571 # s
+       10215 # t
+        6131 # u
+        1728 # v
+        2184 # w
+         619 # x
+        3512 # y
+         831 # z
+
 ]
 
-letter_distribution_total = letter_distribution.sum()
+letter_distribution_total = 175973 # letter_distribution.sum()
 
 
 new_letter_queue = []
@@ -188,7 +188,7 @@ init_board_layout = () ->
                        is_bottom_tile = i is board_col_heights[col_num] - 1
 
                        # link tile number to pixel "top" and "left" of containing column
-                       board_top_px.push col_top_px
+                       tile_top_px.push col_top_px + i * tile_width
                        board_left_px.push col_num * tile_width
 
                        # aboves (array of tile numbers above, starting from top)
@@ -233,24 +233,36 @@ init_board = ->
                new_letter_queue = (encoded.substr 0, board_tiles).split ''
                score = parseInt(encoded.substr(board_tiles), 10)
 
-       # how far each tile needs to be slid down
-       slides = (0 for i in board)
-
        # work out which grid spaces are connected
        # (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_word = null # initialized by init_html_board
-$definition_link = null # initialized by init_html_board
-$definition_type = null # initialized by init_html_board
-$definition_language = null # initialized by init_html_board
-$definition_text = null # initialized by init_html_board
-$definition_credit = 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
+               if word.length < 3
+                       $big_tip.html word
+                       $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.html "<a href=\"http://en.wiktionary.org/wiki/#{word}\" target=\"_blank\" title=\"click for definition\">#{word}</a>"
+                               $big_tip.addClass('good')
+                       else
+                               $big_tip.html word
+                               $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
@@ -289,13 +301,6 @@ selected_word = ->
        word += board[i] for i in selected
        return word.toLowerCase()
 
-html_slide = (num, dist) ->
-       if dist
-               cur = html_tiles[num].css 'top'
-               cur = Number(cur.substr(0, cur.length - 2))
-               dest = cur + (dist * tile_width)
-               html_tiles[num].animate {top: "#{dest}px"}, slide_ms
-
 save_game = ->
        encoded = ''
        for t in board
@@ -304,70 +309,86 @@ save_game = ->
        set_cookie 'hexbog', encoded, 365
        window.location.hash = encoded
 
+# remove the selected tiles from the board, create new tiles, and slide everything into place
 blip_selection = ->
-       faders = selected.clone().num_sort()
+       faders = selected.num_sort()
        selected = []
-       for num in faders
-               html_tiles[num].unbind('click').fadeOut fade_ms
-       timeout fade_ms, ->
-               top_tile = -1
-               new_px = 0
-               new_slide = 0
-               for fader in faders
-                       cur_top = board_aboves[fader][0]
-                       if cur_top is undefined
-                               cur_top = fader
-                       if top_tile isnt cur_top
-                               new_px = board_top_px[fader] - tile_width
-                               new_slide = 1
-                               top_tile = cur_top
-                       html_tiles[fader].remove()
-                       dest = fader
-                       aboves = board_aboves[fader].clone().reverse()
+       update_selection_display()
+       for i in faders
+               html_tiles[i].unbind('click').fadeOut fade_ms
+       timeout fade_ms + 1, ->
+               # which tiles need to be slid down
+               sliders = (false for i in board)
+
+               prev_col_top = null
+               next_new_y = null
+               for deleted in faders
+                       # find the tile number of the top tile in this column
+                       if board_aboves[deleted].length is 0
+                               col_top = deleted
+                       else
+                               col_top = board_aboves[deleted][0]
+
+                       # reset location where new tiles appear when we change columns
+                       if prev_col_top isnt col_top
+                               next_new_y = -10 - tile_width
+                               prev_col_top = col_top
+
+                       html_tiles[deleted].remove()
+
+                       # For each each tile above the one we've deleted:
+                       # 1. move it down one slot in the data scructures
+                       # 2. mark it as needing to slide
+                       dest = deleted
+                       aboves = board_aboves[deleted].clone().reverse()
                        for above in aboves
                                html_tiles[dest] = html_tiles[above]
                                html_tiles[dest].data 'tile_number', dest
                                board[dest] = board[above]
-                               slides[dest] = slides[above] + 1
+                               sliders[dest] = true
                                --dest
-                       new_tile top_tile, board_left_px[top_tile], new_px
-                       slides[top_tile] = new_slide
-                       new_px -= tile_width
-                       new_slide += 1
-               for i in [0 .. board.length - 1]
-                       html_slide i, slides[i]
-                       slides[i] = 0
+                       sliders[col_top] = true # the new tile needs to be slid down too
+
+                       new_tile col_top, board_left_px[col_top], next_new_y
+                       next_new_y -= tile_width + 50
+
+               for slide, i in sliders
+                       if slide
+                               html_tiles[i].animate {top: "#{tile_top_px[i]}px"}, slide_ms
+                               sliders[i] = false
                save_game()
-       update_selection_display()
+
+score_for = (word) -> Math.round(Math.pow(1.7, word.length))
 
 activate_selection = ->
        word = selected_word()
        if word.length < 3
+               # FIXME make this a hint
                log "Too short: \"#{word}\""
                return
        unless is_word word
+               # FIXME make this automatically part of the selection display
                log "Not on word list: \"#{word}\""
                return
-       score += Math.round(Math.pow(1.7, word.length))
+       word_score = score_for word
+       score += word_score
        $score_display.html score
-       log "blipped: #{word}"
+       # FIXME make some kind of animation showing score gain
+       log "blipped \"#{word}\" for #{word_score} points"
        blip_selection()
        look_up_definition word
+       $('#definition').click()
 
 
-definition_credited = false
 show_definition = (word, type, definition, language) ->
-       if language is 'English'
-               $definition_language.html ''
-       else
-               $definition_language.html " (#{language})"
-       $definition_type.html type
-       $definition_link.attr 'href', "http://en.wiktionary.org/wiki/#{word}"
-       $definition_word.html word.substr(0, 1).toUpperCase() + word.substr(1)
-       $definition_text.html definition
-       unless definition_credited
-               definition_credited = true
-               $definition_credit.html "Definitions &copy; <a href=\"http://en.wiktionary.org/\" target=\"_blank\">wiktionary.org</a> CC-BY-SA"
+       html = "<a href=\"http://en.wiktionary.org/wiki/#{word}\" target=\"_blank\">"
+       html += "#{word.substr(0, 1).toUpperCase() + word.substr(1)}</a>, #{type}"
+       if language isnt 'English'
+               html += " (#{language})"
+       html += ': '
+       html += definition
+       html += '<div id="definition_credit">Definition &copy;<a href="http://en.wiktionary.org/" target="_blank">wiktionary.org</a> CC-BY-SA</div>'
+       $definition_body.html html
 
 
 select_tile = (num) ->
@@ -417,15 +438,11 @@ $board = null
 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_word = $('#definition_word')
-       $definition_type = $('#definition_type')
-       $definition_language = $('#definition_language')
-       $definition_link = $('#definition_link')
-       $definition_text = $('#definition_text')
-       $definition_credit = $('#definition_credit')
+       $definition_body = $('#definition_body')
        $board = $('#board')
        # make html for board
        tile_number = 0
@@ -490,6 +507,8 @@ extract_wiktionary_definiton = (html) ->
 
        valid_parts = ["Abbreviation", "Adjective", "Adverb", "Article", "Cardinal number", "Conjunction", "Determiner", "Interjection", "Noun", "Numeral", "Particle", "Preposition", "Pronoun", "Verb"]
 
+       edit_link_regex = new RegExp(' ?\\[edit\\] ?')
+
        elements.each (i, el) ->
                #which tag: el.tagName
                if el.tagName is 'H2'
@@ -498,19 +517,19 @@ extract_wiktionary_definiton = (html) ->
                        if found
                                return false # break
                        part = false # mark us not being in a definition section unless the next section finds a part of speach header
-                       language = $(el).text().substr 7
+                       language = $(el).text().replace(edit_link_regex, '')
                if language and el.tagName is 'H3' or el.tagName is 'H4' # eg yak def uses one for english and one for dutch
                        part = false
-                       text = $(el).text()
+                       text = $(el).text().replace(edit_link_regex, '')
                        for p in valid_parts
-                               if text is "[edit] #{p}"
+                               if text is "#{p}"
                                        part = p.toLowerCase()
                                        # FIXME break
                if part and el.tagName is 'OL'
                        $(el).children().each (i, el) ->
                                new_def = $(el).text()
-                               if new_def.substr(0, 9) is '(obsolete' or new_def.substr(0, 8) is "(archaic"
-                                       key = 'obsolete'
+                               if new_def.substr(0, 9) is '(obsolete' or new_def.substr(0, 8) is "(archaic" or new_def.substr(0, 20) is "Alternative form of " or new_def.substr(0, 24) is "Alternative spelling of "
+                                       key = 'lame'
                                else
                                        if part is 'verb'
                                                key = 'verb'
@@ -524,7 +543,7 @@ extract_wiktionary_definiton = (html) ->
                        if found.verb
                                return false # break
 
-       part_defs = (finds[i] for i in ['verb', 'nonverb', 'obsolete'] when finds[i])
+       part_defs = (finds[i] for i in ['verb', 'nonverb', 'lame'] when finds[i])
        unless part_defs.length
                return false
 
@@ -532,6 +551,7 @@ extract_wiktionary_definiton = (html) ->
 
 
 look_up_definition = (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
@@ -542,10 +562,10 @@ look_up_definition = (word) ->
                                tdl = extract_wiktionary_definiton data.parse.text['*']
                                if tdl
                                        show_definition word, tdl[0], tdl[1], tdl[2]
+                               else
+                                       $definition_body.html "Oops, could't find a definition for \"#{word}\"."
                        else
-                               log "Sorry, couldn't find a definition for \"#{word}\""
-               error: ->
-                       log "wiktionary failed to load: \"#{error_msg}\""
+                               $definition_body.html "Sorry, couldn't find a definition for \"#{word}\"."
        })
 
 board_as_txt = ->
@@ -575,17 +595,42 @@ init_start_over_link = ->
                if confirm "Are you sure you want to start over? There is no undo."
                        start_over()
 
+cur_tab = 'instructions'
+tabtab_height = 20
+tab_height = 150
+init_tab = (t) ->
+       $('#' + t).click ->
+               return if t is cur_tab
+               $('#' + cur_tab).removeClass('selected-tab').addClass('tab').animate({height: tabtab_height}, 1000)
+               $('#' + t).removeClass('tab').addClass('selected-tab').animate({height: tab_height}, 1000)
+               cur_tab = t
+init_tabs = ->
+       for t in ['instructions', 'definition', 'donate', 'restart']
+               init_tab t
+
+init_keybinding = ->
+       $(window).keydown (e) ->
+               switch e.keyCode
+                       when 32, 10, 13
+                               activate_selection()
+                       when 27
+                               unselect_all()
+
 $log = undefined
 init_log = ->
        $log = $('#log')
 log = (msg) ->
-       $log.children().last().remove()
-       $log.prepend $('<div></div>').html msg
+       console.log msg if console.log?
 
 init_game = ->
        init_log()
+       if $(window).height() >= 440
+               $('#centerer').css('margin-top', '25px')
+       init_keybinding()
+       init_tabs()
        init_board()
        init_html_board()
        init_start_over_link()
+       update_selection_display()
 
 $(init_game)