client.coffee

   1 # globals
   2 $table = null
   3 table_height = 0
   4 card_height = 0
   5 state = null
   6 server_url = null
   7 top_card_z = 0 # css z-index of front-most card
   8 $pile_captions = {}
   9
  10 show_message = (txt) -> txt
  11         # FIXME implement chat box or something
  12
  13 # timeout function with args in convenient order
  14 timeout = (ms, func) -> setTimeout func, ms
  15
  16 unless Array::shuffle?
  17         Array::shuffle = ->
  18                 return if @length is 0
  19                 top = @length
  20
  21                 while --top
  22                         current = Math.floor(Math.random() * (top + 1))
  23                         tmp = @[current]
  24                         @[current] = @[top]
  25                         @[top] = tmp
  26                 return
  27
  28 new_button = (text) -> $ $ "<div class=\"button\">#{text}</div>"
  29
  30 # transform coordinates from client-side coords to server-side coords (or back)
  31 # this makes it so p2 view everything upside down (mirrored), but still sends coords rightside up
  32 flip_y = (y) -> table_height - card_height - y
  33 transform_x = (x) -> x
  34 transform_y = (y) ->
  35         return y unless state.agent is 'p2'
  36         return flip_y y
  37
  38 next_card_z = -> return top_card_z += 1
  39
  40 bring_card_to_front = (card) ->
  41         card.view.css "z-index": next_card_z()
  42
  43 new_blank_card = (x, y) ->
  44         view = $ $ "<div class=\"blank_card\" style=\"left: #{transform_x x}px; top: #{transform_y y}px; z-index: 0\"></div>"
  45         $table.append view
  46         return view
  47
  48 instantiate_card = (card) ->
  49         text = card.text
  50         if card.owner is state.agent
  51                 card_class = 'my_card'
  52         else
  53                 card_class = 'your_card'
  54
  55         # initial card state from server has z so that stacks come out with the right layers
  56         if card.z?
  57                 if card.z > top_card_z
  58                         top_card_z = card.z
  59         else
  60                 unless card.pile
  61                         card.z = next_card_z()
  62
  63         view = $ $ "<div class=\"card #{card_class}\" style=\"left: #{transform_x(card.x)}px; top: #{transform_y(card.y)}px; z-index: #{card.z}\"><span class=\"cardtext\">#{text}</span></div>"
  64         view.data card.number
  65         button_box = $ $ '<div/>'
  66         flip_button = new_button "flip over"
  67         mark_button = new_button "mark"
  68         flip_button.bind 'click', ->
  69                 state.flip state.agent, card.number, ! view.hasClass 'flipped'
  70         mark_button.bind 'click', ->
  71                 state.mark state.agent, card.number, ! view.hasClass 'marked'
  72         button_box.append flip_button
  73         button_box.append mark_button
  74         view.append button_box
  75         if card.marked
  76                 view.addClass 'marked'
  77         if card.flipped
  78                 view.addClass 'flipped'
  79         $table.append view
  80         view.draggable containment: '#table', grid: [20, 20]
  81         view.bind 'dragstart', (event, ui) ->
  82                 view.css 'z-index': card.z = next_card_z()
  83         view.bind 'dragstop', (event, ui) ->
  84                 p = view.position()
  85                 state.move state.agent, card.number, transform_x(p.left), transform_y(p.top), card.z
  86         card.view = view
  87
  88 error_lag = 3
  89
  90 outgoing_messages = []
  91 # message should be [agent, method, args...]
  92 # don't forget the agent (state.agent)
  93 tell_server = (message) ->
  94         outgoing_messages.push message
  95         send_updates()
  96
  97 send_updates = ->
  98         return if outgoing_messages.length is 0
  99
 100         messages = outgoing_messages
 101         outgoing_messages = []
 102
 103         $.ajax "#{server_url}/set", {
 104                 cache: false
 105                 data: {
 106                         agent: state.agent
 107                         game: 'test' # FIXME, and it the /get call too
 108                         messages: JSON.stringify(messages)
 109                 }
 110                 type: 'POST'
 111                 dataType: 'json'
 112                 error: (xhr, status, error) ->
 113                         show_message "Network error while sending, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})"
 114                         for message in messages
 115                                 outgoing_messages.unshift message
 116                         timeout error_lag * 1000, send_updates
 117                         error_lag *= 2
 118                 success: (data, status, xhr) ->
 119                         show_message "update sent"
 120                         error_lag = 3
 121         }
 122
 123 error_lag = 3
 124 poll_for_updates = ->
 125         $.ajax "#{server_url}/get?agent=#{state.agent}&game=test", {
 126                 cache: false
 127                 type: 'GET'
 128                 dataType: 'json'
 129                 error: (xhr, status, error) ->
 130                         message "Network error, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})"
 131                         timeout error_lag * 1000, poll_for_updates
 132                         error_lag *= 2
 133                 success: (data, status, xhr) ->
 134                         state.process_messages data
 135                         timeout 100, poll_for_updates
 136                         error_lag = 3
 137         }
 138
 139 n_cards = (count) ->
 140         return "#{count} cards" unless count is 1
 141         return "1 card"
 142
 143 initialize_cards = () ->
 144         # clear everything
 145         $('.card').remove()
 146         $('.blank_card').remove()
 147
 148         # instantiate cards in play
 149         for card in state.cards
 150                 instantiate_card card unless card.pile
 151
 152         # build piles
 153         piles = [
 154                 {key: 'p2_draw', x: transform_x(140), y: transform_y(20), name: "Draw Pile"}
 155                 {key: 'p2_discard', x: transform_x(20), y: transform_y(20), name: "Discard Pile"}
 156                 {key: 'p1_draw', x: transform_x(140), y: transform_y(flip_y(20)), name: "Draw Pile"}
 157                 {key: 'p1_discard', x: transform_x(20), y: transform_y(flip_y(20)), name: "Discard Pile"}
 158         ]
 159         for pile in piles
 160                 manage_pile = (pile) ->
 161                         pile.$blank = new_blank_card pile.x, pile.y
 162                         count = 0
 163                         top = null
 164                         if state.piles[pile.key]?.length
 165                                 count = state.piles[pile.key].length
 166                                 top = state.piles[pile.key][0]
 167                         $caption = $ $ "<div class=\"pile_caption\"><div>#{pile.name}:</div><div class=\"n_cards\">#{n_cards count}</div></div>"
 168                         pile.$caption = $caption
 169                         if top?
 170                                 top.x = pile.x
 171                                 top.y = pile.y
 172                                 instantiate_card top
 173                                 view = top.view
 174                         else
 175                                 view = pile.$blank
 176
 177                         view.append $caption
 178
 179                         if top?
 180                                 pile.drag_handler = view.bind 'dragstart', ->
 181                                         pile.$caption.remove()
 182                                         delete top.pile
 183                                         state.piles[pile.key].shift()
 184                                         manage_pile pile
 185                                         # FIXME make sure this state change is sent
 186                                         # FIXME handle this message coming in
 187
 188                 manage_pile pile
 189
 190
 191 init = ->
 192         if window.location.hash? and window.location.hash.length > 0
 193                 me = window.location.hash.substr 1
 194                 winloc = "#{window.location}"
 195                 server_url = winloc.substr 0, winloc.length - window.location.hash.length
 196         else
 197                 me = 'p1'
 198                 server_url = window.location
 199
 200         state = window.game_model.new me
 201         state.on 'move', (agent, card, x, y, z) ->
 202                 # FIXME add/handle pile argument
 203                 if agent is me
 204                         tell_server ['move', agent, card, x, y, z]
 205                 else
 206                         # FIXME should we use the z from the server? Should p1 use odd numbers and p2 even?
 207                         bring_card_to_front state.cards[card]
 208                         state.cards[card].view.animate { left: "#{transform_x x}px", top: "#{transform_y y}px"}, 800
 209         state.on 'mark', (agent, card, state) ->
 210                 @cards[card].view.toggleClass 'marked', state
 211                 if agent is me
 212                         tell_server ['mark', agent, card, state]
 213         state.on 'flip', (agent, card, state) ->
 214                 @cards[card].view.toggleClass 'flipped', state
 215                 if agent is me
 216                         tell_server ['flip', agent, card, state]
 217         state.on 'set_cards', (agent, cards) ->
 218                 initialize_cards()
 219                 if agent is me
 220                         tell_server ['set_cards', agent, cards]
 221
 222         # timeout so browser will stop showing that we're loading
 223         timeout 1, poll_for_updates
 224         timeout 2, ->
 225                 # ask for initial state
 226                 tell_server ['send_state', state.agent]
 227
 228 $ ->
 229         $table = $ '#table'
 230         table_height = $table.height()
 231         card_height = $('#loading-card').outerHeight()
 232
 233         init()