notification on complete

jwt2706 · Mar 17, 2024 · a0ccc75 · a0ccc75
1 parent 094da70
commit a0ccc75
Show file tree

Hide file tree

Showing 7 changed files with 399 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -17,3 +17,5 @@ This project is licensed under the Apache-2.0 License.
 - find shortest possible path
 - increase transparency of blocks that are in the way of the camera
 - maybe ability to toggle visibility of some blocks
+- throw message if the maze is impossible (which can happen since the generation is random)
+- fix bugs
diff --git a/assets/main.js b/assets/main.js
@@ -0,0 +1,19 @@
+import { main, reset } from './maze.js';
+
+// default is run onload
+window.addEventListener('load', () => {
+  main(9, 9, 9, 0.2);
+});
+
+document.getElementById('toggleControls').addEventListener('click', function() {
+  const controls = document.getElementById('controls');
+  if (controls.style.display === 'none') {
+    controls.style.display = 'block';
+  } else {
+    controls.style.display = 'none';
+  }
+});
+
+document.getElementById('generateButton').addEventListener('click', () => {
+  reset(document.getElementById('mazeWidth').value, document.getElementById('mazeHeight').value, document.getElementById('mazeDepth').value, document.getElementById('wallIntensity').value);
+});
diff --git a/maze.js → assets/maze.js b/maze.js → assets/maze.js
@@ -97,6 +97,7 @@ export function main(mazeWidth, mazeHeight, mazeDepth, wallIntensity) {
     scene.add(pathCube);
 
     if (x === endX && y === endY && z === endZ) {
+      notify();
       return true; //check if we found the end
     }
 
@@ -124,10 +125,17 @@ export function main(mazeWidth, mazeHeight, mazeDepth, wallIntensity) {
     return false;
   }
 
+  function notify() {
+    const notification = document.getElementById('notification');
+    notification.classList.add('show');
+    setTimeout(function() {
+      notification.classList.remove('show');
+    }, 5000);
+  }
+
   // *** main script below ***
 
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-
   const controls = new OrbitControls(camera, renderer.domElement);
   const pathMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
   const pathGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); // Smaller cube for the path

diff --git a/assets/styles.scss b/assets/styles.scss
@@ -0,0 +1,51 @@
+$bg-color: rgba(255, 255, 255, 0.8);
+$font-size: 18px;
+$breakpoint: 650px;
+
+body {
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+canvas {
+  display: block;
+}
+
+.container {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: $bg-color;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.notification {
+  position: fixed;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #444;
+  color: #fff;
+  padding: 15px;
+  border-radius: 5px;
+  display: none;
+  font-size: $font-size;
+  opacity: 0;
+}
+
+.notification.show {
+  display: block;
+  opacity: 1;
+}
+
+.item {
+  font-size: $font-size;
+  padding: 5px;
+  display: inline-block;
+
+  @media (max-width: $breakpoint) {
+    display: block;
+  }
+}
diff --git a/index.html b/index.html
@@ -5,55 +5,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="A 3D maze pathfinding visualization. Generate a 3D maze and visualize the pathfinding algorithm in action.">
   <title>3D Maze Pathfinding</title>
-  <style>
-    body { 
-      margin: 0;
-      overflow: hidden;
-      position: relative;
-    }
-    canvas { display: block; }
-    .container {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      background-color: rgba(255, 255, 255, 0.8);
-      padding: 10px;
-      border-radius: 5px;
-    }
-    .item {
-      font-size: 18px;
-      padding: 5px;
-      display: inline-block;
-    }
-    @media (max-width: 650px) {
-      .item {
-        display: block;
-      }
-    }
-  </style>
+  <link rel="stylesheet" href="assets/styles.scss">
 </head>
 <body>
   <div class="container">
-    <label for="mazeWidth" class="item">Width:</label>
-    <input type="number" id="mazeWidth" value="9" min="3" class="item">
-    <label for="mazeHeight" class="item">Height:</label>
-    <input type="number" id="mazeHeight" value="9" min="3" class="item">
-    <label for="mazeDepth" class="item">Depth:</label>
-    <input type="number" id="mazeDepth" value="9" min="3" class="item">
-    <label for="wallIntensity" class="item">Wall Intensity:</label>
-    <input type="range" id="wallIntensity" value="0.2" min="0.2" max="0.5" step="0.01" class="item">
-    <button id="generateButton" class="item">Generate and Solve Maze</button>
+    <button id="toggleControls" class="item">View Controls</button>
+    <div id="controls">
+      <label for="mazeWidth" class="item">Width:</label>
+      <input type="number" id="mazeWidth" value="9" min="3" max="18" class="item">
+      <label for="mazeHeight" class="item">Height:</label>
+      <input type="number" id="mazeHeight" value="9" min="3" max="18" class="item">
+      <label for="mazeDepth" class="item">Depth:</label>
+      <input type="number" id="mazeDepth" value="9" min="3" max="18" class="item">
+      <label for="wallIntensity" class="item">Wall Intensity:</label>
+      <input type="range" id="wallIntensity" value="0.2" min="0.2" max="0.5" step="0.01" class="item">
+      <button id="generateButton" class="item">Generate and Solve Maze</button>
+    </div>
+    <div id="notification" class="notification">Path Found!</div>
   </div>
-  <script type="module">
-    import { main, reset } from './maze.js';
-
-    window.addEventListener('load', () => {
-      main(9, 9, 9, 0.2);
-    });
-
-    document.getElementById('generateButton').addEventListener('click', () => {
-      reset(document.getElementById('mazeWidth').value, document.getElementById('mazeHeight').value, document.getElementById('mazeDepth').value, document.getElementById('wallIntensity').value);
-    });
-  </script>
+  <script type="module" src="assets/main.js"></script>
 </body>
 </html>