Changed to use multiple canvas for each item with z-index

src/index.js

@@ -1,37 +1,38 @@
 /* Class */
+import BasicCanvas from './js/basic_canvas.js';
 import Room from './js/room.js';
 import BoxText from './js/box_text.js';
 /* SCSS */
 import './styles/uno-game.scss';
 
-const canvas = document.createElement("CANVAS");
-const ctx = canvas.getContext('2d');
-let start_game_box_text;
+// Global variables
+global.canvas_count = 0; // increment number to avoid the same canvas id
 
+// uno-game-div must be found
+global.uno_game_div;
+global.uno_game_w = window.innerWidth;
+global.uno_game_h = window.innerHeight;
 
 /* Main view */
 document.addEventListener('DOMContentLoaded', () => {
-  // Add div class
-  const div = document.getElementById('uno-game');
-  div.classList.add('uno-game-div');
+  // Get uno-game-div
+  global.uno_game_div = document.getElementById('uno-game');
+  global.uno_game_div.classList.add('uno-game-div');
 
-  const inner_w = window.innerWidth;
-  const inner_h = window.innerHeight;
-  // Add canvas
-  canvas.classList.add('uno-game-canv');
-  canvas.width = inner_w;
-  canvas.height = inner_h;
-  div.appendChild( canvas );
+  // Create canvas
+  const basic_canvas = new BasicCanvas();
 
-  // Add game start buttono
-  const btn_width = inner_w/8;
-  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');
+  // Set canvas
+  basic_canvas.canvas.classList.add('uno-game-canv-main');
 
-});
+  // Add game start button with bitmap
+  const btn_width = global.uno_game_w/8;
+  const start_game_box_text = new BoxText(basic_canvas.ctx, global.uno_game_w*5/12, global.uno_game_h*3/4,
+      global.uno_game_w/7, global.uno_game_w/8/1.6, 'Start Game');
 
