Added card img and use canvas ctx to draw image

src/index.js

@@ -8,18 +8,26 @@ import './styles/uno-game.scss';
 //import green_table from './images/green_table.jpg';
 
 
+
 document.addEventListener('DOMContentLoaded', () => {
   const div = document.getElementById('uno-game');
-  div.classList.add('uno-game');
+  div.classList.add('uno-game-div');
+
+  const canvas = document.createElement("CANVAS");
+  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);
 
 });
 
-const room = new Room();
-room.addHuman('newini');
-room.addBot();
 
-setTimeout( () => { room.startGame(); }, 1000);
-
-//room.startGame();
 
 console.log('Uno End')

src/js/card.js

@@ -1,7 +1,7 @@
 export default class Card {
-  constructor(num, color) {
+  constructor(num, color_n) {
     this._num = num;
-    this._color = color;
+    this._color_n = color_n;
   }
 
   get num() {
@@ -10,15 +10,15 @@ export default class Card {
   set num(num) {
     this._num = num;
   }
-  get color() {
-    return this._color;
+  get color_n() {
+    return this._color_n;
   }
-  set color(color) {
-    this._color = color;
+  set color_n(color_n) {
+    this._color_n = color_n;
   }
 
   isMatch(card) {
-    if ( (this._num === card.num) || (this._color === card.color) ) {
+    if ( (this._num === card.num) || (this._color_n === card.color_n) ) {
       return true;
     } else {
       return false;

src/js/room.js

@@ -1,13 +1,26 @@
 import Human from './human.js';
 import Bot from './bot.js';
 import Card from './card.js';
+import cards_img from '../images/cards.svg';
 
 export default class Room {
-  constructor(id) {
-    this._id = (typeof id === 'number') ? id : 0;
+  constructor(name, ctx) {
+    this._name = name;
     this._players = [];
     this._cards = [];
-    this.ALL_COLORS = ['red', 'yellow', 'green', 'blue'];
+    this._ctx = ctx;
+
+    this._ctx.font = "32px Arial";
+    this._ctx.fillText(name, 50, 50);
+    //this._ctx.drawImage(back, canvas.width-cdWidth/2-60, canvas.height/2-cdHeight/4, cdWidth/2, cdHeight/2);
+    //this._ctx.fillText(playerName, 100, 390);
+
+    this._cdWidth = 240;
+    this._cdHeight = 360;
+
+    this._cards_img = new Image();
+    this._cards_img.src = cards_img;
+    this._back_img = new Image();
   }
 
   addHuman(name) {
@@ -21,29 +34,28 @@ export default class Room {
   }
 
   initDeck() {
-    this.ALL_COLORS.forEach( (color) => {
-      for (let num=0; num<=12; num++) {
-        const card = new Card(num, color);
-        this._cards.push( card );
-      }
-    });
-    this.ALL_COLORS.forEach( (color) => {
-      for (let num=1; num<=12; num++) {
-        const card = new Card(num, color);
-        this._cards.push( card );
-      }
-    });
-    for (let i=0; i<4; i++) {
-      for (let num=13; num<=14; num++) {
-        const card = new Card(num, 'none');
-        this._cards.push( card );
+    for (let x=0; x<14; x++) {
+      for (let y=0; y<8; y++) {
+        if ( (x === 0) && (y >= 4) ) {
+          continue;
+        }
+        const card = new Card(x, y);
+        this._cards.push(card);
       }
     }
+    console.log(this._cards);
   }
+
   shuffleDeck() {
     this._players.forEach( (player) => {
       for (let i=0; i<7; i++) {
-        player.addCard( this.draw() );
+        const card = this.draw();
+        const cdWidth = this._cdWidth;
+        const cdHeight = this._cdHeight;
+        this._ctx.drawImage(this._cards_img, 1+cdWidth*card.num, 1+cdHeight*card.color_n, cdWidth, cdHeight,
+            1+cdWidth*i/10, 100, cdWidth/10, cdHeight/10);
+          //(hand.length/112)*(cdWidth/3)+(canvas.width/(2+(hand.length-1)))*(i+1)-(cdWidth/4), 400, cdWidth/2, cdHeight/2);
+        player.addCard(card);
       }
     });
     console.log(this._players);
@@ -62,20 +74,24 @@ export default class Room {
     let current_turn = 0;
     let top_card = this.draw();
 
+    console.log('Game start');
+
     while (true) {
-      console.log('count: ' + count + ', current_turn: ' + current_turn);
+      console.log('count: ' + count + ', current player: ' + this._players[current_turn].name);
       const player = this._players[current_turn];
 
       const card = await( player.playCard(top_card) );
       if (card) {
-        console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color);
+        console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n);
         top_card = card;
       } else {
-        player.addCard( this.draw() );
+        const card = this.draw();
+        console.log('player: ' + player.name + ' drawed card num: ' + card.num + ', color: ' + card.color_n);
+        player.addCard(card);
       }
 
       if (player.isEmpty()) {
-        console.log('game end')
+        console.log('player: ' + player.name + ' has no card left. Game end');
         break
       }
       current_turn = (current_turn >= this._players.length-1) ? 0 : ++current_turn;

src/styles/uno-game.scss

@@ -1,4 +1,4 @@
-.uno-game {
+.uno-game-div {
   width: 800px;
   height: 450px;
   background-image: url('../images/green_table.jpg');