+index.html
+index.html.gz
main.js
-all_min.js
+main_min.js
+style.css
wordlist_compressed.js
-index.html
+wordlist_min.js
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:
- 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
--- /dev/null
+#!/bin/bash
+
+cat "$1" | while read x
+do
+ if [ "${x:0:4}" = 'cat ' ]
+ then
+ cat "${x:4}" || exit $?
+ else
+ echo "$x"
+ fi
+done
$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
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 © <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 ©<a href="http://en.wiktionary.org/" target="_blank">wiktionary.org</a> CC-BY-SA</div>'
+ $definition_body.html html
select_tile = (num) ->
$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
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')
init_game = ->
init_log()
+ if $(window).height() >= 440
+ $('#centerer').css('margin-top', '25px')
+ init_tabs()
init_board()
init_html_board()
init_start_over_link()
<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>
- <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 id="loading">Loading...</div>
</div>
- <div id="loading">Loading...</div>
+ </div>
+ <div id="right">
+ <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="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> </div>
+ <div> </div>
+ <div> </div>
+ <div> </div>
+ <div> </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">
+ ©2013 <a href="http://jasonwoof.com/" target="_blank">Jason Woofenden</a> – <a href="http://gitorious.org/hexbog" target="_blank">AGPLv3+</a>.
+ <div>
</div>
</div>
- <div id="right">
- <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>
- <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> </div><div> </div><div> </div><div> </div><div> </div></pre>
- <p>Stuck? <a id="start-over" href="#">Start over</a>.</p>
- </div>
- <div id="copyright"style="clear: both">
- ©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>
--- /dev/null
+@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;
+}
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