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: main_min.js wordlist_min.js template.html style.css
+ bash combine.bash template.html > $@ || (rm -f $@; exit 1)
index.html.gz: index.html
gzip --best -c $< > $@
# (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()
- $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
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
# 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
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')
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
init_board()
init_html_board()
init_start_over_link()
+ update_selection_display()
$(init_game)
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <title>HexBog – a simple word game</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=648">
- <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAA/UlEQVQY02P4DwKnPYWFPU6BmQxAfOusJLu4ODvXk+tggecZLAn+7NLSHJYLmVOf/meo5mJgEG/msLXhyMliYOCqYmBwm5PJ0MLR3cwxy4RbigEIiv//5ZvBcfYExw7JpXeYgAJq4WaatzmevOC4wn/7vwlICUP6q28c339wfGT58v/3XwYGQQG2xv+cv39xfGH+qsDNx8BQ8v+6wEPuT+857nI/apEEaqj6/0dxD9/zJxzHhPb/1wAKGAcpMSzm2r2PY5mudwkrA0M1N1CwjqO8iqMkH+iwaob/L7JZZRLZjYw5HDeypD8De+7uDkWQ5wQ+3YT6FuJ9r7NgJgAB9nPOaCTI7QAAAABJRU5ErkJggg==" />
- <style>
-cat style.css
- </style>
-</head>
-
-<body>
- <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>
- <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>
- <div class="tabbody">
- <div style="margin-left: 20px; text-indent: -20px"><strong>1.</strong> Click letter tiles to make a word (they have to touch).</div>
- <div style="margin-left: 20px; text-indent: -20px"><strong>2.</strong> Click the last letter tile again.</div>
- </div>
- </div>
- <div id="definition" class="tab" style="height: 20px">
- <div class="tabtab">Definition</div>
- <div id="definition_body" class="tabbody">
- When you make a word, a definition should appear here.
- </div>
- </div>
-
- <div id="donate" class="tab" style="height: 20px">
- <div class="tabtab">Donate</div>
- <div class="tabbody">
- Please support this project by sending me money via <a href="http://flattr.com/thing/1146710/HexBog-A-simple-word-game" target="_blank">Flattr</a>, <a href="http://jasonwoof.com/pay.html" target="_blank">Dwolla</a> or <a href="http://jasonwoof.com/pay.fs" target="_blank">PayPal</a>.<br><br>
- Thank you! – Jason
- </div>
- </div>
-
- <div id="restart" class="tab" style="height: 20px">
- <div class="tabtab">New Game</div>
- <div class="tabbody">
- <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>
-
- <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>
- <script>
-cat main_min.js
- </script>
- <script>
-cat wordlist_min.js
- </script>
-</body>
-</html>
@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;
@tab-color: #ddf;
@tabtab-color: darken(@tab-color, 3%);
+@selected-color: #ffa;
+@selected-good-color: #cfc;
body {
background: #eef;
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;
}
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 {
- background-color: #cfc;
+ background-color: @selected-good-color;
}
#loading {
position: absolute;
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>HexBog – a simple word game</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=648">
+ <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAA/UlEQVQY02P4DwKnPYWFPU6BmQxAfOusJLu4ODvXk+tggecZLAn+7NLSHJYLmVOf/meo5mJgEG/msLXhyMliYOCqYmBwm5PJ0MLR3cwxy4RbigEIiv//5ZvBcfYExw7JpXeYgAJq4WaatzmevOC4wn/7vwlICUP6q28c339wfGT58v/3XwYGQQG2xv+cv39xfGH+qsDNx8BQ8v+6wEPuT+857nI/apEEaqj6/0dxD9/zJxzHhPb/1wAKGAcpMSzm2r2PY5mudwkrA0M1N1CwjqO8iqMkH+iwaob/L7JZZRLZjYw5HDeypD8De+7uDkWQ5wQ+3YT6FuJ9r7NgJgAB9nPOaCTI7QAAAABJRU5ErkJggg==" />
+ <style>
+cat style.css
+ </style>
+</head>
+
+<body>
+ <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>
+ <div id="right">
+ <h1>HexBog</h1>
+ <div id="subhead">— A simple word game —</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 class="tabtab">Instructions</div>
+ <div class="tabbody">
+ <div style="margin-left: 20px; text-indent: -20px"><strong>1.</strong> Click letter tiles to make a word (they have to touch).</div>
+ <div style="margin-left: 20px; text-indent: -20px"><strong>2.</strong> Click the last letter tile again.</div>
+ </div>
+ </div>
+ <div id="definition" class="tab" style="height: 20px">
+ <div class="tabtab">Definition</div>
+ <div id="definition_body" class="tabbody">
+ When you make a word, a definition should appear here.
+ </div>
+ </div>
+
+ <div id="donate" class="tab" style="height: 20px">
+ <div class="tabtab">Donate</div>
+ <div class="tabbody">
+ Please support this project by sending me money via <a href="http://flattr.com/thing/1146710/HexBog-A-simple-word-game" target="_blank">Flattr</a>, <a href="http://jasonwoof.com/pay.html" target="_blank">Dwolla</a> or <a href="http://jasonwoof.com/pay.fs" target="_blank">PayPal</a>.<br><br>
+ Thank you! – Jason
+ </div>
+ </div>
+
+ <div id="restart" class="tab" style="height: 20px">
+ <div class="tabtab">New Game</div>
+ <div class="tabbody">
+ <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>
+
+ <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>
+ <script>
+cat main_min.js
+ </script>
+ <script>
+cat wordlist_min.js
+ </script>
+</body>
+</html>
Got questions, comments, patches, etc.? Contact Jason Woofenden