- make the logo on the cards from css instead of images

- fix reshuffle notifications not delivering to client properly
- fix not actually putting "draw 2" cards into the players' hands

WebContent/cah.css

@@ -221,7 +221,7 @@ span.debug {
 
 .whitecard {
   background: white;
-  color: black;
+  color: #231f20;
 }
 
 .cah {
@@ -366,3 +366,104 @@ span.debug {
 .selected {
   border: 3px solid blue;
 }
+
+.logo {
+  position: absolute;
+  width: 250px;
+  height: 32px;
+  bottom: 15px;
+  left: 15px;
+}
+
+.logo_element {
+  top: 2px;
+  position: absolute;
+  width: 22px;
+  height: 22px;
+}
+
+
+.blackcard .logo_element {
+  border: 1px solid #231f20;
+}
+
+/*
+.whitecard .logo_element {
+  border: 1px solid white;
+}
+*/
+
+.logo_1 {
+  left: 2px;
+}
+
+.blackcard .logo_1 {
+  background: #57585a;
+}
+
+.whitecard .logo_1 {
+  background: #231f20;
+}
+
+.logo_2 {
+  left: 10px;
+}
+
+.blackcard .logo_2 {
+  background: #b2b3b7;
+}
+
+.whitecard .logo_2 {
+  background: #636366;
+}
+
+.logo_3 {
+  left: 16px;
+  top: 5px;
+}
+
+.blackcard .logo_3 {
+  background: white;
+}
+
+.whitecard .logo_3 {
+  background: #c7c8ca;
+}
+
+.logo_text {
+  position: absolute;
+  font-size: 8pt;
+  font-weight: bold;
+  left: 45px;
+  bottom: 4px;
+}
+
+.card_metadata {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+}
+
+.draw, .pick {
+  float: right;
+  clear: both;
+  font-weight: bold;
+  font-size: 12pt;
+}
+
+.card_number {
+  width: 20px;
+  height: 20px;
+
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -o-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.blackcard .card_number {
+  background: white;
+  display: inline-block;
+  color: #231f20;
+  text-align: center;
+}

WebContent/game.jsp

@@ -104,7 +104,19 @@ HttpSession hSession = request.getSession(true);
 <div class="hide">
 	<div id="black_up_template" class="card blackcard">
 	  <span class="card_text">The quick brown fox jumped over the lazy dog.</span>
-	  <img src="img/cah-black.png" class="cah" alt="Cards Against Humanity" />
+	  <div class="logo">
+	    <div class="logo_1 logo_element">
+	    </div>
+	    <div class="logo_2 logo_element">
+	    </div>
+	    <div class="logo_3 logo_element">
+	    </div>
+	    <div class="logo_text">Cards Against Humanity</div>
+	  </div>
+    <div class="card_metadata">
+      <div class="draw hide">DRAW <div class="card_number"></div></div>
+      <div class="pick hide">PICK <div class="card_number"></div></div>
+    </div>
 	</div>
 </div>
 
@@ -118,7 +130,15 @@ HttpSession hSession = request.getSession(true);
 <div class="hide">
 	<div id="white_up_template" class="card whitecard">
 	  <span class="card_text">The quick brown fox jumped over the lazy dog.</span>
-	  <img src="img/cah-white.png" class="cah" alt="Cards Against Humanity" />
+	  <div class="logo">
+	    <div class="logo_1 logo_element">
+	    </div>
+	    <div class="logo_2 logo_element">
+	    </div>
+	    <div class="logo_3 logo_element">
+	    </div>
+	    <div class="logo_text">Cards Against Humanity</div>
+	  </div>
 	</div>
 </div>
 

WebContent/index.jsp

@@ -49,8 +49,18 @@
 </ul>
 <p>Current limitations:</p>
 <ul>
-  <li>Support for Black Cards with "pick" and/or "draw" annotations is not implemented. These cards
-  are skipped entirely at the moment.</li>
+  <li>Support for Black Cards with "pick" and/or "draw" annotations is rudimentary. When you play
+  your cards, it does not group them until the judging starts. Also, when other players play cards,
+  you do not see any progress from them until they have played all 2 or 3 cards, and it only shows
+  a single face-down card for them. I will try to make this look nicer, but it works.
+	  <ul>
+	    <li>Also, you cannot un-do your first (or second) card: Once it's played, it's played.</li>
+	    <li>While judging, only one card will be highlighted. It does not matter which card in a group
+	    you click, the game will figure it out.</li>
+	    <li>I have not tried to make a 9-way Pick 3 result yet. It may be very hard to read. I will
+	    tweak the scaling on the cards if necessary.</li>
+	  </ul>
+  </li>
   <li>All games and the main lobby share the same chat.</li>
   <li>There is no play timer to keep the game moving if one person goes idle. However, if their
   browser crashes or they lose connection, they will be removed from the game after approximately 3
@@ -63,7 +73,7 @@
 <ul>
   <li>There will be a button to see the result of the previous round eventually.</li>
   <li>There will be host options to limit the number of players and set the target score soon.</li>
-  <li>There will be a timer to keep the game moving if somebody goes afk soon.</li>
+  <li>There will be a timer to keep the game moving if somebody goes AFK soon.</li>
   <li>There may be an option to display who played every card.</li>
   <li>There will be improved status information, so it will be easier to tell who is the Card Czar.
   </li>

WebContent/js/cah.card.js

@@ -127,6 +127,18 @@ cah.card.BaseCard.prototype.setText = function(text) {
 cah.card.BaseCard.prototype.ensureFaceUpElement_ = function() {
   if (!this.faceUpElem_) {
     this.faceUpElem_ = this.getFaceUp_();
+    $(".logo_1", this.faceUpElem_).animate({
+      rotate : "-13deg",
+    }, {
+      duration : 0,
+      queue : false,
+    });
+    $(".logo_3", this.faceUpElem_).animate({
+      rotate : "13deg",
+    }, {
+      duration : 0,
+      queue : false,
+    });
   }
 };
 
@@ -169,6 +181,22 @@ cah.card.BaseCard.prototype.getElement = function() {
  */
 cah.card.BlackCard = function(opt_faceUp, opt_id) {
   cah.card.BaseCard.call(this, opt_faceUp, opt_id);
+
+  /**
+   * The number of white cards to draw when this is the active black card.
+   * 
+   * @type {number}
+   * @private
+   */
+  this.draw_ = 0;
+
+  /**
+   * The number of white cards to play for this black card.
+   * 
+   * @type {number}
+   * @private
+   */
+  this.pick_ = 1;
 };
 cah.inherits(cah.card.BlackCard, cah.card.BaseCard);
 
@@ -186,6 +214,51 @@ cah.card.BlackCard.prototype.getFaceUp_ = function() {
   return temp;
 };
 
+/**
+ * @param {number}
+ *          draw The number of white cards to draw when this black card is played.
+ */
+cah.card.BlackCard.prototype.setDraw = function(draw) {
+  this.draw_ = draw;
+  this.updateCardInfo_();
+};
+
+/**
+ * @param {number}
+ *          pick The number of white cards to play for this black card.
+ */
+cah.card.BlackCard.prototype.setPick = function(pick) {
+  this.pick_ = pick;
+  this.updateCardInfo_();
+};
+
+/**
+ * Update the pick and draw displays on this card, and potentially change the game name to or from
+ * "CAH".
+ * 
+ * @private
+ */
+cah.card.BlackCard.prototype.updateCardInfo_ = function() {
+  if (this.draw_ != 0 || this.pick_ != 1) {
+    $(".logo_text", this.faceUpElem_).text("CAH");
+    if (this.draw_ != 0) {
+      $(".draw .card_number", this.faceUpElem_).text(this.draw_);
+      $(".draw", this.faceUpElem_).removeClass("hide");
+    } else {
+      $(".draw", this.faceUpElem_).addClass("hide");
+    }
+
+    if (this.pick_ != 1) {
+      $(".pick .card_number", this.faceUpElem_).text(this.pick_);
+      $(".pick", this.faceUpElem_).removeClass("hide");
+    } else {
+      $(".pick", this.faceUpElem_).addClass("hide");
+    }
+  } else {
+    $(".logo_text", this.faceUpElem_).text("Cards Against Humanity");
+  }
+};
+
 // ///////////////////////////////////////////////
 
 /**

WebContent/js/cah.game.js

@@ -220,6 +220,13 @@ cah.Game.prototype.getElement = function() {
 cah.Game.prototype.setBlackCard = function(card) {
   this.blackCard_ = new cah.card.BlackCard(true, card[cah.$.BlackCardData.ID]);
   this.blackCard_.setText(card[cah.$.BlackCardData.TEXT]);
+  this.blackCard_.setDraw(card[cah.$.BlackCardData.DRAW]);
+  this.blackCard_.setPick(card[cah.$.BlackCardData.PICK]);
+
+  if (1 != card[cah.$.BlackCardData.PICK] && this.judge_ != cah.nickname) {
+    cah.log.status("Play " + card[cah.$.BlackCardData.PICK]
+        + " cards, in the order you wish them to be judged.");
+  }
 
   $(".game_black_card", this.element_).empty().append(this.blackCard_.getElement());
 };

src/net/socialgamer/cah/data/Game.java

@@ -399,12 +399,27 @@ public class Game {
     } catch (final OutOfCardsException e) {
       whiteDeck.reshuffle();
       final HashMap<ReturnableData, Object> data = getEventMap();
-      data.put(LongPollResponse.EVENT, LongPollEvent.GAME_WHITE_RESHUFFLE);
+      data.put(LongPollResponse.EVENT, LongPollEvent.GAME_WHITE_RESHUFFLE.toString());
       broadcastToPlayers(MessageType.GAME_EVENT, data);
       return getNextWhiteCard();
     }
   }
 
+  /**
+   * @return The next Black Card from the deck, reshuffling if required.
+   */
+  private BlackCard getNextBlackCard() {
+    try {
+      return blackDeck.getNextCard();
+    } catch (final OutOfCardsException e) {
+      whiteDeck.reshuffle();
+      final HashMap<ReturnableData, Object> data = getEventMap();
+      data.put(LongPollResponse.EVENT, LongPollEvent.GAME_BLACK_RESHUFFLE.toString());
+      broadcastToPlayers(MessageType.GAME_EVENT, data);
+      return getNextBlackCard();
+    }
+  }
+
   private void playingState() {
     state = GameState.PLAYING;
 
@@ -413,19 +428,7 @@ public class Game {
     }
 
     synchronized (blackCardLock) {
-      do {
-        try {
-          blackDeck.discard(blackCard);
-          blackCard = blackDeck.getNextCard();
-        } catch (final OutOfCardsException e) {
-          blackDeck.reshuffle();
-          final HashMap<ReturnableData, Object> data = getEventMap();
-          data.put(LongPollResponse.EVENT, LongPollEvent.GAME_BLACK_RESHUFFLE);
-          broadcastToPlayers(MessageType.GAME_EVENT, data);
-          continue;
-        }
-        // TODO remove this loop once the game supports the pick and draw features
-      } while (blackCard.getDraw() != 2);
+      blackCard = getNextBlackCard();
 
       if (blackCard.getDraw() > 0) {
         synchronized (players) {
@@ -437,6 +440,7 @@ public class Game {
             for (int i = 0; i < blackCard.getDraw(); i++) {
               cards.add(getNextWhiteCard());
             }
+            player.getHand().addAll(cards);
             sendCardsToPlayer(player, cards);
           }
         }