Added skins to the gameboard

cards.css

@@ -0,0 +1,300 @@
+@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;
+    image-rendering: pixelated;
+    image-rendering: crisp-edges; /*Mozilla*/
+}
+
+.noSelect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; 
+}
+.card-numbers{
+    position: absolute;
+}
+.card {
+    cursor: pointer;
+    padding-bottom: 85%;
+    width: 100%;
+    /* background: rgba(50, 114, 210, 0.5); */
+    background: url(assets/textures/crate.png);
+    background-repeat: round;
+    background-size: cover;
+    border-radius: 10px;
+    margin: 3px;
+
+}
+
+.card-row {
+    width: 100%;
+    margin: 3px;
+}
+
+#test-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
+}
+
+#wrapper {
+    /* height: 100vh; */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 800px;
+    
+}
+.space {
+    /* background-color: rgb(80, 0, 146); */
+    background-image: url(assets/textures/iron_crate_event.png) !important;
+}
+.cos-portal{
+    width: 100%;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    top: 0px;
+    justify-content: center;
+    position: fixed;
+    display: none;
+    transition: 10s !important;
+    -webkit-animation: rotating 20s linear infinite;
+    -moz-animation: rotating 20s linear infinite;
+    -ms-animation: rotating 20s linear infinite;
+    -o-animation: rotating 20s linear infinite;
+    animation: rotating 20s linear infinite;
+}
+.animations {
+    /* background-color: rgb(80, 0, 146); */
+    filter: invert(1);
+}
+
+.card:hover {
+    box-shadow: 0 0 10px purple;
+}
+
+.flexwrap::after {
+    position: absolute;
+    top: 0px;
+}
+
+body {
+    background-color: #1d1e22;
+    overflow-x: hidden;
+}
+
+#start-the-game {
+    position: absolute;
+    background-color: #44205c65;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    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;
+}
+#start-the-game-loose {
+    position: absolute;
+    background-color: #44205c65;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    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;
+}
+#options-window {
+    position: absolute;
+    background-color: #000000d4;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    /* display: flex; */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    font-size: 1vw;
+    font-family: "8-bit-pusab";
+    /* -webkit-text-stroke: 1px rgb(10, 10, 10); */
+    text-shadow: -3px 5px 20px rgb(0, 0, 0);
+    cursor: pointer;
+    display: none;
+}
+.shownumbers-button{
+    display: flex;
+}
+#button-text-01{
+    width: 21vw;
+}
+.printid:after {
+    content: attr(id);
+    position: absolute;
+
+}
+
+.stats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    font-size: 100%;
+    color: #fff;
+    font-family: "8-bit-pusab";
+}
+
+#container_r {
+    display: flex;
+    flex-direction: column;
+    flex-direction: row;
+}
+
+#health {
+    /* min-width: 170px; */
+    min-width: 33%;
+}
+.settings{
+    font-size: 50%;
+}
+.cardspeed{
+
+    display: flex;
+    align-items: center;
+    width: fit-content;
+}
+.try-again{
+    display: none;
+    font-size: 3vw;
+}
+#range-value{
+    margin: 0 7px;
+}
+#start-the-game *:hover::before {
+    content:'> ';
+}
+#options-window div{
+    margin: 1vh 0;
+}
+/* Menu button */
+.menu-nav-button{
+    font-family: "8-bit-pusab";
+    background-color: #ff0000;
+    border: none;
+    color: white;
+    padding: 5px 19px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 11px;
+}
+/* Slider style */
+.slider {
+    -webkit-appearance: none;
+    width: 25%;
+    height: 15px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+    margin: 6;
+}
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #ff0000;
+    cursor: pointer;
+  }
+ .slider::-moz-range-thumb {  /* Same thing in firefox as above */
+    width: 15px;
+    height: 15px;
+    background: #ff0000;
+    cursor: pointer;
+    border-radius: 0px;
+    border: 0px solid
+    transparent;
+  }
+  /*rotatating blakc hole animations*/
+  @-webkit-keyframes rotating /* Safari and Chrome */ {
+    from {
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotating {
+    from {
+      -ms-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -ms-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  /* slider ends */
+@media screen and (max-width: 513px) {
+    .stats {
+        font-size: 64%;
+    }
+    #health{
+            width: 118px;
+            min-width: unset;
+    }
+    #health img {
+        width: 20%;
+    }
+}

gameboard.html

@@ -34,7 +34,11 @@
     }*/
 </style>
 <script src="../scripts/jquery-3.4.1.min.js"></script>
-            <div id="wrapper"></div>
+            <div id="wrapper">
+                <div id="test-group">
+
+                </div>
+            </div>
             <button type="button" style="position:fixed" onclick="initiate()">initiate</button>
             <button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button>
             <div id="alerted"></div>

index.php

@@ -1,14 +1,33 @@
-
 <html>
-    <head>
 
-              <title>My Electron Frameless Window</title>
-			  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-              <link rel="stylesheet" href="style.css">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        </head>
-    <body>
-        <body>
+<head>
+    <title>Blocks demo</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="cards.css">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
+    
+</head>
+<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 class="sound_player">
+    <audio id="menu_click">
+        <source src="assets/sounds/menu_click.wav">
+    </audio>
+    </div>
     <div id="title-bar">
         <div id="title">
             Blocks
@@ -19,14 +38,91 @@
             <button class="nav-btn-xe" id="close-btn"></button>
         </div>
     </div>
-       <!--- <div loaded="template/window_settings.html"></div> --->
-            <div class="flexwrap">
-                <div id="wrapper"></div>
+    <!--- <div loaded="template/window_settings.html"></div> --->
+    <div class="cos-portal">
+        <img id="blackhole" src="assets/textures/portal">
+    </div>
+    <div class="flexwrap">
+        <div class="stats">
+            <div id="health"></div>
+            <div id="timer-counter"><label id="minutes">00</label>:<label id="seconds">00</label></div>
+            <div id="container_r">Round:&nbsp;<div id="round"></div>
             </div>
-            <button type="button" style="position:fixed" onclick="initiate()">Start</button>
-            <button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button>
-            <div id="alerted"></div>
-        
-        <script src="scripts/gameboard.js"></script>
-    </body>
-</html>
+            <div id="container_r">&nbsp;Score:&nbsp;<div id="score">0</div>
+            </div>
+
+        </div>
+        <div id="wrapper">
+            <div id="test-group"></div>
+        </div>
+    </div>
+    <!-- <button type="button">Start</button>
+            <button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> -->
+    <div id="alerted"></div>
+    <div id="start-the-game">
+        <div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
+        <div onmouseover="menu_clicks();" onclick="when_clicked()" class="settings">Options</div>
+    </div>
+    <div id="start-the-game-loose" class="try-again">
+        <div onmouseover="menu_clicks();" onclick="location.reload();">Try Again?</div>
+
+    </div>
+    <div id="options-window">
+    <div class="cardspeed">
+        <div>Card speed:</div>
+        <div id="range-value">500</div>
+        <input type="range" class="slider" onchange="cardspeed()" id="card-speed-number-value" min="10" max="2000">
+    </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check();document.getElementById('btn-off').style.display = 'none';document.getElementById('btn-on').style.display = 'block';" id="btn-off" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck();document.getElementById('btn-on').style.display = 'none';document.getElementById('btn-off').style.display = 'block';" style="display: none;" id="btn-on" alt="off">
+            </div>
+            <div id="button-text-01">
+                Turn on card numbers
+            </div>
+     </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check_nofail();document.getElementById('btn-off-fail').style.display = 'none';document.getElementById('btn-on-fail').style.display = 'block';" id="btn-off-fail" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck_nofail();document.getElementById('btn-on-fail').style.display = 'none';document.getElementById('btn-off-fail').style.display = 'block';" style="display: none;" id="btn-on-fail" alt="off">
+            </div>
+            <div id="button-text-01-fail">
+                Turn on no fail
+            </div>
+     </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check_allowspin();document.getElementById('btn-off-spin').style.display = 'none';document.getElementById('btn-on-spin').style.display = 'block';" style="display: none;" id="btn-off-spin" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck_allowspin();document.getElementById('btn-on-spin').style.display = 'none';document.getElementById('btn-off-spin').style.display = 'block';" id="btn-on-spin" alt="off">
+            </div>
+            <div id="button-text-01-spin">
+                Disable spinning
+            </div>
+     </div>
+     <button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
+    </div>
+    
+    <div class="overlay">
+        <div class="narrator">
+
+        </div>
+    </div>
+    
+    <script src="scripts/gameboard.js"></script>
+    <script src="scripts/sound.js"></script>
+    <script src="scripts/options.js"></script>
+    <script src="scripts/timer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
+    
+    <!-- particles.js library -->
+    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+
+    <script src="scripts/particles.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js"></script>
+    <script>
+        jQuery(".card-numbers").fitText();
+    </script>
+</body>
+
+</html>

scripts/blockamount.js

@@ -1,4 +0,0 @@
-
-
-$("<h1>Include this using jquery</h1>").appendTo("body");
-console.log($("body").html());

scripts/fittext.js

@@ -0,0 +1,43 @@
+/*global jQuery */
+/*!
+* FitText.js 1.2
+*
+* Copyright 2011, Dave Rupert http://daverupert.com
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*
+* Date: Thu May 05 14:23:00 2011 -0600
+*/
+
+(function( $ ){ 
+
+  $.fn.fitText = function( kompressor, options ) {
+
+    // Setup options
+    var compressor = kompressor || 1,
+        settings = $.extend({
+          'minFontSize' : Number.NEGATIVE_INFINITY,
+          'maxFontSize' : Number.POSITIVE_INFINITY
+        }, options);
+
+    return this.each(function(){
+
+      // Store the object
+      var $this = $(this);
+
+      // Resizer() resizes items based on the object width divided by the compressor * 10
+      var resizer = function () {
+        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
+      };
+
+      // Call once to set.
+      resizer();
+
+      // Call on resize. Opera debounces their resize by default.
+      $(window).on('resize.fittext orientationchange.fittext', resizer);
+
+    });
+
+  };
+
+})( jQuery );

scripts/gameboard.js

@@ -1,19 +1,35 @@
 // Game settings
 var viewspeed = 500; // time the player can see the answers MS
-var timeout = 1000;  // Time after all cards showed
+var timeout = 500; // Time after all cards showed
 var health = 5;
-var level = 9;
-var difficulty = 3;
+var newPlayground = 3; // replaces the level variable
+var level = newPlayground * newPlayground;
+var difficulty = 1;
 var showcontent = false; // show numbers inside the cards
+var allow_spin = true;
+var nofail = false;
 // Game settings end
-
+var allow_click = 0; 
 var play_array = [];
-var anim = 0; 
+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
+var randoms = 0;
+var room_level;
+var no_fail_round = 0;
+var round_values = 0;
+var translation = 1; // Spinning speed
+// level transformations
+var break_point_level_space = 10;
+var break_point_level_slime = 20;
+var blackhole_size = 10;
 
-
-function initiate(){ // Call all the functions
+function initiate() { // Call all the functions
+    setInterval(setTime, 1000);
+    round_value();
+    lifes();
+    prep();
     calc_difficulty();
     console.log(level);
     make_playground();
@@ -21,111 +37,257 @@ function initiate(){ // Call all the functions
     animation();
     console.log(difficulty);
 }
-// function animation(){
-//     for(anim = 0; play_array.length > anim; anim++){
-//         // document.getElementById(play_array[anim]).style.border = "3px solid green";
-//         console.log(anim);
-//         // $("#"+play_array[anim]).addClass('animations');
 
-//         // setTimeout(function () { 
-//         //     $("#"+play_array[anim]).removeClass('animations');
-//         // }, 2000);
-        
-        
-//         }
-// }
-function animation () {
+function nextRound() {
+    round_value();
+    clear_playground();
+    clear_values()
+    calc_difficulty();
+    console.log(level);
+    make_playground();
+    randomized();
+    viewspeed_round_counter();
+    animation();
+    console.log(difficulty);
+    level_skins();
+}
+
+function prep() { // handles everythiing before the game starts
+    document.getElementById("start-the-game").style.visibility = "hidden"; //hides the start button
+}
+
+function round_value() {
+    round_values++;
+    document.getElementById("round").innerHTML = round_values;
+}
+function viewspeed_round_counter(){
+    if(viewspeed > 10){
+        viewspeed = viewspeed - 20;
+    }
+}
+function animation() { //Animations, shows what cards you click on. Works like a loop. SetTimout cant be used in normal loop
     setTimeout(function () {
-        $("#"+play_array[anim]).addClass('animations')
-        anim++;              
+        if(round_values > break_point_level_space){
+            $("#" + play_array[anim]).addClass('space')
+        } else {
+            $("#" + play_array[anim]).addClass('animations')
+        }
+        anim++;
         if (play_array.length > anim) {
-           animation();
-        }else{
+            animation();
+        } else {
             basic_timeout();
+            allow_click = 1;
+            spin_round();
         }
     }, viewspeed)
- }
- function basic_timeout () {
-    setTimeout(function () {
-            $(".card").removeClass('animations');
-    }, timeout)
- }
-function clear_values(){
-   play_array = [];
-   randoms = null;
 }
-function calc_difficulty(){
-    if (level < 9){ // The level value cannot be lower than 9.
-        level = 9;
-    } else{
-        level = level + 1;
+
+function basic_timeout() { // small timeout before you can click and the shown cards disapear.
+    setTimeout(function () {
+        $(".card").removeClass('animations');
+        $(".card").removeClass('space');
+    }, timeout)
+}
+
+function lifes() {
+    for (let lives = 0; lives < health; lives++) {
+        document.getElementById("health").innerHTML += '<img src="assets/textures/heart.png" alt="health">';
     }
-    difficulty = (35/100) * level + difficulty; //calc the difficulty to scale with the level
+}
+
+function clear_values() { // Resets the values for next round.
+    // newPlayground = newPlayground + 0.1;
+    no_fail_round = 0;
+    difficulty = 1;
+    level = Math.ceil(newPlayground * newPlayground);
+    play_array = [];
+    randoms = 0;
+    i = 0;
+    card_ids = 0;
+    y = 0;
+    anim = 0;
+    clicked_id = 0;
+    allow_click = 0;
+    avoid_repeat = [];
+    correct_answers = 0;
+    console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id + "\n NewPLaygroud=" + newPlayground*newPlayground); // Console info
+    calc_difficulty();
+    newPlayground = newPlayground + 0.1;
+
+}
+function spin_round(){
+    if(allow_spin === true){
+        if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){
+            document.getElementById("wrapper").style.transform = 'rotate(180deg)';
+            document.getElementById("wrapper").style.height = 'unset';
+            let x = document.getElementsByClassName("card");
+            let i;
+            for (i = 0; i < x.length; i++) {
+                x[i].style.transform = 'rotate(180deg)';
+            }
+        }else{
+            document.getElementById("wrapper").style.transform = 'rotate(0deg)';
+            // let x = document.getElementsByClassName("card");
+            // let i;
+            // for (i = 0; i < x.length; i++) {
+            // x[i].style.transform = 'rotate(0deg)';
+            // }
+        }
+        if(round_values >= 15 && 29 >= round_values){
+            if(tranlsation != 0.3){
+                translation = translation - 0.1;
+            }
+            document.getElementById("wrapper").style.transform = 'scale(-1)';
+            document.getElementById("wrapper").style.transition = translation + 's';
+            let x = document.getElementsByClassName("card");
+            let i;
+            for (i = 0; i < x.length; i++) {
+                x[i].style.transform = 'rotate(180deg)';
+            }
+        }
+    }
+}
+function calc_difficulty() {
+    if (level <= 9) { // The level value cannot be lower than 9.
+        level = 9;
+    }
+    // difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level
+    difficulty = (20 / 100) * level % 3 + difficulty; //calc the difficulty to scale with the level
     difficulty = Math.round(difficulty) // Makes the difficulty value a integer
 }
-function make_playground(){
-    //Loop out cards on the playground
-    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');
-        if(showcontent == true){
-        div.textContent = i;
-        }
-        div.setAttribute('class', 'card');
-        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);
+function level_skins(){
+            
+    if(round_values > break_point_level_space){
+        blackhole_size = blackhole_size + 10;
+        document.getElementsByClassName("cos-portal")[0].style.display = "flex";
+        document.getElementById("blackhole").style.width = blackhole_size + "%";
+        let i;
+        let x = document.getElementsByClassName("card");
+            for (i = 0; i < x.length; i++) {
+                document.getElementsByClassName("card")[i].style.backgroundImage = "url(assets/textures/iron_crate.png)";
+                
+            }
+            document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/space.png)";
+    }
+    if(round_values > break_point_level_slime){
+        let i;
+        document.getElementsByClassName("cos-portal")[0].style.display = "none";
+        let x = document.getElementsByClassName("card");
+            for (i = 0; i < x.length; i++) {
+                document.getElementsByClassName("card")[i].style.backgroundImage = "url(assets/textures/slime_crate.png)";
+                
+            }
+            document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/slime-placeholder.png)";
     }
 }
-function clear_playground(){ //When called, makes the playground empty
-    document.getElementById("wrapper").innerHTML = "";
-    clear_values();
-} //hello
 
-function randomized(){  // Fills the array with random numbers. Max number determines by level
-        while(play_array.length < difficulty){
-            var randoms = Math.floor(Math.random() * level) + 1;
-            if(play_array.indexOf(randoms) === -1){ 
+function make_playground() {
+    //Loop out cards on the playground
+    var i = 0;
+    var card_ids = 0;
+    for (var y = 0; y < newPlayground; y++) {
+        var row = document.createElement('div');
+        row.setAttribute('id', 'card-row' + y);
+        row.setAttribute('class', 'card-row');
+        document.getElementById("test-group").appendChild(row);
+        for (i = 0; i < newPlayground; i++) { //Creates a new div for each loop wth the attributes and content set below.
+            card_ids++;
+            var div = document.createElement('div');
+            div.setAttribute('class', 'card noSelect');
+            div.setAttribute('id', card_ids);
+            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('card-row' + y).appendChild(div);
+            /*Content*/
+            if (showcontent == true) {
+            let content = document.createElement('div');
+            content.appendChild(document.createTextNode(card_ids));
+            content.setAttribute('class', 'card-numbers');
+            document.getElementById(card_ids).appendChild(content);
+            
+            //   document.getElementById(card_ids).classList.add("printid");
+            }
+        }
+    }
+}
+
+function clear_playground() { //When called, makes the playground empty
+    document.getElementById("test-group").innerHTML = "";
+    clear_values();
+}
+
+function randomized() { // Fills the array with random numbers. Max number determines by level
+    while (play_array.length < difficulty) {
+        randoms = Math.floor(Math.random() * level);
+        if (randoms != 0) {
+            if (play_array.indexOf(randoms) === -1) {
                 play_array.push(randoms);
             }
         }
+    }
 }
 
-function reply_click(clicked_id){ // Grabs the value from the id on the div/card when it's clicked on.
+function reply_click(clicked_id) { // Grabs the value from the id on the div/card when it's clicked on.
     clicked_id = Number(clicked_id);
-    console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id); // Console info
+    console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info
 
-    if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false.
-        document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green
-        document.getElementById(clicked_id).style.backgroundColor = "green";
-        correct_answers++;
-        if(play_array.length == correct_answers)
-        {
-            alert("You survived this round!");
+    if (play_array.includes(clicked_id)) { // Takes the id from the div and searches in the array for it. Returns either true or false.
+        // document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green
+        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++;
+                let x = document.getElementById("score").textContent;
+
+                if (play_array.length === correct_answers) {
+                    if (no_fail_round != 0) {
+                        document.getElementById("score").innerHTML = parseInt(x) * 1 + 13;
+                    } else {
+                        document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
+                    }
+                    // alert("You survived this round!");
+                    nextRound();
+                }
+            }
         }
-    }else{
-        document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red
-        document.getElementById(clicked_id).style.backgroundColor = "red";
-        health--;
-        console.log("Liv: " + health);
-        if(health == 0)
-        {
-            alert("Game over!");
+    } else {
+        //Avoid repeat fix
+        if (allow_click === 1) {
+            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);
+
+                health--;
+                let list = document.getElementById("health");
+                list.removeChild(list.childNodes[0]);
+                no_fail_round = 1;
+                console.log("Liv: " + health);
+                if (health == 0 && nofail === false) {
+                    allow_click = 0;
+                    document.getElementById("start-the-game-loose").style.display = "flex";
+                    // alert("Game over!");
+                    card_ids = card_ids + 1;
+                    for(var xo = 1; card_ids <= xo; xo++){
+                        if(play_array.includes(xo)){
+                            document.getElementById(xo).style.backgroundColor = "green";
+                            document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate-green.png)";
+                        }else{
+                            document.getElementById(xo).style.backgroundColor = "red";
+                            document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate_bad.png)";
+                        }
+                        
+                    }
+                    
+                    
+                }
+            }
         }
+
     }
     document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
-}         
-/*
-pseudocode:'
-/
-            if (exists) clicked_id= randomized[x] = true
-                if (value already added skip(Done with array, if exists/contains)) = false
-                    variable add 1
-                        if variable(int) == all answers(int) = true
-                            next round
-                            add score
-            else
-                health - 1
-                if health < 5
-                    gameover
-*/
+}

