Added human play card effect

src/js/basic_canvas.js

@@ -53,6 +53,8 @@ export default class BasicCanvas {
   }
 
   move(x, y) {
+    this._x = x;
+    this._y = y;
     this._canvas.style.left = x + 'px';
     this._canvas.style.top = y + 'px';
   }
@@ -65,4 +67,5 @@ export default class BasicCanvas {
   remove() {
     this._canvas.remove();
   }
+
 }

src/js/card.js

@@ -69,18 +69,31 @@ export default class Card extends BasicCanvas {
   }
 
   drawImageFront(x, y) {
-    this._canvas.style.left = x + 'px';
+    this.move(x, y);
-    this._canvas.style.top = y + 'px';
     this.clear();
     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);
   }
 
   drawImageBack(x, y) {
-    this._canvas.style.left = x + 'px';
+    this.move(x, y);
-    this._canvas.style.top = y + 'px';
     this.clear();
     this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
   }
 
+  mouseEffect() {
+    this._canvas.addEventListener('mouseenter', () => {
+      console.log(this._canvas.style.top)
+      console.log(this._y)
+      console.log(this._h/4)
+      this._canvas.style.top = this._y - this._h/4 + 'px';
+      console.log(this._canvas.style.top)
+    });
+    this._canvas.addEventListener('mouseleave', () => {
+      console.log(this._canvas.style.top)
+      this._canvas.style.top = this._y + 'px';
+      console.log(this._canvas.style.top)
+    });
+  }
+
 }

src/js/room.js

@@ -31,7 +31,6 @@ export default class Room extends BasicCanvas {
   initCards() {
     console.log('Init')
     const index_arr = [...Array(108).keys()];
-    let cnt = 0;
     for (let num=0; num<14; num++) {
       for (let color_n=0; color_n<8; color_n++) {
         if ( (num === 0) && (color_n >= 4) ) { // Skip blank card
@@ -42,9 +41,9 @@ export default class Room extends BasicCanvas {
         }
         const card_index = index_arr.splice(Math.floor( Math.random() * index_arr.length), 1)[0];
         this._cards[ card_index ] = new Card(global.uno_game_w*6/16+card_index, global.uno_game_h/2, num, color_n%4);
-        cnt++;
       }
     }
+    // re-order z-index
     for (let i=0; i<this._cards.length; i++) {
       this._cards[i].refresh();
     }
@@ -115,20 +114,24 @@ export default class Room extends BasicCanvas {
     console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
 
     this._current_player.cards.forEach( (card) => {
-      card.canvas.addEventListener('click', () => {
+      if (this._top_card.isMatch(card)) {
-        console.log('played card num: ' + card.num + ', color: ' + card.color_n);
+        card.mouseEffect();
 
-        // Remove event listener
+        card.canvas.addEventListener('click', () => {
-        this._current_player.cards.forEach( (card) => {
+          console.log('played card num: ' + card.num + ', color: ' + card.color_n);
-          card.resetEventListener();
+
+          // Remove all cards' event listener
+          this._current_player.cards.forEach( (card) => {
+            card.resetEventListener();
+          });
+
+          this.changeTopCard(card);
+
+          this._current_player.removeCard(card);
+
+          this.processPlay();
         });
-
+      }
-        this.changeTopCard(card);
-
-        this._current_player.removeCard(card);
-
-        this.processPlay();
-      });
     });
 
   }