From e753b6d7f0453061900f035689371f34fbd9f937 Mon Sep 17 00:00:00 2001
From: Azaaxin <ludvig_olausson@hotmail.com>
Date: Wed, 11 Mar 2020 00:54:22 +0100
Subject: [PATCH] Added textures and a animated background done with
 particles.js and did a slight change in the level variable to round it up.

---
 assets/textures/crate-green.png | Bin 0 -> 17902 bytes
 cards.css                       |  21 +++++--
 index.php                       |  21 ++++++-
 scripts/gameboard.js            |   4 +-
 scripts/particles.js            | 105 ++++++++++++++++++++++++++++++++
 style.css                       |   1 +
 6 files changed, 144 insertions(+), 8 deletions(-)
 create mode 100644 assets/textures/crate-green.png
 create mode 100644 scripts/particles.js

diff --git a/assets/textures/crate-green.png b/assets/textures/crate-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5ccb857fbc609826427d94044246f99bcd588c9
GIT binary patch
literal 17902
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

literal 0
HcmV?d00001

diff --git a/cards.css b/cards.css
index 2a59243..6d83105 100644
--- a/cards.css
+++ b/cards.css
@@ -1,4 +1,11 @@
 @import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
+@font-face {
+    font-family: "8-bit-pusab";
+  
+    src: url("./assets/fonts/8-bit-pusab.woff") format("woff"); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+  }
 *{
     transition: .3s;
 }
@@ -6,7 +13,10 @@
     cursor: pointer;
     padding-bottom: 85%;
     width: 100%;
-    background: rgba(50, 114, 210, 0.5);
+    /* background: rgba(50, 114, 210, 0.5); */
+    background: url(assets/textures/crate.png);
+    background-repeat: round;
+    background-size: cover;
     border-radius: 10px;
     margin: 3px;
 }
@@ -35,7 +45,8 @@
 }
 
 .animations {
-    background-color: rgb(80, 0, 146);
+    /* background-color: rgb(80, 0, 146); */
+    filter: invert(1);
 }
 
 .card:hover {
@@ -61,10 +72,10 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #fff;
+    color: #fff; 
     /* font-weight: 900; */
-    font-size: 50vh;
-    font-family: 'Lalezar', cursive;
+    font-size: 9vw;
+    font-family: "8-bit-pusab";
     -webkit-text-stroke: 2px rgb(10, 10, 10);
     text-shadow: -5px 14px 20px rgb(0, 0, 0);
     cursor: pointer;
diff --git a/index.php b/index.php
index 5b1551e..441f929 100644
--- a/index.php
+++ b/index.php
@@ -8,7 +8,19 @@
               <link rel="stylesheet" href="cards.css">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
         </head>
-    <body>
+        <style>
+            #particles-js {
+                width: 100%;
+                height: 100vh;
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: -50;
+                background-image: url(assets/textures/bg.png);
+                background-size: cover;
+                }
+        </style>
+        <div id="particles-js"></div>
         <body>
     <div id="title-bar">
         <div id="title">
@@ -21,6 +33,7 @@
         </div>
     </div>
        <!--- <div loaded="template/window_settings.html"></div> --->
+    
             <div class="flexwrap">
                 <div id="wrapper">
                     <div id="test-group"></div>
@@ -33,5 +46,9 @@
                 Start
             </div>
         <script src="scripts/gameboard.js"></script>
-    </body>
+        
+        <!-- particles.js library -->
+        <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+        <script src="scripts/particles.js"></script>
+    </body> 
 </html>
diff --git a/scripts/gameboard.js b/scripts/gameboard.js
index d85ca5c..ae12c90 100644
--- a/scripts/gameboard.js
+++ b/scripts/gameboard.js
@@ -57,7 +57,7 @@ function animation () { //Animations, shows what cards you click on
 function clear_values(){ // Resets the values for next round.
     newPlayground = newPlayground + 0.3;
     difficulty = -1;
-    level = newPlayground * newPlayground;
+    level = Math.ceil(newPlayground * newPlayground);
     play_array = [];
     randoms = 0;
     i = 0;
@@ -130,6 +130,7 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
         if(allow_click === 1){
             if (!avoid_repeat.includes(clicked_id)){
             document.getElementById(clicked_id).style.backgroundColor = "green";
+            document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)";
             avoid_repeat.push(clicked_id);
             correct_answers++;
             if(play_array.length == correct_answers)
@@ -145,6 +146,7 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
             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";
+                document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate_bad.png)";
     
                 avoid_repeat.push(clicked_id);
     
diff --git a/scripts/particles.js b/scripts/particles.js
new file mode 100644
index 0000000..4c7871f
--- /dev/null
+++ b/scripts/particles.js
@@ -0,0 +1,105 @@
+particlesJS("particles-js", {
+    "particles": {
+      "number": {
+        "value": 160,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "edge",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 9
+        }
+      },
+      "opacity": {
+        "value": 0.2,
+        "random": true,
+        "anim": {
+          "enable": true,
+          "speed": 1,
+          "opacity_min": 0,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 6,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 4,
+          "size_min": 0.3,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": false,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.2,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 1,
+        "direction": "none",
+        "random": true,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 600
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "window",
+      "events": {
+        "onhover": {
+          "enable": false,
+          "mode": "grab"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 0.5
+          }
+        },
+        "bubble": {
+          "distance": 750,
+          "size": 40,
+          "duration": 2,
+          "opacity": 0,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 900,
+          "duration": 0.2
+        },
+        "push": {
+          "particles_nb": 10
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true
+  });
\ No newline at end of file
diff --git a/style.css b/style.css
index 8242912..9c7d62a 100644
--- a/style.css
+++ b/style.css
@@ -94,6 +94,7 @@ body{
     background: rgba(50, 114, 210, 0.5);
     border-radius: 10px;
     margin: 3px;
+    transform: rotate(180deg);
   }
   #card-row {
     width: 100%;