Implement autopicking

When the user selects a card for autopicking, but then their time
expires, the server automatically picks the autopick card on their
behalf rather than picking a card at random. This is behavior similar
to that of MTGO.

If the user fails to select any card at all, the old behavior applies
and one is selected at random.

Author: arxanas

public/src/cards.js

@@ -226,13 +226,10 @@ function clickPack(cardName) {
     // There may be duplicate cards in a pack, but only one copy of a card is
     // shown in the pick view. We must be sure to mark them all since we don't
     // know which one is being displayed.
-    rawPack.forEach(card => card.isSelected = card.name == cardName);
+    rawPack.forEach(card => card.isAutopick = card.name === cardName)
     App.update()
+    App.send('autopick', index)
     return clicked
-  } else if (card.hasOwnProperty('isSelected')) {
-    // Don't leave the is-selected overlay when moving the card to a different
-    // zone.
-    delete card['isSelected']
   }
 
   clicked = null

public/src/components/grid.js

@@ -15,11 +15,13 @@ function zone(zoneName) {
   let values = _.values(zone)
   let cards = _.flat(values)
 
+  let isAutopickable = card => zoneName === 'pack' && card.isAutopick
+
   let items = cards.map(card =>
     d.span(
       {
-        className: card.isSelected ? 'selected-card' : 'unselected-card',
-        title: card.isSelected ? 'This card will be automatically picked if your time expires.' : '',
+        className: `card ${isAutopickable(card) ? 'autopick-card' : ''}`,
+        title: isAutopickable(card) ? 'This card will be automatically picked if your time expires.' : '',
         onClick: App._emit('click', zoneName, card.name),
       },
       d.img({

public/style.css

@@ -39,15 +39,14 @@ time {
   color: white;
 }
 
-/* Tint the card blue when selected. */
-.selected-card, .unselected-card {
+.card {
   display: inline-block;
   position: relative;
   margin: 0;
   cursor: pointer;
 }
 
-.selected-card:before, .unselected-card:hover:before {
+.card:hover:before, .autopick-card:before {
   content: '';
 
   display: block;
@@ -64,7 +63,7 @@ time {
   background: rgba(200, 200, 200, 0.25);
 }
 
-.selected-card:after {
+.autopick-card:after {
   content: 'Autopick';
 
   display: inline-block;

src/game.js

@@ -17,7 +17,7 @@ var games = {}
       continue
     for (var p of game.players)
       if (p.time && !--p.time)
-        p.pickRand()
+        p.pickOnTimeout()
   }
   setTimeout(playerTimer, SECOND)
 })()

src/human.js

@@ -10,6 +10,7 @@ module.exports = class extends EventEmitter {
       name: sock.name,
       time: 0,
       packs: [],
+      autopick_index: -1,
       pool: []
     })
     this.attach(sock)
@@ -19,6 +20,7 @@ module.exports = class extends EventEmitter {
       this.sock.ws.close()
 
     sock.mixin(this)
+    sock.on('autopick', this._autopick.bind(this))
     sock.on('pick', this._pick.bind(this))
     sock.on('hash', this._hash.bind(this))
 
@@ -34,6 +36,11 @@ module.exports = class extends EventEmitter {
     this.hash = hash(deck)
     this.emit('meta')
   }
+  _autopick(index) {
+    var [pack] = this.packs
+    if (pack && index < pack.length)
+      this.autopick_index = index
+  }
   _pick(index) {
     var [pack] = this.packs
     if (pack && index < pack.length)
@@ -65,17 +72,20 @@ module.exports = class extends EventEmitter {
     else
       this.sendPack(next)
 
+    this.autopick_index = -1
     this.emit('pass', pack)
   }
-  pickRand() {
-    var index = _.rand(this.packs[0].length)
+  pickOnTimeout() {
+    let index = this.autopick_index
+    if (index === -1)
+      index = _.rand(this.packs[0].length)
     this.pick(index)
   }
   kick() {
     this.send = ()=>{}
     while(this.packs.length)
-      this.pickRand()
-    this.sendPack = this.pickRand
+      this.pickOnTimeout()
+    this.sendPack = this.pickOnTimeout
     this.isBot = true
   }
 }