scripts/gameboard.min.js

@@ -0,0 +1 @@
+var room_level,viewspeed=500,timeout=500,health=5,newPlayground=3,level=newPlayground*newPlayground,difficulty=1,showcontent=!1,allow_spin=!0,allow_click=0,play_array=[],anim=0,y=1,correct_answers=0,avoid_repeat=[],randoms=0,no_fail_round=0,round_values=0;function initiate(){setInterval(setTime,1e3),round_value(),lifes(),prep(),calc_difficulty(),console.log(level),make_playground(),randomized(),animation(),console.log(difficulty)}function nextRound(){round_value(),clear_playground(),clear_values(),calc_difficulty(),console.log(level),make_playground(),randomized(),animation(),console.log(difficulty)}function prep(){document.getElementById("start-the-game").style.visibility="hidden"}function round_value(){round_values++,document.getElementById("round").innerHTML=round_values}function animation(){setTimeout(function(){$("#"+play_array[anim]).addClass("animations"),anim++,play_array.length>anim?animation():(basic_timeout(),allow_click=1,spin_round())},viewspeed)}function basic_timeout(){setTimeout(function(){$(".card").removeClass("animations")},timeout)}function lifes(){for(let e=0;e<health;e++)document.getElementById("health").innerHTML+='<img src="assets/textures/heart.png" alt="health">'}function clear_values(){no_fail_round=0,difficulty=1,level=Math.ceil(newPlayground*newPlayground),play_array=[],randoms=0,i=0,card_ids=0,y=0,anim=0,clicked_id=0,allow_click=0,avoid_repeat=[],correct_answers=0,console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id+"\n NewPLaygroud="+newPlayground*newPlayground),calc_difficulty(),newPlayground+=.1}function spin_round(){if(!0===allow_spin)if(round_values>=7&&9>=round_values||round_values>=12&&round_values%3){document.getElementById("wrapper").style.transform="rotate(180deg)",document.getElementById("wrapper").style.height="unset";let e,t=document.getElementsByClassName("card");for(e=0;e<t.length;e++)t[e].style.transform="rotate(180deg)"}else document.getElementById("wrapper").style.transform="rotate(0deg)"}function calc_difficulty(){level<=9&&(level=9),difficulty=.2*level%3+difficulty,difficulty=Math.round(difficulty)}function make_playground(){for(var e=0,t=0,n=0;n<newPlayground;n++){var l=document.createElement("div");for(l.setAttribute("id","card-row"+n),l.setAttribute("class","card-row"),document.getElementById("test-group").appendChild(l),e=0;e<newPlayground;e++){t++;var a=document.createElement("div");a.setAttribute("class","card noSelect"),a.setAttribute("id",t),a.setAttribute("onClick","reply_click(this.id)"),document.getElementById("card-row"+n).appendChild(a),1==showcontent&&document.getElementById(t).classList.add("printid")}}}function clear_playground(){document.getElementById("test-group").innerHTML="",clear_values()}function randomized(){for(;play_array.length<difficulty;)0!=(randoms=Math.floor(Math.random()*level))&&-1===play_array.indexOf(randoms)&&play_array.push(randoms)}function reply_click(e){if(e=Number(e),console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+e),play_array.includes(e)){if(1===allow_click&&!avoid_repeat.includes(e)){document.getElementById(e).style.backgroundColor="green",document.getElementById(e).style.backgroundImage="url(assets/textures/crate-green.png)",avoid_repeat.push(e),correct_answers++;let t=document.getElementById("score").textContent;play_array.length===correct_answers&&(document.getElementById("score").innerHTML=0!=no_fail_round?1*parseInt(t)+13:2*parseInt(t)+30,nextRound())}}else if(1===allow_click&&!avoid_repeat.includes(e)){document.getElementById(e).style.backgroundColor="red",document.getElementById(e).style.backgroundImage="url(assets/textures/crate_bad.png)",avoid_repeat.push(e),health--;let n=document.getElementById("health");if(n.removeChild(n.childNodes[0]),no_fail_round=1,console.log("Liv: "+health),0==health){allow_click=0,document.getElementById("start-the-game-loose").style.display="flex",card_ids+=1;for(var t=1;card_ids<=t;t++)play_array.includes(t)?(document.getElementById(t).style.backgroundColor="green",document.getElementById(t).style.backgroundImage="url(assets/textures/crate-green.png)"):(document.getElementById(t).style.backgroundColor="red",document.getElementById(t).style.backgroundImage="url(assets/textures/crate_bad.png)")}}document.getElementById("alerted").innerHTML=e}

