Calculating card sizes depending on number of cards

scripts/gameboard.js

@@ -2,7 +2,7 @@
 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 level = 50;
 var difficulty = 3;
 var showcontent = false; // show numbers inside the cards
 // Game settings end
@@ -21,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";
@@ -65,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');
@@ -72,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);
     }
 }

style.css

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