JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
gitweb / peach-cgt.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 078a999)
fix view (flip x too), arrange piles correctly
authorJason Woofenden <jason@jasonwoof.com>
Wed, 2 Nov 2011 22:43:31 +0000 (18:43 -0400)
committerJason Woofenden <jason@jasonwoof.com>
Wed, 2 Nov 2011 22:43:31 +0000 (18:43 -0400)
client.coffee patch | blob | history
index.html patch | blob | history

diff --git a/client.coffee b/client.coffee
index f47f0a1..3022adb 100644 (file)
--- a/client.coffee
+++ b/client.coffee
@@ -1,6 +1,8 @@
 # globals
 $table = null
+table_width = 0
 table_height = 0
+card_width = 0
 card_height = 0
 state = null
 server_url = null
@@ -33,8 +35,11 @@ new_button = (text) -> $ $ "<div class=\"button\">#{text}</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
+flip_x = (x) -> table_width - card_width - x
 flip_y = (y) -> table_height - card_height - y
-transform_x = (x) -> x
+transform_x = (x) ->
+       return x unless state.agent is 'p2'
+       return flip_x x
 transform_y = (y) ->
        return y unless state.agent is 'p2'
        return flip_y y
@@ -44,8 +49,8 @@ next_card_z = -> return top_card_z += 1
 bring_card_to_front = (card) ->
        card.view.css "z-index": next_card_z()
 
-new_blank_card = (x, y) ->
-       view = $ $ "<div class=\"blank_card\" style=\"left: #{transform_x x}px; top: #{transform_y y}px; z-index: 0\"></div>"
+new_blank_card = (x, y, css_class) ->
+       view = $ $ "<div class=\"blank_card #{css_class}\" style=\"left: #{transform_x x}px; top: #{transform_y y}px; z-index: 0\"></div>"
        $table.append view
        return view
 
@@ -162,13 +167,17 @@ initialize_cards = () ->
 
        unless piles?
                piles = [ # global
-                       {key: 'p2_draw', x: transform_x(140), y: transform_y(20), name: "Draw Pile"}
-                       {key: 'p2_discard', x: transform_x(20), y: transform_y(20), name: "Discard Pile"}
-                       {key: 'p1_draw', x: transform_x(140), y: transform_y(flip_y(20)), name: "Draw Pile"}
-                       {key: 'p1_discard', x: transform_x(20), y: transform_y(flip_y(20)), name: "Discard Pile"}
+                       {key: 'p2_draw', x: 140, y: 20, name: "Draw Pile"}
+                       {key: 'p2_discard', x: 20, y: 20, name: "Discard Pile"}
+                       {key: 'p1_draw', x: flip_x(140), y: flip_y(20), name: "Draw Pile"}
+                       {key: 'p1_discard', x: flip_x(20), y: flip_y(20), name: "Discard Pile"}
                ]
                for pile in piles
-                       pile.$blank = new_blank_card pile.x, pile.y
+                       if pile.key.substr(0, 2) is state.agent
+                               css_class = 'my_card'
+                       else
+                               css_class = 'your_card'
+                       pile.$blank = new_blank_card pile.x, pile.y, css_class
                        pile.$caption = $ $ "<div class=\"pile_caption\"><div>#{pile.name}:</div><div class=\"n_cards\">#{n_cards 0}</div></div>"
 
        update_pile_views()
@@ -247,7 +256,9 @@ init = ->
 
 $ ->
        $table = $ '#table'
+       table_width = $table.width()
        table_height = $table.height()
+       card_width = $('#loading-card').outerWidth()
        card_height = $('#loading-card').outerHeight()
 
        init()
diff --git a/index.html b/index.html
index 797982e..83e4324 100644 (file)
--- a/index.html
+++ b/index.html
@@ -14,6 +14,12 @@
 </head>
 <body>
        <h1>Card Table</h1>
-       <div id="table"><div id="your_side"><div class="discard_area"></div><div class="deck_area"></div><div class="hand_area"></div></div><div id="loading-card" class="card"><div class="pile_caption">Loading...</div></div><div id="my_side"><div class="discard_area"></div><div class="deck_area"></div><div class="hand_area"></div></div></div>
+       <div id="table">
+               <div id="your_side"></div>
+               <div id="loading-card" class="card">
+                       <div class="pile_caption">Loading...</div>
+               </div>
+               <div id="my_side">Cards in this green area (besides the piles on the right) always appear face-down to the other player.</div>
+       </div>
 </body>
 </html>
PeachCGT; Card table simulator for testing games like wtactics