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 = 50;
-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
@@ -21,12 +22,6 @@ function initiate(){ // Call all the functions
     animation();
     console.log(difficulty);
 }
-
-function calculateCardSize(level) {
-    let sqrt = Math.sqrt(level);
-    
-    return 100/sqrt - 3;
-}
 // function animation(){
 //     for(anim = 0; play_array.length > anim; anim++){
 //         // document.getElementById(play_array[anim]).style.border = "3px solid green";
@@ -71,7 +66,6 @@ function calc_difficulty(){
 }
 function make_playground(){
     //Loop out cards on the playground
-    let cardSize = calculateCardSize(level)
     var i;
     for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below.
         var div = document.createElement('div');
@@ -79,11 +73,8 @@ function make_playground(){
         div.textContent = i;
         }
         div.setAttribute('class', 'card');
-        div.style.height = cardSize + '%';
-        div.style.width = cardSize + '%';
         div.setAttribute('id', i);
         div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click()
-
         document.getElementById("wrapper").appendChild(div);
     }
 }
@@ -114,8 +105,13 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
             alert("You survived this round!");
         }
     }else{
+        //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)
@@ -123,6 +119,8 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
                 alert("Game over!");
             }
         }
+
+    }
     document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
 }         
 /*

style.css

@@ -1,32 +1,55 @@
-body {
+  body {
         background-color: #1d1e22;
-    box-sizing: border-box;
-}
-
-    #wrapper {
-        /* max-width: 1200px; */
-        width: 550px;
-        height: 550px;
-        margin: 30px auto;
-        /*padding: 0 20px;*/
-        display: flex;
-        flex-flow: row wrap;
-        align-content: flex-start;
-        /*grid-auto-rows: minmax(100px, 1fr);
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        grid-gap: 1em;*/
     }
+/* 
+     #wrapper {
+        max-width: 741px;
+        margin: 30px auto;
+        padding: 0 20px;
+        width: 100%;
+        display: grid;
+        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;*/
-        margin: 1%;
+      padding: 20px;
       color: rgb(255, 255, 255);
-        background-color:rgb(0, 94, 165);
+      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;*/
+      border: 1px solid pink;
       background-color: pink;
     }
     .card:hover {
@@ -73,7 +96,10 @@ body {
 			* {
     box-sizing: border-box;
   }
-/*  .wrapper {
+body{
+  background-color: #1d1e22;
+}
+  .wrapper {
     max-width: 1200px;
     margin: 30px auto;
     padding: 0 20px;
@@ -82,7 +108,7 @@ body {
     grid-auto-rows: 100px; 
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
     grid-gap: 1em;
-  }*/
+  }
   
   .diavo {
     border-radius: 10px;