Merge pull request #6 from kavienanj/master

removed blocks which are disabled in a level
Developers-RCCS · Oct 22, 2020 · 391dac4 · 391dac4
2 parents d695390 + e83b10a
commit 391dac4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/public/game.js b/public/game.js
@@ -72,7 +72,6 @@ function performCalc(el, value) {
     };
     document.getElementById("ca"+value).remove();
     if (card_container.childElementCount == 0 || POINTS == TO_SCORE) {
-        console.log("over");
         endGame();
     } else {
         summary_container.innerHTML = data[card_container.firstElementChild.id.slice(2)-1]['summary'];
@@ -135,6 +134,16 @@ function timer() {
 function startGame() {
     slide_up();
     //dialog_box.setAttribute("style", "display:none;");
+    var container_box = document.getElementsByClassName("container")[0];
+    var rows = document.getElementsByClassName("row");
+    if (LEVEL == 1) {
+        container_box.className += "-level-1";
+        rows[1] += "-level-1";
+        rows[2] += "-level-1";
+        rows[3] += "-level-1";
+    } else if (LEVEL == 2) {
+        container_box.className += "-level-2";
+    }
     var new_list = shuffle([...ELEMENTS]);
     for (const el of new_list) {
         card_container.appendChild(getElementCard(data.indexOf(el)+1, el['abr'], Math.round(el['atomic-mass']*100)/100, el['name']));
@@ -151,7 +160,11 @@ function startGame() {
                 dcard.setAttribute("ondragover", "onOver(event.target, event)");
                 dcard.setAttribute("ondragleave", "onLeave(event.target, event)");
             } else {
-                dcard.setAttribute("style", "background:#212121;color:grey;cursor:default;");
+                dcard.setAttribute("style", "display:none;");// "background:#212121;color:grey;cursor:default;");
+            }
+        } else {
+            if (LEVEL != 3) {
+                dcard.setAttribute("style", "display:none;");
             }
         }
     }

diff --git a/public/style.css b/public/style.css
@@ -42,7 +42,25 @@ body{
     margin-top: 20px;
     display:block;
     width:calc(54px * 18);
-    min-height: calc(66px * 7);
+    min-height: calc(66px * 3);
+}
+
+.container-level-1 {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: calc(54px * 3);
+    display:block;
+    width:calc(54px * 8);
+    min-height: calc(66px * 4);
+}
+
+.container-level-2 {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10%;
+    display:block;
+    width:calc(54px * 18);
+    min-height: calc(66px * 3);
 }
 
 .row{
@@ -94,6 +112,18 @@ button {
     margin-left: auto;
 }
 
+.row-2-level-1 .row-3-level-1 {
+    display: flex;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.row-2-level-1 .el:nth-child(3) .row-3-level-1 .el:nth-child(3) {
+    margin-left: none;
+}
+
+
 .card-container {
     align-items: center;
     overflow: hidden;