change layout, factor out css, use lesscss

diff --git a/.gitignore b/.gitignore
index a378fb8..71ea8f6 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
+index.html
+index.html.gz

 main.js
 main.js

-all_min.js
+main_min.js
+style.css

 wordlist_compressed.js
 wordlist_compressed.js

-index.html
+wordlist_min.js

diff --git a/Makefile b/Makefile
index 1aba240..9807ae8 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -9,15 +9,21 @@ wordlist_compressed.js: compress.coffee wordlist.txt
 main.js: main.coffee
        coffee -bc main.coffee
 
 main.js: main.coffee
        coffee -bc main.coffee
 

-all_min.js: wordlist_compressed.js main.js
-       cat /usr/share/javascript/jquery/jquery.min.js main.js wordlist_compressed.js | uglifyjs -nc -o all_min.js
+main_min.js: wordlist_compressed.js main.js
+       cat /usr/share/javascript/jquery/jquery.min.js main.js | uglifyjs -nc -o $@

 
 

-index.html: all_min.js main.html
-       (head -n -2 main.html; echo '<script>'; cat all_min.js; echo '</script>'; tail -n 2 main.html) > index.html
+wordlist_min.js: wordlist_compressed.js main.js
+       cat wordlist_compressed.js | uglifyjs -nc -o $@
+
+style.css: style.less
+       lessc style.less style.css
+
+index.html: main_min.js wordlist_min.js main.html style.css
+       bash combine.bash main.html > $@ || (rm -f $@; exit 1)

 
 index.html.gz: index.html
        gzip --best -c $< > $@
 
 
 clean:
 
 index.html.gz: index.html
        gzip --best -c $< > $@
 
 
 clean:

-       rm -f main.js all_min.js wordlist_compressed.js index.html index.html.gz
+       rm -f main.js main_min.js wordlist_compressed.js wordlist_min.js style.css index.html index.html.gz

diff --git a/combine.bash b/combine.bash
new file mode 100644 (file)
index 0000000..d46217c
--- /dev/null
+++ b/combine.bash
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+cat "$1" | while read x
+do
+       if [ "${x:0:4}" = 'cat ' ]
+       then
+               cat "${x:4}" || exit $?
+       else
+               echo "$x"
+       fi
+done

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
 
 $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
 update_selection_display = ->
        word = selected_word()
        $selection_display.html word

@@ -356,19 +351,15 @@ activate_selection = ->
        look_up_definition word
 
 
        look_up_definition word
 
 

-definition_credited = false

 show_definition = (word, type, definition, language) ->
 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) ->
 
 
 select_tile = (num) ->

@@ -421,12 +412,7 @@ init_html_board = ->
        $selection_display = $('#selection')
        $score_display = $('#score')
        $score_display.html score
        $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
        $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()
 
                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')
 $log = undefined
 init_log = ->
        $log = $('#log')

@@ -585,6 +584,9 @@ log = (msg) ->
 
 init_game = ->
        init_log()
 
 init_game = ->
        init_log()

+       if $(window).height() >= 440
+               $('#centerer').css('margin-top', '25px')
+       init_tabs()

        init_board()
        init_html_board()
        init_start_over_link()
        init_board()
        init_html_board()
        init_start_over_link()

diff --git a/main.html b/main.html
index 7a4c4c4..fd8573b 100644 (file)
--- a/main.html
+++ b/main.html
@@ -5,197 +5,80 @@
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="favicon.ico" />
        <style>
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="favicon.ico" />
        <style>

