change layout, factor out css, use lesscss

[hexbog.git] / main.coffee

diff --git a/main.coffee b/main.coffee
index 5c1fab7..a4bd416 100644 (file)
--- a/main.coffee
+++ b/main.coffee
@@ -243,12 +243,7 @@ init_board = ->
 
 $selection_display = 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
@@ -356,19 +351,15 @@ activate_selection = ->
        look_up_definition word
 
 
-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) ->
@@ -421,12 +412,7 @@ init_html_board = ->
        $selection_display = $('#selection')
        $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
@@ -576,6 +562,19 @@ 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', 'logtab', 'restart']
+               init_tab t
+
 $log = undefined
 init_log = ->
        $log = $('#log')
@@ -585,6 +584,9 @@ log = (msg) ->
 
 init_game = ->
        init_log()
+       if $(window).height() >= 440
+               $('#centerer').css('margin-top', '25px')
+       init_tabs()
        init_board()
        init_html_board()
        init_start_over_link()