old tiles fade

diff --git a/main.coffee b/main.coffee
index 1526690..1847e56 100644 (file)
--- a/main.coffee
+++ b/main.coffee
@@ -304,7 +304,7 @@ selected_word = ->
 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
@@ -316,6 +316,12 @@ blip_selection = ->
        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)
@@ -401,11 +407,11 @@ select_tile = (num) ->
 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)

diff --git a/style.less b/style.less
index e975a82..9c929d6 100644 (file)
--- a/style.less
+++ b/style.less
@@ -14,6 +14,7 @@
 
 @tab-color: #ddf;
 @tabtab-color: darken(@tab-color, 3%);
+@tile-color: #aaf;
 @selected-color: #ffa;
 @selected-good-color: #cfc;
 
@@ -135,8 +136,6 @@ body {
        padding-top: 4px;
        height: 38px;
        width: 42px;
-       background-color: #aaf;
-       color: #000;
        font-size: 30px;
        display: block;
        position: absolute;
@@ -149,13 +148,59 @@ body {
        -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;