Update view on each turn

src/index.js

@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
   div.classList.add('uno-game-div');
 
   const inner_w = window.innerWidth;
-  const inner_h = inner_w*9/16;
+  const inner_h = window.innerHeight;
   // Add canvas
   canvas.classList.add('uno-game-canv');
   canvas.width = inner_w;
@@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Add game start buttono
   const btn_width = inner_w/8;
-  start_game_box_text = new BoxText(ctx, inner_w*7/16, inner_h*3/4, inner_w/8, inner_w/8/1.6, 'Start Game');
+  start_game_box_text = new BoxText(ctx, inner_w*5/12, inner_h*3/4, inner_w/7, inner_w/8/1.6, 'Start Game');
 
 });
 

src/js/bot.js

@@ -1,8 +1,9 @@
 import Player from './player.js';
 
 export default class Bot extends Player {
-  constructor() {
-    super('bot');
+  constructor(name, id) {
+    super(name+id, id);
+    this._type = 'bot';
   }
 
   playCard(top_card) {

src/js/box_text.js

@@ -10,7 +10,7 @@ export default class BoxText {
     ctx.lineWidth = 4;
     ctx.fillStyle = "#abc";
     ctx.fillRect(x, y, w, h);
-    ctx.font = Math.floor(h/4)+"px Arial";
+    ctx.font = Math.floor(h/3)+"px Arial";
     ctx.textAlign="center";
     ctx.textBaseline = "middle";
     ctx.fillStyle = "#000000";

src/js/card.js

@@ -1,7 +1,11 @@
+
 export default class Card {
   constructor(num, color_n) {
     this._num = num;
     this._color_n = color_n;
+
+    this._card_w = 240;
+    this._card_h = 360;
   }
 
   get num() {
@@ -26,4 +30,25 @@ export default class Card {
       return false;
     }
   }
+
+  drawImageFront(ctx, img, x, y) {
+    this._x = x;
+    this._y = y;
+    this._w = ctx.canvas.width/16;
+    this._h = this._w * this._card_h / this._card_w;
+    ctx.drawImage(img, 1+this._card_w*this._num, 1+this._card_h*this._color_n, this._card_w, this._card_h,
+        x, y, this._w, this._h);
+  }
+
+  drawImageBack(ctx, img, x, y) {
+    this._x = x;
+    this._y = y;
+    this._w = ctx.canvas.width/16;
+    this._h = this._w * this._card_h / this._card_w;
+    ctx.drawImage(img, x, y, this._w, this._h);
+  }
+
+  eraseImage(ctx) {
+    ctx.clearRect(this._x, this._y, this._w, this._h);
+  }
 }

src/js/human.js

@@ -1,8 +1,9 @@
 import Player from './player.js';
 
 export default class Human extends Player {
-  constructor(name) {
-    super(name);
+  constructor(name, id) {
+    super(name, id);
+    this._type = 'human';
   }
 
   playCard(top_card) {

src/js/player.js

@@ -1,17 +1,39 @@
 export default class Player {
-  constructor(name) {
+  constructor(name, id) {
     this._name = name;
+    this._id = id;
     this._cards = [];
+    this._type = '';
+  }
+
+  get id() {
+    return this._id;
+  }
+  set id(id) {
+    this._id = id;
   }
 
   get name() {
     return this._name;
   }
-
   set name(name) {
     this._name = name;
   }
 
+  get type() {
+    return this._type;
+  }
+  set type(type) {
+    this._type = type;
+  }
+
+  get cards() {
+    return this._cards;
+  }
+  set cards(cards) {
+    this._cards = cards;
+  }
+
   addCard(card) {
     this._cards.push(card);
   }

src/js/room.js

@@ -1,35 +1,34 @@
 import Human from './human.js';
 import Bot from './bot.js';
 import Card from './card.js';
+/* Images */
 import cards_img from '../images/cards.svg';
+import card_back from '../images/card_back.svg';
 
 export default class Room {
   constructor(name, ctx) {
     this._name = name;
     this._players = [];
     this._cards = [];
+    this._used_cards = [];
     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._ctx.fillText(name, 10, 10);
 
     this._cards_img = new Image();
     this._cards_img.src = cards_img;
-    this._back_img = new Image();
+    this._card_back_img = new Image();
+    this._card_back_img.src = card_back;
   }
 
   addHuman(name) {
-    this._players.push( new Human(name) );
+    this._players.push( new Human(name, this._players.length) );
     console.log(this._players);
   }
 
   addBot() {
-    this._players.push( new Bot() );
+    this._players.push( new Bot('bot', this._players.length) );
     console.log(this._players);
   }
 
@@ -52,13 +51,7 @@ export default class Room {
   shuffleDeck() {
     this._players.forEach( (player) => {
       for (let i=0; i<7; i++) {
-        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);
+        player.addCard( this.draw() );
       }
     });
     console.log(this._players);
@@ -69,13 +62,34 @@ export default class Room {
     return this._cards.splice(card_i, 1)[0];
   }
 
+  updateView() {
+    const inner_w = window.innerWidth;
+    const inner_h = window.innerHeight;
+
+    // Drw top card
+    this._top_card.drawImageFront(this._ctx, this._cards_img, inner_w/2, inner_h/2);
+
+    // Draw players card
+    this._players.forEach( (player) => {
+      for (let i=0; i<player.cards.length; i++) {
+        const card = player.cards[i];
+        card.eraseImage(this._ctx);
+        if (player.type == 'bot') {
+          card.drawImageBack(this._ctx, this._card_back_img, inner_w*(i+1)/16, inner_h*player.id/5);
+        } else {
+          card.drawImageFront(this._ctx, this._cards_img, inner_w*(i+1)/16, inner_h*4/5);
+        }
+      }
+    });
+  }
+
   async startGame() {
     await( this.initDeck() );
     await( this.shuffleDeck() );
 
     let count = 0;
     let current_turn = 0;
-    let top_card = this.draw();
+    this._top_card = this.draw();
 
     console.log('Game start');
 
@@ -83,20 +97,29 @@ export default class Room {
       console.log('count: ' + count + ', current player: ' + this._players[current_turn].name);
       const player = this._players[current_turn];
 
-      const card = await( player.playCard(top_card) );
+      const card = await( player.playCard(this._top_card) );
       if (card) {
         console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n);
-        top_card = card;
+        card.eraseImage(this._ctx);
+        this._used_cards.push(this._top_card);
+        this._top_card = card;
       } else {
         const card = this.draw();
         console.log('player: ' + player.name + ' drawed card num: ' + card.num + ', color: ' + card.color_n);
         player.addCard(card);
       }
 
+      this.updateView();
+      //await Promise.all([
+      //    timeout(1000)
+      //]);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
       if (player.isEmpty()) {
         console.log('player: ' + player.name + ' has no card left. Game end');
         break
       }
+
       current_turn = (current_turn >= this._players.length-1) ? 0 : ++current_turn;
       count++;
     }