-/* Canvas click */
-canvas.addEventListener("click", e => {
-  const rect = canvas.getBoundingClientRect();
+  /* Canvas click */
+  basic_canvas.canvas.addEventListener("click", e => {
+    const rect = basic_canvas.canvas.getBoundingClientRect();
     const point = {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top
@@ -39,17 +40,20 @@ canvas.addEventListener("click", e => {
 
     console.log(point);
     if ( start_game_box_text.isClicked(point) ) {
-    start_game_box_text.clear();
+      basic_canvas.clear();
       startGame();
     }
+  });
+
 });
 
-const room = new Room('room1', ctx);
 
 /* Game start */
 function startGame() {
   console.info('Game start');
 
+  const room = new Room('room1');
+
   room.addHuman('newini');
   room.addBot();
   room.addBot();

src/js/basic_canvas.js

@@ -0,0 +1,31 @@
+export default class BasicCanvas {
+  constructor() {
+    this._canvas = document.createElement("CANVAS");
+    global.uno_game_div.appendChild( this._canvas );
+    global.canvas_count++;
+    console.debug(global.canvas_count);
+    this._canvas.width = global.uno_game_w;
+    this._canvas.height = global.uno_game_h;
+    this._canvas.classList.add('uno-game-canv-default');
+    this._canvas.style += 'z-index: ' + global.canvas_count + ';';
+    this._ctx = this._canvas.getContext('2d');
+  }
+
+  get canvas() {
+    return this._canvas;
+  }
+  set canvas(canvas) {
+    this._canvas = canvas;
+  }
+
+  get ctx() {
+    return this._ctx;
+  }
+  set ctx(ctx) {
+    this._ctx = ctx;
+  }
+
+  clear() {
+    this._ctx.clearRect(0, 0, global.uno_game_w, global.uno_game_h);
+  }
+}

src/js/box_text.js

@@ -21,8 +21,4 @@ export default class BoxText {
     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

@@ -1,11 +1,22 @@
+import BasicCanvas from './basic_canvas.js';
+/* Images */
+import cards_img from '../images/cards.svg';
+import card_back from '../images/card_back.svg';
 
-export default class Card {
+export default class Card extends BasicCanvas {
   constructor(num, color_n) {
+    super();
+
     this._num = num;
     this._color_n = color_n;
 
-    this._card_w = 240;
-    this._card_h = 360;
+    this._c_w = 240;
+    this._c_h = 360;
+
+    this._cards_img = new Image();
+    this._cards_img.src = cards_img;
+    this._card_back_img = new Image();
+    this._card_back_img.src = card_back;
   }
 
   get num() {
@@ -31,24 +42,22 @@ export default class Card {
     }
   }
 
-  drawImageFront(ctx, img, x, y) {
+  drawImageFront(x, y) {
+    this.clear();
     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,
+    this._w = global.uno_game_w/16;
+    this._h = this._w * this._c_h / this._c_w;
+    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,
         x, y, this._w, this._h);
   }
 
-  drawImageBack(ctx, img, x, y) {
+  drawImageBack(x, y) {
+    this.clear();
     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);
+    this._w = global.uno_game_w/16;
+    this._h = this._w * this._c_h / this._c_w;
+    this._ctx.drawImage(this._card_back_img, x, y, this._w, this._h);
   }
 }

src/js/player.js

@@ -1,5 +1,9 @@
-export default class Player {
+import BasicCanvas from './basic_canvas.js';
+
+export default class Player extends BasicCanvas {
   constructor(name, id) {
+    super();
+
     this._name = name;
     this._id = id;
     this._cards = [];

src/js/room.js

@@ -1,25 +1,21 @@
+import BasicCanvas from './basic_canvas.js';
 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) {
+export default class Room extends BasicCanvas {
+  constructor(name) {
+    super();
+
     this._name = name;
     this._players = [];
     this._cards = [];
     this._used_cards = [];
-    this._ctx = ctx;
 
+    // Fill room name
     this._ctx.font = "32px Arial";
     this._ctx.fillText(name, 10, 10);
-
-    this._cards_img = new Image();
-    this._cards_img.src = cards_img;
-    this._card_back_img = new Image();
-    this._card_back_img.src = card_back;
   }
 
   addHuman(name) {
@@ -41,8 +37,7 @@ export default class Room {
         if ( (x === 13) && (y >= 4) ) { // +4 cards
           x = 14;
         }
-        const card = new Card(x, y%4);
-        this._cards.push(card);
+        this._cards.push( new Card(x, y%4) );
       }
     }
     console.log(this._cards);
@@ -67,17 +62,17 @@ export default class Room {
     const inner_h = window.innerHeight;
 
     // Drw top card
-    this._top_card.drawImageFront(this._ctx, this._cards_img, inner_w/2, inner_h/2);
+    this._top_card.drawImageFront(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);
+        card.clear();
         if (player.type == 'bot') {
-          card.drawImageBack(this._ctx, this._card_back_img, inner_w*(i+1)/16, inner_h*player.id/5);
+          card.drawImageBack(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);
+          card.drawImageFront(inner_w*(i+1)/16, inner_h*4/5);
         }
       }
     });
@@ -100,7 +95,7 @@ export default class Room {
       const card = await( player.playCard(this._top_card) );
       if (card) {
         console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n);
-        card.eraseImage(this._ctx);
+        card.clear();
         this._used_cards.push(this._top_card);
         this._top_card = card;
       } else {

src/styles/uno-game.scss

@@ -4,7 +4,7 @@
   margin: 0;
 }
 
-.uno-game-canv {
+.uno-game-canv-default {
   position: absolute;
   display: block;
   top: 0;
@@ -13,6 +13,8 @@
   bottom: 0;
   width: 100%;
   height: 100%;
+}
 
+.uno-game-canv-main {
   background-image: url('../images/green_table.jpg');
 }