diff --git a/js/uno_game.js b/js/uno_game.js index b61c6f0..79bce04 100644 --- a/js/uno_game.js +++ b/js/uno_game.js @@ -16,7 +16,7 @@ \***************************************************************************************************************/ /***/ ((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// 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.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"); /***/ }), @@ -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 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 _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?"); /***/ }), diff --git a/src/index.js b/src/index.js index 852ab11..12beae5 100644 --- a/src/index.js +++ b/src/index.js @@ -23,12 +23,22 @@ document.addEventListener('DOMContentLoaded', () => { const bkg = new BasicCanvas(0, 0, global.uno_game_w, global.uno_game_h); bkg.canvas.classList.add('uno-game-canv-bkg'); + // Create UNO title + const title = document.createElement('h1'); + title.innerHTML = 'UNO Game' + title.classList.add('uno-game-typewriter') + title.style.fontSize = global.uno_game_h/6 + 'px'; + title.style.top = global.uno_game_h/3 + 'px'; + title.style.zIndex = global.canvas_count; + global.canvas_count++; + global.uno_game_div.appendChild( title ); + // Create room button const create_room_box_text = new BoxText(global.uno_game_w*5/12, global.uno_game_h*3/4, global.uno_game_w/6, global.uno_game_w/12, 'Create Game'); - - /* Canvas click */ create_room_box_text.canvas.addEventListener("click", e => { + // Remove elements + title.remove(); create_room_box_text.remove(); createRoom(); }); diff --git a/src/styles/uno-game.scss b/src/styles/uno-game.scss index fa62c6c..b203bd8 100644 --- a/src/styles/uno-game.scss +++ b/src/styles/uno-game.scss @@ -12,3 +12,35 @@ .uno-game-canv-bkg { background-image: url('../images/green_table.jpg'); } + +// Title +.uno-game-typewriter { + position: absolute; + left: 0; + right: 0; + + font-family: 'Waiting for the Sunrise', cursive; + font-weight: bold; + text-align: center; + + overflow: hidden; /* Ensures the content is not revealed until the animation */ + border-right: .15em solid orange; /* The typwriter cursor */ + white-space: nowrap; /* Keeps the content on a single line */ + margin: 0 auto; /* Gives that scrolling effect as the typing happens */ + letter-spacing: .15em; /* Adjust as needed */ + animation: + typing 3.5s steps(20, end), + blink-caret .75s step-end infinite; +} + +/* The typing effect */ +@keyframes typing { + from { width: 0 } + to { width: 100% } +} + +/* The typewriter cursor effect */ +@keyframes blink-caret { + from, to { border-color: transparent } + 50% { border-color: orange; } +}