camill/uno-game-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated main view btn

Browse Source
This commit is contained in:
Eunchong Kim 2021-07-28 19:06:21 +09:00
parent 791b01e80d
commit 223a3b0aa8
4 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/uno_game.js
View File

@ -16,7 +16,7 @@
\***************************************************************************************************************/ \***************************************************************************************************************/
/***/ ((module, __webpack_exports__, __webpack_require__) => { /***/ ((module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../images/green_table.jpg */ \"./src/images/green_table.jpg\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".uno-game-div {\\n width: 100%;\\n height: 100%;\\n margin: 0;\\n}\\n\\n.uno-game-canv-default {\\n position: absolute;\\n display: block;\\n}\\n\\n.uno-game-canv-bkg {\\n background-image: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \");\\n}\\n\\n.uno-game-typewriter {\\n position: absolute;\\n left: 0;\\n right: 0;\\n font-family: \\\"Waiting for the Sunrise\\\", cursive;\\n font-weight: bold;\\n text-align: center;\\n overflow: hidden;\\n /* Ensures the content is not revealed until the animation */\\n border-right: 0.15em solid orange;\\n /* The typwriter cursor */\\n white-space: nowrap;\\n /* Keeps the content on a single line */\\n margin: 0 auto;\\n /* Gives that scrolling effect as the typing happens */\\n letter-spacing: 0.15em;\\n /* Adjust as needed */\\n animation: typing 3.5s steps(20, end), blink-caret 0.75s step-end infinite;\\n}\\n\\n/* The typing effect */\\n@keyframes typing {\\n from {\\n width: 0;\\n }\\n to {\\n width: 100%;\\n }\\n}\\n/* The typewriter cursor effect */\\n@keyframes blink-caret {\\n from, to {\\n border-color: transparent;\\n }\\n 50% {\\n border-color: orange;\\n }\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://uno-game/./src/styles/uno-game.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../images/green_table.jpg */ \"./src/images/green_table.jpg\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".uno-game-div {\\n width: 100%;\\n height: 100%;\\n margin: 0;\\n}\\n\\n/* Common */\\n.uno-game-canv-default {\\n position: absolute;\\n display: block;\\n}\\n\\n/* Main view */\\n.uno-game-canv-bkg {\\n background-image: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \");\\n}\\n\\n.uno-game-title {\\n position: absolute;\\n left: 0;\\n right: 0;\\n font-family: \\\"Waiting for the Sunrise\\\", cursive;\\n font-weight: bold;\\n text-align: center;\\n overflow: hidden;\\n /* Ensures the content is not revealed until the animation */\\n border-right: 0.15em solid orange;\\n /* The typwriter cursor */\\n white-space: nowrap;\\n /* Keeps the content on a single line */\\n margin: 0 auto;\\n /* Gives that scrolling effect as the typing happens */\\n letter-spacing: 0.15em;\\n /* Adjust as needed */\\n animation: typing 3.5s steps(20, end), blink-caret 0.75s step-end infinite;\\n}\\n\\n/* The typing effect */\\n@keyframes typing {\\n from {\\n width: 0;\\n }\\n to {\\n width: 100%;\\n }\\n}\\n/* The typewriter cursor effect */\\n@keyframes blink-caret {\\n from, to {\\n border-color: transparent;\\n }\\n 50% {\\n border-color: orange;\\n }\\n}\\n.uno-game-btn-div {\\n position: absolute;\\n left: 0;\\n right: 0;\\n}\\n\\n.uno-game-btn {\\n padding: 15px 32px;\\n margin: auto;\\n background-color: Transparent;\\n border: none;\\n color: white;\\n cursor: pointer;\\n /* Pointer/hand icon */\\n display: block;\\n /* Make the buttons appear below each other */\\n}\\n\\n.uno-game-btn:hover {\\n background-color: olive;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://uno-game/./src/styles/uno-game.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js");
/***/ }), /***/ }),
@ -146,7 +146,7 @@ eval("module.exports = __webpack_require__.p + \"494a6b831f5837e010b9.jpg\";\n\n
\**********************/ \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__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 UNO title\n const title = document.createElement('h1');\n title.innerHTML = 'UNO Game'\n title.classList.add('uno-game-typewriter')\n title.style.fontSize = __webpack_require__.g.uno_game_h/6 + 'px';\n title.style.top = __webpack_require__.g.uno_game_h/3 + 'px';\n title.style.zIndex = __webpack_require__.g.canvas_count;\n __webpack_require__.g.canvas_count++;\n __webpack_require__.g.uno_game_div.appendChild( title );\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 create_room_box_text.canvas.addEventListener(\"click\", e => {\n // Remove elements\n title.remove();\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?"); 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 _styles_uno_game_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles/uno-game.scss */ \"./src/styles/uno-game.scss\");\n// index.js\n\n/* Class */\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-1;\n__webpack_require__.g.uno_game_h = window.innerHeight-1;\n\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 UNO title\n const title = document.createElement('h1');\n title.innerHTML = 'UNO Game';\n title.classList.add('uno-game-title');\n title.style.fontSize = __webpack_require__.g.uno_game_h/6 + 'px';\n title.style.top = __webpack_require__.g.uno_game_h/3 + 'px';\n title.style.zIndex = __webpack_require__.g.canvas_count;\n __webpack_require__.g.canvas_count++;\n __webpack_require__.g.uno_game_div.appendChild( title );\n\n // Create div for button group\n const btn_group = document.createElement('div');\n btn_group.classList.add('uno-game-btn-div');\n btn_group.style.top = __webpack_require__.g.uno_game_h*2/3 + 'px';\n btn_group.style.zIndex = __webpack_require__.g.canvas_count;\n __webpack_require__.g.canvas_count++;\n __webpack_require__.g.uno_game_div.appendChild( btn_group );\n\n // Create single player button\n const sp_btn = document.createElement('button');\n sp_btn.classList.add('uno-game-btn');\n sp_btn.innerHTML = 'Single Player';\n sp_btn.style.fontSize = __webpack_require__.g.uno_game_h/16 + 'px';\n btn_group.appendChild( sp_btn );\n\n // Create multi player button\n const mp_btn = document.createElement('button');\n mp_btn.classList.add('uno-game-btn');\n mp_btn.innerHTML = 'Multi Player (not work)';\n mp_btn.style.fontSize = __webpack_require__.g.uno_game_h/16 + 'px';\n btn_group.appendChild( mp_btn );\n\n // Add event\n sp_btn.addEventListener(\"click\", e => {\n // Remove elements\n title.remove();\n sp_btn.remove();\n btn_group.remove();\n createRoom();\n });\n\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?");
/***/ }), /***/ }),
@ -170,16 +170,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }), /***/ }),
/***/ "./src/js/box_text.js":
/*!****************************!*\
!*** ./src/js/box_text.js ***!
\****************************/
/***/ ((__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 */ BoxText)\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 BoxText extends _basic_canvas_js__WEBPACK_IMPORTED_MODULE_0__.default {\n constructor(x, y, w, h, text) {\n super(x, y, w, h);\n\n this._text = text;\n\n this._ctx.lineWidth = 4;\n this._ctx.fillStyle = \"#abc\";\n this._ctx.fillRect(0, 0, w, h);\n this._ctx.font = Math.floor(h/3)+\"px Arial\";\n this._ctx.textAlign=\"center\";\n this._ctx.textBaseline = \"middle\";\n this._ctx.fillStyle = \"#000000\";\n this._ctx.fillText(text, w/2, h/2);\n }\n}\n\n\n//# sourceURL=webpack://uno-game/./src/js/box_text.js?");
/***/ }),
/***/ "./src/js/card.js": /***/ "./src/js/card.js":
/*!************************!*\ /*!************************!*\
!*** ./src/js/card.js ***! !*** ./src/js/card.js ***!

45
src/index.js
View File

@ -1,7 +1,8 @@
// index.js
/* Class */ /* Class */
import BasicCanvas from './js/basic_canvas.js'; import BasicCanvas from './js/basic_canvas.js';
import Room from './js/room.js'; import Room from './js/room.js';
import BoxText from './js/box_text.js';
/* SCSS */ /* SCSS */
import './styles/uno-game.scss'; import './styles/uno-game.scss';
@ -10,8 +11,9 @@ global.canvas_count = 0; // increment number to avoid the same canvas id
// uno-game-div must be found // uno-game-div must be found
global.uno_game_div; global.uno_game_div;
global.uno_game_w = window.innerWidth; global.uno_game_w = window.innerWidth-1;
global.uno_game_h = window.innerHeight; global.uno_game_h = window.innerHeight-1;
/* Main view */ /* Main view */
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -25,23 +27,46 @@ document.addEventListener('DOMContentLoaded', () => {
// Create UNO title // Create UNO title
const title = document.createElement('h1'); const title = document.createElement('h1');
title.innerHTML = 'UNO Game' title.innerHTML = 'UNO Game';
title.classList.add('uno-game-typewriter') title.classList.add('uno-game-title');
title.style.fontSize = global.uno_game_h/6 + 'px'; title.style.fontSize = global.uno_game_h/6 + 'px';
title.style.top = global.uno_game_h/3 + 'px'; title.style.top = global.uno_game_h/3 + 'px';
title.style.zIndex = global.canvas_count; title.style.zIndex = global.canvas_count;
global.canvas_count++; global.canvas_count++;
global.uno_game_div.appendChild( title ); global.uno_game_div.appendChild( title );
// Create room button // Create div for button group
const create_room_box_text = new BoxText(global.uno_game_w*5/12, global.uno_game_h*3/4, const btn_group = document.createElement('div');
global.uno_game_w/6, global.uno_game_w/12, 'Create Game'); btn_group.classList.add('uno-game-btn-div');
create_room_box_text.canvas.addEventListener("click", e => { btn_group.style.top = global.uno_game_h*2/3 + 'px';
btn_group.style.zIndex = global.canvas_count;
global.canvas_count++;
global.uno_game_div.appendChild( btn_group );
// Create single player button
const sp_btn = document.createElement('button');
sp_btn.classList.add('uno-game-btn');
sp_btn.innerHTML = 'Single Player';
sp_btn.style.fontSize = global.uno_game_h/16 + 'px';
btn_group.appendChild( sp_btn );
// Create multi player button
const mp_btn = document.createElement('button');
mp_btn.classList.add('uno-game-btn');
mp_btn.innerHTML = 'Multi Player (not work)';
mp_btn.style.fontSize = global.uno_game_h/16 + 'px';
btn_group.appendChild( mp_btn );
// Add event
sp_btn.addEventListener("click", e => {
// Remove elements // Remove elements
title.remove(); title.remove();
create_room_box_text.remove(); sp_btn.remove();
btn_group.remove();
createRoom(); createRoom();
}); });
}); });

