Added human draw card

src/index.js

@@ -48,6 +48,8 @@ async function createRoom() {
 
   await( room.initCards() );
 
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
   await( room.dealCards() );
 
   await new Promise(resolve => setTimeout(resolve, 500));

src/js/card.js

@@ -68,9 +68,12 @@ export default class Card extends BasicCanvas {
     }
   }
 
-  drawImageFront(x, y) {
-    this.move(x, y);
+  async drawImageFront(x, y) {
+    if (x && y) {
+      this.move(x, y);
+    }
     this.clear();
+    this._cards_img.src = await (cards_img);
     this._ctx.drawImage(this._cards_img, 1+this._c_w*this._num, 1+this._c_h*this._color_n, this._c_w, this._c_h,
         0, 0, this._w, this._h);
   }

src/js/player.js

@@ -42,7 +42,7 @@ export default class Player extends BasicCanvas {
     this._cards.push(card);
     this.sortCards();
     if (this.type === 'human') {
-      card.flip();
+      card.drawImageFront();
     }
   }
 

src/js/room.js

@@ -81,7 +81,11 @@ export default class Room extends BasicCanvas {
     //  }
   }
 
-  async processPlay() {
+  processCard() {
+
+  }
+
+  async finishTurn() {
     await( this._current_player.refreshCards() );
 
     this._turn_count++;
@@ -107,12 +111,14 @@ export default class Room extends BasicCanvas {
       this._current_player.addCard(card);
     }
 
-    this.processPlay();
+    this.finishTurn();
   }
 
   humanTurn() {
     console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
 
+    this._top_back_card = this._cards[ this._cards.length-1 ];
+
     this._current_player.cards.forEach( (card) => {
       if (this._top_card.isMatch(card)) {
         card.mouseEffect();
@@ -120,7 +126,8 @@ export default class Room extends BasicCanvas {
         card.canvas.addEventListener('click', () => {
           console.log('played card num: ' + card.num + ', color: ' + card.color_n);
 
-          // Remove all cards' event listener
+          // Remove event listener
+          this._top_back_card.resetEventListener();
           this._current_player.cards.forEach( (card) => {
             card.resetEventListener();
           });
@@ -129,11 +136,27 @@ export default class Room extends BasicCanvas {
 
           this._current_player.removeCard(card);
 
-          this.processPlay();
+          this.finishTurn();
         });
       }
     });
 
+    // Draw card
+    this._top_back_card.canvas.addEventListener('click', () => {
+      const card = this._cards.pop();
+      console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);
+
+      // Remove event listener
+      this._top_back_card.resetEventListener();
+      this._current_player.cards.forEach( (card) => {
+        card.resetEventListener();
+      });
+
+      this._current_player.addCard(card);
+
+      this.finishTurn();
+    });
+
   }
 
   getNextPlayer() {