client.coffee

   1 # globals
   2 $table = null
   3 table_height = 0
   4 state = null
   5 server_url = null
   6
   7 message = (txt) ->
   8         # FIXME implement chat box or something
   9
  10 # timeout function with args in convenient order
  11 timeout = (ms, func) -> setTimeout func, ms
  12
  13 unless Array::shuffle?
  14         Array::shuffle = ->
  15                 return if @length is 0
  16                 top = @length
  17
  18                 while --top
  19                         current = Math.floor(Math.random() * (top + 1))
  20                         tmp = @[current]
  21                         @[current] = @[top]
  22                         @[top] = tmp
  23                 return
  24
  25 new_button = (text) -> $ $ "<div class=\"button\">#{text}</div>"
  26
  27 # transform coordinates from client-side coords to server-side coords (or back)
  28 # this makes it so p2 view everything upside down (mirrored), but still sends coords rightside up
  29 transform_coords = (coords) ->
  30         ret = {left: coords.left, top: coords.top}
  31         if state.agent is 'p2'
  32                 ret.top = table_height - ret.top
  33         return ret
  34
  35 instantiate_card = (card) ->
  36         text = card.text
  37         view_coords = transform_coords {left: card.x, top: card.y}
  38         view = $ $ "<div class=\"card\" style=\"left: #{view_coords.left}px; top: #{view_coords.top}px\"><span class=\"cardtext\">#{text}</span></div>"
  39         button_box = $ $ '<div/>'
  40         flip_button = new_button "flip over"
  41         mark_button = new_button "mark"
  42         flip_button.bind 'click', ->
  43                 state.flip state.agent, card.number, ! view.hasClass 'flipped'
  44         mark_button.bind 'click', ->
  45                 state.mark state.agent, card.number, ! view.hasClass 'marked'
  46         button_box.append flip_button
  47         button_box.append mark_button
  48         view.append button_box
  49         if card.marked
  50                 view.addClass 'marked'
  51         if card.flipped
  52                 view.addClass 'flipped'
  53         $table.append view
  54         view.draggable stack: '.card'
  55         view.bind 'dragstop', (event, ui) ->
  56                 p = transform_coords view.position()
  57                 state.move state.agent, card.number, p.left, p.top
  58         card.view = view
  59
  60 error_lag = 3
  61
  62 outgoing_messages = []
  63 # message should be [agent, method, args...]
  64 # don't forget the agent (state.agent)
  65 tell_server = (message) ->
  66         outgoing_messages.push message
  67         send_updates()
  68
  69 send_updates = ->
  70         return if outgoing_messages.length is 0
  71
  72         messages = outgoing_messages
  73         outgoing_messages = []
  74
  75         $.ajax "#{server_url}/set", {
  76                 cache: false
  77                 data: {
  78                         agent: state.agent
  79                         game: 'test' # FIXME, and it the /get call too
  80                         messages: JSON.stringify(messages)
  81                 }
  82                 type: 'POST'
  83                 dataType: 'json'
  84                 error: (xhr, status, error) ->
  85                         message "Network error while sending, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})"
  86                         for message in messages
  87                                 outgoing_messages.unshift message
  88                         timeout error_lag * 1000, send_updates
  89                         error_lag *= 2
  90                 success: (data, status, xhr) ->
  91                         message "update sent"
  92                         error_lag = 3
  93         }
  94
  95 error_lag = 3
  96 poll_for_updates = ->
  97         $.ajax "#{server_url}/get?agent=#{state.agent}&game=test", {
  98                 cache: false
  99                 type: 'GET'
 100                 dataType: 'json'
 101                 error: (xhr, status, error) ->
 102                         message "Network error, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})"
 103                         timeout error_lag * 1000, poll_for_updates
 104                         error_lag *= 2
 105                 success: (data, status, xhr) ->
 106                         state.process_messages data
 107                         timeout 100, poll_for_updates
 108                         error_lag = 3
 109         }
 110
 111 init = ->
 112         if window.location.hash? and window.location.hash.length > 0
 113                 me = window.location.hash.substr 1
 114                 winloc = "#{window.location}"
 115                 server_url = winloc.substr 0, winloc.length - window.location.hash.length
 116         else
 117                 me = 'p1'
 118                 server_url = window.location
 119
 120         state = window.game_model.new me
 121         state.on 'move', (agent, card, x, y) ->
 122                 # FIXME add/handle pile argument
 123                 if agent is me
 124                         tell_server ['move', agent, card, x, y]
 125                 else
 126                         coords = transform_coords {left: x, top: y}
 127                         state.cards[card].view.animate { left: "#{coords.left}px", top: "#{coords.top}px"}, 800
 128         state.on 'mark', (agent, card, state) ->
 129                 @cards[card].view.toggleClass 'marked', state
 130                 if agent is me
 131                         tell_server ['mark', agent, card, state]
 132         state.on 'flip', (agent, card, state) ->
 133                 @cards[card].view.toggleClass 'flipped', state
 134                 if agent is me
 135                         tell_server ['flip', agent, card, state]
 136         state.on 'set_cards', (agent, cards) ->
 137                 # FIXME add agent arg and tell server if it's not us
 138                 $('.card').remove()
 139                 for card in cards
 140                         instantiate_card card
 141                 if agent is me
 142                         tell_server ['set_cards', agent, cards]
 143
 144         # timeout so browser will stop showing that we're loading
 145         timeout 1, poll_for_updates
 146         timeout 2, ->
 147                 # ask for initial state
 148                 tell_server ['send_state', state.agent]
 149
 150 $ ->
 151         $table = $ '#table'
 152         table_height = $table.height() - 148 # FIXME auto-detect card height
 153         init()