Merge branch 'master' of https://git.domdit.com/dominic/sokobanya

assets/script.js

@@ -90,28 +90,24 @@ class Map {
       }
       var dontLoop = false;
       if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
-        self.playerDir = "l";
         self.move("left");
       } else if (
         event.key === "j" ||
         event.key === "s" ||
         event.key === "ArrowDown"
       ) {
-        self.playerDir = "f";
         self.move("down");
       } else if (
         event.key === "k" ||
         event.key === "w" ||
         event.key === "ArrowUp"
       ) {
-        self.playerDir = "b";
         self.move("up");
       } else if (
         event.key === "l" ||
         event.key === "d" ||
         event.key === "ArrowRight"
       ) {
-        self.playerDir = "r";
         self.move("right");
       } else if (event.key === "r") {
         dontLoop = true;
@@ -189,6 +185,15 @@ class Map {
   }
 
   move(direction) {
+    if (direction === "left") {
+      this.playerDir = "l";
+    } else if (direction === "right") {
+      this.playerDir = "r";
+    } else if (direction === "down") {
+      this.playerDir = "f";
+    } else {
+      this.playerDir = "b";
+    }
     g.levelMoves[this.level] += 1;
     g.totalMoves += 1;
 

index.html

@@ -20,6 +20,26 @@
         width: 100%;
       }
 
+      .opts {
+        position: absolute;
+        top: 10;
+        right: 10;
+        font-size: 15px;
+      }
+
+      .opts-menu {
+        text-align: right;
+        padding: 5px;
+        position: absolute;
+        top: 40;
+        right: 10;
+        font-size: 15px;
+        width: auto;
+        height: auto;
+        background-color: ghostwhite;
+        display: none;
+      }
+
       #map {
         white-space: pre;
       }
@@ -29,6 +49,11 @@
         width: 50px;
       }
 
+      #dpad {
+        margin-top: 20px;
+        display: none;
+      }
+
       #stats {
         font-size: 20px;
         margin-bottom: 8px;
@@ -39,6 +64,12 @@
         margin-bottom: -19px;
       }
 
+      @media (max-width: 481px) {
+        pre {
+          font-size: 17px;
+        }
+      }
+
       a {
         color: black;
         text-decoration: none;
@@ -64,9 +95,14 @@
         text-decoration: none;
       }
     </style>
-
+    <div class="opts">
+      <a href="#" onclick="toggleDisplay('opts-menu')">settings</a>
+    </div>
+    <div class="opts-menu" id="opts-menu">
+      <a href="#" onclick="toggleDisplay('dpad')">toggle D-Pad</a>
+    </div>
     <center>
-      <pre>
+      <pre style="margin-top: 30px">
 █▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
 ▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
       </pre>
@@ -75,6 +111,43 @@
     <div class="container">
       <div id="map"></div>
     </div>
+    <div class="container">
+      <img id="dpad" src="assets/img/sprites/dpad.png" usemap="#dpadmap" />
+      <map name="dpadmap">
+        <!-- up -->
+        <area
+          shape="rect"
+          coords="50,1,130,50"
+          alt="Computer"
+          href="#"
+          onclick="g.mapInstance.move('up'); g.mapInstance.loop()"
+        />
+        <!-- down -->
+        <area
+          shape="rect"
+          coords="50,125,130,190"
+          alt="Computer"
+          href="#"
+          onclick="g.mapInstance.move('down'); g.mapInstance.loop()"
+        />
+        <!-- left -->
+        <area
+          shape="rect"
+          coords="1,55,58,120"
+          alt="Computer"
+          href="#"
+          onclick="g.mapInstance.move('left'); g.mapInstance.loop()"
+        />
+        <!-- right -->
+        <area
+          shape="rect"
+          coords="130,55,180,120"
+          alt="Computer"
+          href="#"
+          onclick="g.mapInstance.move('right'); g.mapInstance.loop()"
+        />
+      </map>
+    </div>
     <div class="container" style="margin-top: 20px; margin-bottom: 80px">
       <a href="#" onclick="g.reset()" style="margin-right: 50px">[r]eset</a>
       <a
@@ -97,14 +170,6 @@
         <li>Arrow Keys</li>
         <li>VIM keys [hjkl]</li>
       </ul>
-      <h4>TODO:</h4>
-      <ul>
-        <li>Mobile Support</li>
-        <li>Create a cool song and SFX</li>
-        <li>Points system</li>
-        <li>Steam animation when you beat a level</li>
-        <li>Add more level sets (worlds)</li>
-      </ul>
       <h4>Credits:</h4>
       <ul>
         <li>
@@ -124,7 +189,30 @@
           <a href="https://git.domdit.com/dominic/sokobanya">here</a>
         </li>
       </ul>
+      <h4>UPDATES:</h4>
+      <li>
+        (09/07/25) v1.1: released mobile support via toggleable Dpad, see settings at top right of page!
+      </li>
+      <h4>TODO:</h4>
+      <ul>
+        <li><s>Mobile Support</s></li>
+        <li>Selectable levels upon completion</li>
+        <li>Create a cool song and SFX</li>
+        <li>Points system</li>
+        <li>Steam animation when you beat a level</li>
+        <li>Add more level sets (worlds)</li>
+      </ul>
     </div>
     <script src="assets/script.js"></script>
+    <script>
+      function toggleDisplay(elemId) {
+        let elem = document.getElementById(elemId);
+        if (elem.style.display === "none" || elem.style.display === "") {
+          elem.style.display = "block";
+        } else {
+          elem.style.display = "none";
+        }
+      }
+    </script>
   </body>
 </html>