scripts/options.js

@@ -0,0 +1,40 @@
+// gameboard.js required
+function when_clicked(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)";
+    document.getElementById("start-the-game").style.display = "none";
+    document.getElementById("options-window").style.display = "flex";
+}
+function when_clicked_back(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/bg.png)";
+    document.getElementById("start-the-game").style.display = "flex";
+    document.getElementById("options-window").style.display = "none";
+}
+function check() {
+    showcontent = true;
+    document.getElementById("button-text-01").innerHTML = "Turn off card numbers";
+  }
+function uncheck() {
+    showcontent = false;
+    document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
+}
+function check_nofail() {
+    nofail = true;
+    document.getElementById("button-text-01-fail").innerHTML = "Turn off no fail";
+  }
+function uncheck_nofail() {
+    nofail = false;
+    document.getElementById("button-text-01-fail").innerHTML = "Turn on no fail";
+}
+function check_allowspin() {
+    allow_spin = true;
+    document.getElementById("button-text-01-spin").innerHTML = "Disable spinning";
+  }
+function uncheck_allowspin() {
+    allow_spin = false;
+    document.getElementById("button-text-01-spin").innerHTML = "Enable spinning";
+}
+function cardspeed(){
+       viewspeed = document.getElementById("card-speed-number-value").value;
+       document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;
+       menu_clicks();
+}

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
+  });

