Added BoxText class to create start game btn

src/index.js

@@ -1,33 +1,60 @@
-console.log('Uno Start')
-
 /* Class */
 import Room from './js/room.js';
+import BoxText from './js/box_text.js';
 /* SCSS */
 import './styles/uno-game.scss';
-/* Images */
-//import green_table from './images/green_table.jpg';
-
+
+const canvas = document.createElement("CANVAS");
+const ctx = canvas.getContext('2d');
+let start_game_box_text;
 
 
+/* Main view */
 document.addEventListener('DOMContentLoaded', () => {
+  // Add div class
   const div = document.getElementById('uno-game');
   div.classList.add('uno-game-div');
 
-  const canvas = document.createElement("CANVAS");
+  // Add canvas
+  canvas.classList.add('uno-game-canv')
   canvas.width = 800;
   canvas.height = 450;
   div.appendChild( canvas );
 
-  const ctx = canvas.getContext('2d');
-
-  const room = new Room('room1', ctx);
-  room.addHuman('newini');
-  room.addBot();
-
-  setTimeout( () => { room.startGame(); }, 1000);
+  // Add game start button
+  start_game_box_text = new BoxText(ctx, 300, 300, 200, 100, 'Start Game');
 
 });
 
+/* Canvas click */
+canvas.addEventListener("click", e => {
+  const rect = canvas.getBoundingClientRect();
+  const point = {
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top
+  };
+
+  console.log(point);
+  if ( start_game_box_text.isClicked(point) ) {
+    start_game_box_text.clear();
+    startGame();
+  }
+});
+
+const room = new Room('room1', ctx);
+
+/* Game start view */
+function startGame() {
+  console.info('Game start');
+
+  room.addHuman('newini');
+  room.addBot();
+  room.addBot();
+  room.addBot();
+
+  room.startGame();
+}
+
 
 
 console.log('Uno End')

src/js/bot.js

@@ -11,9 +11,8 @@ export default class Bot extends Player {
       if ( top_card.isMatch(card) ) {
         this._cards.splice(i, 1)[0];
         return card;
-      } else {
+      }
+    }
     return null;
   }
 }
-  }
-}

src/js/box_text.js

@@ -0,0 +1,28 @@
+export default class BoxText {
+  constructor(ctx, x, y, w, h, text) {
+    this._ctx = ctx;
+    this._x = x;
+    this._y = y;
+    this._w = w;
+    this._h = h;
+    this._text = text;
+
+    ctx.lineWidth = 4;
+    ctx.fillStyle = "#abc";
+    ctx.fillRect(x, y, w, h);
+    ctx.font = "30px Arial";
+    ctx.textAlign="center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "#000000";
+    ctx.fillText(text, x+w/2, y+h/2);
+  }
+
+  isClicked(point) {
+    return ( (this._x <= point.x && point.x <= this._x + this._w)
+        && (this._y <= point.y && point.y <= this._y + this._h) )
+  }
+
+  clear() {
+    this._ctx.clearRect(this._x, this._y, this._w, this._h);
+  }
+}

src/js/card.js

@@ -18,7 +18,9 @@ export default class Card {
   }
 
   isMatch(card) {
-    if ( (this._num === card.num) || (this._color_n === card.color_n) ) {
+    if ( (this._num <= 12 && this._num === card.num)
+      || (this._num >= 13)
+      || (this._color_n === card.color_n) ) {
       return true;
     } else {
       return false;

src/js/room.js

@@ -36,10 +36,13 @@ export default class Room {
   initDeck() {
     for (let x=0; x<14; x++) {
       for (let y=0; y<8; y++) {
-        if ( (x === 0) && (y >= 4) ) {
+        if ( (x === 0) && (y >= 4) ) { // Skip blank card
           continue;
         }
-        const card = new Card(x, y);
+        if ( (x === 13) && (y >= 4) ) { // +4 cards
+          x = 14;
+        }
+        const card = new Card(x, y%4);
         this._cards.push(card);
       }
     }

src/styles/uno-game.scss

@@ -3,3 +3,7 @@
   height: 450px;
   background-image: url('../images/green_table.jpg');
 }
+
+.uno-game-canv {
+  z-index:1;
+}