From b37a8095165739d15d6b1049bf9181b6d5fa4069 Mon Sep 17 00:00:00 2001 From: Eunchong Kim Date: Sat, 24 Jul 2021 20:04:39 +0900 Subject: [PATCH] Added human draw card --- js/uno_game.js | 8 ++++---- src/index.js | 2 ++ src/js/card.js | 7 +++++-- src/js/player.js | 2 +- src/js/room.js | 31 +++++++++++++++++++++++++++---- 5 files changed, 39 insertions(+), 11 deletions(-) diff --git a/js/uno_game.js b/js/uno_game.js index 2e5b3c1..5d381ae 100644 --- a/js/uno_game.js +++ b/js/uno_game.js @@ -146,7 +146,7 @@ eval("module.exports = __webpack_require__.p + \"494a6b831f5837e010b9.jpg\";\n\n \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _js_basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./js/basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _js_room_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./js/room.js */ \"./src/js/room.js\");\n/* harmony import */ var _js_box_text_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./js/box_text.js */ \"./src/js/box_text.js\");\n/* harmony import */ var _styles_uno_game_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./styles/uno-game.scss */ \"./src/styles/uno-game.scss\");\n/* Class */\n\n\n\n/* SCSS */\n\n\n// Global variables\n__webpack_require__.g.canvas_count = 0; // increment number to avoid the same canvas id\n\n// uno-game-div must be found\n__webpack_require__.g.uno_game_div;\n__webpack_require__.g.uno_game_w = window.innerWidth;\n__webpack_require__.g.uno_game_h = window.innerHeight;\n\n/* Main view */\ndocument.addEventListener('DOMContentLoaded', () => {\n // Get uno-game-div\n __webpack_require__.g.uno_game_div = document.getElementById('uno-game');\n __webpack_require__.g.uno_game_div.classList.add('uno-game-div');\n\n // Create background canv\n const bkg = new _js_basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default(0, 0, __webpack_require__.g.uno_game_w, __webpack_require__.g.uno_game_h);\n bkg.canvas.classList.add('uno-game-canv-bkg');\n\n // Create room button\n const create_room_box_text = new _js_box_text_js__WEBPACK_IMPORTED_MODULE_2__.default(__webpack_require__.g.uno_game_w*5/12, __webpack_require__.g.uno_game_h*3/4,\n __webpack_require__.g.uno_game_w/6, __webpack_require__.g.uno_game_w/12, 'Create Game');\n\n /* Canvas click */\n create_room_box_text.canvas.addEventListener(\"click\", e => {\n create_room_box_text.remove();\n createRoom();\n });\n});\n\n\n/* Game start */\nasync function createRoom() {\n console.info('Game start');\n\n const room = new _js_room_js__WEBPACK_IMPORTED_MODULE_1__.default('room1');\n\n room.addHuman('newini');\n room.addBot();\n room.addBot();\n room.addBot();\n\n await( room.initCards() );\n\n await( room.dealCards() );\n\n await new Promise(resolve => setTimeout(resolve, 500));\n\n await( room.startGame() );\n}\n\n\n\nconsole.log('Uno End')\n\n\n//# sourceURL=webpack://uno-game/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _js_basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./js/basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _js_room_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./js/room.js */ \"./src/js/room.js\");\n/* harmony import */ var _js_box_text_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./js/box_text.js */ \"./src/js/box_text.js\");\n/* harmony import */ var _styles_uno_game_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./styles/uno-game.scss */ \"./src/styles/uno-game.scss\");\n/* Class */\n\n\n\n/* SCSS */\n\n\n// Global variables\n__webpack_require__.g.canvas_count = 0; // increment number to avoid the same canvas id\n\n// uno-game-div must be found\n__webpack_require__.g.uno_game_div;\n__webpack_require__.g.uno_game_w = window.innerWidth;\n__webpack_require__.g.uno_game_h = window.innerHeight;\n\n/* Main view */\ndocument.addEventListener('DOMContentLoaded', () => {\n // Get uno-game-div\n __webpack_require__.g.uno_game_div = document.getElementById('uno-game');\n __webpack_require__.g.uno_game_div.classList.add('uno-game-div');\n\n // Create background canv\n const bkg = new _js_basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default(0, 0, __webpack_require__.g.uno_game_w, __webpack_require__.g.uno_game_h);\n bkg.canvas.classList.add('uno-game-canv-bkg');\n\n // Create room button\n const create_room_box_text = new _js_box_text_js__WEBPACK_IMPORTED_MODULE_2__.default(__webpack_require__.g.uno_game_w*5/12, __webpack_require__.g.uno_game_h*3/4,\n __webpack_require__.g.uno_game_w/6, __webpack_require__.g.uno_game_w/12, 'Create Game');\n\n /* Canvas click */\n create_room_box_text.canvas.addEventListener(\"click\", e => {\n create_room_box_text.remove();\n createRoom();\n });\n});\n\n\n/* Game start */\nasync function createRoom() {\n console.info('Game start');\n\n const room = new _js_room_js__WEBPACK_IMPORTED_MODULE_1__.default('room1');\n\n room.addHuman('newini');\n room.addBot();\n room.addBot();\n room.addBot();\n\n await( room.initCards() );\n\n await new Promise(resolve => setTimeout(resolve, 1000));\n\n await( room.dealCards() );\n\n await new Promise(resolve => setTimeout(resolve, 500));\n\n await( room.startGame() );\n}\n\n\n\nconsole.log('Uno End')\n\n\n//# sourceURL=webpack://uno-game/./src/index.js?"); /***/ }), @@ -186,7 +186,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Card)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _images_cards_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../images/cards.svg */ \"./src/images/cards.svg\");\n/* harmony import */ var _images_card_back_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../images/card_back.svg */ \"./src/images/card_back.svg\");\n\n/* Images */\n\n\n\nclass Card extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(x, y, num, color_n) {\n super(x, y, __webpack_require__.g.uno_game_w/16, __webpack_require__.g.uno_game_w/16*360/240);\n\n this._c_w = 240;\n this._c_h = 360;\n\n this._num = num;\n this._color_n = color_n;\n\n this._cards_img = new Image();\n this._cards_img.src = _images_cards_svg__WEBPACK_IMPORTED_MODULE_1__;\n this._card_back_img = new Image();\n this._card_back_img.src = _images_card_back_svg__WEBPACK_IMPORTED_MODULE_2__;\n\n // Add border\n this._canvas.style.border = '1px solid #000000';\n\n // Add transition\n this._canvas.style.transition = '0.5s';\n\n // Fill\n this._card_back_img.addEventListener('load', () => {\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n this._is_front = false;\n });\n }\n\n get num() {\n return this._num;\n }\n set num(num) {\n this._num = num;\n }\n get color_n() {\n return this._color_n;\n }\n set color_n(color_n) {\n this._color_n = color_n;\n }\n\n isMatch(card) {\n if ( (this._num <= 12 && this._num === card.num)\n || (this._num >= 13)\n || (this._color_n === card.color_n) ) {\n return true;\n } else {\n return false;\n }\n }\n\n flip() {\n this.clear();\n if (this._is_front) {\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n this._is_front = false;\n } else {\n this._cards_img.addEventListener('load', () => {\n 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,\n 0, 0, this._w, this._h);\n this._is_front = true;\n });\n }\n }\n\n drawImageFront(x, y) {\n this.move(x, y);\n this.clear();\n 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,\n 0, 0, this._w, this._h);\n }\n\n drawImageBack(x, y) {\n this.move(x, y);\n this.clear();\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n }\n\n mouseEffect() {\n this._canvas.addEventListener('mouseenter', () => {\n console.log(this._canvas.style.top)\n console.log(this._y)\n console.log(this._h/4)\n this._canvas.style.top = this._y - this._h/4 + 'px';\n console.log(this._canvas.style.top)\n });\n this._canvas.addEventListener('mouseleave', () => {\n console.log(this._canvas.style.top)\n this._canvas.style.top = this._y + 'px';\n console.log(this._canvas.style.top)\n });\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/card.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Card)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _images_cards_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../images/cards.svg */ \"./src/images/cards.svg\");\n/* harmony import */ var _images_card_back_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../images/card_back.svg */ \"./src/images/card_back.svg\");\n\n/* Images */\n\n\n\nclass Card extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(x, y, num, color_n) {\n super(x, y, __webpack_require__.g.uno_game_w/16, __webpack_require__.g.uno_game_w/16*360/240);\n\n this._c_w = 240;\n this._c_h = 360;\n\n this._num = num;\n this._color_n = color_n;\n\n this._cards_img = new Image();\n this._cards_img.src = _images_cards_svg__WEBPACK_IMPORTED_MODULE_1__;\n this._card_back_img = new Image();\n this._card_back_img.src = _images_card_back_svg__WEBPACK_IMPORTED_MODULE_2__;\n\n // Add border\n this._canvas.style.border = '1px solid #000000';\n\n // Add transition\n this._canvas.style.transition = '0.5s';\n\n // Fill\n this._card_back_img.addEventListener('load', () => {\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n this._is_front = false;\n });\n }\n\n get num() {\n return this._num;\n }\n set num(num) {\n this._num = num;\n }\n get color_n() {\n return this._color_n;\n }\n set color_n(color_n) {\n this._color_n = color_n;\n }\n\n isMatch(card) {\n if ( (this._num <= 12 && this._num === card.num)\n || (this._num >= 13)\n || (this._color_n === card.color_n) ) {\n return true;\n } else {\n return false;\n }\n }\n\n flip() {\n this.clear();\n if (this._is_front) {\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n this._is_front = false;\n } else {\n this._cards_img.addEventListener('load', () => {\n 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,\n 0, 0, this._w, this._h);\n this._is_front = true;\n });\n }\n }\n\n async drawImageFront(x, y) {\n if (x && y) {\n this.move(x, y);\n }\n this.clear();\n this._cards_img.src = await (_images_cards_svg__WEBPACK_IMPORTED_MODULE_1__);\n 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,\n 0, 0, this._w, this._h);\n }\n\n drawImageBack(x, y) {\n this.move(x, y);\n this.clear();\n this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);\n }\n\n mouseEffect() {\n this._canvas.addEventListener('mouseenter', () => {\n console.log(this._canvas.style.top)\n console.log(this._y)\n console.log(this._h/4)\n this._canvas.style.top = this._y - this._h/4 + 'px';\n console.log(this._canvas.style.top)\n });\n this._canvas.addEventListener('mouseleave', () => {\n console.log(this._canvas.style.top)\n this._canvas.style.top = this._y + 'px';\n console.log(this._canvas.style.top)\n });\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/card.js?"); /***/ }), @@ -206,7 +206,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \**************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Player)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n\n\nclass Player extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(name, id) {\n super();\n\n this._name = name;\n this._id = id;\n this._cards = [];\n this._type = '';\n }\n\n get id() {\n return this._id;\n }\n set id(id) {\n this._id = id;\n }\n\n get name() {\n return this._name;\n }\n set name(name) {\n this._name = name;\n }\n\n get type() {\n return this._type;\n }\n set type(type) {\n this._type = type;\n }\n\n get cards() {\n return this._cards;\n }\n set cards(cards) {\n this._cards = cards;\n }\n\n addCard(card) {\n this._cards.push(card);\n this.sortCards();\n if (this.type === 'human') {\n card.flip();\n }\n }\n\n removeCard(card) {\n this._cards.splice(this._cards.indexOf(card), 1);\n }\n\n isEmpty() {\n return (this._cards.length === 0) ? true : false;\n }\n\n refreshCards() {\n for (let i=0; i (a.num > b.num) ? 1 : -1 );\n this.refreshCards();\n }\n\n\n ellipticalFormula(x, a, b) {\n return b * ( 1 - Math.sqrt( 1 - (x/a - 1)**2 ) );\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/player.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Player)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n\n\nclass Player extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(name, id) {\n super();\n\n this._name = name;\n this._id = id;\n this._cards = [];\n this._type = '';\n }\n\n get id() {\n return this._id;\n }\n set id(id) {\n this._id = id;\n }\n\n get name() {\n return this._name;\n }\n set name(name) {\n this._name = name;\n }\n\n get type() {\n return this._type;\n }\n set type(type) {\n this._type = type;\n }\n\n get cards() {\n return this._cards;\n }\n set cards(cards) {\n this._cards = cards;\n }\n\n addCard(card) {\n this._cards.push(card);\n this.sortCards();\n if (this.type === 'human') {\n card.drawImageFront();\n }\n }\n\n removeCard(card) {\n this._cards.splice(this._cards.indexOf(card), 1);\n }\n\n isEmpty() {\n return (this._cards.length === 0) ? true : false;\n }\n\n refreshCards() {\n for (let i=0; i (a.num > b.num) ? 1 : -1 );\n this.refreshCards();\n }\n\n\n ellipticalFormula(x, a, b) {\n return b * ( 1 - Math.sqrt( 1 - (x/a - 1)**2 ) );\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/player.js?"); /***/ }), @@ -216,7 +216,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Room)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _human_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./human.js */ \"./src/js/human.js\");\n/* harmony import */ var _bot_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./bot.js */ \"./src/js/bot.js\");\n/* harmony import */ var _card_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card.js */ \"./src/js/card.js\");\n\n\n\n\n/* Images */\n\nclass Room extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(name) {\n super(0, 0, __webpack_require__.g.uno_game_w, __webpack_require__.g.uno_game_h/10);\n\n this._name = name;\n this._players = [];\n this._cards = [];\n this._used_cards = [];\n\n // Fill room name\n this._ctx.font = Math.floor(this._h/3) + \"px Arial\";\n this._ctx.fillText(name, 10, 50);\n }\n\n addHuman(name) {\n this._players.push( new _human_js__WEBPACK_IMPORTED_MODULE_1__.default(name, this._players.length) );\n console.log(this._players);\n }\n\n addBot() {\n this._players.push( new _bot_js__WEBPACK_IMPORTED_MODULE_2__.default('bot', this._players.length) );\n console.log(this._players);\n }\n\n initCards() {\n console.log('Init')\n const index_arr = [...Array(108).keys()];\n for (let num=0; num<14; num++) {\n for (let color_n=0; color_n<8; color_n++) {\n if ( (num === 0) && (color_n >= 4) ) { // Skip blank card\n continue;\n }\n if ( (num === 13) && (color_n >= 4) ) { // +4 cards\n num = 14;\n }\n const card_index = index_arr.splice(Math.floor( Math.random() * index_arr.length), 1)[0];\n this._cards[ card_index ] = new _card_js__WEBPACK_IMPORTED_MODULE_3__.default(__webpack_require__.g.uno_game_w*6/16+card_index, __webpack_require__.g.uno_game_h/2, num, color_n%4);\n }\n }\n // re-order z-index\n for (let i=0; i {\n for (let i=0; i<7; i++) {\n player.addCard( this._cards.pop() );\n }\n });\n console.log(this._players);\n }\n\n async startGame() {\n console.log('Game start');\n\n this._turn_count = 0;\n\n await( this.changeTopCard( this._cards.pop() ) );\n\n await( this._current_player = this._players[0] );\n\n if (this._current_player.type === 'bot') {\n this.botPlay();\n } else {\n this.humanTurn();\n }\n\n // if (player.isEmpty()) {\n // console.log('player: ' + player.name + ' has no card left. Game end');\n // break\n // }\n }\n\n async processPlay() {\n await( this._current_player.refreshCards() );\n\n this._turn_count++;\n this._current_player = this.getNextPlayer();\n if (this._current_player.type === 'human') {\n this.humanTurn();\n } else {\n this.botPlay();\n }\n }\n\n async botPlay() {\n console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);\n await new Promise(resolve => setTimeout(resolve, 1000));\n\n const card = await( this._current_player.playCard(this._top_card) );\n if (card) {\n console.log('played card num: ' + card.num + ', color: ' + card.color_n);\n this.changeTopCard(card);\n } else {\n const card = this._cards.pop();\n console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);\n this._current_player.addCard(card);\n }\n\n this.processPlay();\n }\n\n humanTurn() {\n console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);\n\n this._current_player.cards.forEach( (card) => {\n if (this._top_card.isMatch(card)) {\n card.mouseEffect();\n\n card.canvas.addEventListener('click', () => {\n console.log('played card num: ' + card.num + ', color: ' + card.color_n);\n\n // Remove all cards' event listener\n this._current_player.cards.forEach( (card) => {\n card.resetEventListener();\n });\n\n this.changeTopCard(card);\n\n this._current_player.removeCard(card);\n\n this.processPlay();\n });\n }\n });\n\n }\n\n getNextPlayer() {\n let current_player_id = this._current_player.id;\n if (this._reverse) {\n if (current_player_id === 0) {\n current_player_id = this._players.length - 1;\n } else {\n current_player_id--;\n }\n } else {\n if (current_player_id === this._players.length-1) {\n current_player_id = 0;\n } else {\n current_player_id++;\n }\n }\n return this._players[current_player_id];\n }\n\n changeTopCard(card) {\n if (this._top_card) {\n this._used_cards.push(this._top_card);\n }\n this._top_card = card;\n this._top_card.drawImageFront(__webpack_require__.g.uno_game_w*8/16+this._turn_count, __webpack_require__.g.uno_game_h/2);\n this._top_card.refresh();\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/room.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Room)\n/* harmony export */ });\n/* harmony import */ var _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./basic_canvas.js */ \"./src/js/basic_canvas.js\");\n/* harmony import */ var _human_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./human.js */ \"./src/js/human.js\");\n/* harmony import */ var _bot_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./bot.js */ \"./src/js/bot.js\");\n/* harmony import */ var _card_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./card.js */ \"./src/js/card.js\");\n\n\n\n\n/* Images */\n\nclass Room extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(name) {\n super(0, 0, __webpack_require__.g.uno_game_w, __webpack_require__.g.uno_game_h/10);\n\n this._name = name;\n this._players = [];\n this._cards = [];\n this._used_cards = [];\n\n // Fill room name\n this._ctx.font = Math.floor(this._h/3) + \"px Arial\";\n this._ctx.fillText(name, 10, 50);\n }\n\n addHuman(name) {\n this._players.push( new _human_js__WEBPACK_IMPORTED_MODULE_1__.default(name, this._players.length) );\n console.log(this._players);\n }\n\n addBot() {\n this._players.push( new _bot_js__WEBPACK_IMPORTED_MODULE_2__.default('bot', this._players.length) );\n console.log(this._players);\n }\n\n initCards() {\n console.log('Init')\n const index_arr = [...Array(108).keys()];\n for (let num=0; num<14; num++) {\n for (let color_n=0; color_n<8; color_n++) {\n if ( (num === 0) && (color_n >= 4) ) { // Skip blank card\n continue;\n }\n if ( (num === 13) && (color_n >= 4) ) { // +4 cards\n num = 14;\n }\n const card_index = index_arr.splice(Math.floor( Math.random() * index_arr.length), 1)[0];\n this._cards[ card_index ] = new _card_js__WEBPACK_IMPORTED_MODULE_3__.default(__webpack_require__.g.uno_game_w*6/16+card_index, __webpack_require__.g.uno_game_h/2, num, color_n%4);\n }\n }\n // re-order z-index\n for (let i=0; i {\n for (let i=0; i<7; i++) {\n player.addCard( this._cards.pop() );\n }\n });\n console.log(this._players);\n }\n\n async startGame() {\n console.log('Game start');\n\n this._turn_count = 0;\n\n await( this.changeTopCard( this._cards.pop() ) );\n\n await( this._current_player = this._players[0] );\n\n if (this._current_player.type === 'bot') {\n this.botPlay();\n } else {\n this.humanTurn();\n }\n\n // if (player.isEmpty()) {\n // console.log('player: ' + player.name + ' has no card left. Game end');\n // break\n // }\n }\n\n processCard() {\n\n }\n\n async finishTurn() {\n await( this._current_player.refreshCards() );\n\n this._turn_count++;\n this._current_player = this.getNextPlayer();\n if (this._current_player.type === 'human') {\n this.humanTurn();\n } else {\n this.botPlay();\n }\n }\n\n async botPlay() {\n console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);\n await new Promise(resolve => setTimeout(resolve, 1000));\n\n const card = await( this._current_player.playCard(this._top_card) );\n if (card) {\n console.log('played card num: ' + card.num + ', color: ' + card.color_n);\n this.changeTopCard(card);\n } else {\n const card = this._cards.pop();\n console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);\n this._current_player.addCard(card);\n }\n\n this.finishTurn();\n }\n\n humanTurn() {\n console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);\n\n this._top_back_card = this._cards[ this._cards.length-1 ];\n\n this._current_player.cards.forEach( (card) => {\n if (this._top_card.isMatch(card)) {\n card.mouseEffect();\n\n card.canvas.addEventListener('click', () => {\n console.log('played card num: ' + card.num + ', color: ' + card.color_n);\n\n // Remove event listener\n this._top_back_card.resetEventListener();\n this._current_player.cards.forEach( (card) => {\n card.resetEventListener();\n });\n\n this.changeTopCard(card);\n\n this._current_player.removeCard(card);\n\n this.finishTurn();\n });\n }\n });\n\n // Draw card\n this._top_back_card.canvas.addEventListener('click', () => {\n const card = this._cards.pop();\n console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);\n\n // Remove event listener\n this._top_back_card.resetEventListener();\n this._current_player.cards.forEach( (card) => {\n card.resetEventListener();\n });\n\n this._current_player.addCard(card);\n\n this.finishTurn();\n });\n\n }\n\n getNextPlayer() {\n let current_player_id = this._current_player.id;\n if (this._reverse) {\n if (current_player_id === 0) {\n current_player_id = this._players.length - 1;\n } else {\n current_player_id--;\n }\n } else {\n if (current_player_id === this._players.length-1) {\n current_player_id = 0;\n } else {\n current_player_id++;\n }\n }\n return this._players[current_player_id];\n }\n\n changeTopCard(card) {\n if (this._top_card) {\n this._used_cards.push(this._top_card);\n }\n this._top_card = card;\n this._top_card.drawImageFront(__webpack_require__.g.uno_game_w*8/16+this._turn_count, __webpack_require__.g.uno_game_h/2);\n this._top_card.refresh();\n }\n\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/room.js?"); /***/ }) diff --git a/src/index.js b/src/index.js index 957e52f..852ab11 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,8 @@ async function createRoom() { await( room.initCards() ); + await new Promise(resolve => setTimeout(resolve, 1000)); + await( room.dealCards() ); await new Promise(resolve => setTimeout(resolve, 500)); diff --git a/src/js/card.js b/src/js/card.js index e6bd0cf..b191d16 100644 --- a/src/js/card.js +++ b/src/js/card.js @@ -68,9 +68,12 @@ export default class Card extends BasicCanvas { } } - drawImageFront(x, y) { - this.move(x, y); + async drawImageFront(x, y) { + if (x && y) { + this.move(x, y); + } this.clear(); + this._cards_img.src = await (cards_img); 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, 0, 0, this._w, this._h); } diff --git a/src/js/player.js b/src/js/player.js index 92d17d5..a1317a8 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -42,7 +42,7 @@ export default class Player extends BasicCanvas { this._cards.push(card); this.sortCards(); if (this.type === 'human') { - card.flip(); + card.drawImageFront(); } } diff --git a/src/js/room.js b/src/js/room.js index e7f4f81..6754141 100644 --- a/src/js/room.js +++ b/src/js/room.js @@ -81,7 +81,11 @@ export default class Room extends BasicCanvas { // } } - async processPlay() { + processCard() { + + } + + async finishTurn() { await( this._current_player.refreshCards() ); this._turn_count++; @@ -107,12 +111,14 @@ export default class Room extends BasicCanvas { this._current_player.addCard(card); } - this.processPlay(); + this.finishTurn(); } humanTurn() { console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name); + this._top_back_card = this._cards[ this._cards.length-1 ]; + this._current_player.cards.forEach( (card) => { if (this._top_card.isMatch(card)) { card.mouseEffect(); @@ -120,7 +126,8 @@ export default class Room extends BasicCanvas { card.canvas.addEventListener('click', () => { console.log('played card num: ' + card.num + ', color: ' + card.color_n); - // Remove all cards' event listener + // Remove event listener + this._top_back_card.resetEventListener(); this._current_player.cards.forEach( (card) => { card.resetEventListener(); }); @@ -129,11 +136,27 @@ export default class Room extends BasicCanvas { this._current_player.removeCard(card); - this.processPlay(); + this.finishTurn(); }); } }); + // Draw card + this._top_back_card.canvas.addEventListener('click', () => { + const card = this._cards.pop(); + console.log('drawed card num: ' + card.num + ', color: ' + card.color_n); + + // Remove event listener + this._top_back_card.resetEventListener(); + this._current_player.cards.forEach( (card) => { + card.resetEventListener(); + }); + + this._current_player.addCard(card); + + this.finishTurn(); + }); + } getNextPlayer() {