diff --git a/src/images/card_back.svg b/src/images/card_back.svg
new file mode 100644
index 0000000..64ff074
--- /dev/null
+++ b/src/images/card_back.svg
@@ -0,0 +1 @@
+
diff --git a/src/images/cards.svg b/src/images/cards.svg
new file mode 100644
index 0000000..df488ca
--- /dev/null
+++ b/src/images/cards.svg
@@ -0,0 +1,5395 @@
+
+
+
+
diff --git a/src/index.js b/src/index.js
index 5d901f7..fa73638 100644
--- a/src/index.js
+++ b/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')
diff --git a/src/js/card.js b/src/js/card.js
index 08c4bef..0037473 100644
--- a/src/js/card.js
+++ b/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;
diff --git a/src/js/room.js b/src/js/room.js
index f4079d0..9ff3bbc 100644
--- a/src/js/room.js
+++ b/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;
diff --git a/src/styles/uno-game.scss b/src/styles/uno-game.scss
index 9dc0fde..ccb27ab 100644
--- a/src/styles/uno-game.scss
+++ b/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');