-               body {
-                       background: #eef;
-                       color: black;
-                       font: 14px Verdana, Arial, free-sans, sans-serif;
-               }
-               #boarder {
-                       margin: 10px;
-                       padding: 15px;
-                       background: #f5f5ff;
-                       float: left;
-                       border-radius: 3px;
-                       box-shadow: inset 1px 1px 4px #888;
-                       overflow: hidden;
-               }
-               #board {
-                       position: relative;
-                       height: 410px;
-                       width: 358px;
-               }
-               #right {
-                       float: left;
-                       width: 250px;
-               }
-               h1 {
-                       color: #55f;
-                       margin: 4px 0 0 0;
-                       text-align: center;
-               }
-               #subhead {
-                       margin-bottom: 10px;
-                       text-align: center;
-               }
-               .tile {
-                       padding-top: 4px;
-                       height: 38px;
-                       width: 42px;
-                       background-color: #aaf;
-                       color: #000;
-                       font-size: 30px;
-                       display: block;
-                       position: absolute;
-                       border-radius: 13px;
-                       text-align: center;
-                       cursor: pointer;
-                       user-select: none;
-                       -khtml-user-select: none;
-                       -o-user-select: none;
-                       -moz-user-select: -moz-none;
-                       -webkit-user-select: none;
-                       box-shadow: 1px 1px 2px #666;
-               }
-               .tile.selected, .tile.selected_word {
-                       background-color: #ffa;
-                       box-shadow: inset 1px 1px 5px #444;
-               }
-               .tile.selected_word {
-                       background-color: #cfc;
-               }
-               #loading {
-                       position: absolute;
-                       top: 140px;
-                       right: 140px;
-                       font-size: 32px;
-               }
-               .head {
-                       margin-top: -4px;
-                       height: 42px;
-                       width: 42px;
-                       position: relative;
-                       border-radius: 13px;
-               }
-               .eye1, .eye2 {
-                       width: 6px;
-                       height: 6px;
-                       border: 2px solid #a83;
-                       border-radius: 9px;
-                       background-color: white;
-                       position: absolute;
-               }
-               .eye1 {
-                       top: -8px;
-                       right: -1px;
-                       width: 5px;
-                       border-width: 4px 4px 3px 4px;
-               }
-               .eye2 {
-                       right: -9px;
-                       top: 1px;
-                       border-width: 3px 4px 4px 2px;
-               }
-               .tooth1, .tooth2, .tooth3, .tooth4 {
-                       width: 6px;
-                       height: 6px;
-                       border: 2px solid #a83;
-                       background-color: white;
-                       position: absolute;
-               }
-               .tooth1 {
-                       top: -2px;
-                       left: 22px;
-                       width: 7px;
-                       border-width: 2px 0 2px 2px;
-               }
-               .tooth2 {
-                       height: 7px;
-                       top: 12px;
-                       right: -3px;
-                       border-width: 0 2px 2px 2px;
-               }
-               .pate {
-                       position: absolute;
-                       top: -2px;
-                       right: -3px;
-                       width: 12px;
-                       height: 12px;
-                       background: white;
-                       border: 2px solid #a83;
-                       border-radius: 0 13px 0 0;
-               }
-               .tooth3 {
-                       width: 7px;
-                       bottom: -3px;
-                       left: 12px;
-                       border-width: 2px 2px 2px 0;
-               }
-               .tooth4 {
-                       height: 7px;
-                       bottom: 11px;
-                       left: -2px;
-                       border-width: 2px 2px 0 2px;
-               }
-               .chin {
-                       position: absolute;
-                       bottom: -3px;
-                       left: -2px;
-                       width: 12px;
-                       height: 12px;
-                       background: white;
-                       border: 2px solid #a83;
-                       border-radius: 0 0 0 13px;
-               }
-               #definition {
-                       height: 180px;
-                       padding: 5px;
-                       box-shadow: 1px 1px 3px #888;
-                       background: #ddf;
-                       border-radius: 3px;
-                       overflow: auto;
-                       margin-bottom: 0;
-               }
-               #definition_credit {
-                       margin-top: 2px;
-                       font-size: 12px;
-               }
-               #copyright {
-                       font-size: 85%;
-                       padding: 0 0 15px 15px;
-               }
+cat style.css

        </style>
 </head>
 
 <body>
        </style>
 </head>
 
 <body>

-       <div id="boarder">
-               <div id="board">
-                       <div class="tile" style="background-color: #aaf; overflow: hiden">
-                               <div class="head">
-                                       J
-                                       <div class="chin"></div>
-                                       <div class="pate"></div>
-                                       <div class="tooth1"></div>
-                                       <div class="tooth2"></div>
-                                       <div class="tooth3"></div>
-                                       <div class="tooth4"></div>
-                                       <div class="eye1"></div>
-                                       <div class="eye2"></div>
+       <div id="centerer">
+               <div id="boarder">
+                       <div id="board">
+                               <div class="tile" style="background-color: #aaf; overflow: hiden">
+                                       <div class="head">
+                                               J
+                                               <div class="chin"></div>
+                                               <div class="pate"></div>
+                                               <div class="tooth1"></div>
+                                               <div class="tooth2"></div>
+                                               <div class="tooth3"></div>
+                                               <div class="tooth4"></div>
+                                               <div class="eye1"></div>
+                                               <div class="eye2"></div>
+                                       </div>

                                </div>
                                </div>

+                               <div id="loading">Loading...</div>

                        </div>
                        </div>

