From 42ff9719b92c80a21015f94d7675d7996a9613ff Mon Sep 17 00:00:00 2001 From: Mr-Donot Date: Tue, 18 Jun 2024 00:00:10 +0200 Subject: [PATCH] add check for markers, and automatic save --- css/style.css | 15 ++-------- index.html | 5 ++-- script/main.js | 1 + script/pushInDb.js | 2 -- script/utils.js | 75 ++++++++++++++++++++++++++++++---------------- 5 files changed, 57 insertions(+), 41 deletions(-) diff --git a/css/style.css b/css/style.css index edb5d75..cb4a20f 100644 --- a/css/style.css +++ b/css/style.css @@ -133,7 +133,7 @@ font-size: 1em; /* Font size */ } -#save-button, #close-popup { +#close-popup { margin-top: 15px; /* Add space between the input field and buttons */ padding: 10px 20px; /* Padding inside the buttons */ border: none; /* Remove borders */ @@ -142,20 +142,11 @@ transition: background-color 0.3s ease; /* Transition for hover effect */ } -#save-button { - background-color: #32CD32; /* Button color */ - color: white; /* Text color */ -} - #close-popup { - background-color: #dc3545; /* Button color */ + background-color: #56ca49; /* Button color */ color: white; /* Text color */ } -#save-button:hover { - background-color: #28a745; /* Button color on hover */ -} - #close-popup:hover { - background-color: #6d4545; /* Button color on hover */ + background-color: #616161; /* Button color on hover */ } \ No newline at end of file diff --git a/index.html b/index.html index a7a8848..4149761 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -30,6 +30,8 @@

00:00:00.000 + + Leaderboard @@ -44,7 +46,6 @@

Félicitations !

Vous avez gagné la partie !

-
diff --git a/script/main.js b/script/main.js index 2e18edf..763fe90 100644 --- a/script/main.js +++ b/script/main.js @@ -42,6 +42,7 @@ function showPopup() { } function closePopup() { + saveWinInDB(); document.getElementById('victory-popup').style.display = 'none'; launchMap(currentMap); } diff --git a/script/pushInDb.js b/script/pushInDb.js index 536143a..4db0d8d 100644 --- a/script/pushInDb.js +++ b/script/pushInDb.js @@ -104,5 +104,3 @@ function getFormattedDateTime() { return formattedDateTime; } - -document.querySelector("#save-button").addEventListener("click", saveWinInDB); diff --git a/script/utils.js b/script/utils.js index 07137d1..2800596 100644 --- a/script/utils.js +++ b/script/utils.js @@ -43,25 +43,38 @@ function addHiddenCrown(){ } function addClickEventToCases(mapName) { - //listener for img var imgs = document.querySelectorAll('.crown'); + var optionMarker = document.querySelector('#optionMarker'); function changeVisibilityCrownOnClick(event) { startChronometer(); var imgElement = event.target; let index = imgElement.id.split("-"); - if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY - gameState[index[1]][index[2]] = 0; - imgElement.style.visibility = "hidden"; - } else if (gameState[index[1]][index[2]] == 0){ // EMPTY -> MARKER - gameState[index[1]][index[2]] = -1; - imgElement.style.visibility = "visible"; - imgElement.src = './img/close.png'; - } else { // MARKER -> QUEEN - gameState[index[1]][index[2]] = 1; - imgElement.style.visibility = "visible"; - imgElement.src = './img/crown.png'; + if (!optionMarker.checked) { + // If the checkbox is not checked, toggle between QUEEN and EMPTY + if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY + gameState[index[1]][index[2]] = 0; + imgElement.style.visibility = "hidden"; + } else { // EMPTY -> QUEEN + gameState[index[1]][index[2]] = 1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/crown.png'; + } + } else { + // If the checkbox is checked, follow the original behavior + if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY + gameState[index[1]][index[2]] = 0; + imgElement.style.visibility = "hidden"; + } else if (gameState[index[1]][index[2]] == 0){ // EMPTY -> MARKER + gameState[index[1]][index[2]] = -1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/close.png'; + } else { // MARKER -> QUEEN + gameState[index[1]][index[2]] = 1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/crown.png'; + } } checkWin(mapName); } @@ -77,17 +90,31 @@ function addClickEventToCases(mapName) { if (imgElement != undefined) { startChronometer(); let index = imgElement.id.split("-"); - if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY - gameState[index[1]][index[2]] = 0; - imgElement.style.visibility = "hidden"; - } else if (gameState[index[1]][index[2]] == 0){ // EMPTY -> MARKER - gameState[index[1]][index[2]] = -1; - imgElement.style.visibility = "visible"; - imgElement.src = './img/close.png'; - } else { // MARKER -> QUEEN - gameState[index[1]][index[2]] = 1; - imgElement.style.visibility = "visible"; - imgElement.src = './img/crown.png'; + + if (!optionMarker.checked) { + // If the checkbox is not checked, toggle between QUEEN and EMPTY + if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY + gameState[index[1]][index[2]] = 0; + imgElement.style.visibility = "hidden"; + } else { // EMPTY -> QUEEN + gameState[index[1]][index[2]] = 1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/crown.png'; + } + } else { + // If the checkbox is checked, follow the original behavior + if (gameState[index[1]][index[2]] == 1){ // QUEEN -> EMPTY + gameState[index[1]][index[2]] = 0; + imgElement.style.visibility = "hidden"; + } else if (gameState[index[1]][index[2]] == 0){ // EMPTY -> MARKER + gameState[index[1]][index[2]] = -1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/close.png'; + } else { // MARKER -> QUEEN + gameState[index[1]][index[2]] = 1; + imgElement.style.visibility = "visible"; + imgElement.src = './img/crown.png'; + } } checkWin(mapName); } @@ -95,8 +122,6 @@ function addClickEventToCases(mapName) { cases.forEach(function(elem) { elem.addEventListener('click', changeVisibilityCrownInsideCaseOnClick); }); - - } function checkWin(mapName){