you can flip and mark cards

diff --git a/client.coffee b/client.coffee
index 205d4cc..e49c003 100644 (file)
--- a/client.coffee
+++ b/client.coffee
@@ -24,14 +24,27 @@ unless Array::shuffle?
                        @[top] = tmp
                return
 
+new_button = (text) -> $ $ "<div class=\"button\">#{text}</div>"
+
 add_card = (text, x, y) ->
-       card = $ $ "<div class=\"card\" style=\"left: #{x}px; top: #{y}px\">#{text}<br><span>&nbsp;</span></div>"
+       card = $ $ "<div class=\"card\" style=\"left: #{x}px; top: #{y}px\"><span class=\"cardtext\">#{text}</span></div>"
+       button_box = $ $ '<div/>'
+       flip_button = new_button "flip over"
+       mark_button = new_button "mark"
+       flip_button.bind 'click', ->
+               card.toggleClass 'flipped'
+               # FIXME tell server
+       mark_button.bind 'click', ->
+               card.toggleClass 'marked'
+               # FIXME tell server
+       button_box.append flip_button
+       button_box.append mark_button
+       card.append button_box
        $table.append card
        card.draggable stack: '.card'
        card.bind 'dragstop', (event, ui) ->
                p = card.position()
-               card.children().html("(#{p.left}, #{p.top})")
-               # FIXME tell server
+               #card.children().html("(#{p.left}, #{p.top})")
 
 init = ->
        if state.auto_shuffle

diff --git a/style.less b/style.less
index e0899b0..5df22bd 100644 (file)
--- a/style.less
+++ b/style.less
@@ -40,4 +40,29 @@ h1 {
        border: 2px solid #fff;
        .shadow(1px, 1px, 8px, 0.4);
        border-radius: 4px;
+
+       .button {
+               display: none;
+               border: 1px solid #aaa;
+               border-radius: 2px;
+               background-color: #fff;
+       }
+       .button:hover {
+               background: #eee;
+               cursor: pointer;
+       }
+       &:hover .button {
+               display: block;
+       }
+}
+
+.marked {
+       border-color: black;
+}
+
+.flipped {
+       .cardtext {
+               display: none;
+       }
+       background-color: #ddd;
 }