last

scripts/gameboard.js

@@ -2,15 +2,16 @@
 var viewspeed = 500; // time the player can see the answers MS
 var timeout = 1000;  // Time after all cards showed
 var health = 5;
-var level = 9;
-var difficulty = 3;
-var showcontent = false; // show numbers inside the cards
+var level = 9*4;
+var difficulty = -1;
+var showcontent = true; // show numbers inside the cards
 // Game settings end
 
 var play_array = [];
 var anim = 0; 
 var y = 1;
 var correct_answers = 0;
+var avoid_repeat = []; // When a card is clicked, the player cant click on same card more than once
 
 
 function initiate(){ // Call all the functions
@@ -104,14 +105,21 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
             alert("You survived this round!");
         }
     }else{
-        document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red
-        document.getElementById(clicked_id).style.backgroundColor = "red";
-        health--;
-        console.log("Liv: " + health);
-        if(health == 0)
-        {
-            alert("Game over!");
+        //Avoid repeat fix
+        if (!avoid_repeat.includes(clicked_id)){
+            document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red
+            document.getElementById(clicked_id).style.backgroundColor = "red";
+
+            avoid_repeat.push(clicked_id);
+
+            health--;
+            console.log("Liv: " + health);
+            if(health == 0)
+            {
+                alert("Game over!");
+            }
         }
+
     }
     document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
 }         

style.css

@@ -1,30 +1,53 @@
   body {
         background-color: #1d1e22;
     }
-
-    #wrapper {
-        /* max-width: 1200px; */
+/* 
+     #wrapper {
         max-width: 741px;
         margin: 30px auto;
         padding: 0 20px;
         width: 100%;
         display: grid;
-        grid-auto-rows: 100px;
+        grid-auto-rows: 1fr;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         grid-gap: 1em;
-    }
+        
+    }  */
+     #wrapper {
+      max-width: 1200px; 
+      max-width: 54%;
+      max-height: 50%;
+      margin: 30px auto;
+      padding: 0 20px;
+      width: 100%;
+      display: flex;
+
+
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      /* grid-auto-rows: 1fr; */
+      /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
+      /* grid-gap: 1em; */
+  } 
     .flexwrap{
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .card {
-        border-radius: 10px;
-        padding: 20px;
-        color: rgb(255, 255, 255);
-        background-color:rgb(0, 94, 165);
-        transition: 0.5s;
-    }
+      border-radius: 10px;
+      padding: 20px;
+      color: rgb(255, 255, 255);
+      background-color: rgb(0, 94, 165);
+      transition: 0.5s;
+      height: 30vh;
+      width: 30vh;
+      min-width: 60px;
+      max-width: 100px;
+      max-height: 100px;
+      margin: 5px;
+  }
     .animations{
       border: 1px solid pink;
       background-color: pink;