basic card designer, new_cards api

diff --git a/client.coffee b/client.coffee
index 967917d..0c54a71 100644 (file)
--- a/client.coffee
+++ b/client.coffee
@@ -189,9 +189,15 @@ initialize_cards = () ->
        $('.card').remove()
        top_card_z = 0
        # instantiate cards in play
+       hide_deck_designer = false
        for card in state.cards
+               if card.owner is state.agent
+                       hide_deck_designer = true
                delete card.view
 
+       if hide_deck_designer
+               $('#deck_designer').remove()
+
        unless piles?
                piles = [ # global
                        {key: 'p2_draw', x: 140, y: 20, name: "Draw Pile"}
@@ -249,6 +255,77 @@ update_pile_views = ->
                card_count = ps[pile.key].total if ps[pile.key]?
                pile.$caption.children('.n_cards').html n_cards card_count
 
+possible_cards = {}
+
+valumenous = (val) -> return true unless val is '' or val is ' '
+
+init_possible_cards = ->
+       for card in window.cs_cards
+               text = "#{card.cardname} (#{card.faction})"
+               if valumenous card.attack or valumenous card.defense
+                       text += "  #{card.attack}/#{card.defense}"
+               text += "<br>#{card.type}"
+               if valumenous card.subtype
+                       text += " &bull; #{card.subtype}"
+               text += "<br>cost: #{card.cost} thresh: #{card.threshold}<br>"
+               text += card.rules
+
+               summary = text.replace(/<br>/g, "\n")
+
+               possible_cards[card.id] = {id: card.id, text: text, summary: summary}
+
+
+init_card_designer = ->
+       show_message 'init_card_designer'
+       cards_in_deck = {}
+       container = $ '#deck_designer'
+       init_possible_cards()
+       ul = $ $ '<ul/>'
+       for key, card of possible_cards
+               view = $ $ "<li>#{card.summary}</li>"
+               view.data 'id', card.id
+               view.bind 'click', ->
+                       $el = $ this
+                       id = $el.data 'id'
+                       if cards_in_deck[id]?
+                               delete cards_in_deck[id]
+                               value = false
+                       else
+                               value = true
+                               cards_in_deck[id] = true
+                       $el.toggleClass 'in_deck', value
+               ul.append view
+
+       container.append ul
+
+       submit = $ $ "<div style=\"border: 1px solid black\">Done</div>"
+       submit.bind 'click', ->
+               $('#deck_designer').remove()
+               show_message cards_in_deck
+               cards = []
+               for key, value of cards_in_deck
+                       card = {
+                               text: possible_cards[key].text
+                               owner: state.agent
+                               pile: "#{state.agent}_draw"
+                               x: 0
+                               y: 0
+                               z: next_card_z()
+                               flipped: true
+                       }
+                       cards.push card
+                       cards.push card
+                       cards.push card
+                       cards.push card
+
+               cards.shuffle()
+               show_message cards
+
+               # let server assign card numbers
+               tell_server ['new_cards', state.agent, cards]
+
+
+       container.append submit
 
 init = ->
        if window.location.hash? and window.location.hash.length > 0
@@ -285,11 +362,14 @@ init = ->
                if agent is me
                        tell_server ['flip', agent, card, state]
        state.on 'set_cards', (agent, cards) ->
-               initialize_cards()
                if agent is me
                        tell_server ['set_cards', agent, cards]
+               initialize_cards()
+       state.on 'new_cards', (agent, cards) ->
+               initialize_cards()
 
        # timeout so browser will stop showing that we're loading
+       timeout 1, init_card_designer
        timeout 1, poll_for_updates
        timeout 2, ->
                # ask for initial state
@@ -299,7 +379,7 @@ $ ->
        $table = $ '#table'
        table_width = $table.width()
        table_height = $table.height()
-       card_width = $('#loading-card').outerWidth()
-       card_height = $('#loading-card').outerHeight()
+       card_width = $('#loading_card').outerWidth()
+       card_height = $('#loading_card').outerHeight()
 
        init()

diff --git a/common.coffee b/common.coffee
index d2667ac..f57c4d4 100644 (file)
--- a/common.coffee
+++ b/common.coffee
@@ -56,6 +56,13 @@ class GameState
                        @cards.push card
                @trigger 'set_cards', agent, @cards
 
+       new_cards: (agent, cards) ->
+               for card in cards
+                       card.number = @cards.length unless card.number
+                       card.z = @cards.length unless card.z
+                       @cards.push card
+               @trigger 'new_cards', agent, cards
+
        send_state: (agent) ->
                @trigger 'send_state', agent
 
@@ -65,7 +72,9 @@ class GameState
                        return typeof messages
 
                for message in messages
-                       unless message instanceof Array and message[0]? and message[0] in ['move', 'mark', 'flip', 'set_cards', 'send_state']
+                       unless message instanceof Array and message[0]? and message[0] in ['move', 'mark', 'flip', 'set_cards', 'send_state', 'new_cards']
+                               if console?.log?
+                                       console.log "Got unrecognized message: #{JSON.stringify message}"
                                # FIXME what to do on error?
                                return 2
                        method = message.shift()

diff --git a/index.html b/index.html
index a1dd2ad..548d51d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -17,11 +17,11 @@
        <h1>Card Table</h1>
        <div id="table">
                <div id="your_side"></div>
-               <div id="loading-card" class="card">
+               <div id="loading_card" class="card">
                        <div class="pile_caption">Loading...</div>
                </div>
                <div id="my_side">Cards in this green area (except the two piles on the right) always appear face-down to the other player.</div>
        </div>
-       <div id="deck_designer"><h1>Deck Designer</h1><form></form></div>
+       <div id="deck_designer"><h1>Deck Designer</h1><p>Click each card you'd like in your deck and then click "done" at the bottom.</p></div>
 </body>
 </html>

diff --git a/server.coffee b/server.coffee
index 498e391..29b3e50 100644 (file)
--- a/server.coffee
+++ b/server.coffee
@@ -176,6 +176,10 @@ new_game = (id) ->
                forward_events.call this, 'mark', agent, card, state
        game.on 'flip', (agent, card, state) ->
                forward_events.call this, 'flip', agent, card, state
+       game.on 'new_cards', (agent, cards) ->
+               # server assigns card numbers, and tells both clients
+               # (unlike all other api calls, sending agent expects to get this one back)
+               forward_events.call this, 'new_cards', 'server', cards
        game.on 'set_cards', (agent, cards) ->
                forward_events.call this, 'set_cards', agent, cards
        game.on 'send_state', (agent) ->
@@ -191,23 +195,6 @@ new_game = (id) ->
 
 test_init = ->
        test_game = new_game 'test'
-       timeout 2, ->
-               test_game.set_cards 'server', [
-                       { text: "Wildabeast 2/2", x: 220, y: 200, owner: 'p2'}
-                       { text: "Boar 2/2", x: 360, y: 200, owner: 'p2', pile: 'p2_discard'}
-                       { text: "Angora bunny 1/1", x: 500, y: 200, owner: 'p2'}
-                       { text: "Ambulatory Cactus 2/1", x: 660, y: 200, owner: 'p2'}
-                       { text: "Ent 0/5", x: 800, y: 200, owner: 'p2'}
-                       { text: "Carnivore 2/1", x: 220, y: 420, owner: 'p1'}
-                       { text: "Herbivore 1/2", x: 360, y: 420, owner: 'p1'}
-                       { text: "Stone Wall 0/10", x: 500, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-                       { text: "Log 0/1", x: 660, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-                       { text: "Ent 0/5", x: 800, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-                       { text: "Barricade 0/10", x: 500, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-                       { text: "O(log(n)) 0/1", x: 660, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-                       { text: "Fence 0/5", x: 800, y: 420, owner: 'p1', pile: 'p1_draw', flipped: true}
-               ]
-
 test_init()
 
 
@@ -236,6 +223,7 @@ http_server = http.createServer (req, res) ->
                        for key, parg of post_args
                                query[key] = parg
                        return set_handler query, res, req, url_parts
+               return
        else if rel_path.substr(rel_path.length - 4) is '/get'
                return get_handler url_parts.query, res, req, url_parts
        else if rel_path.substr(rel_path.length - 4) is '.ico'

diff --git a/style.less b/style.less
index db96490..622e725 100644 (file)
--- a/style.less
+++ b/style.less
@@ -12,7 +12,7 @@
 @your-side-color: #ffe2e2;
 @my-side-color: #e2ffe2;
 
-#loading-card {
+#loading_card {
        top: (@table-height - @card-height) / 2 - 4px;
        left: (@table-width - @card-width) / 2 - 4px;
 }
@@ -167,4 +167,12 @@ h1 {
        height: @table-height + 20;
        overflow: scroll;
        .shadow(3px, 3px, 16px, 0.8);
+
+       li, div {
+               cursor: pointer;
+       }
+
+       .in_deck {
+               color: #080;
+       }
 }