Added treat special card

src/js/basic_canvas.js

@@ -57,6 +57,7 @@ export default class BasicCanvas {
     this._y = y;
     this._canvas.style.left = x + 'px';
     this._canvas.style.top = y + 'px';
+    this.refresh();
   }
 
   scale(scale) {

src/js/card.js

@@ -86,16 +86,10 @@ export default class Card extends BasicCanvas {
 
   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/player.js

@@ -51,21 +51,23 @@ export default class Player extends BasicCanvas {
   }
 
   isEmpty() {
-    return (this._cards.length === 0) ? true : false;
+    return (this._cards.length === 0);
   }
 
-  refreshCards() {
+  ellipticalFormula(x, a, b) {
+    return b * ( 1 - Math.sqrt( 1 - (x/a - 1)**2 ) );
+  }
+
+  reDeployCards() {
     for (let i=0; i<this._cards.length; i++) {
-      let x0, y0, dx, dy;
       if (this._id === 0) {
-        x0 = global.uno_game_w/4;
-        dx = global.uno_game_w/2 / (this._cards.length+1);
-        y0 = global.uno_game_h*4/5;
-        dy = 0;
-        this._cards[i].move(x0 + dx*(i+1), y0 + dy*(i+1));
+        const x0 = global.uno_game_w/4;
+        const dx = global.uno_game_w/2 / (this._cards.length+1);
+        const y0 = global.uno_game_h*4/5;
+        this._cards[i].move(x0 + dx*(i+1), y0);
       } else {
-        x0 = global.uno_game_w*(this._id-1)/3;
-        dx = global.uno_game_w/3 / (this._cards.length+2);
+        const x0 = global.uno_game_w*(this._id-1)/3;
+        const dx = global.uno_game_w/3 / (this._cards.length+2);
         this._cards[i].move(x0 + dx*(i+1), this.ellipticalFormula(x0 + dx*(i+1), global.uno_game_w/2, global.uno_game_h));
       }
     }
@@ -73,12 +75,7 @@ export default class Player extends BasicCanvas {
 
   sortCards() {
     this._cards.sort( (a, b) => (a.num > b.num) ? 1 : -1 );
-    this.refreshCards();
-  }
-
-
-  ellipticalFormula(x, a, b) {
-    return b * ( 1 - Math.sqrt( 1 - (x/a - 1)**2 ) );
+    this.reDeployCards();
   }
 
 }

src/js/room.js

@@ -63,41 +63,39 @@ export default class Room extends BasicCanvas {
   async startGame() {
     console.log('Game start');
 
+    // Init
     this._turn_count = 0;
+    this._skip = false;
+    this._reverse = false;
+    this._draw2 = false;
+    this._draw4 = false;
+    this._current_player = this._players[0];
 
     await( this.changeTopCard( this._cards.pop() ) );
 
-    await( this._current_player = this._players[0] );
-
-    if (this._current_player.type === 'bot') {
-      this.botPlay();
-    } else {
-      this.humanTurn();
-    }
-
-    //  if (player.isEmpty()) {
-    //    console.log('player: ' + player.name + ' has no card left. Game end');
-    //    break
-    //  }
+    this.initTurn();
   }
 
-  processCard() {
-
-  }
-
-  async finishTurn() {
-    await( this._current_player.refreshCards() );
-
-    this._turn_count++;
-    this._current_player = this.getNextPlayer();
-    if (this._current_player.type === 'human') {
-      this.humanTurn();
+  initTurn() {
+    // check draw cards
+    if (this._draw2) {
+      this._draw2 = false;
+      for (let i=0; i<2; i++) this._current_player.addCard( this._cards.pop() );
+      this.finishTurn();
+    } else if (this._draw4) {
+      this._draw4 = false;
+      for (let i=0; i<4; i++) this._current_player.addCard( this._cards.pop() );
+      this.finishTurn();
     } else {
-      this.botPlay();
+      if (this._current_player.type === 'bot') {
+        this.botTurn();
+      } else {
+        this.humanTurn();
+      }
     }
   }
 
-  async botPlay() {
+  async botTurn() {
     console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
     await new Promise(resolve => setTimeout(resolve, 1000));
 
@@ -105,6 +103,7 @@ export default class Room extends BasicCanvas {
     if (card) {
       console.log('played card num: ' + card.num + ', color: ' + card.color_n);
       this.changeTopCard(card);
+      this.treatCard(card);
     } else {
       const card = this._cards.pop();
       console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);
@@ -118,13 +117,16 @@ export default class Room extends BasicCanvas {
     console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
 
     this._top_back_card = this._cards[ this._cards.length-1 ];
+    this._top_back_card.mouseEffect();
 
+    // Select card event
     this._current_player.cards.forEach( (card) => {
       if (this._top_card.isMatch(card)) {
         card.mouseEffect();
 
         card.canvas.addEventListener('click', () => {
           console.log('played card num: ' + card.num + ', color: ' + card.color_n);
+          this._current_player.removeCard(card);
 
           // Remove event listener
           this._top_back_card.resetEventListener();
@@ -133,15 +135,13 @@ export default class Room extends BasicCanvas {
           });
 
           this.changeTopCard(card);
-
-          this._current_player.removeCard(card);
-
+          this.treatCard(card);
           this.finishTurn();
         });
       }
     });
 
-    // Draw card
+    // Draw card event
     this._top_back_card.canvas.addEventListener('click', () => {
       const card = this._cards.pop();
       console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);
@@ -153,28 +153,75 @@ export default class Room extends BasicCanvas {
       });
 
       this._current_player.addCard(card);
-
       this.finishTurn();
     });
 
   }
 
-  getNextPlayer() {
-    let current_player_id = this._current_player.id;
-    if (this._reverse) {
-      if (current_player_id === 0) {
-        current_player_id = this._players.length - 1;
-      } else {
-        current_player_id--;
-      }
+  treatCard(card) {
+    console.log('treat card num:' + card.num)
+    switch (card.num) {
+      case 10: // skip card
+        this._skip = true;
+        break;
+      case 11: // reverse card
+        this._reverse = (this._reverse) ? false : true;
+        break;
+      case 12: // +2 card
+        this._draw2 = true;
+        break;
+      case 13: // change color card
+        card.color_n = 0; // TODO
+        break;
+       case 14: // +4 card
+        this._draw4 = true;
+        break;
+      default:
+        break;
+    }
+  }
+
+  async finishTurn() {
+    console.log('finish turn')
+
+    // re-deploy player's cards
+    await( this._current_player.reDeployCards() );
+
+    // Check empty
+    if (this._current_player.isEmpty()) {
+      console.log('player: ' + this._current_player.name + ' has no card left. Game end');
     } else {
-      if (current_player_id === this._players.length-1) {
-        current_player_id = 0;
+      this._turn_count++;
+      await ( this.decideNextPlayer() );
+      this.initTurn();
+    }
+  }
+
+  decideNextPlayer() {
+    console.log('decide next player')
+
+    let current_player_id = this._current_player.id;
+    let loop_cnt = 1;
+    if (this._skip) {
+      this._skip = false;
+      loop_cnt++;
+    }
+    for (let i=0; i<loop_cnt; i++) {
+      if (this._reverse) {
+        if (current_player_id === 0) {
+          current_player_id = this._players.length - 1;
+        } else {
+          current_player_id--;
+        }
       } else {
-        current_player_id++;
+        if (current_player_id === this._players.length-1) {
+          current_player_id = 0;
+        } else {
+          current_player_id++;
+        }
       }
     }
-    return this._players[current_player_id];
+    this._current_player = this._players[current_player_id];
   }
 
   changeTopCard(card) {