Calculating card sizes depending on number of cards

scripts/gameboard.js

@@ -2,16 +2,15 @@
 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*4;
+var level = 50;
-var difficulty = -1;
+var difficulty = 3;
-var showcontent = true; // show numbers inside the cards
+var showcontent = false; // 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
@@ -22,6 +21,12 @@ 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";
@@ -66,6 +71,7 @@ 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');
@@ -73,8 +79,11 @@ 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);
     }
 }
@@ -105,13 +114,8 @@ 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)
@@ -119,8 +123,6 @@ 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,55 +1,32 @@
-  body {
+body {
     background-color: #1d1e22;
-    }
+    box-sizing: border-box;
-/* 
+}
+
     #wrapper {
-        max-width: 741px;
+        /* max-width: 1200px; */
+        width: 550px;
+        height: 550px;
         margin: 30px auto;
-        padding: 0 20px;
+        /*padding: 0 20px;*/
-        width: 100%;
+        display: flex;
-        display: grid;
+        flex-flow: row wrap;
-        grid-auto-rows: 1fr;
+        align-content: flex-start;
+        /*grid-auto-rows: minmax(100px, 1fr);
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        grid-gap: 1em;
+        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;
+        /*padding: 20px;*/
+        margin: 1%;
         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 {
@@ -96,10 +73,7 @@
 			* {
     box-sizing: border-box;
   }
-body{
+/*  .wrapper {
-  background-color: #1d1e22;
-}
-  .wrapper {
     max-width: 1200px;
     margin: 30px auto;
     padding: 0 20px;
@@ -108,7 +82,7 @@ body{
     grid-auto-rows: 100px; 
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
     grid-gap: 1em;
-  }
+  }*/
   
   .diavo {
     border-radius: 10px;