X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=client.coffee;h=7f2267491f319c26559e7bd7aa8a8af24d4a9e78;hb=3f89f7dbaf990e3f219c1c782fe55455eaa68cbc;hp=6f8d230cdc62c1c2f6e616d6d4c5c2a2f3995f24;hpb=17254bb57943dda8793cf80c37fb65db472de0ea;p=peach-cgt.git

diff --git a/client.coffee b/client.coffee
index 6f8d230..7f22674 100644
--- a/client.coffee
+++ b/client.coffee
@@ -1,5 +1,6 @@
 # globals
 $table = null
+table_height = 0
 state = null
 server_url = null
 
@@ -23,27 +24,38 @@ unless Array::shuffle?
 
 new_button = (text) -> $ $ "<div class=\"button\">#{text}</div>"
 
-instantiate_card = (model) ->
-	text = model.text
-	x = model.x
-	y = model.y
-	card = $ $ "<div class=\"card\" style=\"left: #{x}px; top: #{y}px\"><span class=\"cardtext\">#{text}</span></div>"
+# transform coordinates from client-side coords to server-side coords (or back)
+# this makes it so p2 view everything upside down (mirrored), but still sends coords rightside up
+transform_coords = (coords) ->
+	ret = {left: coords.left, top: coords.top}
+	if state.agent is 'p2'
+		ret.top = table_height - ret.top
+	return ret
+
+instantiate_card = (card) ->
+	text = card.text
+	view_coords = transform_coords {left: card.x, top: card.y}
+	view = $ $ "<div class=\"card\" style=\"left: #{view_coords.left}px; top: #{view_coords.top}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', ->
-		state.flip state.agent, model.number, ! card.hasClass 'flipped'
+		state.flip state.agent, card.number, ! view.hasClass 'flipped'
 	mark_button.bind 'click', ->
-		state.mark state.agent, model.number, ! card.hasClass 'marked'
+		state.mark state.agent, card.number, ! view.hasClass 'marked'
 	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()
-		state.move state.agent, model.number, p.left, p.top
-	model.view = card
+	view.append button_box
+	if card.marked
+		view.addClass 'marked'
+	if card.flipped
+		view.addClass 'flipped'
+	$table.append view
+	view.draggable stack: '.card'
+	view.bind 'dragstop', (event, ui) ->
+		p = transform_coords view.position()
+		state.move state.agent, card.number, p.left, p.top
+	card.view = view
 
 error_lag = 3
 
@@ -111,7 +123,8 @@ init = ->
 		if agent is me
 			tell_server ['move', agent, card, x, y]
 		else
-			state.cards[card].view.animate { left: "#{x}px", top: "#{y}px"}, 800
+			coords = transform_coords {left: x, top: y}
+			state.cards[card].view.animate { left: "#{coords.left}px", top: "#{coords.top}px"}, 800
 	state.on 'mark', (agent, card, state) ->
 		@cards[card].view.toggleClass 'marked', state
 		if agent is me
@@ -136,4 +149,5 @@ init = ->
 
 $ ->
 	$table = $ '#table'
+	table_height = $table.height() - 148 # FIXME auto-detect card height
 	init()