18
src/js/box_text.js
View File

@ -1,18 +0,0 @@
import BasicCanvas from './basic_canvas.js';
export default class BoxText extends BasicCanvas {
constructor(x, y, w, h, text) {
super(x, y, w, h);
this._text = text;
this._ctx.lineWidth = 4;
this._ctx.fillStyle = "#abc";
this._ctx.fillRect(0, 0, w, h);
this._ctx.font = Math.floor(h/3)+"px Arial";
this._ctx.textAlign="center";
this._ctx.textBaseline = "middle";
this._ctx.fillStyle = "#000000";
this._ctx.fillText(text, w/2, h/2);
}
}

27
src/styles/uno-game.scss
View File

@ -4,17 +4,17 @@
margin: 0; margin: 0;
} }
/* Common */
.uno-game-canv-default { .uno-game-canv-default {
position: absolute; position: absolute;
display: block; display: block;
} }
/* Main view */
.uno-game-canv-bkg { .uno-game-canv-bkg {
background-image: url('../images/green_table.jpg'); background-image: url('../images/green_table.jpg');
} }
.uno-game-title {
// Title
.uno-game-typewriter {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -32,15 +32,32 @@
typing 3.5s steps(20, end), typing 3.5s steps(20, end),
blink-caret .75s step-end infinite; blink-caret .75s step-end infinite;
} }
/* The typing effect */ /* The typing effect */
@keyframes typing { @keyframes typing {
from { width: 0 } from { width: 0 }
to { width: 100% } to { width: 100% }
} }
/* The typewriter cursor effect */ /* The typewriter cursor effect */
@keyframes blink-caret { @keyframes blink-caret {
from, to { border-color: transparent } from, to { border-color: transparent }
50% { border-color: orange; } 50% { border-color: orange; }
} }
.uno-game-btn-div {
position: absolute;
left: 0;
right: 0;
}
.uno-game-btn {
padding: 15px 32px;
margin: auto;
background-color: Transparent;
border: none;
color: white;
cursor: pointer; /* Pointer/hand icon */
display: block; /* Make the buttons appear below each other */
}
.uno-game-btn:hover {
background-color: olive;
}