fixed bugs and added gameover screen

cards.css

@@ -93,6 +93,26 @@ body {
     text-shadow: -5px 14px 20px rgb(0, 0, 0);
     cursor: pointer;
 }
+#start-the-game-loose {
+    position: absolute;
+    background-color: #44205c65;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    font-size: 9vw;
+    font-family: "8-bit-pusab";
+    -webkit-text-stroke: 2px rgb(10, 10, 10);
+    text-shadow: -5px 14px 20px rgb(0, 0, 0);
+    cursor: pointer;
+}
 #options-window {
     position: absolute;
     background-color: #000000d4;
@@ -154,6 +174,10 @@ body {
     align-items: center;
     width: fit-content;
 }
+.try-again{
+    display: none;
+    font-size: 3vw;
+}
 #range-value{
     margin: 0 7px;
 }

index.php

@@ -60,6 +60,10 @@
         <div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
         <div onmouseover="menu_clicks();" onclick="when_clicked()" class="settings">Options</div>
     </div>
+    <div id="start-the-game-loose" class="try-again">
+        <div onmouseover="menu_clicks();" onclick="location.reload();">Try Again?</div>
+
+    </div>
     <div id="options-window">
     <div class="cardspeed">
         <div>Card speed:</div>
@@ -75,6 +79,15 @@
                 Turn on card numbers
             </div>
      </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check_allowspin();document.getElementById('btn-off-spin').style.display = 'none';document.getElementById('btn-on-spin').style.display = 'block';" style="display: none;" id="btn-off-spin" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck_allowspin();document.getElementById('btn-on-spin').style.display = 'none';document.getElementById('btn-off-spin').style.display = 'block';" id="btn-on-spin" alt="off">
+            </div>
+            <div id="button-text-01-spin">
+                Disable spinning board
+            </div>
+     </div>
      <button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
     </div>
     <div class="overlay">

scripts/gameboard.js

@@ -1,11 +1,12 @@
 // Game settings
 var viewspeed = 500; // time the player can see the answers MS
-var timeout = 1000; // Time after all cards showed
+var timeout = 500; // Time after all cards showed
 var health = 5;
 var newPlayground = 3; // replaces the level variable
 var level = newPlayground * newPlayground;
-var difficulty = -1;
+var difficulty = 1;
 var showcontent = false; // show numbers inside the cards
+var allow_spin = true;
 // Game settings end
 var allow_click = 0; 
 var play_array = [];
@@ -39,6 +40,7 @@ function nextRound() {
     make_playground();
     randomized();
     animation();
+    
     console.log(difficulty);
 }
 
@@ -60,6 +62,7 @@ function animation() { //Animations, shows what cards you click on. Works like a
         } else {
             basic_timeout();
             allow_click = 1;
+            spin_round();
         }
     }, viewspeed)
 }
@@ -77,9 +80,9 @@ function lifes() {
 }
 
 function clear_values() { // Resets the values for next round.
-    newPlayground = newPlayground + 0.3;
+    // newPlayground = newPlayground + 0.1;
     no_fail_round = 0;
-    difficulty = -1;
+    difficulty = 1;
     level = Math.ceil(newPlayground * newPlayground);
     play_array = [];
     randoms = 0;
@@ -91,20 +94,38 @@ function clear_values() { // Resets the values for next round.
     allow_click = 0;
     avoid_repeat = [];
     correct_answers = 0;
-    console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info
+    console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id + "\n NewPLaygroud=" + newPlayground*newPlayground); // Console info
     calc_difficulty();
-    // if (difficulty < level) {
+    newPlayground = newPlayground + 0.1;
+}
+function spin_round(){
+    if(allow_spin === true){
+        if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){
+            document.getElementById("wrapper").style.transform = 'rotate(180deg)';
             
+            document.getElementById("wrapper").style.height = 'unset';
+            let x = document.getElementsByClassName("card");
+            let i;
+            for (i = 0; i < x.length; i++) {
+            x[i].style.transform = 'rotate(180deg)';
+    
+            }
+        }else{
+            document.getElementById("wrapper").style.transform = 'rotate(0deg)';
+            // let x = document.getElementsByClassName("card");
+            // let i;
+            // for (i = 0; i < x.length; i++) {
+            // x[i].style.transform = 'rotate(0deg)';
             // }
         }
-
+    }
+}
 function calc_difficulty() {
     if (level <= 9) { // The level value cannot be lower than 9.
         level = 9;
-    } else {
-        level = level + 1;
     }
-    difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level
+    // difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level
+    difficulty = (20 / 100) * level % 3 + difficulty; //calc the difficulty to scale with the level
     difficulty = Math.round(difficulty) // Makes the difficulty value a integer
 }
 
@@ -161,7 +182,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car
                 correct_answers++;
                 let x = document.getElementById("score").textContent;
 
-                if (play_array.length == correct_answers) {
+                if (play_array.length === correct_answers) {
                     if (no_fail_round != 0) {
                         document.getElementById("score").innerHTML = parseInt(x) * 1 + 13;
                     } else {
@@ -188,7 +209,22 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car
                 no_fail_round = 1;
                 console.log("Liv: " + health);
                 if (health == 0) {
-                    alert("Game over!");
+                    allow_click = 0;
+                    document.getElementById("start-the-game-loose").style.display = "flex";
+                    // alert("Game over!");
+                    card_ids = card_ids + 1;
+                    for(var xo = 1; card_ids <= xo; xo++){
+                        if(play_array.includes(xo)){
+                            document.getElementById(xo).style.backgroundColor = "green";
+                            document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate-green.png)";
+                        }else{
+                            document.getElementById(xo).style.backgroundColor = "red";
+                            document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate_bad.png)";
+                        }
+                        
+                    }
+                    
+                    
                 }
             }
         }

scripts/options.js

@@ -19,6 +19,14 @@ function uncheck() {
     showcontent = false;
     document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
 }
+function check_allowspin() {
+    allow_spin = true;
+    document.getElementById("button-text-01-spin").innerHTML = "Disable spinning board";
+  }
+function uncheck_allowspin() {
+    allow_spin = false;
+    document.getElementById("button-text-01-spin").innerHTML = "Enable spinning board";
+}
 function cardspeed(){
        viewspeed = document.getElementById("card-speed-number-value").value;
        document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;