Add roof running grid selector

nopixel_minigame/4.0/roof_running/index.html

@@ -36,6 +36,13 @@ <h3 class="description">
         STREAK: <span class="streak">0</span> <span class="fa">&#xf6ff;</span> MAX STREAK: <span class="max_streak">0</span>
         <br>TIME: <span class="time">0.000</span> <span class="fa">&#xf2f2;</span> BEST TIME: <span class="best_time">0.000</span>
     </div>
+    <div class="options">
+        <div class="option grid">
+            <label for="grid">Grid:</label>
+            <input id="grid" type="range" value="5" min="5" max="10" autocomplete="off">
+            <div class="grid_value">5x5</div>
+        </div>
+    </div>
     <div class="minigame">
         <div class="splash"><div class="fa hacker">&#xf6ff;</div>Play the minigame</div>
         <div class="groups hidden"></div>

nopixel_minigame/4.0/roof_running/minigame.css

@@ -134,6 +134,30 @@ body{
     text-align: center;
     line-height: 60px;
 }
+.group5{
+    width: 100px;
+    height: 100px;
+}
+.group6{
+    width: 82px;
+    height: 82px;
+}
+.group7{
+    width: 69px;
+    height: 69px;
+}
+.group8{
+    width: 59px;
+    height: 59px;
+}
+.group9{
+    width: 52px;
+    height: 52px;
+}
+.group10{
+    width: 46px;
+    height: 46px;
+}
 .group.green{
     background: linear-gradient(180deg, #91bc57 0%, #6b8d40 100%);
     border: 2px #85a957 solid;

nopixel_minigame/4.0/roof_running/minigame.js

@@ -4,6 +4,8 @@ let streak = 0;
 let max_streak = 0;
 let best_time = 99.999;
 
+let mode = 5;
+
 const getCookieValue = (name) => (
     document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
 )
@@ -26,6 +28,13 @@ best_time = getBestTimeFromCookie();
 
 const sleep = (ms, fn) => {return setTimeout(fn, ms)};
 
+// Option
+document.querySelector('#grid').addEventListener('input', function(ev){
+    document.querySelector('.grid_value').innerHTML = ev.target.value + 'x' + ev.target.value;
+    mode = parseInt(ev.target.value, 10);
+    streak = 0;
+    reset();
+});
 // Resets
 document.querySelector('.btn_again').addEventListener('click', function(){
     streak = 0;
@@ -35,21 +44,21 @@ document.querySelector('.btn_again').addEventListener('click', function(){
 function isValid(type, pos, color){
     switch (type) {
         case 'left':
-            if(pos%7 === 0) return false;
-            pos = pos-1;
+            if(pos%mode === 0) return false;
+            pos = pos - 1;
             if(pos < 0) return false;
             break;
         case 'right':
-            pos = pos+1;
-            if(pos > 48 || pos%7 === 0) return false;
+            pos = pos + 1;
+            if(pos >= (mode**2) || pos%mode === 0) return false;
             break;
         case 'top':
-            pos = pos-7;
+            pos = pos - mode;
             if(pos < 0) return false;
             break;
         case 'bottom':
-            pos = pos+7;
-            if(pos > 48) return false;
+            pos = pos + mode;
+            if(pos >= (mode**2)) return false;
             break;
     }
     if(pos_checked.includes(pos)) return false;
@@ -75,9 +84,9 @@ function checkAdjacent(pos, color){
 function deleteChecked(){
 
     const groups = document.querySelectorAll('.group');
-    for(let i=48; i >= 7; i--){
+    for(let i= (mode**2)-1; i >= mode; i--){
         if( groups[i].dataset.remove === '1'){
-            let pos = i-7;
+            let pos = i - mode;
             while(pos >= 0){
                 if(groups[pos].dataset.remove !== '1'){
                     // Replace
@@ -92,27 +101,22 @@ function deleteChecked(){
                     delete groups[pos].dataset.color;
                     pos=0;
                 }
-                pos=pos-7;
+                pos=pos - mode;
             }
         }
     }
 }
 
 function joinColumns(){
     const groups = document.querySelectorAll('.group');
-    for(let i=42; i <= 47; i++){
+    for(let i= (mode**2)-mode; i <= (mode**2)-2; i++){
         if( groups[i].dataset.remove === '1'){
-            console.log('column-empty', groups[i]);
             let pos = i+1;
             let maxH = maxHorizontal(i);
-            console.log('maxH', maxH);
             while(pos-i <= maxH){
-                console.log('pos', pos);
                 if(groups[pos].dataset.remove !== '1'){
                     let pos_diff = pos-i;
-                    console.log('column-found', pos_diff, groups[pos]);
-                    for(let vpos=pos; vpos>=0; vpos=vpos-7){
-                        console.log('row-found', groups[vpos]);
+                    for(let vpos=pos; vpos>=0; vpos=vpos - mode){
                         if(groups[vpos].dataset.remove !== '1'){
                             // Replace
                             delete groups[vpos-pos_diff].dataset.remove;
@@ -126,7 +130,7 @@ function joinColumns(){
                             delete groups[vpos].dataset.color;
                         }
                     }
-                    pos=48;
+                    pos=(mode**2);
                 }
                 pos++;
             }
@@ -158,7 +162,7 @@ function addListeners(){
 }
 
 function check(){
-    if(document.querySelectorAll('.group.removed').length === 49){
+    if(document.querySelectorAll('.group.removed').length === (mode**2)){
         stopTimer();
         streak++;
         if(streak > max_streak){
@@ -175,8 +179,8 @@ function check(){
 }
 
 function maxHorizontal(pos){
-    let max = (pos+1) % 7;
-    if(max > 0) return 7-max;
+    let max = (pos+1) % mode;
+    if(max > 0) return mode - max;
         else return 0;
 }
 
@@ -202,9 +206,9 @@ function start(){
 
     let div = document.createElement('div');
     let colors = ['red', 'green', 'blue'];
-    div.classList.add('group');
+    div.classList.add('group','group'+mode);
     const groups = document.querySelector('.groups');
-    for(let i=0; i < 49; i++){
+    for(let i=0; i < (mode**2); i++){ 
         let group = div.cloneNode();
         let randomColor = colors[Math.floor(Math.random() * colors.length)];
         group.dataset.position = i.toString();