From db893adcff082641a4f6d6cc3de760a809c9e2fa Mon Sep 17 00:00:00 2001 From: bill-the-dev Date: Sun, 13 Feb 2022 17:03:40 -0500 Subject: [PATCH] add background animation on game start, needs turn flip --- dist/main.css | 39 +++++++++++++++++++++++++++++++--- dist/main.js | 2 +- index.html | 2 +- notes_bugs.md | 3 +++ src/index.js | 15 +++++++++++-- src/styles/index.css | 50 +++++++++++++++++++++++++++++++++++++++++--- 6 files changed, 101 insertions(+), 10 deletions(-) diff --git a/dist/main.css b/dist/main.css index 874d817..df470c5 100644 --- a/dist/main.css +++ b/dist/main.css @@ -8,10 +8,43 @@ body { background-color: #aee1f9; - background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%); - margin: 1px; + background-image: linear-gradient(45deg, #aee1f9 0%, #f6ebe6 74%); + background-size: 400%; + margin: 0px; + background-position: center; +} + +/* idea: animate 5s transition on turn flip */ +.turn-blue { + animation: bg-animationBlue 5s; + animation-fill-mode: forwards; +} + +.turn-red { + animation: bg-animationBlue 5s; + animation-fill-mode: forwards; } +.turn-null { + animation: bg-animationNull 2s; + animation-fill-mode: forwards; +} + +@keyframes bg-animationRed { + 100% { + background-position: left; + } +} +@keyframes bg-animationBlue { + 100% { + background-position: left; + } +} +@keyframes bg-animationNull { + 100% { + background-position: center; + } +} #container { width: 100%; height: 100%; @@ -22,7 +55,7 @@ body { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); - grid-template-rows: 0.25fr 1fr 2fr 1fr 0.25fr; + grid-template-rows: 0.1fr 1fr 2fr 1fr 0.25fr; /* grid-auto-rows: minmax(100px, auto); */ /* flex-direction: column; */ } diff --git a/dist/main.js b/dist/main.js index 04587ed..b07955b 100644 --- a/dist/main.js +++ b/dist/main.js @@ -16,7 +16,7 @@ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ \"./node_modules/core-js/modules/es.object.to-string.js\");\n/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ \"./node_modules/core-js/modules/web.dom-collections.for-each.js\");\n/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _styles_index_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles/index.css */ \"./src/styles/index.css\");\n/* harmony import */ var _styles_cards_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./styles/cards.css */ \"./src/styles/cards.css\");\n/* harmony import */ var _styles_pieces_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles/pieces.css */ \"./src/styles/pieces.css\");\n/* harmony import */ var _styles_menu_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./styles/menu.css */ \"./src/styles/menu.css\");\n/* harmony import */ var _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./scripts/game.js */ \"./src/scripts/game.js\");\n/* harmony import */ var _scripts_board__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./scripts/board */ \"./src/scripts/board.js\");\n/* harmony import */ var _scripts_modal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./scripts/modal */ \"./src/scripts/modal.js\");\n\n\n\n\n\n\n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n var game = new _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"]();\n var board = new _scripts_board__WEBPACK_IMPORTED_MODULE_7__[\"default\"](); // let deck = Deck;\n // let piece = Piece;\n\n window.Game = _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n window.Board = _scripts_board__WEBPACK_IMPORTED_MODULE_7__[\"default\"];\n\n function addGlobalEventListener(type, selector, callback) {\n document.addEventListener(type, function (e) {\n if (e.target.matches(selector)) callback(e);\n });\n } // TO-DO const list:\n // allPawns, allCards\n // activePawn, activeCard\n // pawn - select and highlight\n\n\n addGlobalEventListener(\"click\", \"#pawn\", function (e) {\n console.log(\"You clicked a pawn\");\n var allPawns = document.querySelectorAll(\"#pawn\");\n allPawns.forEach(function (pawn) {\n if (pawn.classList.contains(\"active-pawn\")) {\n pawn.classList.remove(\"active-pawn\");\n pawn.classList.add(\"inactive-pawn\");\n }\n });\n e.target.classList.remove(\"inactive-pawn\");\n e.target.classList.add(\"active-pawn\");\n\n if (game.checkHighlight()) {\n console.log(\"Check highlight pass\");\n } else {\n console.log(\"Check highlight fail\");\n }\n }); // card - select and highlight \n\n addGlobalEventListener(\"click\", \".back\", function (e) {\n console.log(\"You clicked a card\");\n var allCards = document.querySelectorAll(\".back\");\n allCards.forEach(function (card) {\n card.classList.remove(\"active-card\");\n card.classList.add(\"inactive-card\");\n });\n e.target.classList.remove(\"inactive-card\");\n e.target.classList.add(\"active-card\");\n\n if (game.checkHighlight()) {\n console.log(\"Check highlight pass\");\n } else {\n console.log(\"Check highlight fail\");\n }\n }); // move pawn to square \n\n addGlobalEventListener(\"click\", \".square.active\", function (e) {\n var posEndEle = e.target;\n game.viewMovePiece(posEndEle);\n }); // Modal consts\n\n var modalHowTo = document.querySelector(\".modal__howTo\");\n var modalView = document.querySelector(\".modal__fill\");\n document.querySelector(\".modal__fill\").innerHTML = _scripts_modal__WEBPACK_IMPORTED_MODULE_8__.modalFill; // const sanitizer = new Sanitizer(); \n // Modal How To on\n\n addGlobalEventListener(\"click\", \"#how-to-play\", function (e) {\n e.preventDefault();\n console.log(\"on\"); // modalView.setHTML(\"Hellooooooo\");\n // modalView.innerHTML = modalFill;\n // document.querySelector(\".modal__fill\").innerHTML = modalFill;\n // document.querySelector(\".modal__fill\").innerHTML = modalFill;\n\n modalHowTo.classList.add(\"modal__fill-active\");\n }); // Modal How To off\n\n modalHowTo.addEventListener(\"click\", function (e) {\n e.preventDefault();\n console.log(\"off\");\n modalHowTo.classList.remove(\"modal__fill-active\");\n }); // Start / End game dynamic\n\n addGlobalEventListener(\"click\", \"#start\", function (e) {\n if (game.activeGame === false) {\n console.log(\"You clicked start\");\n game.start();\n var startEle = document.querySelector(\".start-inactive\");\n startEle.classList.remove(\"start-inactive\");\n startEle.classList.add(\"start-active\");\n startEle.innerText = \"End Game\";\n } else {\n console.log(\"You clicked end game\");\n history.go(0);\n }\n });\n}); // addGlobalEventListener(\"click\", \".start-active\", e => {\n// });\n// bindEvents() {\n// document.querySelectorAll(\"ul li\").forEach((li) => {\n// li.addEventListener(\"click\", this.handleClick);\n// });\n// }\n// // Get this:\n// addGlobalEventListener(\"click\", \"div\", e => {\n// console.log(\"hi\")\n// })\n// // From this:\n// document.addEventListener(\"click\", e => {\n// if (e.target.matches(\"div\")) {\n// console.log(\"you clicked a div\");\n// }\n// })//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,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LG9CQUE1QjtBQUNELEdBSkQsRUFyRmtELENBMkZsRDs7QUFDQWYsRUFBQUEsc0JBQXNCLENBQUMsT0FBRCxFQUFVLFFBQVYsRUFBb0IsVUFBQUksQ0FBQyxFQUFJO0FBQzdDLFFBQUlQLElBQUksQ0FBQzhCLFVBQUwsS0FBb0IsS0FBeEIsRUFBK0I7QUFDN0JwQixNQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxtQkFBWjtBQUNBWCxNQUFBQSxJQUFJLENBQUMrQixLQUFMO0FBQ0EsVUFBSUMsUUFBUSxHQUFHbEMsUUFBUSxDQUFDNEIsYUFBVCxDQUF1QixpQkFBdkIsQ0FBZjtBQUNBTSxNQUFBQSxRQUFRLENBQUNoQixTQUFULENBQW1CRSxNQUFuQixDQUEwQixnQkFBMUI7QUFDQWMsTUFBQUEsUUFBUSxDQUFDaEIsU0FBVCxDQUFtQkcsR0FBbkIsQ0FBdUIsY0FBdkI7QUFDQWEsTUFBQUEsUUFBUSxDQUFDQyxTQUFULEdBQXFCLFVBQXJCO0FBQ0QsS0FQRCxNQU9PO0FBQ0x2QixNQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxzQkFBWjtBQUNBdUIsTUFBQUEsT0FBTyxDQUFDQyxFQUFSLENBQVcsQ0FBWDtBQUNEO0FBRUYsR0FicUIsQ0FBdEI7QUFnQkQsQ0E1R0QsR0E4R0E7QUFDRTtBQUdBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL29uaXRhbWFfanMvLi9zcmMvaW5kZXguanM/YjYzNSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgXCIuL3N0eWxlcy9pbmRleC5jc3NcIjtcbmltcG9ydCBcIi4vc3R5bGVzL2NhcmRzLmNzc1wiO1xuaW1wb3J0IFwiLi9zdHlsZXMvcGllY2VzLmNzc1wiO1xuaW1wb3J0IFwiLi9zdHlsZXMvbWVudS5jc3NcIjtcbmltcG9ydCBHYW1lIGZyb20gXCIuL3NjcmlwdHMvZ2FtZS5qc1wiO1xuaW1wb3J0IEJvYXJkIGZyb20gXCIuL3NjcmlwdHMvYm9hcmRcIjtcbmltcG9ydCB7IG1vZGFsRmlsbCB9IGZyb20gXCIuL3NjcmlwdHMvbW9kYWxcIjtcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJET01Db250ZW50TG9hZGVkXCIsICgpID0+IHtcblxuICBsZXQgZ2FtZSA9IG5ldyBHYW1lKCk7XG4gIGxldCBib2FyZCA9IG5ldyBCb2FyZCgpO1xuXG4gIC8vIGxldCBkZWNrID0gRGVjaztcbiAgLy8gbGV0IHBpZWNlID0gUGllY2U7XG5cbiAgd2luZG93LkdhbWUgPSBHYW1lO1xuICB3aW5kb3cuQm9hcmQgPSBCb2FyZDtcblxuICBmdW5jdGlvbiBhZGRHbG9iYWxFdmVudExpc3RlbmVyKHR5cGUsIHNlbGVjdG9yLCBjYWxsYmFjaykge1xuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIodHlwZSwgZSA9PiB7XG4gICAgICBpZiAoZS50YXJnZXQubWF0Y2hlcyhzZWxlY3RvcikpIGNhbGxiYWNrKGUpO1xuICAgIH0pO1xuICB9XG5cblxuICAvLyBUTy1ETyBjb25zdCBsaXN0OlxuICAvLyBhbGxQYXducywgYWxsQ2FyZHNcbiAgLy8gYWN0aXZlUGF3biwgYWN0aXZlQ2FyZFxuXG5cbiAgLy8gcGF3biAtIHNlbGVjdCBhbmQgaGlnaGxpZ2h0XG4gIGFkZEdsb2JhbEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCBcIiNwYXduXCIsIGUgPT4ge1xuICAgIGNvbnNvbGUubG9nKFwiWW91IGNsaWNrZWQgYSBwYXduXCIpO1xuICAgIGxldCBhbGxQYXducyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoXCIjcGF3blwiKTtcbiAgICBhbGxQYXducy5mb3JFYWNoKGZ1bmN0aW9uIChwYXduKSB7XG4gICAgICBpZiAocGF3bi5jbGFzc0xpc3QuY29udGFpbnMoXCJhY3RpdmUtcGF3blwiKSkge1xuICAgICAgICBwYXduLmNsYXNzTGlzdC5yZW1vdmUoXCJhY3RpdmUtcGF3blwiKTtcbiAgICAgICAgcGF3bi5jbGFzc0xpc3QuYWRkKFwiaW5hY3RpdmUtcGF3blwiKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgICBlLnRhcmdldC5jbGFzc0xpc3QucmVtb3ZlKFwiaW5hY3RpdmUtcGF3blwiKTtcbiAgICBlLnRhcmdldC5jbGFzc0xpc3QuYWRkKFwiYWN0aXZlLXBhd25cIik7XG4gICAgaWYgKGdhbWUuY2hlY2tIaWdobGlnaHQoKSkge1xuICAgICAgY29uc29sZS5sb2coXCJDaGVjayBoaWdobGlnaHQgcGFzc1wiKTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc29sZS5sb2coXCJDaGVjayBoaWdobGlnaHQgZmFpbFwiKTtcbiAgICB9XG4gIH0pO1xuXG4gIC8vIGNhcmQgLSBzZWxlY3QgYW5kIGhpZ2hsaWdodCBcbiAgYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiLmJhY2tcIiwgZSA9PiB7XG4gICAgY29uc29sZS5sb2coXCJZb3UgY2xpY2tlZCBhIGNhcmRcIik7XG4gICAgbGV0IGFsbENhcmRzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChcIi5iYWNrXCIpO1xuICAgIGFsbENhcmRzLmZvckVhY2goZnVuY3Rpb24gKGNhcmQpIHtcbiAgICAgIGNhcmQuY2xhc3NMaXN0LnJlbW92ZShcImFjdGl2ZS1jYXJkXCIpO1xuICAgICAgY2FyZC5jbGFzc0xpc3QuYWRkKFwiaW5hY3RpdmUtY2FyZFwiKTtcbiAgICB9KTtcbiAgICBlLnRhcmdldC5jbGFzc0xpc3QucmVtb3ZlKFwiaW5hY3RpdmUtY2FyZFwiKTtcbiAgICBlLnRhcmdldC5jbGFzc0xpc3QuYWRkKFwiYWN0aXZlLWNhcmRcIik7XG4gICAgaWYgKGdhbWUuY2hlY2tIaWdobGlnaHQoKSkge1xuICAgICAgY29uc29sZS5sb2coXCJDaGVjayBoaWdobGlnaHQgcGFzc1wiKTtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc29sZS5sb2coXCJDaGVjayBoaWdobGlnaHQgZmFpbFwiKTtcbiAgICB9XG5cbiAgfSk7XG5cbiAgLy8gbW92ZSBwYXduIHRvIHNxdWFyZSBcbiAgYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiLnNxdWFyZS5hY3RpdmVcIiwgZSA9PiB7XG4gICAgbGV0IHBvc0VuZEVsZSA9IGUudGFyZ2V0O1xuICAgIGdhbWUudmlld01vdmVQaWVjZShwb3NFbmRFbGUpO1xuICB9KTtcblxuICAvLyBNb2RhbCBjb25zdHNcbiAgbGV0IG1vZGFsSG93VG8gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLm1vZGFsX19ob3dUb1wiKTtcbiAgbGV0IG1vZGFsVmlldyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIubW9kYWxfX2ZpbGxcIik7XG4gIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIubW9kYWxfX2ZpbGxcIikuaW5uZXJIVE1MID0gbW9kYWxGaWxsO1xuXG4gIC8vIGNvbnN0IHNhbml0aXplciA9IG5ldyBTYW5pdGl6ZXIoKTsgXG5cbiAgLy8gTW9kYWwgSG93IFRvIG9uXG4gIGFkZEdsb2JhbEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCBcIiNob3ctdG8tcGxheVwiLCBlID0+IHtcbiAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgY29uc29sZS5sb2coXCJvblwiKTtcbiAgICAvLyBtb2RhbFZpZXcuc2V0SFRNTChcIkhlbGxvb29vb29vXCIpO1xuICAgIC8vIG1vZGFsVmlldy5pbm5lckhUTUwgPSBtb2RhbEZpbGw7XG4gICAgLy8gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5tb2RhbF9fZmlsbFwiKS5pbm5lckhUTUwgPSBtb2RhbEZpbGw7XG4gICAgLy8gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5tb2RhbF9fZmlsbFwiKS5pbm5lckhUTUwgPSBtb2RhbEZpbGw7XG4gICAgbW9kYWxIb3dUby5jbGFzc0xpc3QuYWRkKFwibW9kYWxfX2ZpbGwtYWN0aXZlXCIpO1xuICB9KTtcblxuICAvLyBNb2RhbCBIb3cgVG8gb2ZmXG4gIG1vZGFsSG93VG8uYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIGUgPT4ge1xuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICBjb25zb2xlLmxvZyhcIm9mZlwiKTtcbiAgICBtb2RhbEhvd1RvLmNsYXNzTGlzdC5yZW1vdmUoXCJtb2RhbF9fZmlsbC1hY3RpdmVcIik7XG4gIH0pO1xuXG4gIC8vIFN0YXJ0IC8gRW5kIGdhbWUgZHluYW1pY1xuICBhZGRHbG9iYWxFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgXCIjc3RhcnRcIiwgZSA9PiB7XG4gICAgaWYgKGdhbWUuYWN0aXZlR2FtZSA9PT0gZmFsc2UpIHtcbiAgICAgIGNvbnNvbGUubG9nKFwiWW91IGNsaWNrZWQgc3RhcnRcIik7XG4gICAgICBnYW1lLnN0YXJ0KCk7XG4gICAgICBsZXQgc3RhcnRFbGUgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLnN0YXJ0LWluYWN0aXZlXCIpO1xuICAgICAgc3RhcnRFbGUuY2xhc3NMaXN0LnJlbW92ZShcInN0YXJ0LWluYWN0aXZlXCIpO1xuICAgICAgc3RhcnRFbGUuY2xhc3NMaXN0LmFkZChcInN0YXJ0LWFjdGl2ZVwiKTtcbiAgICAgIHN0YXJ0RWxlLmlubmVyVGV4dCA9IFwiRW5kIEdhbWVcIjtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc29sZS5sb2coXCJZb3UgY2xpY2tlZCBlbmQgZ2FtZVwiKTtcbiAgICAgIGhpc3RvcnkuZ28oMCk7XG4gICAgfVxuXG4gIH0pO1xuXG5cbn0pO1xuXG4vLyBhZGRHbG9iYWxFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgXCIuc3RhcnQtYWN0aXZlXCIsIGUgPT4ge1xuICAvLyB9KTtcblxuXG4gIC8vIGJpbmRFdmVudHMoKSB7XG4gIC8vICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChcInVsIGxpXCIpLmZvckVhY2goKGxpKSA9PiB7XG4gIC8vICAgICBsaS5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5oYW5kbGVDbGljayk7XG4gIC8vICAgfSk7XG4gIC8vIH1cblxuLy8gLy8gR2V0IHRoaXM6XG4vLyBhZGRHbG9iYWxFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgXCJkaXZcIiwgZSA9PiB7XG4vLyAgIGNvbnNvbGUubG9nKFwiaGlcIilcbi8vIH0pXG4vLyAvLyBGcm9tIHRoaXM6XG4vLyBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgZSA9PiB7XG4vLyAgIGlmIChlLnRhcmdldC5tYXRjaGVzKFwiZGl2XCIpKSB7XG4vLyAgICAgY29uc29sZS5sb2coXCJ5b3UgY2xpY2tlZCBhIGRpdlwiKTtcbi8vICAgfVxuLy8gfSlcbiJdLCJuYW1lcyI6WyJHYW1lIiwiQm9hcmQiLCJtb2RhbEZpbGwiLCJkb2N1bWVudCIsImFkZEV2ZW50TGlzdGVuZXIiLCJnYW1lIiwiYm9hcmQiLCJ3aW5kb3ciLCJhZGRHbG9iYWxFdmVudExpc3RlbmVyIiwidHlwZSIsInNlbGVjdG9yIiwiY2FsbGJhY2siLCJlIiwidGFyZ2V0IiwibWF0Y2hlcyIsImNvbnNvbGUiLCJsb2ciLCJhbGxQYXducyIsInF1ZXJ5U2VsZWN0b3JBbGwiLCJmb3JFYWNoIiwicGF3biIsImNsYXNzTGlzdCIsImNvbnRhaW5zIiwicmVtb3ZlIiwiYWRkIiwiY2hlY2tIaWdobGlnaHQiLCJhbGxDYXJkcyIsImNhcmQiLCJwb3NFbmRFbGUiLCJ2aWV3TW92ZVBpZWNlIiwibW9kYWxIb3dUbyIsInF1ZXJ5U2VsZWN0b3IiLCJtb2RhbFZpZXciLCJpbm5lckhUTUwiLCJwcmV2ZW50RGVmYXVsdCIsImFjdGl2ZUdhbWUiLCJzdGFydCIsInN0YXJ0RWxlIiwiaW5uZXJUZXh0IiwiaGlzdG9yeSIsImdvIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/index.js\n"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ \"./node_modules/core-js/modules/es.object.to-string.js\");\n/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ \"./node_modules/core-js/modules/web.dom-collections.for-each.js\");\n/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _styles_index_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./styles/index.css */ \"./src/styles/index.css\");\n/* harmony import */ var _styles_cards_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./styles/cards.css */ \"./src/styles/cards.css\");\n/* harmony import */ var _styles_pieces_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles/pieces.css */ \"./src/styles/pieces.css\");\n/* harmony import */ var _styles_menu_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./styles/menu.css */ \"./src/styles/menu.css\");\n/* harmony import */ var _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./scripts/game.js */ \"./src/scripts/game.js\");\n/* harmony import */ var _scripts_board__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./scripts/board */ \"./src/scripts/board.js\");\n/* harmony import */ var _scripts_modal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./scripts/modal */ \"./src/scripts/modal.js\");\n\n\n\n\n\n\n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n var game = new _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"]();\n var board = new _scripts_board__WEBPACK_IMPORTED_MODULE_7__[\"default\"](); // let deck = Deck;\n // let piece = Piece;\n\n window.Game = _scripts_game_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n window.Board = _scripts_board__WEBPACK_IMPORTED_MODULE_7__[\"default\"];\n\n function addGlobalEventListener(type, selector, callback) {\n document.addEventListener(type, function (e) {\n if (e.target.matches(selector)) callback(e);\n });\n } // TO-DO const list:\n // allPawns, allCards\n // activePawn, activeCard\n // pawn - select and highlight\n\n\n addGlobalEventListener(\"click\", \"#pawn\", function (e) {\n console.log(\"You clicked a pawn\");\n var allPawns = document.querySelectorAll(\"#pawn\");\n allPawns.forEach(function (pawn) {\n if (pawn.classList.contains(\"active-pawn\")) {\n pawn.classList.remove(\"active-pawn\");\n pawn.classList.add(\"inactive-pawn\");\n }\n });\n e.target.classList.remove(\"inactive-pawn\");\n e.target.classList.add(\"active-pawn\");\n\n if (game.checkHighlight()) {\n console.log(\"Check highlight pass\");\n } else {\n console.log(\"Check highlight fail\");\n }\n }); // card - select and highlight \n\n addGlobalEventListener(\"click\", \".back\", function (e) {\n console.log(\"You clicked a card\");\n var allCards = document.querySelectorAll(\".back\");\n allCards.forEach(function (card) {\n card.classList.remove(\"active-card\");\n card.classList.add(\"inactive-card\");\n });\n e.target.classList.remove(\"inactive-card\");\n e.target.classList.add(\"active-card\");\n\n if (game.checkHighlight()) {\n console.log(\"Check highlight pass\");\n } else {\n console.log(\"Check highlight fail\");\n }\n }); // move pawn to square \n\n addGlobalEventListener(\"click\", \".square.active\", function (e) {\n var posEndEle = e.target;\n game.viewMovePiece(posEndEle);\n }); // Modal consts\n\n var modalHowTo = document.querySelector(\".modal__howTo\");\n var modalView = document.querySelector(\".modal__fill\");\n document.querySelector(\".modal__fill\").innerHTML = _scripts_modal__WEBPACK_IMPORTED_MODULE_8__.modalFill; // const sanitizer = new Sanitizer(); \n // Modal How To on\n\n addGlobalEventListener(\"click\", \"#how-to-play\", function (e) {\n e.preventDefault();\n console.log(\"on\"); // modalView.setHTML(\"Hellooooooo\");\n // modalView.innerHTML = modalFill;\n // document.querySelector(\".modal__fill\").innerHTML = modalFill;\n // document.querySelector(\".modal__fill\").innerHTML = modalFill;\n\n modalHowTo.classList.add(\"modal__fill-active\");\n }); // Modal How To off\n\n modalHowTo.addEventListener(\"click\", function (e) {\n e.preventDefault();\n console.log(\"off\");\n modalHowTo.classList.remove(\"modal__fill-active\");\n }); // Start / End game dynamic\n\n addGlobalEventListener(\"click\", \"#start\", function (e) {\n var body = document.querySelector(\".body\");\n var startEle = document.querySelector(\".start-inactive\");\n\n if (game.activeGame === false) {\n console.log(\"You clicked start\");\n game.start();\n startEle.classList.remove(\"start-inactive\");\n startEle.classList.add(\"start-active\");\n body.classList.remove(\"turn-null\");\n body.classList.add(\"turn-blue\");\n startEle.innerText = \"End Game\";\n } else {\n console.log(\"You clicked end game\");\n body.classList.add(\"turn-null\");\n setTimeout(function () {\n body.classList.remove(\"turn-blue\");\n body.classList.remove(\"turn-red\");\n history.go(0);\n }, 3001);\n }\n });\n}); // addGlobalEventListener(\"click\", \".start-active\", e => {\n// });\n// bindEvents() {\n// document.querySelectorAll(\"ul li\").forEach((li) => {\n// li.addEventListener(\"click\", this.handleClick);\n// });\n// }\n// // Get this:\n// addGlobalEventListener(\"click\", \"div\", e => {\n// console.log(\"hi\")\n// })\n// // From this:\n// document.addEventListener(\"click\", e => {\n// if (e.target.matches(\"div\")) {\n// console.log(\"you clicked a div\");\n// }\n// })//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXguanMuanMiLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBRyxRQUFRLENBQUNDLGdCQUFULENBQTBCLGtCQUExQixFQUE4QyxZQUFNO0FBRWxELE1BQUlDLElBQUksR0FBRyxJQUFJTCx3REFBSixFQUFYO0FBQ0EsTUFBSU0sS0FBSyxHQUFHLElBQUlMLHNEQUFKLEVBQVosQ0FIa0QsQ0FLbEQ7QUFDQTs7QUFFQU0sRUFBQUEsTUFBTSxDQUFDUCxJQUFQLEdBQWNBLHdEQUFkO0FBQ0FPLEVBQUFBLE1BQU0sQ0FBQ04sS0FBUCxHQUFlQSxzREFBZjs7QUFFQSxXQUFTTyxzQkFBVCxDQUFnQ0MsSUFBaEMsRUFBc0NDLFFBQXRDLEVBQWdEQyxRQUFoRCxFQUEwRDtBQUN4RFIsSUFBQUEsUUFBUSxDQUFDQyxnQkFBVCxDQUEwQkssSUFBMUIsRUFBZ0MsVUFBQUcsQ0FBQyxFQUFJO0FBQ25DLFVBQUlBLENBQUMsQ0FBQ0MsTUFBRixDQUFTQyxPQUFULENBQWlCSixRQUFqQixDQUFKLEVBQWdDQyxRQUFRLENBQUNDLENBQUQsQ0FBUjtBQUNqQyxLQUZEO0FBR0QsR0FmaUQsQ0FrQmxEO0FBQ0E7QUFDQTtBQUdBOzs7QUFDQUosRUFBQUEsc0JBQXNCLENBQUMsT0FBRCxFQUFVLE9BQVYsRUFBbUIsVUFBQUksQ0FBQyxFQUFJO0FBQzVDRyxJQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxvQkFBWjtBQUNBLFFBQUlDLFFBQVEsR0FBR2QsUUFBUSxDQUFDZSxnQkFBVCxDQUEwQixPQUExQixDQUFmO0FBQ0FELElBQUFBLFFBQVEsQ0FBQ0UsT0FBVCxDQUFpQixVQUFVQyxJQUFWLEVBQWdCO0FBQy9CLFVBQUlBLElBQUksQ0FBQ0MsU0FBTCxDQUFlQyxRQUFmLENBQXdCLGFBQXhCLENBQUosRUFBNEM7QUFDMUNGLFFBQUFBLElBQUksQ0FBQ0MsU0FBTCxDQUFlRSxNQUFmLENBQXNCLGFBQXRCO0FBQ0FILFFBQUFBLElBQUksQ0FBQ0MsU0FBTCxDQUFlRyxHQUFmLENBQW1CLGVBQW5CO0FBQ0Q7QUFDRixLQUxEO0FBTUFaLElBQUFBLENBQUMsQ0FBQ0MsTUFBRixDQUFTUSxTQUFULENBQW1CRSxNQUFuQixDQUEwQixlQUExQjtBQUNBWCxJQUFBQSxDQUFDLENBQUNDLE1BQUYsQ0FBU1EsU0FBVCxDQUFtQkcsR0FBbkIsQ0FBdUIsYUFBdkI7O0FBQ0EsUUFBSW5CLElBQUksQ0FBQ29CLGNBQUwsRUFBSixFQUEyQjtBQUN6QlYsTUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksc0JBQVo7QUFDRCxLQUZELE1BRU87QUFDTEQsTUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksc0JBQVo7QUFDRDtBQUNGLEdBaEJxQixDQUF0QixDQXhCa0QsQ0EwQ2xEOztBQUNBUixFQUFBQSxzQkFBc0IsQ0FBQyxPQUFELEVBQVUsT0FBVixFQUFtQixVQUFBSSxDQUFDLEVBQUk7QUFDNUNHLElBQUFBLE9BQU8sQ0FBQ0MsR0FBUixDQUFZLG9CQUFaO0FBQ0EsUUFBSVUsUUFBUSxHQUFHdkIsUUFBUSxDQUFDZSxnQkFBVCxDQUEwQixPQUExQixDQUFmO0FBQ0FRLElBQUFBLFFBQVEsQ0FBQ1AsT0FBVCxDQUFpQixVQUFVUSxJQUFWLEVBQWdCO0FBQy9CQSxNQUFBQSxJQUFJLENBQUNOLFNBQUwsQ0FBZUUsTUFBZixDQUFzQixhQUF0QjtBQUNBSSxNQUFBQSxJQUFJLENBQUNOLFNBQUwsQ0FBZUcsR0FBZixDQUFtQixlQUFuQjtBQUNELEtBSEQ7QUFJQVosSUFBQUEsQ0FBQyxDQUFDQyxNQUFGLENBQVNRLFNBQVQsQ0FBbUJFLE1BQW5CLENBQTBCLGVBQTFCO0FBQ0FYLElBQUFBLENBQUMsQ0FBQ0MsTUFBRixDQUFTUSxTQUFULENBQW1CRyxHQUFuQixDQUF1QixhQUF2Qjs7QUFDQSxRQUFJbkIsSUFBSSxDQUFDb0IsY0FBTCxFQUFKLEVBQTJCO0FBQ3pCVixNQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxzQkFBWjtBQUNELEtBRkQsTUFFTztBQUNMRCxNQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxzQkFBWjtBQUNEO0FBRUYsR0FmcUIsQ0FBdEIsQ0EzQ2tELENBNERsRDs7QUFDQVIsRUFBQUEsc0JBQXNCLENBQUMsT0FBRCxFQUFVLGdCQUFWLEVBQTRCLFVBQUFJLENBQUMsRUFBSTtBQUNyRCxRQUFJZ0IsU0FBUyxHQUFHaEIsQ0FBQyxDQUFDQyxNQUFsQjtBQUNBUixJQUFBQSxJQUFJLENBQUN3QixhQUFMLENBQW1CRCxTQUFuQjtBQUNELEdBSHFCLENBQXRCLENBN0RrRCxDQWtFbEQ7O0FBQ0EsTUFBSUUsVUFBVSxHQUFHM0IsUUFBUSxDQUFDNEIsYUFBVCxDQUF1QixlQUF2QixDQUFqQjtBQUNBLE1BQUlDLFNBQVMsR0FBRzdCLFFBQVEsQ0FBQzRCLGFBQVQsQ0FBdUIsY0FBdkIsQ0FBaEI7QUFDQTVCLEVBQUFBLFFBQVEsQ0FBQzRCLGFBQVQsQ0FBdUIsY0FBdkIsRUFBdUNFLFNBQXZDLEdBQW1EL0IscURBQW5ELENBckVrRCxDQXVFbEQ7QUFFQTs7QUFDQU0sRUFBQUEsc0JBQXNCLENBQUMsT0FBRCxFQUFVLGNBQVYsRUFBMEIsVUFBQUksQ0FBQyxFQUFJO0FBQ25EQSxJQUFBQSxDQUFDLENBQUNzQixjQUFGO0FBQ0FuQixJQUFBQSxPQUFPLENBQUNDLEdBQVIsQ0FBWSxJQUFaLEVBRm1ELENBR25EO0FBQ0E7QUFDQTtBQUNBOztBQUNBYyxJQUFBQSxVQUFVLENBQUNULFNBQVgsQ0FBcUJHLEdBQXJCLENBQXlCLG9CQUF6QjtBQUNELEdBUnFCLENBQXRCLENBMUVrRCxDQW9GbEQ7O0FBQ0FNLEVBQUFBLFVBQVUsQ0FBQzFCLGdCQUFYLENBQTRCLE9BQTVCLEVBQXFDLFVBQUFRLENBQUMsRUFBSTtBQUN4Q0EsSUFBQUEsQ0FBQyxDQUFDc0IsY0FBRjtBQUNBbkIsSUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksS0FBWjtBQUNBYyxJQUFBQSxVQUFVLENBQUNULFNBQVgsQ0FBcUJFLE1BQXJCLENBQTRCLG9CQUE1QjtBQUNELEdBSkQsRUFyRmtELENBMkZsRDs7QUFDQWYsRUFBQUEsc0JBQXNCLENBQUMsT0FBRCxFQUFVLFFBQVYsRUFBb0IsVUFBQUksQ0FBQyxFQUFJO0FBQzdDLFFBQUl1QixJQUFJLEdBQUdoQyxRQUFRLENBQUM0QixhQUFULENBQXVCLE9BQXZCLENBQVg7QUFDQSxRQUFJSyxRQUFRLEdBQUdqQyxRQUFRLENBQUM0QixhQUFULENBQXVCLGlCQUF2QixDQUFmOztBQUVBLFFBQUkxQixJQUFJLENBQUNnQyxVQUFMLEtBQW9CLEtBQXhCLEVBQStCO0FBQzdCdEIsTUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksbUJBQVo7QUFDQVgsTUFBQUEsSUFBSSxDQUFDaUMsS0FBTDtBQUVBRixNQUFBQSxRQUFRLENBQUNmLFNBQVQsQ0FBbUJFLE1BQW5CLENBQTBCLGdCQUExQjtBQUNBYSxNQUFBQSxRQUFRLENBQUNmLFNBQVQsQ0FBbUJHLEdBQW5CLENBQXVCLGNBQXZCO0FBQ0FXLE1BQUFBLElBQUksQ0FBQ2QsU0FBTCxDQUFlRSxNQUFmLENBQXNCLFdBQXRCO0FBQ0FZLE1BQUFBLElBQUksQ0FBQ2QsU0FBTCxDQUFlRyxHQUFmLENBQW1CLFdBQW5CO0FBQ0FZLE1BQUFBLFFBQVEsQ0FBQ0csU0FBVCxHQUFxQixVQUFyQjtBQUNELEtBVEQsTUFTTztBQUNMeEIsTUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVksc0JBQVo7QUFDQW1CLE1BQUFBLElBQUksQ0FBQ2QsU0FBTCxDQUFlRyxHQUFmLENBQW1CLFdBQW5CO0FBRUFnQixNQUFBQSxVQUFVLENBQUMsWUFBTTtBQUNmTCxRQUFBQSxJQUFJLENBQUNkLFNBQUwsQ0FBZUUsTUFBZixDQUFzQixXQUF0QjtBQUNBWSxRQUFBQSxJQUFJLENBQUNkLFNBQUwsQ0FBZUUsTUFBZixDQUFzQixVQUF0QjtBQUNBa0IsUUFBQUEsT0FBTyxDQUFDQyxFQUFSLENBQVcsQ0FBWDtBQUNELE9BSlMsRUFJUCxJQUpPLENBQVY7QUFLRDtBQUVGLEdBeEJxQixDQUF0QjtBQTJCRCxDQXZIRCxHQXlIQTtBQUNFO0FBR0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vb25pdGFtYV9qcy8uL3NyYy9pbmRleC5qcz9iNjM1Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBcIi4vc3R5bGVzL2luZGV4LmNzc1wiO1xuaW1wb3J0IFwiLi9zdHlsZXMvY2FyZHMuY3NzXCI7XG5pbXBvcnQgXCIuL3N0eWxlcy9waWVjZXMuY3NzXCI7XG5pbXBvcnQgXCIuL3N0eWxlcy9tZW51LmNzc1wiO1xuaW1wb3J0IEdhbWUgZnJvbSBcIi4vc2NyaXB0cy9nYW1lLmpzXCI7XG5pbXBvcnQgQm9hcmQgZnJvbSBcIi4vc2NyaXB0cy9ib2FyZFwiO1xuaW1wb3J0IHsgbW9kYWxGaWxsIH0gZnJvbSBcIi4vc2NyaXB0cy9tb2RhbFwiO1xuZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcIkRPTUNvbnRlbnRMb2FkZWRcIiwgKCkgPT4ge1xuXG4gIGxldCBnYW1lID0gbmV3IEdhbWUoKTtcbiAgbGV0IGJvYXJkID0gbmV3IEJvYXJkKCk7XG5cbiAgLy8gbGV0IGRlY2sgPSBEZWNrO1xuICAvLyBsZXQgcGllY2UgPSBQaWVjZTtcblxuICB3aW5kb3cuR2FtZSA9IEdhbWU7XG4gIHdpbmRvdy5Cb2FyZCA9IEJvYXJkO1xuXG4gIGZ1bmN0aW9uIGFkZEdsb2JhbEV2ZW50TGlzdGVuZXIodHlwZSwgc2VsZWN0b3IsIGNhbGxiYWNrKSB7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcih0eXBlLCBlID0+IHtcbiAgICAgIGlmIChlLnRhcmdldC5tYXRjaGVzKHNlbGVjdG9yKSkgY2FsbGJhY2soZSk7XG4gICAgfSk7XG4gIH1cblxuXG4gIC8vIFRPLURPIGNvbnN0IGxpc3Q6XG4gIC8vIGFsbFBhd25zLCBhbGxDYXJkc1xuICAvLyBhY3RpdmVQYXduLCBhY3RpdmVDYXJkXG5cblxuICAvLyBwYXduIC0gc2VsZWN0IGFuZCBoaWdobGlnaHRcbiAgYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiI3Bhd25cIiwgZSA9PiB7XG4gICAgY29uc29sZS5sb2coXCJZb3UgY2xpY2tlZCBhIHBhd25cIik7XG4gICAgbGV0IGFsbFBhd25zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChcIiNwYXduXCIpO1xuICAgIGFsbFBhd25zLmZvckVhY2goZnVuY3Rpb24gKHBhd24pIHtcbiAgICAgIGlmIChwYXduLmNsYXNzTGlzdC5jb250YWlucyhcImFjdGl2ZS1wYXduXCIpKSB7XG4gICAgICAgIHBhd24uY2xhc3NMaXN0LnJlbW92ZShcImFjdGl2ZS1wYXduXCIpO1xuICAgICAgICBwYXduLmNsYXNzTGlzdC5hZGQoXCJpbmFjdGl2ZS1wYXduXCIpO1xuICAgICAgfVxuICAgIH0pO1xuICAgIGUudGFyZ2V0LmNsYXNzTGlzdC5yZW1vdmUoXCJpbmFjdGl2ZS1wYXduXCIpO1xuICAgIGUudGFyZ2V0LmNsYXNzTGlzdC5hZGQoXCJhY3RpdmUtcGF3blwiKTtcbiAgICBpZiAoZ2FtZS5jaGVja0hpZ2hsaWdodCgpKSB7XG4gICAgICBjb25zb2xlLmxvZyhcIkNoZWNrIGhpZ2hsaWdodCBwYXNzXCIpO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zb2xlLmxvZyhcIkNoZWNrIGhpZ2hsaWdodCBmYWlsXCIpO1xuICAgIH1cbiAgfSk7XG5cbiAgLy8gY2FyZCAtIHNlbGVjdCBhbmQgaGlnaGxpZ2h0IFxuICBhZGRHbG9iYWxFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgXCIuYmFja1wiLCBlID0+IHtcbiAgICBjb25zb2xlLmxvZyhcIllvdSBjbGlja2VkIGEgY2FyZFwiKTtcbiAgICBsZXQgYWxsQ2FyZHMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKFwiLmJhY2tcIik7XG4gICAgYWxsQ2FyZHMuZm9yRWFjaChmdW5jdGlvbiAoY2FyZCkge1xuICAgICAgY2FyZC5jbGFzc0xpc3QucmVtb3ZlKFwiYWN0aXZlLWNhcmRcIik7XG4gICAgICBjYXJkLmNsYXNzTGlzdC5hZGQoXCJpbmFjdGl2ZS1jYXJkXCIpO1xuICAgIH0pO1xuICAgIGUudGFyZ2V0LmNsYXNzTGlzdC5yZW1vdmUoXCJpbmFjdGl2ZS1jYXJkXCIpO1xuICAgIGUudGFyZ2V0LmNsYXNzTGlzdC5hZGQoXCJhY3RpdmUtY2FyZFwiKTtcbiAgICBpZiAoZ2FtZS5jaGVja0hpZ2hsaWdodCgpKSB7XG4gICAgICBjb25zb2xlLmxvZyhcIkNoZWNrIGhpZ2hsaWdodCBwYXNzXCIpO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zb2xlLmxvZyhcIkNoZWNrIGhpZ2hsaWdodCBmYWlsXCIpO1xuICAgIH1cblxuICB9KTtcblxuICAvLyBtb3ZlIHBhd24gdG8gc3F1YXJlIFxuICBhZGRHbG9iYWxFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgXCIuc3F1YXJlLmFjdGl2ZVwiLCBlID0+IHtcbiAgICBsZXQgcG9zRW5kRWxlID0gZS50YXJnZXQ7XG4gICAgZ2FtZS52aWV3TW92ZVBpZWNlKHBvc0VuZEVsZSk7XG4gIH0pO1xuXG4gIC8vIE1vZGFsIGNvbnN0c1xuICBsZXQgbW9kYWxIb3dUbyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIubW9kYWxfX2hvd1RvXCIpO1xuICBsZXQgbW9kYWxWaWV3ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5tb2RhbF9fZmlsbFwiKTtcbiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi5tb2RhbF9fZmlsbFwiKS5pbm5lckhUTUwgPSBtb2RhbEZpbGw7XG5cbiAgLy8gY29uc3Qgc2FuaXRpemVyID0gbmV3IFNhbml0aXplcigpOyBcblxuICAvLyBNb2RhbCBIb3cgVG8gb25cbiAgYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiI2hvdy10by1wbGF5XCIsIGUgPT4ge1xuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICBjb25zb2xlLmxvZyhcIm9uXCIpO1xuICAgIC8vIG1vZGFsVmlldy5zZXRIVE1MKFwiSGVsbG9vb29vb29cIik7XG4gICAgLy8gbW9kYWxWaWV3LmlubmVySFRNTCA9IG1vZGFsRmlsbDtcbiAgICAvLyBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLm1vZGFsX19maWxsXCIpLmlubmVySFRNTCA9IG1vZGFsRmlsbDtcbiAgICAvLyBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLm1vZGFsX19maWxsXCIpLmlubmVySFRNTCA9IG1vZGFsRmlsbDtcbiAgICBtb2RhbEhvd1RvLmNsYXNzTGlzdC5hZGQoXCJtb2RhbF9fZmlsbC1hY3RpdmVcIik7XG4gIH0pO1xuXG4gIC8vIE1vZGFsIEhvdyBUbyBvZmZcbiAgbW9kYWxIb3dUby5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgZSA9PiB7XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGNvbnNvbGUubG9nKFwib2ZmXCIpO1xuICAgIG1vZGFsSG93VG8uY2xhc3NMaXN0LnJlbW92ZShcIm1vZGFsX19maWxsLWFjdGl2ZVwiKTtcbiAgfSk7XG5cbiAgLy8gU3RhcnQgLyBFbmQgZ2FtZSBkeW5hbWljXG4gIGFkZEdsb2JhbEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCBcIiNzdGFydFwiLCBlID0+IHtcbiAgICBsZXQgYm9keSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIuYm9keVwiKTtcbiAgICBsZXQgc3RhcnRFbGUgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiLnN0YXJ0LWluYWN0aXZlXCIpO1xuICAgIFxuICAgIGlmIChnYW1lLmFjdGl2ZUdhbWUgPT09IGZhbHNlKSB7XG4gICAgICBjb25zb2xlLmxvZyhcIllvdSBjbGlja2VkIHN0YXJ0XCIpO1xuICAgICAgZ2FtZS5zdGFydCgpO1xuICAgICAgXG4gICAgICBzdGFydEVsZS5jbGFzc0xpc3QucmVtb3ZlKFwic3RhcnQtaW5hY3RpdmVcIik7XG4gICAgICBzdGFydEVsZS5jbGFzc0xpc3QuYWRkKFwic3RhcnQtYWN0aXZlXCIpO1xuICAgICAgYm9keS5jbGFzc0xpc3QucmVtb3ZlKFwidHVybi1udWxsXCIpO1xuICAgICAgYm9keS5jbGFzc0xpc3QuYWRkKFwidHVybi1ibHVlXCIpO1xuICAgICAgc3RhcnRFbGUuaW5uZXJUZXh0ID0gXCJFbmQgR2FtZVwiO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zb2xlLmxvZyhcIllvdSBjbGlja2VkIGVuZCBnYW1lXCIpO1xuICAgICAgYm9keS5jbGFzc0xpc3QuYWRkKFwidHVybi1udWxsXCIpO1xuICAgICAgXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgYm9keS5jbGFzc0xpc3QucmVtb3ZlKFwidHVybi1ibHVlXCIpO1xuICAgICAgICBib2R5LmNsYXNzTGlzdC5yZW1vdmUoXCJ0dXJuLXJlZFwiKTtcbiAgICAgICAgaGlzdG9yeS5nbygwKTtcbiAgICAgIH0sIDMwMDEpO1xuICAgIH1cblxuICB9KTtcblxuXG59KTtcblxuLy8gYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiLnN0YXJ0LWFjdGl2ZVwiLCBlID0+IHtcbiAgLy8gfSk7XG5cblxuICAvLyBiaW5kRXZlbnRzKCkge1xuICAvLyAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoXCJ1bCBsaVwiKS5mb3JFYWNoKChsaSkgPT4ge1xuICAvLyAgICAgbGkuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIHRoaXMuaGFuZGxlQ2xpY2spO1xuICAvLyAgIH0pO1xuICAvLyB9XG5cbi8vIC8vIEdldCB0aGlzOlxuLy8gYWRkR2xvYmFsRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIFwiZGl2XCIsIGUgPT4ge1xuLy8gICBjb25zb2xlLmxvZyhcImhpXCIpXG4vLyB9KVxuLy8gLy8gRnJvbSB0aGlzOlxuLy8gZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIGUgPT4ge1xuLy8gICBpZiAoZS50YXJnZXQubWF0Y2hlcyhcImRpdlwiKSkge1xuLy8gICAgIGNvbnNvbGUubG9nKFwieW91IGNsaWNrZWQgYSBkaXZcIik7XG4vLyAgIH1cbi8vIH0pXG4iXSwibmFtZXMiOlsiR2FtZSIsIkJvYXJkIiwibW9kYWxGaWxsIiwiZG9jdW1lbnQiLCJhZGRFdmVudExpc3RlbmVyIiwiZ2FtZSIsImJvYXJkIiwid2luZG93IiwiYWRkR2xvYmFsRXZlbnRMaXN0ZW5lciIsInR5cGUiLCJzZWxlY3RvciIsImNhbGxiYWNrIiwiZSIsInRhcmdldCIsIm1hdGNoZXMiLCJjb25zb2xlIiwibG9nIiwiYWxsUGF3bnMiLCJxdWVyeVNlbGVjdG9yQWxsIiwiZm9yRWFjaCIsInBhd24iLCJjbGFzc0xpc3QiLCJjb250YWlucyIsInJlbW92ZSIsImFkZCIsImNoZWNrSGlnaGxpZ2h0IiwiYWxsQ2FyZHMiLCJjYXJkIiwicG9zRW5kRWxlIiwidmlld01vdmVQaWVjZSIsIm1vZGFsSG93VG8iLCJxdWVyeVNlbGVjdG9yIiwibW9kYWxWaWV3IiwiaW5uZXJIVE1MIiwicHJldmVudERlZmF1bHQiLCJib2R5Iiwic3RhcnRFbGUiLCJhY3RpdmVHYW1lIiwic3RhcnQiLCJpbm5lclRleHQiLCJzZXRUaW1lb3V0IiwiaGlzdG9yeSIsImdvIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/index.js\n"); /***/ }), diff --git a/index.html b/index.html index 03cc9bb..d50d766 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ rel="stylesheet"> Onitama JS - +
diff --git a/notes_bugs.md b/notes_bugs.md index e136ff6..63108d5 100644 --- a/notes_bugs.md +++ b/notes_bugs.md @@ -8,6 +8,9 @@ - designed to set grid attr to the winning color on true - have not decided where to call, issue with place and remove methods need resolution first +*How to Play modal* +- HTML formatting not correct. Font issue? Pojo issue? + diff --git a/src/index.js b/src/index.js index db4471f..92a7b92 100644 --- a/src/index.js +++ b/src/index.js @@ -98,16 +98,27 @@ document.addEventListener("DOMContentLoaded", () => { // Start / End game dynamic addGlobalEventListener("click", "#start", e => { + let body = document.querySelector(".body"); + let startEle = document.querySelector(".start-inactive"); + if (game.activeGame === false) { console.log("You clicked start"); game.start(); - let startEle = document.querySelector(".start-inactive"); + startEle.classList.remove("start-inactive"); startEle.classList.add("start-active"); + body.classList.remove("turn-null"); + body.classList.add("turn-blue"); startEle.innerText = "End Game"; } else { console.log("You clicked end game"); - history.go(0); + body.classList.add("turn-null"); + + setTimeout(() => { + body.classList.remove("turn-blue"); + body.classList.remove("turn-red"); + history.go(0); + }, 3001); } }); diff --git a/src/styles/index.css b/src/styles/index.css index 5e44800..c45116d 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,10 +6,54 @@ body { background-color: #aee1f9; - background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%); - margin: 1px; + background-image: linear-gradient(45deg, #aee1f9 0%, #f6ebe6 74%); + background-size: 400%; + margin: 0px; + background-position: center; } +/* idea: animate 5s transition on turn flip */ + +.turn-blue { + animation: bg-animationBlue 5s; + animation-fill-mode: forwards; +} + +.turn-red { + animation: bg-animationBlue 5s; + animation-fill-mode: forwards; +} + +.turn-null { + animation: bg-animationNull 2s; + animation-fill-mode: forwards; +} + +@keyframes bg-animationRed { + 0% { + + } + 100% { + background-position: left; + } +} + +@keyframes bg-animationBlue { + 0% { + + } + 100% { + background-position: left; + } +} + +@keyframes bg-animationNull { + 0% {} + 100% { background-position: center; } +} + + + #container { width: 100%; height: 100%; @@ -21,7 +65,7 @@ body { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); - grid-template-rows: .25fr 1fr 2fr 1fr .25fr; + grid-template-rows: .1fr 1fr 2fr 1fr .25fr; /* grid-auto-rows: minmax(100px, auto); */ /* flex-direction: column; */