From 480b41bb7b13be95e5e0ed18c2a46692aedc11ad Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Mon, 31 Oct 2011 20:33:55 -0400 Subject: [PATCH] cleanup, loading message --- client.coffee | 30 +++++++++++++++--------------- index.html | 2 +- server.coffee | 11 ++++------- style.less | 5 +++++ 4 files changed, 25 insertions(+), 23 deletions(-) diff --git a/client.coffee b/client.coffee index 7f22674..82570dd 100644 --- a/client.coffee +++ b/client.coffee @@ -1,10 +1,11 @@ # globals $table = null table_height = 0 +card_height = 0 state = null server_url = null -message = (txt) -> +show_message = (txt) -> txt # FIXME implement chat box or something # timeout function with args in convenient order @@ -26,16 +27,14 @@ new_button = (text) -> $ $ "
#{text}
" # 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 +transform_x = (x) -> x +transform_y = (y) -> + return y unless state.agent is 'p2' + return table_height - card_height - y instantiate_card = (card) -> text = card.text - view_coords = transform_coords {left: card.x, top: card.y} - view = $ $ "
#{text}
" + view = $ $ "
#{text}
" button_box = $ $ '
' flip_button = new_button "flip over" mark_button = new_button "mark" @@ -53,8 +52,8 @@ instantiate_card = (card) -> $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 + p = view.position() + state.move state.agent, card.number, transform_x(p.left), transform_y(p.top) card.view = view error_lag = 3 @@ -82,13 +81,13 @@ send_updates = -> type: 'POST' dataType: 'json' error: (xhr, status, error) -> - message "Network error while sending, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})" + show_message "Network error while sending, you might want to refresh. Trying again in #{error_lag} seconds. (Status: #{status}, Error: #{error})" for message in messages outgoing_messages.unshift message timeout error_lag * 1000, send_updates error_lag *= 2 success: (data, status, xhr) -> - message "update sent" + show_message "update sent" error_lag = 3 } @@ -123,8 +122,7 @@ init = -> if agent is me tell_server ['move', agent, card, x, y] else - coords = transform_coords {left: x, top: y} - state.cards[card].view.animate { left: "#{coords.left}px", top: "#{coords.top}px"}, 800 + state.cards[card].view.animate { left: "#{transform_x x}px", top: "#{transform_y y}px"}, 800 state.on 'mark', (agent, card, state) -> @cards[card].view.toggleClass 'marked', state if agent is me @@ -149,5 +147,7 @@ init = -> $ -> $table = $ '#table' - table_height = $table.height() - 148 # FIXME auto-detect card height + table_height = $table.height() + card_height = $('#loading-card').outerHeight() + init() diff --git a/index.html b/index.html index 7322952..797982e 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,6 @@

Card Table

-
+
Loading...
diff --git a/server.coffee b/server.coffee index c7d71b4..d3441d0 100644 --- a/server.coffee +++ b/server.coffee @@ -65,7 +65,6 @@ javascript_handler = (args, out, request, url_parts) -> get_handler = (args, out, request, url_parts) -> - console.log "get handler: ", args unless args.game?.length out.writeHead 404, "Content-Type": 'text/plain' out.end 'Missing (or empty) "game" argument' @@ -93,7 +92,6 @@ get_handler = (args, out, request, url_parts) -> answer_soon game # in case there's something queued already set_handler = (args, out, request, url_parts) -> - console.log "set handler: ", args unless args.game?.length out.writeHead 404, "Content-Type": 'text/plain' out.end 'Missing (or empty) "game" argument' @@ -120,7 +118,7 @@ set_handler = (args, out, request, url_parts) -> game.process_messages JSON.parse args.messages out.writeHead 200, "Content-Type": 'text/plain' - out.end 'ok' + out.end '{"status":0,"text_status":"Success"}' # don't call this directly, call answer_soon instead answer_now = (game) -> @@ -136,8 +134,9 @@ answer_now = (game) -> queue = game.p2_queue game.p2_waiter = false game.p2_queue = [] - waiter.writeHead 200, 'Content-Type': 'text/javascript' - waiter.end JSON.stringify queue + timeout 2000, -> # FIXME remove this delay for player 2 (just here to test lag handling) + waiter.writeHead 200, 'Content-Type': 'text/javascript' + waiter.end JSON.stringify queue # this marks a game as "dirty" and makes sure there's exactly one timeout # that'll respond to any clients that are waiting, and now have messages. @@ -154,7 +153,6 @@ forward_events = (message...) -> unless message[1] is 'p2' @p2_queue.push message answer_soon this - console.log this new_game = (id) -> game = games[id] = model.new 'server' @@ -223,7 +221,6 @@ http_server = http.createServer (req, res) -> req.on 'end', -> query = url_parts.query post_args = querystring.parse data - console.log data, post_args for key, parg of post_args query[key] = parg return set_handler query, res, req, url_parts diff --git a/style.less b/style.less index 615961a..58cb359 100644 --- a/style.less +++ b/style.less @@ -12,6 +12,11 @@ @your-side-color: #ffe2e2; @my-side-color: #e2ffe2; +#loading-card { + top: (@table-height - @card-height) / 2 - 4px; + left: (@table-width - @card-width) / 2 - 4px; +} + .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); -- 1.7.10.4