Skip to content

Commit

Permalink
add check for markers, and automatic save
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mr-Donot
Mr-Donot committed Jun 17, 2024
1 parent 6ec8acb commit 42ff971
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 41 deletions.
15 changes: 3 additions & 12 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 */
}
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<script type="module" src="script/db.js"></script>
<script type="module" src="script/pushInDb.js"></script>
<script src="script/chrono.js"></script>
<script src="script/verif_auth.js"></script>
<!-- <script src="script/verif_auth.js"></script> -->
<script src="script/maps.js" defer></script>
<script src="script/constants.js" defer></script>
<script src="script/utils.js" defer></script>
Expand All @@ -30,6 +30,8 @@ <h1 id="username"></h1>
<span id="chronometer">00:00:00.000</span>
<select id="colorSelector">
</select>
<label for="optionMarker">Use markers</label>
<input type="checkbox" id="optionMarker" name="optionMarker">
<a href="leaderboard.html">
<img src="img/button_leaderboard.png" alt="Leaderboard">
</a>
Expand All @@ -44,7 +46,6 @@ <h1 id="username"></h1>
<div class="popup-content">
<h2>Félicitations !</h2>
<p>Vous avez gagné la partie !</p>
<button id="save-button">Sauvegarder</button>
<button id="close-popup" onclick="closePopup()">Fermer</button>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions script/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ function showPopup() {
}

function closePopup() {
saveWinInDB();
document.getElementById('victory-popup').style.display = 'none';
launchMap(currentMap);
}
Expand Down
2 changes: 0 additions & 2 deletions script/pushInDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,3 @@ function getFormattedDateTime() {

return formattedDateTime;
}

document.querySelector("#save-button").addEventListener("click", saveWinInDB);
75 changes: 50 additions & 25 deletions script/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -77,26 +90,38 @@ 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);
}
}
cases.forEach(function(elem) {
elem.addEventListener('click', changeVisibilityCrownInsideCaseOnClick);
});


}

function checkWin(mapName){
Expand Down

0 comments on commit 42ff971

Please sign in to comment.