-                       <div id="loading">Loading...</div>
+               </div>
+               <div id="right">
+                       <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="tabs">
+                               <div id="instructions" class="selected-tab" style="height: 150px">
+                                       <div class="tabtab">Instructions</div>
+                                       <ol>
+                                               <li>Click letter tiles to make a word (they have to touch).</li>
+                                               <li>Click the last letter tile again.</li>
+                                       </ol>
+                               </div>
+                               <div id="definition" class="tab" style="height: 20px">
+                                       <div class="tabtab">Definition</div>
+                                       <div id="definition_body">When you make a word, a definition should appear here.</div>
+                               </div>
+
+                               <div id="logtab" class="tab" style="height: 20px">
+                                       <div class="tabtab">log</div>
+                                       <div id="log">
+                                               <div>&nbsp;</div>
+                                               <div>&nbsp;</div>
+                                               <div>&nbsp;</div>
+                                               <div>&nbsp;</div>
+                                               <div>&nbsp;</div>
+                                       </div>
+                               </div>
+
+                               <div id="restart" class="tab" style="height: 20px">
+                                       <div class="tabtab">New Game</div>
+
+                                       <p class="warning">Warning: There's no undo! This will clear your score and reset the board.</p>
+
+                                       <p><a id="start-over" href="#" class="button">New Game</a></p>
+                               </div>
+                       </div>
+
+                       <div id="copyright">
+                               &copy;2013 <a href="http://jasonwoof.com/" target="_blank">Jason Woofenden</a> &ndash; <a href="http://gitorious.org/hexbog" target="_blank">AGPLv3+</a>.
+                       <div>

                </div>
        </div>
                </div>
        </div>

-       <div id="right">
-               <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>
-               <p id="definition"><a href="./" target="_blank" id="definition_link"><span id="definition_word">HexBog</span></a>, <span id="definition_type">proper noun</span><span id="definition_language"></span>: <span id="definition_text">A simple word game.<br><br><strong>Instructions:<br>1.</strong> Click letter tiles to make a word (they have to touch). <strong><br>2.</strong> Click the last letter tile again.</span></p>
-               <p id="definition_credit"></p>
-               <pre id="log"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></pre>
-               <p>Stuck? <a id="start-over" href="#">Start over</a>.</p>
-       </div>
-       <div id="copyright"style="clear: both">
-               &copy;2013 <a href="http://jasonwoof.com/" target="_blank">Jason Woofenden</a>. <a href="http://gitorious.org/hexbog" target="_blank">Source code</a> is <a href="http://www.gnu.org/licenses/agpl-3.0.html" target="_blank">AGPLv3+</a>.<div>
+       <script>
+cat main_min.js
+       </script>
+       <script>
+cat wordlist_min.js
+       </script>

 </body>
 </html>
 </body>
 </html>