scripts/sound.js

@@ -0,0 +1,4 @@
+function menu_clicks(){
+var audio = document.getElementsByTagName("audio")[0];
+audio.play();
+}

scripts/timer.js

@@ -0,0 +1,19 @@
+var minutesLabel = document.getElementById("minutes");
+var secondsLabel = document.getElementById("seconds");
+var totalSeconds = 0;
+function setTime() {
+    if(!health == 0){
+    ++totalSeconds;
+    secondsLabel.innerHTML = pad(totalSeconds % 60);
+    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
+    }
+  }
+  
+  function pad(val) {
+    var valString = val + "";
+    if (valString.length < 2) {
+      return "0" + valString;
+    } else {
+      return valString;
+    }
+  }

style.css

@@ -1,30 +1,24 @@
   body {
         background-color: #1d1e22;
     }
-
-    #wrapper {
-        /* max-width: 1200px; */
+/* 
+     #wrapper {
         max-width: 741px;
         margin: 30px auto;
         padding: 0 20px;
         width: 100%;
         display: grid;
-        grid-auto-rows: 100px;
+        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;
-        color: rgb(255, 255, 255);
-        background-color:rgb(0, 94, 165);
-        transition: 0.5s;
-    }
+
     .animations{
       border: 1px solid pink;
       background-color: pink;
@@ -76,16 +70,6 @@
 body{
   background-color: #1d1e22;
 }
-  .wrapper {
-    max-width: 1200px;
-    margin: 30px auto;
-    padding: 0 20px;
-    width: 100%; 
-    display: grid;
-    grid-auto-rows: 100px; 
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
-    grid-gap: 1em;
-  }
   
   .diavo {
     border-radius: 10px;
@@ -103,4 +87,33 @@ body{
   .diavo:nth-child(even) {
     background-color: #afbe29;
   } 
- 
+  .card {
+    cursor: pointer;
+    padding-bottom: 85%;
+    width: 100%;
+    background: rgba(50, 114, 210, 0.5);
+    border-radius: 10px;
+    margin: 3px;
+    transform: rotate(180deg);
+  }
+  #card-row {
+    width: 100%;
+    margin: 3px;
+  }
+ #test-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
+  }
+  #wrapper {
+    height: 100vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 800px;
+  }
+