Adds infinite tile generation to demo

Adds stub for game `mode` in demo
Updates ReadMe

Author: Marak

ReadMe.md

@@ -168,7 +168,7 @@ import labyrinthos from 'labyrinthos';
 // Main map - 8x8 = 64 tiles
 const mainMap = new labyrinthos.TileMap({ width: 8, height: 8 });
 
-// Submaps  - 4x4 = 16 tiles each
+// Sub maps - 4x4 = 16 tiles each
 const subMap1 = new labyrinthos.TileMap({ width: 4, height: 4 });
 const subMap2 = new labyrinthos.TileMap({ width: 4, height: 4 });
 const subMap3 = new labyrinthos.TileMap({ width: 4, height: 4 });

examples/browser/demo.js

@@ -1,6 +1,8 @@
 let previousSeed = null;
 let urlSeed = null;
 let map;
+let infinite = false;
+let mode = 'topdown';
 $(document).ready(function () {
 
 
@@ -63,6 +65,13 @@ $(document).ready(function () {
     generateMap(map.mersenneTwister.currentSeed); // Adjust if generateMap needs specific arguments
   });
 
+  $('#generateChunks').change(function () {
+    generateMap(map.mersenneTwister.currentSeed);
+  });
+
+  $('input[name="mapModePhysics"]').change(function () {
+    generateMap(map.mersenneTwister.currentSeed);
+  });
 
   /*
   // when clicking on mapContainer, generate a new map
@@ -84,6 +93,17 @@ $(document).ready(function () {
   let height = searchParams.get('height');
   let depth = searchParams.get('depth');
   let algo = searchParams.get('algo');
+
+  let _infinite = searchParams.get('infinite'); // chunks or no chunks
+  let _mode = searchParams.get('mode'); // topdown or platformer
+
+  if (_infinite == 'true') {
+    infinite = true;
+  }
+  if (_mode == 'platformer') {
+    mode = 'platformer';
+  }
+
   if (width) {
     $('#mapWidth').val(width);
   }
@@ -157,13 +177,17 @@ $(document).ready(function () {
     generateMap(previousSeed);
   });
 
+  $('.gameSettings').click(function () {
+    $('.gameSettingsMessage').show();
+  });
+
   $('.mantraTiled').click(function () {
     let id = $(this).attr('id');
     // takes the current tileMap.data and opens a link to
     // the mantra Tiled world with tiledata?=tileMap.data
     let host = 'https://yantra.gg/mantra/tiled';
     // for dev mode
-    // host = 'http://192.168.1.80:7777/tiled.html'
+    host = 'http://192.168.1.80:7777/tiled.html'
 
 
     // instead of sending entire TiledMap format, we will instead send metadata about `TileMap` with seed
@@ -179,6 +203,11 @@ $(document).ready(function () {
     };
 
 
+
+    tileMapData.infinite = infinite;
+    tileMapData.mode = mode;
+
+
     let queryString = '?s=labyrinthos';
 
     // convert tileMapData to query string
@@ -371,7 +400,6 @@ $(document).ready(function () {
       }, map, {});
       */
       $('#stackingModeSelection').toggle(false);
-
       generators[generatorType](map, {});
       if (LABY.terrains[generatorType]) {
         map.scaleToTileRange(4);
@@ -403,6 +431,23 @@ $(document).ready(function () {
       searchParams.set(prop, map[prop]);
     }
 
+    let _infinite = $('#generateChunks').is(':checked');
+    if (_infinite === true || _infinite === 'true') {
+      infinite = true;
+      searchParams.set('infinite', 'true');
+    } else {
+      infinite = false;
+      searchParams.set('infinite', 'false');
+    }
+
+    let _mode = $('input[name="mapModePhysics"]:checked').val();
+    if (_mode === 'topdown' || _mode === 'platformer') {
+      mode = _mode;
+      searchParams.set('mode', mode);
+    } else {
+      searchParams.set('mode', 'topdown');
+    }
+
     searchParams.set('algo', algo);
 
     //searchParams.set('map', map.toJSON());

examples/index.html

@@ -7,8 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://yantra.gg/labyrinthos/browser/vendor/jquery.min.js"></script>
   <script src="https://yantra.gg/labyrinthos/browser/vendor/jszip.min.js"></script>
-  <meta name="description"
-    content="A JavaScript procedural generator for Mazes, Terrains, and Biomes">
+  <meta name="description" content="A JavaScript procedural generator for Mazes, Terrains, and Biomes">
   <script src="./browser/labyrinthos.js"></script>
   <script src="./browser/demo.js"></script>
 
@@ -118,6 +117,7 @@
       padding-bottom: 0px;
       padding-top: 0px;
     }
+
     label {
       color: #3652AD;
       font-size: 24px;
@@ -201,6 +201,11 @@
       min-width: 280px;
     }
 
+    .gameSettingsMessage {
+      display: none;
+      padding: 10px;
+      font-size: 18px;
+    }
 
     button {
       padding: 12px 30px;
@@ -345,11 +350,8 @@
         /* Reset order to ensure natural HTML flow */
       }
 
-      select,
-      button,
-      .mapSettings {
-        /* Adjust font size for readability */
-      }
+
+
 
       #mapContainer {
         font-size: 24px;
@@ -387,8 +389,10 @@ <h2>A JavaScript procedural generator for Mazes, Terrains, and Biomes</h2>
         <button id="nextAlgo" title="Next algorithm">&gt;</button>
 
         <button id="generateMap" title="Generate new map and random seed">Generate Map</button>
-        <button class="mantraTiled" id="mantra2DTiled" title="View Map using Mantra.js CSSGraphics">Explore in 2D</button>
-        <button class="mantraTiled" id="mantra3DTiled" title="View Map using Mantra.js 3D Graphics">Explore in 3D</button>
+        <button class="mantraTiled" id="mantra2DTiled" title="View Map using Mantra.js CSSGraphics">Explore in
+          2D</button>
+        <button class="mantraTiled" id="mantra3DTiled" title="View Map using Mantra.js 3D Graphics">Explore in
+          3D</button>
 
         <div id="mapContainer"></div>
 
@@ -405,7 +409,7 @@ <h2>A JavaScript procedural generator for Mazes, Terrains, and Biomes</h2>
             </label>
           </div>
         </div>
-        
+
         <br />
 
         <div class="boxer">
@@ -416,7 +420,7 @@ <h2>A JavaScript procedural generator for Mazes, Terrains, and Biomes</h2>
           <label for="mapHeight">Map Height
             <input class="mapSettings" id="mapHeight" type="number" value="16" />
           </label>
-          <br/>
+          <br />
           <!-- Depth Input for 3D Mode (Initially Hidden) -->
           <label for="mapDepth" style="display:none;">Map Depth
             <input class="mapSettings" id="mapDepth" type="number" value="1" />
@@ -438,20 +442,44 @@ <h2>A JavaScript procedural generator for Mazes, Terrains, and Biomes</h2>
           <label for="mapSizeLarge">Large
             <input type="radio" id="mapSizeLarge" name="mapSize" value="large">
           </label>
+          <br />
+          <label for="mapMode2d">2D
+            <input type="radio" id="mapMode2d" name="mapMode" value="2d" checked>
+          </label>
+          <label for="mapMode3d">3D
+            <input type="radio" id="mapMode3d" name="mapMode" value="3d">
+          </label>
         </div>
         <br />
         <!-- Map Size select -->
         <div class="boxer">
 
           <!-- Map Mode Selection -->
           <div>
-            <label for="mapMode2d">2D
-              <input type="radio" id="mapMode2d" name="mapMode" value="2d" checked>
+
+            <!--
+
+            <br />
+            <label class="gameSettings" for="mapModePhysicsTop" title="Top-Down Physics with zero gravity">Top-Down
+              <input type="radio" id="mapModePhysicsTop" name="mapModePhysics" value="top-down" checked>
             </label>
-            <label for="mapMode3d">3D
-              <input type="radio" id="mapMode3d" name="mapMode" value="3d">
+            <label class="gameSettings" for="mapModePhysicsPlatform" title="Platformer style physics with gravity">Platformer
+              <input type="radio" id="mapModePhysicsPlatform" name="mapModePhysics" value="platformer">
+            </label>
+              -->
+
+            <br />
+            <br />
+
+            <label class="gameSettings" for="generateChunks"
+              title="When enabled the TileMap will extend to infinity using coordinate chunks as random seed values to your algorithm.">Procedurally
+              Generate Chunks
+              <input type="checkbox" id="generateChunks" name="generateChunks" value="false">
             </label>
 
+            <div class="gameSettingsMessage">You must explore map to see these changes.</div>
+
+
             <!-- Stacking Mode Selection for 3D Maps -->
             <div id="stackingModeSelection" style="display:none;"> <!-- Initially hidden -->
               <label for="stackingModeUnique" title="Each layer of the 3D will be unique instance of 2D algo.">Unique
@@ -484,13 +512,14 @@ <h2>A JavaScript procedural generator for Mazes, Terrains, and Biomes</h2>
         <br />
 
         <div class="boxer">
-          <a href="https://discord.gg/hw9VvWPJqN" target="_blank" id="discordLink"><img width="60" src="./browser/img/discord-voice.png"/></a>
+          <a href="https://discord.gg/hw9VvWPJqN" target="_blank" id="discordLink"><img width="60"
+              src="./browser/img/discord-voice.png" /></a>
+          <br />
+          <a class="chatLink link" target="_blank" href="https://discord.gg/hw9VvWPJqN"> Chat</a>
           <br />
-          <a class="chatLink link"  target="_blank" href="https://discord.gg/hw9VvWPJqN"> Chat</a>
-          <br/>
 
         </div>
-            
+
       </div>
       <!-- TODO:
         <div>