selectable levels

assets/maps/microban.js

@@ -20,8 +20,8 @@ var level_2 = `
 ######
 `;
 
-var level_3_par = 100;
-var level_3 = `
+var level_10_par = 100;
+var level_10 = `
 ######
 ###  ####
 #     0 #
@@ -40,8 +40,8 @@ var level_4 = `
     ####
 `;
 
-var level_5_par = 100;
-var level_5 = `
+var level_3_par = 100;
+var level_3 = `
  #######
  #     #
  # .0. #
@@ -100,8 +100,8 @@ var level_9 = `
    ###
 `;
 
-var level_10_par = 100;
-var level_10 = `
+var level_5_par = 100;
+var level_5 = `
       #####
       #.  #
       #.# #
@@ -1988,6 +1988,8 @@ var level_155 = `
 `;
 
 var microban_levels = [
+  [level_1, level_1_par],
+
   [level_2, level_2_par],
   [level_3, level_3_par],
   [level_4, level_4_par],

assets/script.js

@@ -1,14 +1,33 @@
 var _listener;
 
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == " ") {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
 class Game {
   constructor() {
     this.mapInstance = null;
+    this.levelCount = levels.length;
     this.level = 1;
     this.lives = 10;
     this.points = 0;
     this.totalMoves = 0;
     this.levelMoves = {};
     this.traditional = false;
+
+    this.populateLevelSelector();
   }
 
   toggleTraditional() {
@@ -34,13 +53,38 @@ class Game {
     document.removeEventListener("keydown", _listener);
     g.levelMoves[this.level] = 0;
     this.lives -= 1;
-    // handle points
     this.initializeLevel();
   }
 
-  continue() {}
+  populateLevelSelector() {
+    let elem = document.getElementById("level-selector");
+    elem.innerHTML = "";
+    let maxLevel = parseInt(getCookie("sokobanya")) + 1;
+    if (isNaN(maxLevel)) {
+      document.cookie = "sokobanya=1";
+      maxLevel = 1;
+    }
+    for (let i = 0; i < this.levelCount; i++) {
+      if (i !== 0) {
+        let opt = document.createElement("option");
+        opt.value = i;
+        opt.innerHTML = i;
 
-  handlePoints() {}
+        if (i !== 1 && i > maxLevel) {
+          opt.disabled = true;
+        }
+
+        elem.appendChild(opt);
+      }
+    }
+
+    var self = this;
+    elem.addEventListener("change", function () {
+      self.levelMoves[this.level] = 0;
+      self.level = parseInt(elem.value);
+      self.initializeLevel();
+    });
+  }
 }
 
 class Map {
@@ -308,8 +352,14 @@ class Map {
   }
 
   continue() {
+    let maxLevel = parseInt(getCookie("sokobanya"));
+    if (maxLevel < g.level) {
+      document.cookie = `sokobanya=${g.level}`;
+    }
+    console.log(parseInt(getCookie("sokobanya")));
     g.level += 1;
     g.initializeLevel();
+    g.populateLevelSelector();
     let continueLink = document.getElementById("continueLink");
     continueLink.classList.add("disabled");
   }

index.html

@@ -99,6 +99,11 @@
         color: green;
         text-decoration: none;
       }
+
+      #level-select-container {
+        font-size: 15px;
+        margin-bottom: 10px;
+      }
     </style>
     <div class="opts">
       <a href="#" onclick="toggleDisplay('opts-menu')">settings</a>
@@ -113,6 +118,10 @@
 ▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
       </pre>
       <div id="stats">LEVEL: 0 | MOVES: 0 | LIVES: 10 | POINTS: 0</div>
+      <div id="level-select-container">
+        SELECT LEVEL:
+        <select name="level" id="level-selector"></select>
+      </div>
     </center>
     <div class="container">
       <div id="map"></div>
@@ -196,6 +205,10 @@
         </li>
       </ul>
       <h4>UPDATES:</h4>
+      <li>
+        (09/10/25) v1.2: added level selector so you can pick up where you left
+        off (unless you delete your cookies or use a privacy browser).
+      </li>
       <li>
         (09/07/25) v1.1: released mobile support via toggleable Dpad, see
         settings at top right of page! Also added support for traditional
@@ -204,9 +217,9 @@
       <h4>TODO:</h4>
       <ul>
         <li><s>Mobile Support</s></li>
-        <li>Selectable levels upon completion</li>
+        <li><s>Selectable levels upon completion</s></li>
         <li>Create a cool song and SFX</li>
-        <li>Points system</li>
+        <li>Points system (I probably will not do this, seems unnecessary)</li>
         <li>Steam animation when you beat a level</li>
         <li>Add more level sets (worlds)</li>
       </ul>