diff --git a/style.less b/style.less
new file mode 100644 (file)
index 0000000..d740865
--- /dev/null
+++ b/style.less
@@ -0,0 +1,224 @@
+@board-inner-width: 358px;
+@board-inner-height: 410px;
+@board-pad: 15px; // also in main.coffee
+@board-width: @board-inner-width + @board-pad * 2;
+@board-height: @board-inner-height + @board-pad * 2;
+@column-pad: 10px;
+@right-width: 250px;
+@tabs-top: 120px;
+@tabtab-height: 20px; // also in main.coffee
+@tab-height: 150px; // also in main.coffee
+@row-pad: 10px;
+@copyright-height: 20px;
+
+@tab-color: #ddf;
+@tabtab-color: darken(@tab-color, 3%);
+
+body {
+       background: #eef;
+       color: black;
+       font: 14px Verdana, Arial, free-sans, sans-serif;
+       margin: 0;
+       padding: 0;
+}
+#centerer {
+       margin: auto auto;
+       width: @board-width + @column-pad + @right-width;
+       height: @board-height;
+       position: relative;
+}
+#boarder {
+       background: #f5f5ff;
+       position: absolute;
+       top: 0px;
+       left: 0px;
+       width: @board-width;
+       height: @board-height;
+       border-radius: 3px;
+       box-shadow: inset 1px 1px 4px #888;
+       overflow: hidden;
+}
+#board {
+       position: absolute;
+       top: @board-pad;
+       left: @board-pad;
+       width: @board-inner-width;
+       height: @board-inner-height;
+}
+#right {
+       position: absolute;
+       top: 0px;
+       left: @board-width + @column-pad;
+       width: @right-width;
+       height: @board-height;
+       h1 {
+               font-size: 28px;
+               color: #55f;
+               margin: 0;
+               text-align: center;
+       }
+       #subhead {
+               margin-bottom: 10px;
+               text-align: center;
+       }
+       #tabs {
+               position: absolute;
+               top: @tabs-top;
+               height: @tabtab-height * 4 + @tab-height;
+       }
+       .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
+               margin-top: 5px;
+       }
+       .tabtab {
+               height: @tabtab-height;
+               padding: 0 0 0 3px;
+               background: @tabtab-color;
+       }
+       .selected-tab, .tab {
+               overflow: hidden;
+               box-shadow: 1px 1px 3px #888;
+               background: @tab-color;
+               border-radius: 3px;
+       }
+       .selected-tab {
+               .tabtab:before {
+                       content: "▼ ";
+               }
+       }
+       .tab {
+               .tabtab:before {
+                       content: "▶ ";
+               }
+               .tabtab {
+                       cursor: pointer;
+               }
+               .tabtab:hover {
+                       color: darken(@tab-color, 50%);
+               }
+               .tabtab:hover:before {
+                       content: "▼ ";
+               }
+       }
+       #copyright {
+               position: absolute;
+               top: @board-height - @row-pad - @copyright-height;
+               left: 0px;
+               font-size: 85%;
+       }
+}
+.tile {
+       padding-top: 4px;
+       height: 38px;
+       width: 42px;
+       background-color: #aaf;
+       color: #000;
+       font-size: 30px;
+       display: block;
+       position: absolute;
+       border-radius: 13px;
+       text-align: center;
+       cursor: pointer;
+       user-select: none;
+       -khtml-user-select: none;
+       -o-user-select: none;
+       -moz-user-select: -moz-none;
+       -webkit-user-select: none;
+       box-shadow: 1px 1px 2px #666;
+}
+.tile.selected, .tile.selected_word {
+       background-color: #ffa;
+       box-shadow: inset 1px 1px 5px #444;
+}
+.tile.selected_word {
+       background-color: #cfc;
+}
+#loading {
+       position: absolute;
+       top: 140px;
+       right: 140px;
+       font-size: 32px;
+}
+.head {
+       margin-top: -4px;
+       height: 42px;
+       width: 42px;
+       position: relative;
+       border-radius: 13px;
+}
+.eye1, .eye2 {
+       width: 6px;
+       height: 6px;
+       border: 2px solid #a83;
+       border-radius: 9px;
+       background-color: white;
+       position: absolute;
+}
+.eye1 {
+       top: -8px;
+       right: -1px;
+       width: 5px;
+       border-width: 4px 4px 3px 4px;
+}
+.eye2 {
+       right: -9px;
+       top: 1px;
+       border-width: 3px 4px 4px 2px;
+}
+.tooth1, .tooth2, .tooth3, .tooth4 {
+       width: 6px;
+       height: 6px;
+       border: 2px solid #a83;
+       background-color: white;
+       position: absolute;
+}
+.tooth1 {
+       top: -2px;
+       left: 22px;
+       width: 7px;
+       border-width: 2px 0 2px 2px;
+}
+.tooth2 {
+       height: 7px;
+       top: 12px;
+       right: -3px;
+       border-width: 0 2px 2px 2px;
+}
+.pate {
+       position: absolute;
+       top: -2px;
+       right: -3px;
+       width: 12px;
+       height: 12px;
+       background: white;
+       border: 2px solid #a83;
+       border-radius: 0 13px 0 0;
+}
+.tooth3 {
+       width: 7px;
+       bottom: -3px;
+       left: 12px;
+       border-width: 2px 2px 2px 0;
+}
+.tooth4 {
+       height: 7px;
+       bottom: 11px;
+       left: -2px;
+       border-width: 2px 2px 0 2px;
+}
+.chin {
+       position: absolute;
+       bottom: -3px;
+       left: -2px;
+       width: 12px;
+       height: 12px;
+       background: white;
+       border: 2px solid #a83;
+       border-radius: 0 0 0 13px;
+}
+#definition {
+       overflow: auto;
+}
+#definition_credit {
+       margin-top: 15px;
+       font-size: 12px;
+}

diff --git a/t b/t
index fc24871..8fd025c 100755 (executable)
--- a/t
+++ b/t
@@ -3,6 +3,5 @@
 while true
 do
        inotifywait -q -e close_write -e delete_self `git ls-files` >/dev/null 2>&1 || exit
 while true
 do
        inotifywait -q -e close_write -e delete_self `git ls-files` >/dev/null 2>&1 || exit

-       verbose make
-       dwb -x reload
+       verbose make && dwb -x reload

 done
 done