From a8e895dd30a72308672419e289bf66cd4f4f16d7 Mon Sep 17 00:00:00 2001 From: Albert Margaryan <66197687+AlbertMargaryan@users.noreply.github.com> Date: Thu, 18 Jan 2024 19:30:58 -0500 Subject: [PATCH] Minor bug fix --- dist/bundle.js | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index e3d8aab..51e2710 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -36,7 +36,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 import */ var firebase_app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! firebase/app */ \"./node_modules/firebase/app/dist/esm/index.esm.js\");\n/* harmony import */ var firebase_firestore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! firebase/firestore */ \"./node_modules/firebase/firestore/dist/esm/index.esm.js\");\n\r\n\r\n\r\n\r\nlet rowsG = 9;\r\nlet colsG = 9;\r\nlet mines = 10;\r\nlet hardness = \"easy\";\r\nlet game = [];\r\nlet currentFlags = 10;\r\nlet seconds = 0;\r\nlet stopwatchInterval;\r\nlet startTimeInMs;\r\nlet endTimeInMs;\r\nlet onMobile;\r\nlet uiMode;\r\nlet modeContainer;\r\nlet openedDivs;\r\nlet gameStatus;\r\nlet i;\r\nlet j;\r\nlet k;\r\nlet l;\r\nlet randomRow;\r\nlet randomCols;\r\nlet currentElement;\r\nlet count;\r\nlet mainGameHTML;\r\nlet newRow;\r\nlet currentCol;\r\nlet currentRecords;\r\nlet idArray;\r\nlet coordinates;\r\nlet parentOfElement;\r\nlet flagSet;\r\nlet allClosedTiles;\r\nlet allFlaggedTiles;\r\nlet intervalInMs;\r\nlet boxRadios;\r\n\r\nlet namesOfNumbers = [\"st\", \"nd\", \"rd\"]\r\n\r\nlet settings = {\r\n \"long-tap\": 250,\r\n}\r\n\r\nconst numberColorsHex = {\r\n 1: \"#001EC1\",\r\n 2: \"#018100\",\r\n 3: \"#CF0000\",\r\n 4: \"#102E61\",\r\n 5: \"#620000\",\r\n 6: \"#239E9F\",\r\n 7: \"#0E1111\",\r\n 8: \"#434554\",\r\n 0: \"#FFFFFF\",\r\n};\r\n\r\nconst darkNumberColorsHex = {\r\n 1: \"#3478DE\",\r\n 2: \"#49C049\",\r\n 3: \"#C93030\",\r\n 4: \"#165EC9\",\r\n 5: \"#B80606\",\r\n 6: \"#1AA8A8\",\r\n 7: \"#787C97\",\r\n 8: \"#B1B8BB\",\r\n 0: \"#FFFFFF\",\r\n};\r\n\r\nlet currentPallete = numberColorsHex\r\n\r\nconst lightModeColors = {\r\n \"--text-color-main\": \"#0e1111\",\r\n \"--link-color\": \"#001EC1\",\r\n \"--background-color\": \"#FFFFFB\",\r\n \"--primary-color\": \"#CDCFD0\",\r\n \"--border-color\": \"#7B7B7B\",\r\n \"--secondary-color\": \"#CDCFD0\",\r\n \"--shadow-color\": \"rgba(0,0,0,0.3)\",\r\n \"--border-color-primary\": \"#EEEEEE\",\r\n \"--mine-color\": \"#E11F23\",\r\n};\r\n\r\nconst darkModeColors = {\r\n \"--text-color-main\": \"#FFFFFB\",\r\n \"--link-color\": \"#58a6ff\",\r\n \"--background-color\": \"#0e1111\",\r\n \"--primary-color\": \"#33383A\",\r\n \"--border-color\": \"#222\",\r\n \"--secondary-color\": \"#FFFFFB\",\r\n \"--border-color-primary\": \"#555\",\r\n \"--shadow-color\": \"rgba(255,255,255,0.3)\",\r\n \"--mine-color\": \"#CD0B0F\",\r\n};\r\n\r\n\r\nconst firebaseConfig = {\r\n apiKey: \"AIzaSyB0xNyZd1pnFEMmG9xueYXPo_4nFFA9SgU\",\r\n authDomain: \"minesweepertmu.firebaseapp.com\",\r\n projectId: \"minesweepertmu\",\r\n storageBucket: \"minesweepertmu.appspot.com\",\r\n messagingSenderId: \"859604107677\",\r\n appId: \"1:859604107677:web:cbc6f2fbe70fbf93182f74\",\r\n measurementId: \"G-BY1X2EYMFG\"\r\n};\r\n\r\n(0,firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp)(firebaseConfig)\r\n\r\nlet db = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore)();\r\n\r\n\r\nfunction applySettings() {\r\n let settingsTemp = JSON.parse(localStorage.getItem('settings'));\r\n if (!settingsTemp) {\r\n localStorage.setItem('settings', JSON.stringify(settings));\r\n return 0;\r\n }\r\n settings = settingsTemp\r\n document.querySelector(\".long-tap-option\").value = settings[\"long-tap\"]\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n if (onMobile) {\r\n document.querySelector(\".long-tap-option\").removeAttribute(\"disabled\");\r\n }\r\n document.querySelector('.long-tap-option-setting').textContent = `Current Value: ${settings[\"long-tap\"]}`;\r\n}\r\n\r\napplySettings()\r\n\r\nfunction onLoadUIMode() {\r\n uiMode = JSON.parse(localStorage.getItem('ui_mode'));\r\n modeContainer = document.querySelector(\".mode-container\")\r\n\r\n if (uiMode === \"light\") {\r\n modeContainer.classList.remove(\"dark\")\r\n modeContainer.classList.add(\"light\")\r\n modeContainer.style.backgroundImage = \"url('multimedia/icons/moon.svg')\"\r\n currentPallete = numberColorsHex\r\n applyColorPalette(lightModeColors);\r\n applyColorPaletteForNumbers(lightModeColors);\r\n\r\n } else if (uiMode === \"dark\") {\r\n modeContainer.classList.remove(\"light\")\r\n modeContainer.classList.add(\"dark\")\r\n modeContainer.style.backgroundImage = \"url('multimedia/icons/sun.svg')\"\r\n currentPallete = darkNumberColorsHex\r\n applyColorPalette(darkModeColors);\r\n applyColorPaletteForNumbers(darkModeColors);\r\n }\r\n}\r\n\r\nonLoadUIMode();\r\n\r\ndocument.querySelector(\".mode-container\").addEventListener(\"click\", (ev) => {\r\n if (ev.target.classList.contains(\"light\")) {\r\n ev.target.classList.remove(\"light\")\r\n ev.target.classList.add(\"dark\")\r\n ev.target.style.backgroundImage = \"url('multimedia/icons/sun.svg')\"\r\n currentPallete = darkNumberColorsHex\r\n applyColorPalette(darkModeColors);\r\n applyColorPaletteForNumbers(darkModeColors);\r\n localStorage.setItem('ui_mode', JSON.stringify(\"dark\"));\r\n } else {\r\n ev.target.classList.remove(\"dark\")\r\n ev.target.classList.add(\"light\")\r\n ev.target.style.backgroundImage = \"url('multimedia/icons/moon.svg')\"\r\n currentPallete = numberColorsHex\r\n applyColorPalette(lightModeColors);\r\n applyColorPaletteForNumbers(lightModeColors);\r\n localStorage.setItem('ui_mode', JSON.stringify(\"light\"));\r\n }\r\n})\r\n\r\nfunction applyColorPaletteForNumbers(colorPalette) {\r\n openedDivs = document.querySelectorAll(\".opened-div\");\r\n\r\n openedDivs.forEach((el) => {\r\n let id = el.id.split(\":\")\r\n el.style.color = currentPallete[el.innerHTML]\r\n });\r\n}\r\n\r\nfunction applyColorPalette(colorPalette) {\r\n const root = document.documentElement.style;\r\n\r\n for (const [key, value] of Object.entries(colorPalette)) {\r\n root.setProperty(key, value);\r\n }\r\n}\r\n\r\n//SWITCH TO DARK MODE AUTO\r\n\r\nfunction makeTheMineLawn(rows, cols, x = -1, y = -1, ev = 0, allFlags = [], lotMines = false) {\r\n seconds = 0\r\n currentFlags = mines\r\n game = []\r\n gameStatus = document.querySelector(\".game-status\")\r\n gameStatus.id = \"start\"\r\n document.querySelector(\".main-game2\").innerHTML = ''\r\n document.querySelector(\".game-status\").style.backgroundImage = \"url('multimedia/images/default.png')\"\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n\r\n for (i = 0; i < rows; i++) {\r\n game.push([])\r\n for (j = 0; j < cols; j++) {\r\n game[i].push(0)\r\n }\r\n }\r\n\r\n for (i = 0; i < mines; i++) {\r\n function randomRowAndColGen() {\r\n randomRow = Math.floor(Math.random() * rows)\r\n randomCols = Math.floor(Math.random() * cols)\r\n if (game[randomRow][randomCols] !== -1) {\r\n if (x == -1 && y == -1) {\r\n game[randomRow][randomCols] = -1\r\n } else if (lotMines && randomRow == x && randomCols == y) {\r\n randomRowAndColGen()\r\n } else if ((randomRow >= x - 1 && randomRow <= parseInt(x) + 1) && (randomCols >= y - 1 && randomCols <= parseInt(y) + 1) && !(lotMines)) {\r\n randomRowAndColGen()\r\n } else {\r\n game[randomRow][randomCols] = -1\r\n }\r\n } else randomRowAndColGen()\r\n }\r\n randomRowAndColGen()\r\n }\r\n\r\n for (i = 0; i < rows; i++) {\r\n for (j = 0; j < cols; j++) {\r\n currentElement = game[i][j]\r\n if (currentElement !== -1) {\r\n count = 0\r\n for (k = -1; k < 2; k++) {\r\n for (l = -1; l < 2; l++) {\r\n if (!((k == 0 && l == 0) || (i + k < 0) || (j + l < 0) || (i + k > rows - 1) || (j + l > cols - 1))) {\r\n if (game[i + k][j + l] == -1) {\r\n count++\r\n }\r\n }\r\n }\r\n game[i][j] = count\r\n }\r\n }\r\n }\r\n }\r\n makeTheGameHTML2(allFlags)\r\n eventListenerForButtons()\r\n\r\n if (!(ev == 0)) {\r\n inGameButtonClick(ev.target)\r\n }\r\n}\r\nmakeTheMineLawn(rowsG, colsG)\r\n\r\nfunction firstJSON() {\r\n const storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n if (!(storedData)) {\r\n localStorage.setItem('highScoresSelf', JSON.stringify({ expert: [], int: [], easy: [], new: \"yes\" }));\r\n }\r\n}\r\nfirstJSON()\r\n\r\nfunction setJSONHighScores() {\r\n let storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n storedData.easy.sort((a, b) => a - b);\r\n\r\n if (storedData) {\r\n for (const [key, value] of Object.entries(storedData)) {\r\n\r\n currentRecords = document.querySelectorAll(\".\" + key + \"_high_self\")\r\n for (i = 1; i <= value.length; i++) {\r\n let secondsHS = Math.floor(value[i - 1] / 1000)\r\n let millisecondsHS = padWithZeros(value[i - 1] % 1000)\r\n if (key === \"expert\") {\r\n document.querySelector(\"#ehs-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n } else if (key === \"int\") {\r\n document.querySelector(\"#eis-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n } else if (key === \"easy\") {\r\n document.querySelector(\"#hes-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n }\r\n }\r\n }\r\n }\r\n localStorage.setItem('highScoresSelf', JSON.stringify(storedData));\r\n}\r\nsetJSONHighScores()\r\n\r\nfunction updateJSONHighScores(newScore) {\r\n\r\n let storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n storedData.easy.sort((a, b) => a - b);\r\n\r\n if (storedData[hardness].length >= 10) {\r\n if (newScore < storedData[hardness][9]) {\r\n document.querySelector(\".new-hs-container\").style.display = \"flex\"\r\n storedData[hardness].pop()\r\n storedData[hardness].push(newScore)\r\n storedData[hardness].sort(function(a, b) {\r\n return a - b;\r\n });\r\n let secondsHS = Math.floor(newScore / 1000)\r\n let millisecondsHS = newScore % 1000\r\n let place = parseInt(storedData[hardness].indexOf(newScore)) + 1\r\n const numberName = (place == 1 || place == 2 || place == 3) ? namesOfNumbers[place - 1] : 'th';\r\n document.querySelector(\".new-hs\").innerHTML = \"Wow! \" + seconds + \".\" + millisecondsHS + \"s is your new high score in the \" + place + numberName + \" place.\"\r\n checkDBForHs(newScore);\r\n }\r\n } else {\r\n document.querySelector(\".new-hs-container\").style.display = \"flex\"\r\n storedData[hardness].push(newScore)\r\n storedData[hardness].sort(function(a, b) {\r\n return a - b;\r\n });\r\n let secondsHS = Math.floor(newScore / 1000)\r\n let millisecondsHS = newScore % 1000\r\n let place = parseInt(storedData[hardness].indexOf(newScore)) + 1\r\n const numberName = (place == 1 || place == 2 || place == 3) ? namesOfNumbers[place - 1] : 'th';\r\n document.querySelector(\".new-hs\").innerHTML = \"Wow! \" + seconds + \".\" + millisecondsHS + \"s is your new high score in the \" + place + numberName + \" place.\"\r\n checkDBForHs(newScore);\r\n }\r\n localStorage.setItem('highScoresSelf', JSON.stringify(storedData));\r\n setJSONHighScores()\r\n return 0;\r\n}\r\n\r\n\r\nfunction setGlobalHighScores() {\r\n let colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\")\r\n\r\n ;(0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getDocs)(colRef).then((snapshot) => {\r\n let highScores = []\r\n snapshot.docs.forEach((doc) => {\r\n for (const [key, value] of Object.entries(doc.data())) {\r\n for (i = 1; i <= value.length; i++) {\r\n if (value[i - 1]) {\r\n let [nameOfRecorder, hsOfRecorder] = value[i - 1].split(\":\");\r\n hsOfRecorder = parseInt(hsOfRecorder)\r\n let secondsHS = Math.floor(hsOfRecorder / 1000)\r\n let millisecondsHS = padWithZeros(hsOfRecorder % 1000)\r\n if (key === \"expert\") {\r\n document.querySelector(\"#gesn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#ges-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n } else if (key === \"int\") {\r\n document.querySelector(\"#gisn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#gis-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n } else if (key === \"easy\") {\r\n document.querySelector(\"#hegn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#heg-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n }\r\n }\r\n }\r\n }\r\n })\r\n }).catch(err => {\r\n console.log(err)\r\n })\r\n}\r\nsetGlobalHighScores()\r\n\r\n\r\nasync function checkDBForHs(score) {\r\n let colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\");\r\n\r\n (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getDocs)(colRef).then((snapshot) => {\r\n let highScores = []\r\n snapshot.docs.forEach(async (doc) => {\r\n\r\n let tempData = doc.data()[hardness]\r\n\r\n for (let i = 0; i < tempData.length; i++) {\r\n tempData[i] = tempData[i].split(\":\")\r\n tempData[i][1] = parseInt(tempData[i][1])\r\n }\r\n if (tempData.length <= 9) {\r\n await updateHighScoreGlobal(tempData, score);\r\n return 0;\r\n } else if (score < tempData[tempData.length - 1][1]) {\r\n tempData.pop()\r\n await updateHighScoreGlobal(tempData, score);\r\n return 0;\r\n }\r\n })\r\n }).catch(err => {\r\n console.log(err)\r\n })\r\n}\r\n\r\nfunction promptAsync(message) {\r\n return new Promise((resolve) => {\r\n document.querySelector('.prompt-container').style.display = 'flex';\r\n\r\n const userNameInput = document.getElementById('userNameInput');\r\n const submitButton = document.getElementById('submitButton');\r\n\r\n submitButton.addEventListener('click', function() {\r\n if (userNameInput.value.length >= 4 && userNameInput.value.length <= 15) {\r\n document.querySelector(\".error-message-prompt\").textContent = \"\"\r\n document.querySelector('.prompt-container').style.display = 'none';\r\n resolve(userNameInput.value);\r\n } else {\r\n document.querySelector(\".error-message-prompt\").textContent = \"Length should be more than 4 and less than 15.\"\r\n }\r\n\r\n document.querySelector(\".close-prompt\").addEventListener('click', function() {\r\n document.querySelector(\".prompt-container\").style.display = \"none\"\r\n resolve(\"Unknown\");\r\n return 0;\r\n })\r\n });\r\n });\r\n}\r\n\r\nasync function updateHighScoreGlobal(hardData, score) {\r\n let recorderName = await promptAsync(\"This was a new global hs. How the history will remember your name?\");\r\n\r\n hardData.push([recorderName, score]);\r\n hardData.sort((a, b) => a[1] - b[1]);\r\n\r\n for (let i = 0; i < hardData.length; i++) {\r\n hardData[i] = `${hardData[i][0]}:${hardData[i][1]}`;\r\n }\r\n\r\n const colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\");\r\n const docRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.doc)(db, 'high_scores', 'woZgqLDIFMQmZCqswpiQ');\r\n\r\n try {\r\n await (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.updateDoc)(docRef, {\r\n [hardness]: hardData\r\n });\r\n setGlobalHighScores();\r\n } catch (error) {\r\n console.error(\"Error updating document:\", error);\r\n }\r\n}\r\n\r\n/* function makeTheGameHTML(){\r\n\tmainGameHTML = document.querySelector(\".main-game\")\r\n\tfor (i = 0; i < rowsG; i++){\r\n\r\n\t\tnewRow = document.createElement(\"div\")\r\n\t\tnewRow.className = \"game-row\"\r\n\t\tmainGameHTML.appendChild(newRow)\r\n\r\n\t\tfor (j = 0; j < colsG; j++){\r\n\t\t\tcurrentElement = document.createElement(\"div\")\r\n\t\t\tcurrentElement.className = \"single-element\"\r\n\r\n\t\t\tcurrentCol = document.createElement(\"p\")\r\n\t\t\tcurrentCol.textContent = game[i][j]\r\n\r\n\t\t\tcurrentElement.appendChild(currentCol)\r\n\t\t\tnewRow.appendChild(currentElement)\r\n\r\n\t\t}\r\n\t}\r\n\t\r\n} */\r\n\r\nfunction makeTheGameHTML2(previousFlags = [], fixAfterSet = false) {\r\n mainGameHTML = document.querySelector(\".main-game2\")\r\n if (fixAfterSet) {\r\n mainGameHTML.innerHTML = \"\"\r\n }\r\n\r\n for (let i = 0; i < rowsG; i++) {\r\n\r\n newRow = document.createElement(\"div\")\r\n newRow.className = \"game-row\"\r\n for (let j = 0; j < colsG; j++) {\r\n currentElement = document.createElement(\"div\")\r\n currentElement.className = \"single-element\"\r\n\r\n currentCol = document.createElement(\"div\")\r\n currentCol.id = i.toString() + \"/\" + j.toString()\r\n currentElement.id = i.toString() + \":\" + j.toString()\r\n currentCol.className = \"game-button\"\r\n\r\n currentElement.appendChild(currentCol)\r\n newRow.appendChild(currentElement)\r\n\r\n previousFlags.forEach(element => {\r\n if (element.id === currentCol.id) {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n changeTheElement(currentCol, \"flag\")\r\n }\r\n });\r\n\r\n }\r\n mainGameHTML.appendChild(newRow)\r\n }\r\n let length = parseInt(getComputedStyle(document.querySelector(\".game-row\")).width, 10)\r\n if ((colsG * 25 >= length && colsG * 25 + 26.4 > document.body.clientWidth) || (fixAfterSet)) {\r\n document.querySelector(\"body\").style.overflowX = \"scroll\";\r\n document.querySelector(\"body\").style.overflowX = \"flex\";\r\n document.querySelector(\".playground\").style.display = \"block\"\r\n document.querySelector(\".game-container\").style.display = \"block\"\r\n document.querySelector(\"body\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".playground\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".game-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".game-info-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".main-game-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".box-menu\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".box-controls\").style.width = \"400px\"\r\n document.querySelector(\".box-size\").style.width = \"400px\"\r\n let bodyWidth = document.body.scrollWidth;\r\n let halfViewportWidth = window.innerWidth / 2;\r\n let centerStartX = bodyWidth / 2 - halfViewportWidth;\r\n\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n if (onMobile) {\r\n centerStartX = Math.max(0, (window.innerWidth - document.documentElement.clientWidth) / 2);\r\n document.querySelector(\".playground\").scrollIntoView({ block: \"center\" });\r\n window.scrollTo(centerStartX, 0);\r\n return 0\r\n }\r\n window.scrollTo(centerStartX, 0);\r\n } else {\r\n document.querySelector(\"body\").style.overflowX = \"hidden\";\r\n document.querySelector(\"body\").style.overflowX = \"block\";\r\n document.querySelector(\".playground\").style.display = \"flex\"\r\n document.querySelector(\".game-container\").style.display = \"flex\"\r\n document.querySelector(\".game-info-container\").style.width = \"100%\"\r\n document.querySelector(\".main-game-container\").style.width = \"100%\"\r\n document.querySelector(\".box-menu\").style.width = \"100%\"\r\n if (window.innerWidth < 600) {\r\n document.querySelector(\".box-controls\").style.width = \"90%\"\r\n document.querySelector(\".box-size\").style.width = \"90%\"\r\n } else {\r\n document.querySelector(\".box-controls\").style.width = \"\"\r\n document.querySelector(\".box-size\").style.width = \"\"\r\n }\r\n document.querySelector(\"body\").style.width = \"\"\r\n document.querySelector(\".playground\").style.width = \"\"\r\n document.querySelector(\".game-container\").style.width = \"\"\r\n }\r\n length = parseInt(getComputedStyle(document.querySelector(\".game-row\")).width, 10)\r\n if (colsG * 25 >= length && colsG * 25 + 26.4 > document.body.clientWidth) {\r\n makeTheGameHTML2(previousFlags, true)\r\n }\r\n\r\n}\r\n\r\n\r\nfunction handleButtonClick(event) {\r\n gameStatus = document.querySelector(\".game-status\")\r\n if (gameStatus.id === \"lose\") return 0;\r\n if (event.target.classList.contains(\"flagged\") || event.target.classList.contains(\"closed\")) {\r\n return 0;\r\n } else if ((gameStatus.id === \"start\") || (gameStatus.id === \"lose\")) {\r\n onFirstClick(event);\r\n } else {\r\n inGameButtonClick(event.target);\r\n }\r\n}\r\n\r\n\r\nfunction onFirstClick(event) {\r\n document.querySelector(\".new-hs-container\").style.display = \"none\"\r\n\r\n idArray = event.target.id.split(\"/\")\r\n\r\n if (event.target.classList.contains(\"flagged\")) {\r\n return 0\r\n } else if (rowsG * colsG <= parseInt(mines) + 8) {\r\n if (game[idArray[0]][idArray[1]] !== -1) {\r\n startStopwatch()\r\n inGameButtonClick(event.target)\r\n } else {\r\n makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1], event, document.querySelectorAll(\".flagged\"), true)\r\n let seconds = 0;\r\n let stopwatchInterval;\r\n\r\n startStopwatch()\r\n }\r\n } else if (game[idArray[0]][idArray[1]] !== 0) {\r\n makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1], event, document.querySelectorAll(\".flagged\"), false)\r\n let seconds = 0;\r\n let stopwatchInterval;\r\n\r\n startStopwatch()\r\n } else {\r\n startStopwatch()\r\n inGameButtonClick(event.target)\r\n }\r\n\r\n}\r\n\r\nfunction changeTheElement(element, action, lost = false) {\r\n if (action === \"open\") {\r\n currentElement = document.getElementById(element)\r\n if (currentElement === null || currentElement.classList.contains(\"flagged\")) {\r\n return 0\r\n }\r\n parentOfElement = currentElement.parentElement\r\n\r\n idArray = element.split(\"/\")\r\n currentElement.remove()\r\n parentOfElement.classList.add(\"opened-div\")\r\n let revealedText = game[idArray[0]][idArray[1]] === 0 ? \" \" : game[idArray[0]][idArray[1]];\r\n\r\n if (revealedText == \"-1\") {\r\n\t\t\t\t if (lost == true) {\r\n\t\t\t\t \tparentOfElement.style.backgroundColor = \"var(--mine-color)\"\r\n\t\t\t\t }\r\n parentOfElement.style.backgroundImage = `url(\"multimedia/icons/mine_2.svg\")`;\r\n return 0\r\n }\r\n parentOfElement.style.color = currentPallete[parseInt(revealedText)]\r\n parentOfElement.textContent = revealedText\r\n eventListenerForOpened()\r\n if (document.querySelectorAll(\".game-button\").length == mines && !(document.querySelector(\".game-status\").id == \"lose\")) {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/win.png\")`;\r\n }\r\n return 0\r\n\r\n } else if (action === \"openFlag\") {\r\n parentOfElement = element.parentElement\r\n idArray = element.id.split(\"/\")\r\n element.remove()\r\n parentOfElement.classList.add(\"opened-div\")\r\n let revealedText = game[idArray[0]][idArray[1]] === 0 ? \" \" : game[idArray[0]][idArray[1]];\r\n if (revealedText == \"-1\") {\r\n parentOfElement.style.backgroundImage = `url(\"multimedia/icons/mine_2.svg\")`;\r\n return 0\r\n }\r\n\r\n parentOfElement.textContent = revealedText\r\n } else if (action === \"flag\") {\r\n if (!(element.classList.contains(\"flagged\") || element.parentNode.classList.contains(\"flagged\"))) {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n flagSet = document.createElement(\"img\")\r\n flagSet.src = \"multimedia/icons/ms_flag.svg\"\r\n flagSet.style.width = \"100%\"\r\n element.appendChild(flagSet)\r\n element.classList.add(\"flagged\")\r\n }\r\n } else if (action === \"wrongFlag\") {\r\n element.innerHTML = \"\"\r\n element.style.backgroundImage = `url(\"multimedia/icons/mine_fail.svg\")`\r\n } else if (action === \"close\") {\r\n element.classList.add(\"closed\")\r\n }\r\n\r\n}\r\n\r\nfunction openTilesAfterLose() {\r\n allClosedTiles = document.querySelectorAll(\".game-button\");\r\n allFlaggedTiles = document.querySelectorAll(\".flagged\");\r\n\r\n allFlaggedTiles.forEach((el) => {\r\n idArray = el.id.split(\"/\");\r\n if (game[idArray[0]][idArray[1]] !== -1) {\r\n parentOfElement = el.parentNode\r\n changeTheElement(el, \"openFlag\", areAdjacentElementsEqual())\r\n changeTheElement(parentOfElement, \"wrongFlag\")\r\n }\r\n });\r\n\r\n allClosedTiles.forEach((el) => {\r\n idArray = el.id.split(\"/\");\r\n if (game[idArray[0]][idArray[1]] == -1 && !(el.classList.contains(\"flagged\"))) {\r\n changeTheElement(el, \"openFlag\")\r\n } else {\r\n changeTheElement(el, \"close\")\r\n }\r\n });\r\n}\r\n\r\nfunction inGameButtonClick(eventTarget) {\r\n document.querySelector(\".game-status\").id = \"mid-game\"\r\n idArray = eventTarget.id.split(\"/\");\r\n\r\n if (game[idArray[0]][idArray[1]] == -1) {\r\n changeTheElement(eventTarget.id, \"open\", true)\r\n \r\n eventTarget.classList.add(\"lost-tile\");\r\n stopStopwatch()\r\n gameStatus = document.querySelector(\".game-status\")\r\n gameStatus.id = \"lose\"\r\n gameStatus.style.backgroundImage = `url(\"multimedia/images/lose.png\")`;\r\n openTilesAfterLose()\r\n return 0;\r\n //makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1]);\r\n } else {\r\n let result = new Set();\r\n\r\n function checkAllDirections(x, y) {\r\n if (x < 0 || y < 0 || x >= rowsG || y >= colsG || result.has(`${x}/${y}`)) {\r\n return 0;\r\n }\r\n\r\n currentElement = game[x][y];\r\n coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n result.add(`${x}/${y}`);\r\n\r\n if (currentElement == 0) {\r\n for (let i = 0; i < coordinates.length; i++) {\r\n const xCoord = x + coordinates[i][0];\r\n const yCoord = y + coordinates[i][1];\r\n checkAllDirections(xCoord, yCoord);\r\n }\r\n }\r\n }\r\n checkAllDirections(parseInt(idArray[0]), parseInt(idArray[1]));\r\n\r\n result.forEach(function(element) {\r\n changeTheElement(element, \"open\")\r\n });\r\n }\r\n if (document.querySelectorAll(\".game-button\").length == mines && !(document.querySelector(\".game-status\").id == \"lose\")) {\r\n // When winning the game\r\n stopStopwatch()\r\n document.querySelector(\".mines-container\").textContent = \"000\"\r\n document.querySelectorAll(\".game-button\").forEach(button => {\r\n changeTheElement(button, \"flag\")\r\n });\r\n endTimeInMs = new Date().getTime();\r\n intervalInMs = endTimeInMs - startTimeInMs;\r\n\r\n updateStopwatchWithMs(intervalInMs % 1000); // Last three digits, that is, the milliseconds\r\n updateJSONHighScores(intervalInMs);\r\n return 0;\r\n }\r\n}\r\n\r\nfunction eventListenerForButtons() {\r\n let buttons = document.querySelectorAll(\".game-button\");\r\n\r\n buttons.forEach(button => {\r\n button.addEventListener(\"click\", handleButtonClick);\r\n });\r\n\r\n buttons.forEach(button => {\r\n button.addEventListener('contextmenu', function(ev) {\r\n ev.preventDefault();\r\n if (document.querySelector(\".game-status\").id == \"lose\") {\r\n return 0;\r\n }\r\n\r\n if (ev.target.classList.contains(\"flagged\") || ev.target.parentNode.classList.contains(\"flagged\")) {\r\n currentFlags++;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n if (ev.target.tagName === \"IMG\") {\r\n ev.target.parentNode.classList.remove(\"flagged\")\r\n ev.target.remove()\r\n return 0;\r\n }\r\n ev.target.classList.remove(\"flagged\");\r\n ev.target.innerHTML = \"\"\r\n\r\n //ev.target.innerHTML = \" \";\r\n } else {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n flagSet = document.createElement(\"img\")\r\n flagSet.src = \"multimedia/icons/ms_flag.svg\"\r\n flagSet.style.width = \"100%\"\r\n ev.target.appendChild(flagSet)\r\n ev.target.classList.add(\"flagged\")\r\n //ev.target.innerHTML = \"f\";\r\n }\r\n\r\n return 0;\r\n }, false);\r\n });\r\n}\r\n\r\nfunction eventListenerForOpened() {\r\n let opened = document.querySelectorAll(\".opened-div\");\r\n opened.forEach(el => {\r\n el.removeEventListener(\"click\", openSurroundingElements);\r\n el.addEventListener(\"click\", openSurroundingElements)\r\n });\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n opened.forEach(el => {\r\n if (onMobile) {\r\n el.addEventListener('touchstart', startTimer, { passive: true });\r\n el.addEventListener('touchmove', clearTimer, { passive: true });\r\n el.addEventListener('touchend', clearTimer);\r\n return 0;\r\n }\r\n el.removeEventListener(\"contextmenu\", flagSurroundingElements);\r\n el.addEventListener(\"contextmenu\", flagSurroundingElements)\r\n });\r\n}\r\n\r\n\r\ndocument.querySelector(\".game-status\").addEventListener(\"click\", function() {\r\n resetStopwatch()\r\n makeTheMineLawn(rowsG, colsG);\r\n});\r\n\r\n\r\nfunction openSurroundingElements(ev) {\r\n if (document.querySelector(\".game-status\").id === \"lose\") return 0;\r\n\r\n let flags = [];\r\n const idArray = ev.target.id.split(\":\");\r\n const x = parseInt(idArray[0]);\r\n const y = parseInt(idArray[1]);\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n\r\n if (newX >= 0 && newX < rowsG && newY >= 0 && newY < colsG) {\r\n\r\n const adjacentElement = game[newX][newY];\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (currentElement) {\r\n if (currentElement.classList.contains(\"flagged\")) {\r\n flags.push([newX, newY]);\r\n }\r\n }\r\n }\r\n }\r\n if (flags.length === game[x][y]) {\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (!(flags.includes([newX, newY])) && currentElement && !(currentElement.classList.contains(\"flagged\"))) {\r\n inGameButtonClick(currentElement)\r\n }\r\n };\r\n }\r\n}\r\n\r\n\r\nlet touchTimer;\r\n\r\nfunction startTimer(event) {\r\n touchTimer = setTimeout(function() {\r\n flagSurroundingElements(event, false)\r\n }, settings[\"long-tap\"]); // Adjust the duration as needed (e.g., 1000 milliseconds for a 1-second long tap)\r\n}\r\n\r\nfunction clearTimer() {\r\n clearTimeout(touchTimer);\r\n}\r\n\r\n// Add touch event listeners\r\n\r\n\r\nfunction flagSurroundingElements(event, onDesktop = true) {\r\n if (onDesktop) {\r\n event.preventDefault()\r\n }\r\n\r\n if (document.querySelector(\".game-status\").id === \"lose\") return 0;\r\n\r\n let flags = [];\r\n const idArray = event.target.id.split(\":\");\r\n const x = parseInt(idArray[0]);\r\n const y = parseInt(idArray[1]);\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n\r\n if (newX >= 0 && newX < rowsG && newY >= 0 && newY < colsG) {\r\n const adjacentElement = game[newX][newY];\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (currentElement) {\r\n flags.push([newX, newY]);\r\n }\r\n }\r\n }\r\n\r\n if (flags.length === game[x][y]) {\r\n for (const [dx, dy] of flags) {\r\n currentElement = document.getElementById(dx + \"/\" + dy)\r\n changeTheElement(currentElement, \"flag\")\r\n };\r\n }\r\n}\r\n\r\n\r\ndocument.querySelector(\".new-box-button\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n boxRadios = document.getElementsByName(\"box_size\")\r\n resetStopwatch()\r\n\r\n for (const element of boxRadios) {\r\n if (element.checked) {\r\n if (element.value === \"custom\") {\r\n hardness = \"custom\"\r\n rowsG = document.getElementById(\"custom_rows\").value\r\n colsG = document.getElementById(\"custom_cols\").value\r\n mines = document.getElementById(\"custom_mines\").value\r\n\r\n if (rowsG < 5) {\r\n rowsG = 5\r\n document.getElementById(\"custom_rows\").value = \"5\"\r\n }\r\n if (colsG < 8) {\r\n colsG = 8\r\n document.getElementById(\"custom_cols\").value = \"8\"\r\n }\r\n if (rowsG > 99) {\r\n rowsG = 99\r\n document.getElementById(\"custom_rows\").value = \"99\"\r\n }\r\n if (colsG > 99) {\r\n colsG = 99\r\n document.getElementById(\"custom_cols\").value = \"99\"\r\n }\r\n\r\n if (colsG * rowsG / 20 > mines && rowsG > 49) {\r\n alert(\"This might take some time :)\")\r\n }\r\n if (colsG * rowsG == mines) {\r\n mines--;\r\n }\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"small\") {\r\n rowsG = 9\r\n colsG = 9\r\n mines = 10\r\n hardness = \"easy\"\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"middle\") {\r\n rowsG = 16\r\n colsG = 16\r\n mines = 40\r\n hardness = \"int\"\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"big\") {\r\n rowsG = 16\r\n colsG = 30\r\n mines = 99\r\n hardness = \"expert\"\r\n makeTheMineLawn(rowsG, colsG)\r\n }\r\n }\r\n }\r\n})\r\n\r\n\r\nfunction updateStopwatch() {\r\n if (!endTimeInMs) {\r\n seconds++;\r\n const formattedSeconds = seconds < 1000 ? padWithZeros(seconds) : seconds;\r\n document.querySelector('.time-stopwatch').innerHTML = `${formattedSeconds}`;\r\n return 0\r\n }\r\n stopStopwatch()\r\n}\r\n\r\nfunction updateStopwatchWithMs(ms) {\r\n const formattedSeconds = seconds < 1000 ? padWithZeros(seconds) : seconds;\r\n document.querySelector('.time-stopwatch').innerHTML = `${formattedSeconds}`;\r\n}\r\n\r\nfunction startStopwatch() {\r\n stopwatchInterval = setInterval(updateStopwatch, 1000);\r\n startTimeInMs = new Date().getTime();\r\n}\r\n\r\nfunction stopStopwatch() {\r\n clearInterval(stopwatchInterval);\r\n}\r\n\r\nfunction resetStopwatch() {\r\n seconds = 0;\r\n startTimeInMs = 0;\r\n endTimeInMs = 0;\r\n document.querySelector('.time-stopwatch').innerHTML = '000';\r\n stopStopwatch();\r\n}\r\n\r\nfunction padWithZeros(number) {\r\n const isNegative = number < 0;\r\n const absoluteNumber = Math.abs(number);\r\n const paddedNumber = String(absoluteNumber).padStart(3, '0');\r\n\r\n return isNegative ? `-${paddedNumber}` : paddedNumber;\r\n}\r\n\r\nfunction padWithZerosMs(number) {\r\n return String(number).padStart(7, '0');\r\n}\r\n\r\ndocument.querySelector(\".main-game2\").addEventListener(\"mousedown\", () => {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/onclick.png\")`;\r\n})\r\n\r\ndocument.querySelector(\".main-game2\").addEventListener(\"mouseup\", () => {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/default.png\")`;\r\n})\r\n\r\n\r\n// Navigation\r\n\r\ndocument.querySelector(\".menu-controls\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-controls\").style.display = \"flex\";\r\n});\r\n\r\n\r\ndocument.querySelector(\".menu-size\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-size\").style.display = \"flex\";\r\n});\r\n\r\ndocument.querySelector(\".menu-options\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-options\").style.display = \"flex\";\r\n});\r\n\r\n\r\ndocument.querySelectorAll(\".close-controls\").forEach(function(element) {\r\n element.addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n });\r\n});\r\n\r\ndocument.querySelector(\".box-menu\").addEventListener(\"click\", function(event) {\r\n if (event.target === document.querySelector(\".box-menu\")) {\r\n closeNavMenus()\r\n }\r\n});\r\n\r\nfunction closeNavMenus() {\r\n document.querySelector(\".box-menu\").style.display = \"none\";\r\n document.querySelector(\".box-controls\").style.display = \"none\";\r\n document.querySelector(\".box-size\").style.display = \"none\";\r\n document.querySelector(\".box-options\").style.display = \"none\";\r\n}\r\n\r\ndocument.querySelector('.long-tap-option').addEventListener('input', function() {\r\n const currentValue = this.value;\r\n settings[\"long-tap\"] = currentValue;\r\n localStorage.setItem(\"settings\", JSON.stringify(settings))\r\n document.querySelector('.long-tap-option-setting').textContent = `Current Value: ${currentValue}`;\r\n});\r\n\r\ndocument.querySelectorAll('.hs-a').forEach((elem) => {\r\n elem.addEventListener(\"click\", function(ev) {\r\n if (ev.target.classList.contains(\"disabled-a\")) {\r\n return 0;\r\n } else {\r\n if (ev.target.classList.contains(\"hs-local\")) {\r\n document.querySelector(\".global-hs-container\").style.display = \"none\";\r\n document.querySelector(\".local-hs-container\").style.display = \"block\";\r\n ev.target.classList.add(\"disabled-a\");\r\n document.querySelector(\".hs-global\").classList.remove(\"disabled-a\");\r\n return 0;\r\n } else if (ev.target.classList.contains(\"hs-global\")) {\r\n document.querySelector(\".local-hs-container\").style.display = \"none\";\r\n document.querySelector(\".global-hs-container\").style.display = \"block\";\r\n ev.target.classList.add(\"disabled-a\");\r\n document.querySelector(\".hs-local\").classList.remove(\"disabled-a\");\r\n return 0;\r\n } else {\r\n return 0;\r\n }\r\n }\r\n })\r\n});\n\n//# sourceURL=webpack://minesweeper/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var firebase_app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! firebase/app */ \"./node_modules/firebase/app/dist/esm/index.esm.js\");\n/* harmony import */ var firebase_firestore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! firebase/firestore */ \"./node_modules/firebase/firestore/dist/esm/index.esm.js\");\n\r\n\r\n\r\n\r\nlet rowsG = 9;\r\nlet colsG = 9;\r\nlet mines = 10;\r\nlet hardness = \"easy\";\r\nlet game = [];\r\nlet currentFlags = 10;\r\nlet seconds = 0;\r\nlet stopwatchInterval;\r\nlet startTimeInMs;\r\nlet endTimeInMs;\r\nlet onMobile;\r\nlet uiMode;\r\nlet modeContainer;\r\nlet openedDivs;\r\nlet gameStatus;\r\nlet i;\r\nlet j;\r\nlet k;\r\nlet l;\r\nlet randomRow;\r\nlet randomCols;\r\nlet currentElement;\r\nlet count;\r\nlet mainGameHTML;\r\nlet newRow;\r\nlet currentCol;\r\nlet currentRecords;\r\nlet idArray;\r\nlet coordinates;\r\nlet parentOfElement;\r\nlet flagSet;\r\nlet allClosedTiles;\r\nlet allFlaggedTiles;\r\nlet intervalInMs;\r\nlet boxRadios;\r\n\r\nlet namesOfNumbers = [\"st\", \"nd\", \"rd\"]\r\n\r\nlet settings = {\r\n \"long-tap\": 250,\r\n}\r\n\r\nconst numberColorsHex = {\r\n 1: \"#001EC1\",\r\n 2: \"#018100\",\r\n 3: \"#CF0000\",\r\n 4: \"#102E61\",\r\n 5: \"#620000\",\r\n 6: \"#239E9F\",\r\n 7: \"#0E1111\",\r\n 8: \"#434554\",\r\n 0: \"#FFFFFF\",\r\n};\r\n\r\nconst darkNumberColorsHex = {\r\n 1: \"#3478DE\",\r\n 2: \"#49C049\",\r\n 3: \"#C93030\",\r\n 4: \"#165EC9\",\r\n 5: \"#B80606\",\r\n 6: \"#1AA8A8\",\r\n 7: \"#787C97\",\r\n 8: \"#B1B8BB\",\r\n 0: \"#FFFFFF\",\r\n};\r\n\r\nlet currentPallete = numberColorsHex\r\n\r\nconst lightModeColors = {\r\n \"--text-color-main\": \"#0e1111\",\r\n \"--link-color\": \"#001EC1\",\r\n \"--background-color\": \"#FFFFFB\",\r\n \"--primary-color\": \"#CDCFD0\",\r\n \"--border-color\": \"#7B7B7B\",\r\n \"--secondary-color\": \"#CDCFD0\",\r\n \"--shadow-color\": \"rgba(0,0,0,0.3)\",\r\n \"--border-color-primary\": \"#EEEEEE\",\r\n \"--mine-color\": \"#E11F23\",\r\n};\r\n\r\nconst darkModeColors = {\r\n \"--text-color-main\": \"#FFFFFB\",\r\n \"--link-color\": \"#58a6ff\",\r\n \"--background-color\": \"#0e1111\",\r\n \"--primary-color\": \"#33383A\",\r\n \"--border-color\": \"#222\",\r\n \"--secondary-color\": \"#FFFFFB\",\r\n \"--border-color-primary\": \"#555\",\r\n \"--shadow-color\": \"rgba(255,255,255,0.3)\",\r\n \"--mine-color\": \"#CD0B0F\",\r\n};\r\n\r\n\r\nconst firebaseConfig = {\r\n apiKey: \"AIzaSyB0xNyZd1pnFEMmG9xueYXPo_4nFFA9SgU\",\r\n authDomain: \"minesweepertmu.firebaseapp.com\",\r\n projectId: \"minesweepertmu\",\r\n storageBucket: \"minesweepertmu.appspot.com\",\r\n messagingSenderId: \"859604107677\",\r\n appId: \"1:859604107677:web:cbc6f2fbe70fbf93182f74\",\r\n measurementId: \"G-BY1X2EYMFG\"\r\n};\r\n\r\n(0,firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp)(firebaseConfig)\r\n\r\nlet db = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore)();\r\n\r\n\r\nfunction applySettings() {\r\n let settingsTemp = JSON.parse(localStorage.getItem('settings'));\r\n if (!settingsTemp) {\r\n localStorage.setItem('settings', JSON.stringify(settings));\r\n return 0;\r\n }\r\n settings = settingsTemp\r\n document.querySelector(\".long-tap-option\").value = settings[\"long-tap\"]\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n if (onMobile) {\r\n document.querySelector(\".long-tap-option\").removeAttribute(\"disabled\");\r\n }\r\n document.querySelector('.long-tap-option-setting').textContent = `Current Value: ${settings[\"long-tap\"]}`;\r\n}\r\n\r\napplySettings()\r\n\r\nfunction onLoadUIMode() {\r\n uiMode = JSON.parse(localStorage.getItem('ui_mode'));\r\n modeContainer = document.querySelector(\".mode-container\")\r\n\r\n if (uiMode === \"light\") {\r\n modeContainer.classList.remove(\"dark\")\r\n modeContainer.classList.add(\"light\")\r\n modeContainer.style.backgroundImage = \"url('multimedia/icons/moon.svg')\"\r\n currentPallete = numberColorsHex\r\n applyColorPalette(lightModeColors);\r\n applyColorPaletteForNumbers(lightModeColors);\r\n\r\n } else if (uiMode === \"dark\") {\r\n modeContainer.classList.remove(\"light\")\r\n modeContainer.classList.add(\"dark\")\r\n modeContainer.style.backgroundImage = \"url('multimedia/icons/sun.svg')\"\r\n currentPallete = darkNumberColorsHex\r\n applyColorPalette(darkModeColors);\r\n applyColorPaletteForNumbers(darkModeColors);\r\n }\r\n}\r\n\r\nonLoadUIMode();\r\n\r\ndocument.querySelector(\".mode-container\").addEventListener(\"click\", (ev) => {\r\n if (ev.target.classList.contains(\"light\")) {\r\n ev.target.classList.remove(\"light\")\r\n ev.target.classList.add(\"dark\")\r\n ev.target.style.backgroundImage = \"url('multimedia/icons/sun.svg')\"\r\n currentPallete = darkNumberColorsHex\r\n applyColorPalette(darkModeColors);\r\n applyColorPaletteForNumbers(darkModeColors);\r\n localStorage.setItem('ui_mode', JSON.stringify(\"dark\"));\r\n } else {\r\n ev.target.classList.remove(\"dark\")\r\n ev.target.classList.add(\"light\")\r\n ev.target.style.backgroundImage = \"url('multimedia/icons/moon.svg')\"\r\n currentPallete = numberColorsHex\r\n applyColorPalette(lightModeColors);\r\n applyColorPaletteForNumbers(lightModeColors);\r\n localStorage.setItem('ui_mode', JSON.stringify(\"light\"));\r\n }\r\n})\r\n\r\nfunction applyColorPaletteForNumbers(colorPalette) {\r\n openedDivs = document.querySelectorAll(\".opened-div\");\r\n\r\n openedDivs.forEach((el) => {\r\n let id = el.id.split(\":\")\r\n el.style.color = currentPallete[el.innerHTML]\r\n });\r\n}\r\n\r\nfunction applyColorPalette(colorPalette) {\r\n const root = document.documentElement.style;\r\n\r\n for (const [key, value] of Object.entries(colorPalette)) {\r\n root.setProperty(key, value);\r\n }\r\n}\r\n\r\n//SWITCH TO DARK MODE AUTO\r\n\r\nfunction makeTheMineLawn(rows, cols, x = -1, y = -1, ev = 0, allFlags = [], lotMines = false) {\r\n seconds = 0\r\n currentFlags = mines\r\n game = []\r\n gameStatus = document.querySelector(\".game-status\")\r\n gameStatus.id = \"start\"\r\n document.querySelector(\".main-game2\").innerHTML = ''\r\n document.querySelector(\".game-status\").style.backgroundImage = \"url('multimedia/images/default.png')\"\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n\r\n for (i = 0; i < rows; i++) {\r\n game.push([])\r\n for (j = 0; j < cols; j++) {\r\n game[i].push(0)\r\n }\r\n }\r\n\r\n for (i = 0; i < mines; i++) {\r\n function randomRowAndColGen() {\r\n randomRow = Math.floor(Math.random() * rows)\r\n randomCols = Math.floor(Math.random() * cols)\r\n if (game[randomRow][randomCols] !== -1) {\r\n if (x == -1 && y == -1) {\r\n game[randomRow][randomCols] = -1\r\n } else if (lotMines && randomRow == x && randomCols == y) {\r\n randomRowAndColGen()\r\n } else if ((randomRow >= x - 1 && randomRow <= parseInt(x) + 1) && (randomCols >= y - 1 && randomCols <= parseInt(y) + 1) && !(lotMines)) {\r\n randomRowAndColGen()\r\n } else {\r\n game[randomRow][randomCols] = -1\r\n }\r\n } else randomRowAndColGen()\r\n }\r\n randomRowAndColGen()\r\n }\r\n\r\n for (i = 0; i < rows; i++) {\r\n for (j = 0; j < cols; j++) {\r\n currentElement = game[i][j]\r\n if (currentElement !== -1) {\r\n count = 0\r\n for (k = -1; k < 2; k++) {\r\n for (l = -1; l < 2; l++) {\r\n if (!((k == 0 && l == 0) || (i + k < 0) || (j + l < 0) || (i + k > rows - 1) || (j + l > cols - 1))) {\r\n if (game[i + k][j + l] == -1) {\r\n count++\r\n }\r\n }\r\n }\r\n game[i][j] = count\r\n }\r\n }\r\n }\r\n }\r\n makeTheGameHTML2(allFlags)\r\n eventListenerForButtons()\r\n\r\n if (!(ev == 0)) {\r\n inGameButtonClick(ev.target)\r\n }\r\n}\r\nmakeTheMineLawn(rowsG, colsG)\r\n\r\nfunction firstJSON() {\r\n const storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n if (!(storedData)) {\r\n localStorage.setItem('highScoresSelf', JSON.stringify({ expert: [], int: [], easy: [], new: \"yes\" }));\r\n }\r\n}\r\nfirstJSON()\r\n\r\nfunction setJSONHighScores() {\r\n let storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n storedData.easy.sort((a, b) => a - b);\r\n\r\n if (storedData) {\r\n for (const [key, value] of Object.entries(storedData)) {\r\n\r\n currentRecords = document.querySelectorAll(\".\" + key + \"_high_self\")\r\n for (i = 1; i <= value.length; i++) {\r\n let secondsHS = Math.floor(value[i - 1] / 1000)\r\n let millisecondsHS = padWithZeros(value[i - 1] % 1000)\r\n if (key === \"expert\") {\r\n document.querySelector(\"#ehs-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n } else if (key === \"int\") {\r\n document.querySelector(\"#eis-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n } else if (key === \"easy\") {\r\n document.querySelector(\"#hes-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\"\r\n }\r\n }\r\n }\r\n }\r\n localStorage.setItem('highScoresSelf', JSON.stringify(storedData));\r\n}\r\nsetJSONHighScores()\r\n\r\nfunction updateJSONHighScores(newScore) {\r\n\r\n let storedData = JSON.parse(localStorage.getItem('highScoresSelf'));\r\n storedData.easy.sort((a, b) => a - b);\r\n\r\n if (storedData[hardness].length >= 10) {\r\n if (newScore < storedData[hardness][9]) {\r\n document.querySelector(\".new-hs-container\").style.display = \"flex\"\r\n storedData[hardness].pop()\r\n storedData[hardness].push(newScore)\r\n storedData[hardness].sort(function(a, b) {\r\n return a - b;\r\n });\r\n let secondsHS = Math.floor(newScore / 1000)\r\n let millisecondsHS = newScore % 1000\r\n let place = parseInt(storedData[hardness].indexOf(newScore)) + 1\r\n const numberName = (place == 1 || place == 2 || place == 3) ? namesOfNumbers[place - 1] : 'th';\r\n document.querySelector(\".new-hs\").innerHTML = \"Wow! \" + seconds + \".\" + millisecondsHS + \"s is your new high score in the \" + place + numberName + \" place.\"\r\n checkDBForHs(newScore);\r\n }\r\n } else {\r\n document.querySelector(\".new-hs-container\").style.display = \"flex\"\r\n storedData[hardness].push(newScore)\r\n storedData[hardness].sort(function(a, b) {\r\n return a - b;\r\n });\r\n let secondsHS = Math.floor(newScore / 1000)\r\n let millisecondsHS = newScore % 1000\r\n let place = parseInt(storedData[hardness].indexOf(newScore)) + 1\r\n const numberName = (place == 1 || place == 2 || place == 3) ? namesOfNumbers[place - 1] : 'th';\r\n document.querySelector(\".new-hs\").innerHTML = \"Wow! \" + seconds + \".\" + millisecondsHS + \"s is your new high score in the \" + place + numberName + \" place.\"\r\n checkDBForHs(newScore);\r\n }\r\n localStorage.setItem('highScoresSelf', JSON.stringify(storedData));\r\n setJSONHighScores()\r\n return 0;\r\n}\r\n\r\n\r\nfunction setGlobalHighScores() {\r\n let colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\")\r\n\r\n ;(0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getDocs)(colRef).then((snapshot) => {\r\n let highScores = []\r\n snapshot.docs.forEach((doc) => {\r\n for (const [key, value] of Object.entries(doc.data())) {\r\n for (i = 1; i <= value.length; i++) {\r\n if (value[i - 1]) {\r\n let [nameOfRecorder, hsOfRecorder] = value[i - 1].split(\":\");\r\n hsOfRecorder = parseInt(hsOfRecorder)\r\n let secondsHS = Math.floor(hsOfRecorder / 1000)\r\n let millisecondsHS = padWithZeros(hsOfRecorder % 1000)\r\n if (key === \"expert\") {\r\n document.querySelector(\"#gesn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#ges-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n } else if (key === \"int\") {\r\n document.querySelector(\"#gisn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#gis-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n } else if (key === \"easy\") {\r\n document.querySelector(\"#hegn-\" + i).textContent = nameOfRecorder;\r\n document.querySelector(\"#heg-\" + i).textContent = secondsHS + \".\" + millisecondsHS + \" s\";\r\n }\r\n }\r\n }\r\n }\r\n })\r\n }).catch(err => {\r\n console.log(err)\r\n })\r\n}\r\nsetGlobalHighScores()\r\n\r\n\r\nasync function checkDBForHs(score) {\r\n let colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\");\r\n\r\n (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.getDocs)(colRef).then((snapshot) => {\r\n let highScores = []\r\n snapshot.docs.forEach(async (doc) => {\r\n\r\n let tempData = doc.data()[hardness]\r\n\r\n for (let i = 0; i < tempData.length; i++) {\r\n tempData[i] = tempData[i].split(\":\")\r\n tempData[i][1] = parseInt(tempData[i][1])\r\n }\r\n if (tempData.length <= 9) {\r\n await updateHighScoreGlobal(tempData, score);\r\n return 0;\r\n } else if (score < tempData[tempData.length - 1][1]) {\r\n tempData.pop()\r\n await updateHighScoreGlobal(tempData, score);\r\n return 0;\r\n }\r\n })\r\n }).catch(err => {\r\n console.log(err)\r\n })\r\n}\r\n\r\nfunction promptAsync(message) {\r\n return new Promise((resolve) => {\r\n document.querySelector('.prompt-container').style.display = 'flex';\r\n\r\n const userNameInput = document.getElementById('userNameInput');\r\n const submitButton = document.getElementById('submitButton');\r\n\r\n submitButton.addEventListener('click', function() {\r\n if (userNameInput.value.length >= 4 && userNameInput.value.length <= 15) {\r\n document.querySelector(\".error-message-prompt\").textContent = \"\"\r\n document.querySelector('.prompt-container').style.display = 'none';\r\n resolve(userNameInput.value);\r\n } else {\r\n document.querySelector(\".error-message-prompt\").textContent = \"Length should be more than 4 and less than 15.\"\r\n }\r\n\r\n document.querySelector(\".close-prompt\").addEventListener('click', function() {\r\n document.querySelector(\".prompt-container\").style.display = \"none\"\r\n resolve(\"Unknown\");\r\n return 0;\r\n })\r\n });\r\n });\r\n}\r\n\r\nasync function updateHighScoreGlobal(hardData, score) {\r\n let recorderName = await promptAsync(\"This was a new global hs. How the history will remember your name?\");\r\n\r\n hardData.push([recorderName, score]);\r\n hardData.sort((a, b) => a[1] - b[1]);\r\n\r\n for (let i = 0; i < hardData.length; i++) {\r\n hardData[i] = `${hardData[i][0]}:${hardData[i][1]}`;\r\n }\r\n\r\n const colRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.collection)(db, \"high_scores\");\r\n const docRef = (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.doc)(db, 'high_scores', 'woZgqLDIFMQmZCqswpiQ');\r\n\r\n try {\r\n await (0,firebase_firestore__WEBPACK_IMPORTED_MODULE_1__.updateDoc)(docRef, {\r\n [hardness]: hardData\r\n });\r\n setGlobalHighScores();\r\n } catch (error) {\r\n console.error(\"Error updating document:\", error);\r\n }\r\n}\r\n\r\n/* function makeTheGameHTML(){\r\n\tmainGameHTML = document.querySelector(\".main-game\")\r\n\tfor (i = 0; i < rowsG; i++){\r\n\r\n\t\tnewRow = document.createElement(\"div\")\r\n\t\tnewRow.className = \"game-row\"\r\n\t\tmainGameHTML.appendChild(newRow)\r\n\r\n\t\tfor (j = 0; j < colsG; j++){\r\n\t\t\tcurrentElement = document.createElement(\"div\")\r\n\t\t\tcurrentElement.className = \"single-element\"\r\n\r\n\t\t\tcurrentCol = document.createElement(\"p\")\r\n\t\t\tcurrentCol.textContent = game[i][j]\r\n\r\n\t\t\tcurrentElement.appendChild(currentCol)\r\n\t\t\tnewRow.appendChild(currentElement)\r\n\r\n\t\t}\r\n\t}\r\n\t\r\n} */\r\n\r\nfunction makeTheGameHTML2(previousFlags = [], fixAfterSet = false) {\r\n mainGameHTML = document.querySelector(\".main-game2\")\r\n if (fixAfterSet) {\r\n mainGameHTML.innerHTML = \"\"\r\n }\r\n\r\n for (let i = 0; i < rowsG; i++) {\r\n\r\n newRow = document.createElement(\"div\")\r\n newRow.className = \"game-row\"\r\n for (let j = 0; j < colsG; j++) {\r\n currentElement = document.createElement(\"div\")\r\n currentElement.className = \"single-element\"\r\n\r\n currentCol = document.createElement(\"div\")\r\n currentCol.id = i.toString() + \"/\" + j.toString()\r\n currentElement.id = i.toString() + \":\" + j.toString()\r\n currentCol.className = \"game-button\"\r\n\r\n currentElement.appendChild(currentCol)\r\n newRow.appendChild(currentElement)\r\n\r\n previousFlags.forEach(element => {\r\n if (element.id === currentCol.id) {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n changeTheElement(currentCol, \"flag\")\r\n }\r\n });\r\n\r\n }\r\n mainGameHTML.appendChild(newRow)\r\n }\r\n let length = parseInt(getComputedStyle(document.querySelector(\".game-row\")).width, 10)\r\n if ((colsG * 25 >= length && colsG * 25 + 26.4 > document.body.clientWidth) || (fixAfterSet)) {\r\n document.querySelector(\"body\").style.overflowX = \"scroll\";\r\n document.querySelector(\"body\").style.overflowX = \"flex\";\r\n document.querySelector(\".playground\").style.display = \"block\"\r\n document.querySelector(\".game-container\").style.display = \"block\"\r\n document.querySelector(\"body\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".playground\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".game-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".game-info-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".main-game-container\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".box-menu\").style.width = (colsG * 25 + 50) + \"px\"\r\n document.querySelector(\".box-controls\").style.width = \"400px\"\r\n document.querySelector(\".box-size\").style.width = \"400px\"\r\n let bodyWidth = document.body.scrollWidth;\r\n let halfViewportWidth = window.innerWidth / 2;\r\n let centerStartX = bodyWidth / 2 - halfViewportWidth;\r\n\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n if (onMobile) {\r\n centerStartX = Math.max(0, (window.innerWidth - document.documentElement.clientWidth) / 2);\r\n document.querySelector(\".playground\").scrollIntoView({ block: \"center\" });\r\n window.scrollTo(centerStartX, 0);\r\n return 0\r\n }\r\n window.scrollTo(centerStartX, 0);\r\n } else {\r\n document.querySelector(\"body\").style.overflowX = \"hidden\";\r\n document.querySelector(\"body\").style.overflowX = \"block\";\r\n document.querySelector(\".playground\").style.display = \"flex\"\r\n document.querySelector(\".game-container\").style.display = \"flex\"\r\n document.querySelector(\".game-info-container\").style.width = \"100%\"\r\n document.querySelector(\".main-game-container\").style.width = \"100%\"\r\n document.querySelector(\".box-menu\").style.width = \"100%\"\r\n if (window.innerWidth < 600) {\r\n document.querySelector(\".box-controls\").style.width = \"90%\"\r\n document.querySelector(\".box-size\").style.width = \"90%\"\r\n } else {\r\n document.querySelector(\".box-controls\").style.width = \"\"\r\n document.querySelector(\".box-size\").style.width = \"\"\r\n }\r\n document.querySelector(\"body\").style.width = \"\"\r\n document.querySelector(\".playground\").style.width = \"\"\r\n document.querySelector(\".game-container\").style.width = \"\"\r\n }\r\n length = parseInt(getComputedStyle(document.querySelector(\".game-row\")).width, 10)\r\n if (colsG * 25 >= length && colsG * 25 + 26.4 > document.body.clientWidth) {\r\n makeTheGameHTML2(previousFlags, true)\r\n }\r\n\r\n}\r\n\r\n\r\nfunction handleButtonClick(event) {\r\n gameStatus = document.querySelector(\".game-status\")\r\n if (gameStatus.id === \"lose\") return 0;\r\n if (event.target.classList.contains(\"flagged\") || event.target.classList.contains(\"closed\")) {\r\n return 0;\r\n } else if ((gameStatus.id === \"start\") || (gameStatus.id === \"lose\")) {\r\n onFirstClick(event);\r\n } else {\r\n inGameButtonClick(event.target);\r\n }\r\n}\r\n\r\n\r\nfunction onFirstClick(event) {\r\n document.querySelector(\".new-hs-container\").style.display = \"none\"\r\n\r\n idArray = event.target.id.split(\"/\")\r\n\r\n if (event.target.classList.contains(\"flagged\")) {\r\n return 0\r\n } else if (rowsG * colsG <= parseInt(mines) + 8) {\r\n if (game[idArray[0]][idArray[1]] !== -1) {\r\n startStopwatch()\r\n inGameButtonClick(event.target)\r\n } else {\r\n makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1], event, document.querySelectorAll(\".flagged\"), true)\r\n let seconds = 0;\r\n let stopwatchInterval;\r\n\r\n startStopwatch()\r\n }\r\n } else if (game[idArray[0]][idArray[1]] !== 0) {\r\n makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1], event, document.querySelectorAll(\".flagged\"), false)\r\n let seconds = 0;\r\n let stopwatchInterval;\r\n\r\n startStopwatch()\r\n } else {\r\n startStopwatch()\r\n inGameButtonClick(event.target)\r\n }\r\n\r\n}\r\n\r\nfunction changeTheElement(element, action, lost = false) {\r\n if (action === \"open\") {\r\n currentElement = document.getElementById(element)\r\n if (currentElement === null || currentElement.classList.contains(\"flagged\")) {\r\n return 0\r\n }\r\n parentOfElement = currentElement.parentElement\r\n\r\n idArray = element.split(\"/\")\r\n currentElement.remove()\r\n parentOfElement.classList.add(\"opened-div\")\r\n let revealedText = game[idArray[0]][idArray[1]] === 0 ? \" \" : game[idArray[0]][idArray[1]];\r\n\r\n if (revealedText == \"-1\") {\r\n\t\t\t\t if (lost == true) {\r\n\t\t\t\t \tparentOfElement.style.backgroundColor = \"var(--mine-color)\"\r\n\t\t\t\t }\r\n parentOfElement.style.backgroundImage = `url(\"multimedia/icons/mine_2.svg\")`;\r\n return 0\r\n }\r\n parentOfElement.style.color = currentPallete[parseInt(revealedText)]\r\n parentOfElement.textContent = revealedText\r\n eventListenerForOpened()\r\n if (document.querySelectorAll(\".game-button\").length == mines && !(document.querySelector(\".game-status\").id == \"lose\")) {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/win.png\")`;\r\n }\r\n return 0\r\n\r\n } else if (action === \"openFlag\") {\r\n parentOfElement = element.parentElement\r\n idArray = element.id.split(\"/\")\r\n element.remove()\r\n parentOfElement.classList.add(\"opened-div\")\r\n let revealedText = game[idArray[0]][idArray[1]] === 0 ? \" \" : game[idArray[0]][idArray[1]];\r\n if (revealedText == \"-1\") {\r\n parentOfElement.style.backgroundImage = `url(\"multimedia/icons/mine_2.svg\")`;\r\n return 0\r\n }\r\n\r\n parentOfElement.textContent = revealedText\r\n } else if (action === \"flag\") {\r\n if (!(element.classList.contains(\"flagged\") || element.parentNode.classList.contains(\"flagged\"))) {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n flagSet = document.createElement(\"img\")\r\n flagSet.src = \"multimedia/icons/ms_flag.svg\"\r\n flagSet.style.width = \"100%\"\r\n element.appendChild(flagSet)\r\n element.classList.add(\"flagged\")\r\n }\r\n } else if (action === \"wrongFlag\") {\r\n element.innerHTML = \"\"\r\n element.style.backgroundImage = `url(\"multimedia/icons/mine_fail.svg\")`\r\n } else if (action === \"close\") {\r\n element.classList.add(\"closed\")\r\n }\r\n\r\n}\r\n\r\nfunction openTilesAfterLose() {\r\n allClosedTiles = document.querySelectorAll(\".game-button\");\r\n allFlaggedTiles = document.querySelectorAll(\".flagged\");\r\n\r\n allFlaggedTiles.forEach((el) => {\r\n idArray = el.id.split(\"/\");\r\n if (game[idArray[0]][idArray[1]] !== -1) {\r\n parentOfElement = el.parentNode\r\n changeTheElement(el, \"openFlag\")\r\n changeTheElement(parentOfElement, \"wrongFlag\")\r\n }\r\n });\r\n\r\n allClosedTiles.forEach((el) => {\r\n idArray = el.id.split(\"/\");\r\n if (game[idArray[0]][idArray[1]] == -1 && !(el.classList.contains(\"flagged\"))) {\r\n changeTheElement(el, \"openFlag\")\r\n } else {\r\n changeTheElement(el, \"close\")\r\n }\r\n });\r\n}\r\n\r\nfunction inGameButtonClick(eventTarget) {\r\n document.querySelector(\".game-status\").id = \"mid-game\"\r\n idArray = eventTarget.id.split(\"/\");\r\n\r\n if (game[idArray[0]][idArray[1]] == -1) {\r\n changeTheElement(eventTarget.id, \"open\", true)\r\n \r\n eventTarget.classList.add(\"lost-tile\");\r\n stopStopwatch()\r\n gameStatus = document.querySelector(\".game-status\")\r\n gameStatus.id = \"lose\"\r\n gameStatus.style.backgroundImage = `url(\"multimedia/images/lose.png\")`;\r\n openTilesAfterLose()\r\n return 0;\r\n //makeTheMineLawn(rowsG, colsG, idArray[0], idArray[1]);\r\n } else {\r\n let result = new Set();\r\n\r\n function checkAllDirections(x, y) {\r\n if (x < 0 || y < 0 || x >= rowsG || y >= colsG || result.has(`${x}/${y}`)) {\r\n return 0;\r\n }\r\n\r\n currentElement = game[x][y];\r\n coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n result.add(`${x}/${y}`);\r\n\r\n if (currentElement == 0) {\r\n for (let i = 0; i < coordinates.length; i++) {\r\n const xCoord = x + coordinates[i][0];\r\n const yCoord = y + coordinates[i][1];\r\n checkAllDirections(xCoord, yCoord);\r\n }\r\n }\r\n }\r\n checkAllDirections(parseInt(idArray[0]), parseInt(idArray[1]));\r\n\r\n result.forEach(function(element) {\r\n changeTheElement(element, \"open\")\r\n });\r\n }\r\n if (document.querySelectorAll(\".game-button\").length == mines && !(document.querySelector(\".game-status\").id == \"lose\")) {\r\n // When winning the game\r\n stopStopwatch()\r\n document.querySelector(\".mines-container\").textContent = \"000\"\r\n document.querySelectorAll(\".game-button\").forEach(button => {\r\n changeTheElement(button, \"flag\")\r\n });\r\n endTimeInMs = new Date().getTime();\r\n intervalInMs = endTimeInMs - startTimeInMs;\r\n\r\n updateStopwatchWithMs(intervalInMs % 1000); // Last three digits, that is, the milliseconds\r\n updateJSONHighScores(intervalInMs);\r\n return 0;\r\n }\r\n}\r\n\r\nfunction eventListenerForButtons() {\r\n let buttons = document.querySelectorAll(\".game-button\");\r\n\r\n buttons.forEach(button => {\r\n button.addEventListener(\"click\", handleButtonClick);\r\n });\r\n\r\n buttons.forEach(button => {\r\n button.addEventListener('contextmenu', function(ev) {\r\n ev.preventDefault();\r\n if (document.querySelector(\".game-status\").id == \"lose\") {\r\n return 0;\r\n }\r\n\r\n if (ev.target.classList.contains(\"flagged\") || ev.target.parentNode.classList.contains(\"flagged\")) {\r\n currentFlags++;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n if (ev.target.tagName === \"IMG\") {\r\n ev.target.parentNode.classList.remove(\"flagged\")\r\n ev.target.remove()\r\n return 0;\r\n }\r\n ev.target.classList.remove(\"flagged\");\r\n ev.target.innerHTML = \"\"\r\n\r\n //ev.target.innerHTML = \" \";\r\n } else {\r\n currentFlags--;\r\n document.querySelector(\".mines-container\").textContent = padWithZeros(currentFlags)\r\n flagSet = document.createElement(\"img\")\r\n flagSet.src = \"multimedia/icons/ms_flag.svg\"\r\n flagSet.style.width = \"100%\"\r\n ev.target.appendChild(flagSet)\r\n ev.target.classList.add(\"flagged\")\r\n //ev.target.innerHTML = \"f\";\r\n }\r\n\r\n return 0;\r\n }, false);\r\n });\r\n}\r\n\r\nfunction eventListenerForOpened() {\r\n let opened = document.querySelectorAll(\".opened-div\");\r\n opened.forEach(el => {\r\n el.removeEventListener(\"click\", openSurroundingElements);\r\n el.addEventListener(\"click\", openSurroundingElements)\r\n });\r\n onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\r\n opened.forEach(el => {\r\n if (onMobile) {\r\n el.addEventListener('touchstart', startTimer, { passive: true });\r\n el.addEventListener('touchmove', clearTimer, { passive: true });\r\n el.addEventListener('touchend', clearTimer);\r\n return 0;\r\n }\r\n el.removeEventListener(\"contextmenu\", flagSurroundingElements);\r\n el.addEventListener(\"contextmenu\", flagSurroundingElements)\r\n });\r\n}\r\n\r\n\r\ndocument.querySelector(\".game-status\").addEventListener(\"click\", function() {\r\n resetStopwatch()\r\n makeTheMineLawn(rowsG, colsG);\r\n});\r\n\r\n\r\nfunction openSurroundingElements(ev) {\r\n if (document.querySelector(\".game-status\").id === \"lose\") return 0;\r\n\r\n let flags = [];\r\n const idArray = ev.target.id.split(\":\");\r\n const x = parseInt(idArray[0]);\r\n const y = parseInt(idArray[1]);\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n\r\n if (newX >= 0 && newX < rowsG && newY >= 0 && newY < colsG) {\r\n\r\n const adjacentElement = game[newX][newY];\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (currentElement) {\r\n if (currentElement.classList.contains(\"flagged\")) {\r\n flags.push([newX, newY]);\r\n }\r\n }\r\n }\r\n }\r\n if (flags.length === game[x][y]) {\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (!(flags.includes([newX, newY])) && currentElement && !(currentElement.classList.contains(\"flagged\"))) {\r\n inGameButtonClick(currentElement)\r\n }\r\n };\r\n }\r\n}\r\n\r\n\r\nlet touchTimer;\r\n\r\nfunction startTimer(event) {\r\n touchTimer = setTimeout(function() {\r\n flagSurroundingElements(event, false)\r\n }, settings[\"long-tap\"]); // Adjust the duration as needed (e.g., 1000 milliseconds for a 1-second long tap)\r\n}\r\n\r\nfunction clearTimer() {\r\n clearTimeout(touchTimer);\r\n}\r\n\r\n// Add touch event listeners\r\n\r\n\r\nfunction flagSurroundingElements(event, onDesktop = true) {\r\n if (onDesktop) {\r\n event.preventDefault()\r\n }\r\n\r\n if (document.querySelector(\".game-status\").id === \"lose\") return 0;\r\n\r\n let flags = [];\r\n const idArray = event.target.id.split(\":\");\r\n const x = parseInt(idArray[0]);\r\n const y = parseInt(idArray[1]);\r\n\r\n const coordinates = [\r\n [0, -1],\r\n [-1, -1],\r\n [1, 1],\r\n [1, -1],\r\n [-1, 1],\r\n [-1, 0],\r\n [0, 1],\r\n [1, 0]\r\n ];\r\n\r\n for (const [dx, dy] of coordinates) {\r\n const newX = x + dx;\r\n const newY = y + dy;\r\n\r\n if (newX >= 0 && newX < rowsG && newY >= 0 && newY < colsG) {\r\n const adjacentElement = game[newX][newY];\r\n let currentElement = document.getElementById(newX + \"/\" + newY)\r\n if (currentElement) {\r\n flags.push([newX, newY]);\r\n }\r\n }\r\n }\r\n\r\n if (flags.length === game[x][y]) {\r\n for (const [dx, dy] of flags) {\r\n currentElement = document.getElementById(dx + \"/\" + dy)\r\n changeTheElement(currentElement, \"flag\")\r\n };\r\n }\r\n}\r\n\r\n\r\ndocument.querySelector(\".new-box-button\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n boxRadios = document.getElementsByName(\"box_size\")\r\n resetStopwatch()\r\n\r\n for (const element of boxRadios) {\r\n if (element.checked) {\r\n if (element.value === \"custom\") {\r\n hardness = \"custom\"\r\n rowsG = document.getElementById(\"custom_rows\").value\r\n colsG = document.getElementById(\"custom_cols\").value\r\n mines = document.getElementById(\"custom_mines\").value\r\n\r\n if (rowsG < 5) {\r\n rowsG = 5\r\n document.getElementById(\"custom_rows\").value = \"5\"\r\n }\r\n if (colsG < 8) {\r\n colsG = 8\r\n document.getElementById(\"custom_cols\").value = \"8\"\r\n }\r\n if (rowsG > 99) {\r\n rowsG = 99\r\n document.getElementById(\"custom_rows\").value = \"99\"\r\n }\r\n if (colsG > 99) {\r\n colsG = 99\r\n document.getElementById(\"custom_cols\").value = \"99\"\r\n }\r\n\r\n if (colsG * rowsG / 20 > mines && rowsG > 49) {\r\n alert(\"This might take some time :)\")\r\n }\r\n if (colsG * rowsG == mines) {\r\n mines--;\r\n }\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"small\") {\r\n rowsG = 9\r\n colsG = 9\r\n mines = 10\r\n hardness = \"easy\"\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"middle\") {\r\n rowsG = 16\r\n colsG = 16\r\n mines = 40\r\n hardness = \"int\"\r\n makeTheMineLawn(rowsG, colsG)\r\n } else if (element.value === \"big\") {\r\n rowsG = 16\r\n colsG = 30\r\n mines = 99\r\n hardness = \"expert\"\r\n makeTheMineLawn(rowsG, colsG)\r\n }\r\n }\r\n }\r\n})\r\n\r\n\r\nfunction updateStopwatch() {\r\n if (!endTimeInMs) {\r\n seconds++;\r\n const formattedSeconds = seconds < 1000 ? padWithZeros(seconds) : seconds;\r\n document.querySelector('.time-stopwatch').innerHTML = `${formattedSeconds}`;\r\n return 0\r\n }\r\n stopStopwatch()\r\n}\r\n\r\nfunction updateStopwatchWithMs(ms) {\r\n const formattedSeconds = seconds < 1000 ? padWithZeros(seconds) : seconds;\r\n document.querySelector('.time-stopwatch').innerHTML = `${formattedSeconds}`;\r\n}\r\n\r\nfunction startStopwatch() {\r\n stopwatchInterval = setInterval(updateStopwatch, 1000);\r\n startTimeInMs = new Date().getTime();\r\n}\r\n\r\nfunction stopStopwatch() {\r\n clearInterval(stopwatchInterval);\r\n}\r\n\r\nfunction resetStopwatch() {\r\n seconds = 0;\r\n startTimeInMs = 0;\r\n endTimeInMs = 0;\r\n document.querySelector('.time-stopwatch').innerHTML = '000';\r\n stopStopwatch();\r\n}\r\n\r\nfunction padWithZeros(number) {\r\n const isNegative = number < 0;\r\n const absoluteNumber = Math.abs(number);\r\n const paddedNumber = String(absoluteNumber).padStart(3, '0');\r\n\r\n return isNegative ? `-${paddedNumber}` : paddedNumber;\r\n}\r\n\r\nfunction padWithZerosMs(number) {\r\n return String(number).padStart(7, '0');\r\n}\r\n\r\ndocument.querySelector(\".main-game2\").addEventListener(\"mousedown\", () => {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/onclick.png\")`;\r\n})\r\n\r\ndocument.querySelector(\".main-game2\").addEventListener(\"mouseup\", () => {\r\n document.querySelector(\".game-status\").style.backgroundImage = `url(\"multimedia/images/default.png\")`;\r\n})\r\n\r\n\r\n// Navigation\r\n\r\ndocument.querySelector(\".menu-controls\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-controls\").style.display = \"flex\";\r\n});\r\n\r\n\r\ndocument.querySelector(\".menu-size\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-size\").style.display = \"flex\";\r\n});\r\n\r\ndocument.querySelector(\".menu-options\").addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n document.querySelector(\".box-menu\").style.display = \"flex\";\r\n document.querySelector(\".box-options\").style.display = \"flex\";\r\n});\r\n\r\n\r\ndocument.querySelectorAll(\".close-controls\").forEach(function(element) {\r\n element.addEventListener(\"click\", function() {\r\n closeNavMenus()\r\n });\r\n});\r\n\r\ndocument.querySelector(\".box-menu\").addEventListener(\"click\", function(event) {\r\n if (event.target === document.querySelector(\".box-menu\")) {\r\n closeNavMenus()\r\n }\r\n});\r\n\r\nfunction closeNavMenus() {\r\n document.querySelector(\".box-menu\").style.display = \"none\";\r\n document.querySelector(\".box-controls\").style.display = \"none\";\r\n document.querySelector(\".box-size\").style.display = \"none\";\r\n document.querySelector(\".box-options\").style.display = \"none\";\r\n}\r\n\r\ndocument.querySelector('.long-tap-option').addEventListener('input', function() {\r\n const currentValue = this.value;\r\n settings[\"long-tap\"] = currentValue;\r\n localStorage.setItem(\"settings\", JSON.stringify(settings))\r\n document.querySelector('.long-tap-option-setting').textContent = `Current Value: ${currentValue}`;\r\n});\r\n\r\ndocument.querySelectorAll('.hs-a').forEach((elem) => {\r\n elem.addEventListener(\"click\", function(ev) {\r\n if (ev.target.classList.contains(\"disabled-a\")) {\r\n return 0;\r\n } else {\r\n if (ev.target.classList.contains(\"hs-local\")) {\r\n document.querySelector(\".global-hs-container\").style.display = \"none\";\r\n document.querySelector(\".local-hs-container\").style.display = \"block\";\r\n ev.target.classList.add(\"disabled-a\");\r\n document.querySelector(\".hs-global\").classList.remove(\"disabled-a\");\r\n return 0;\r\n } else if (ev.target.classList.contains(\"hs-global\")) {\r\n document.querySelector(\".local-hs-container\").style.display = \"none\";\r\n document.querySelector(\".global-hs-container\").style.display = \"block\";\r\n ev.target.classList.add(\"disabled-a\");\r\n document.querySelector(\".hs-local\").classList.remove(\"disabled-a\");\r\n return 0;\r\n } else {\r\n return 0;\r\n }\r\n }\r\n })\r\n});\n\n//# sourceURL=webpack://minesweeper/./src/index.js?"); /***/ }), diff --git a/src/index.js b/src/index.js index 376dc06..bbcb85b 100644 --- a/src/index.js +++ b/src/index.js @@ -660,7 +660,7 @@ function openTilesAfterLose() { idArray = el.id.split("/"); if (game[idArray[0]][idArray[1]] !== -1) { parentOfElement = el.parentNode - changeTheElement(el, "openFlag", areAdjacentElementsEqual()) + changeTheElement(el, "openFlag") changeTheElement(parentOfElement, "wrongFlag") } });