From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 26 Oct 2011 02:58:30 +0000 (-0400)
Subject: you can flip and mark cards
X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-cgt.git;a=commitdiff_plain;h=f2045f8594e9e8f61aa439a9316529dafc680755

you can flip and mark cards
---

diff --git a/client.coffee b/client.coffee
index 205d4cc..e49c003 100644
--- 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
--- 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;
 }