Commit 20a2959

@@ -54,10 +54,14 @@
     <!-- Main Content -->
     <h1>Maze Runner</h1>
     <p id="tooltip"></p>
-    <div id="maze">
-
-
+    <div id="maze"></div>
+    <div class="controls">
+        <button id="a" class="left">⬅</button>
+        <button id="d" class="right">⬅</button>
+        <button id="w" class="top">⬆</button>
+        <button id="s" class="bottom">⬇</button>
     </div>
+
     <!-- Footer -->
     <div class="footer">
         <label for="modal">(i)</label>

@@ -6,7 +6,10 @@ const rows = 15;
 const cols = 15;
 const visited = new Set();
 const tooltip = document.getElementById("tooltip");
-
+const w = document.querySelector("#w");
+const s = document.querySelector("#s");
+const a = document.querySelector("#a");
+const d = document.querySelector("#d");
 
 function getRandomUnVisitedNeighbour(current) {
     const neighbors = [];
@@ -89,6 +92,26 @@ async function dfs(maze,start) {
     tooltip.innerHTML = "Use W A S D or arrow keys to move";
 }
 
+function lightUpButtons(btn){
+    switch(btn){
+        case "w":
+            w.classList.add("lit");
+            setTimeout(() => { w.classList.remove("lit"); }, 100);
+            break;
+        case "s":
+            s.classList.add("lit");
+            setTimeout(() => { s.classList.remove("lit"); }, 100);
+            break;
+        case "a":
+            a.classList.add("lit");
+            setTimeout(() => { a.classList.remove("lit"); }, 100);
+            break;
+        case "d":
+            d.classList.add("lit");
+            setTimeout(() => { d.classList.remove("lit"); }, 100);
+            break;
+    }
+}
 
 function movement(maze,movement){
     const current = document.querySelector(".current");
@@ -134,6 +157,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     cells = document.querySelectorAll(".cell");
     await dfs(maze,initial_position);
     cells[final_position].classList.add("final");
+    document.querySelector(".controls").style.visibility = "visible";
 
     document.addEventListener("keydown", function (event) {
         if(!maze_created || won){
@@ -141,20 +165,44 @@ document.addEventListener("DOMContentLoaded", async function () {
         }
         if(event.key ==="w" || event.key === "W" || event.key === "ArrowUp"){
             movement(maze,"UP");
+            lightUpButtons("w");
         }
         if(event.key ==="s" || event.key === "S" || event.key === "ArrowDown"){
             movement(maze,"DOWN");
+            lightUpButtons("s");
         }
         if(event.key ==="a" || event.key === "A" || event.key === "ArrowLeft"){
             movement(maze,"LEFT");
+            lightUpButtons("a");
         }
         if(event.key ==="d" || event.key === "D" || event.key === "ArrowRight"){
             movement(maze,"RIGHT");
+            lightUpButtons("d");
         }
         // f5 key
         if(event.key === "F5"){
             window.location.reload();
         }
     });
+
+    w.onclick = () => {
+        movement(maze,"UP");
+        lightUpButtons("w");
+    }
+    
+    s.onclick = () => {
+        movement(maze,"DOWN");
+        lightUpButtons("s");
+    }
+    
+    a.onclick = () => {
+        movement(maze,"LEFT");
+        lightUpButtons("a");
+    }
+    
+    d.onclick = () => {
+        movement(maze,"RIGHT");
+        lightUpButtons("d");
+    }
     
-});
\ No newline at end of file
+});

@@ -52,4 +52,56 @@ body{
 
 #tooltip{
     color: var(--gold);
+}
+
+.controls {
+    position: relative;
+    width: 110px;
+    height: 70px;
+    margin-top:30px;
+    visibility: hidden;
+}
+    
+.controls button {
+    color : white;
+    text-decoration: none;
+    border: 3px solid white;
+    border-radius: 5px;
+    box-shadow: -2px 2px;
+    flex-grow: 1;
+    font-family: monospace;
+    background: black;
+    font-size: 14px;
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.left {
+    left: 0;
+}
+
+.right {
+    right: 0;
+    transform: scale(-1, -1);
+    box-shadow: 2px -2px !important;
+}
+
+.top, .bottom {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.bottom, .left, .right {
+    bottom: 0px;
+}
+
+.lit{
+    background: 3px solid var(--gold) !important;
+    color: var(--gold) !important;
+    border: 3px solid var(--gold) !important;
 }
\ No newline at end of file