Added color change

README.md

@@ -51,3 +51,8 @@ or
 npm run build
 ```
 This command will generate `dist/main.js`
+
+
+
+## TODO
+- multiplay

src/js/basic_canvas.js

@@ -41,6 +41,13 @@ export default class BasicCanvas {
     this._ctx.clearRect(0, 0, global.uno_game_w, global.uno_game_h);
   }
 
+  fillColor(i) {
+    const colors = { 0: 'red', 1: 'yellow', 2: 'green', 3: 'blue' };
+    this._ctx.fillStyle = colors[i];
+    this._ctx.rect(0, 0, this._w, this._h);
+    this._ctx.fill();
+  }
+
   resetEventListener() {
     // clone canvas and replace w/o event listener
     const canvas = this._canvas.cloneNode(true);
@@ -71,7 +78,10 @@ export default class BasicCanvas {
   }
 
   remove() {
+    console.log('remove canvas')
+    this._canvas.parentNode.removeChild( this._canvas );
     this._canvas.remove();
+    //delete this._canvas;
   }
 
 }

src/js/bot.js

@@ -6,6 +6,10 @@ export default class Bot extends Player {
     this._type = 'bot';
   }
 
+  changeColor() {
+    return Math.floor( Math.random() * 4 );
+  }
+
   playCard(top_card) {
     for (let i=0; i<this._cards.length; i++) {
       const card = this._cards[i];

src/js/card.js

@@ -45,43 +45,35 @@ export default class Card extends BasicCanvas {
   }
 
   isMatch(card) {
-    if ( (this._num <= 12 && this._num === card.num)
+    if ( (card.num <= 12 && this._num === card.num) // Normal card
-      || (this._num >= 13)
+      || (card.num >= 13) // Change color card
-      || (this._color_n === card.color_n) ) {
+      || (card.color_n === this._color_n) ) { // Color match
       return true;
     } else {
       return false;
     }
   }
 
-  flip() {
-    this.clear();
-    if (this._is_front) {
-      this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
-      this._is_front = false;
-    } else {
-      this._cards_img.addEventListener('load', () => {
-        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);
-        this._is_front = true;
-      });
-    }
-  }
-
   async drawImageFront(x, y) {
-    if (x && y) {
+    if (x && y) this.move(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,
+    // Treat +4 card
+    let num = this._num, color_n = this._color_n;
+    if (num === 14) {
+      num = 13;
+      color_n += 4;
+    }
+    this._ctx.drawImage(this._cards_img, 1+this._c_w*num, 1+this._c_h*color_n, this._c_w, this._c_h,
         0, 0, this._w, this._h);
+    this._is_front = true;
   }
 
   drawImageBack(x, y) {
-    this.move(x, y);
+    if (x && y) this.move(x, y);
     this.clear();
     this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
+    this._is_front = false;
   }
 
   mouseEffect() {

src/js/human.js

@@ -1,4 +1,5 @@
 import Player from './player.js';
+import BasicCanvas from './basic_canvas.js';
 
 export default class Human extends Player {
   constructor(name, id) {
@@ -7,6 +8,7 @@ export default class Human extends Player {
     this._type = 'human';
   }
 
+
   playCard(top_card) {
     return this._cards.splice(0, 1)[0];
   }

src/js/room.js

@@ -29,7 +29,7 @@ export default class Room extends BasicCanvas {
   }
 
   initCards() {
-    console.log('Init')
+    console.log('Initialize cards')
     const index_arr = [...Array(108).keys()];
     for (let num=0; num<14; num++) {
       for (let color_n=0; color_n<8; color_n++) {
@@ -103,7 +103,6 @@ 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);
@@ -134,10 +133,28 @@ export default class Room extends BasicCanvas {
             card.resetEventListener();
           });
 
+          // Show color change blocks
+          if (card.num === 13 || card.num === 14) {
+            const bc_colors = [];
+            for (let i=0; i<4; i++) {
+              const w = global.uno_game_w;
+              const bc = new BasicCanvas(w/2+w*i/16, global.uno_game_h*3/4, w/16, w/16);
+              bc.fillColor(i);
+              bc.canvas.addEventListener('click', () => {
+                bc_colors.forEach( bc_color => bc_color.remove() );
+                // Change card color
+                card.color_n = i;
+                // Process
                 this.changeTopCard(card);
-          this.treatCard(card);
                 this.finishTurn();
               });
+              bc_colors.push(bc);
+            }
+          } else {
+            this.changeTopCard(card);
+            this.finishTurn();
+          }
+        });
       }
     });
 
@@ -155,30 +172,6 @@ export default class Room extends BasicCanvas {
       this._current_player.addCard(card);
       this.finishTurn();
     });
-
-  }
-
-  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() {
@@ -225,12 +218,43 @@ export default class Room extends BasicCanvas {
   }
 
   changeTopCard(card) {
-    if (this._top_card) {
+    if (this._top_card) this._used_cards.push(this._top_card);
-      this._used_cards.push(this._top_card);
-    }
     this._top_card = card;
     this._top_card.drawImageFront(global.uno_game_w*8/16+this._turn_count, global.uno_game_h/2);
     this._top_card.refresh();
+    this.treatCard();
   }
 
+  async treatCard() {
+    console.log('treat card num:' + this._top_card.num)
+    switch (this._top_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
+        await ( this.changeColor() );
+        break;
+       case 14: // +4 color change card
+        this._draw4 = true;
+        await ( this.changeColor() );
+        break;
+      default:
+        break;
+    }
+  }
+
+  changeColor() {
+    if (this._current_player.type === 'bot') {
+      this._top_card.color_n = this._current_player.changeColor();
+      console.log('change color' + this._top_card.color_n);
+    }
+  }
+
+
 }