save_game = ->
encoded = ''
for t in tiles
- encoded += t.letter.substr 0, 1
+ encoded += t.text.substr 0, 1
encoded += score
set_cookie 'hexbog', encoded, 365
window.location.hash = encoded
update_selection_display()
for i in faders
tiles[i].dom.unbind('click').fadeOut fade_ms
+ for i in tiles
+ unless i in faders
+ unless i.hp < 1
+ i.dom.removeClass "hp#{i.hp}"
+ i.hp -= 1
+ i.dom.addClass "hp#{i.hp}"
timeout fade_ms + 1, ->
# which tiles need to be slid down
sliders = (false for i in tiles)
new_tile = (num, x, y) ->
letter = new_letter()
- html_tile = $("<div class=\"tile\" style=\"left: #{x}px; top: #{y}px\" unselectable=\"on\">#{letter}</div>")
+ html_tile = $("<div class=\"tile hp10\" style=\"left: #{x}px; top: #{y}px\" unselectable=\"on\">#{letter}</div>")
$board.append(html_tile)
html_tile.data 'tile_number', num
- tiles[num] = text: letter, dom: html_tile, id: num
+ tiles[num] = text: letter, dom: html_tile, hp: 10, id: num
html_tile.click ->
me = $(this)
@tab-color: #ddf;
@tabtab-color: darken(@tab-color, 3%);
+@tile-color: #aaf;
@selected-color: #ffa;
@selected-good-color: #cfc;
padding-top: 4px;
height: 38px;
width: 42px;
- background-color: #aaf;
- color: #000;
font-size: 30px;
display: block;
position: absolute;
-moz-user-select: -moz-none;
-webkit-user-select: none;
box-shadow: 1px 1px 2px #666;
-}
-.tile.selected, .tile.selected_word {
- background-color: @selected-color;
- box-shadow: inset 1px 1px 5px #444;
-}
-.tile.selected_word {
- background-color: @selected-good-color;
+
+ &.hp10 {
+ color: #000;
+ background-color: @tile-color;
+ }
+ &.hp9 {
+ color: lighten(#000, 4%);
+ background-color: lighten(desaturate(@tile-color, 10%), 1%);
+ }
+ &.hp8 {
+ color: lighten(#000, 8%);
+ background-color: lighten(desaturate(@tile-color, 20%), 2%);
+ }
+ &.hp7 {
+ color: lighten(#000, 12%);
+ background-color: lighten(desaturate(@tile-color, 30%), 3%);
+ }
+ &.hp6 {
+ color: lighten(#000, 16%);
+ background-color: lighten(desaturate(@tile-color, 40%), 4%);
+ }
+ &.hp5 {
+ color: lighten(#000, 20%);
+ background-color: lighten(desaturate(@tile-color, 50%), 5%);
+ }
+ &.hp4 {
+ color: lighten(#000, 24%);
+ background-color: lighten(desaturate(@tile-color, 60%), 6%);
+ }
+ &.hp3 {
+ color: lighten(#000, 28%);
+ background-color: lighten(desaturate(@tile-color, 70%), 7%);
+ }
+ &.hp2 {
+ color: lighten(#000, 32%);
+ background-color: lighten(desaturate(@tile-color, 80%), 8%);
+ }
+ &.hp1 {
+ color: lighten(#000, 36%);
+ background-color: lighten(desaturate(@tile-color, 90%), 9%);
+ }
+ &.hp0 {
+ color: lighten(#000, 40%);
+ background-color: lighten(desaturate(@tile-color, 100%), 10%);
+ }
+
+ &.selected, &.selected_word {
+ background-color: @selected-color;
+ box-shadow: inset 1px 1px 5px #444;
+ }
+ &.selected_word {
+ background-color: @selected-good-color;
+ }
}
#loading {
position: absolute;