Spaces:
Sleeping
Sleeping
| <!-- templates/index.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Maze Navigation</title> | |
| <style> | |
| .maze { | |
| display: grid; | |
| grid-template-columns: repeat(5, 50px); | |
| grid-template-rows: repeat(5, 50px); | |
| gap: 2px; | |
| } | |
| .cell { | |
| width: 50px; | |
| height: 50px; | |
| background-color: white; | |
| border: 1px solid black; | |
| } | |
| .wall { | |
| background-color: black; | |
| } | |
| .agent { | |
| background-color: blue; | |
| } | |
| .target { | |
| background-color: green; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="maze" id="maze"></div> | |
| <button id="step-button">Take a Step</button> | |
| <script> | |
| const mazeElement = document.getElementById('maze'); | |
| const stepButton = document.getElementById('step-button'); | |
| let maze = []; | |
| let agentPosition = [0, 0]; | |
| let target = [4, 4]; | |
| function drawMaze() { | |
| mazeElement.innerHTML = ''; | |
| maze.forEach((row, y) => { | |
| row.forEach((cell, x) => { | |
| const cellElement = document.createElement('div'); | |
| cellElement.classList.add('cell'); | |
| if (cell === 1) { | |
| cellElement.classList.add('wall'); | |
| } | |
| if (x === agentPosition[0] && y === agentPosition[1]) { | |
| cellElement.classList.add('agent'); | |
| } | |
| if (x === target[0] && y === target[1]) { | |
| cellElement.classList.add('target'); | |
| } | |
| mazeElement.appendChild(cellElement); | |
| }); | |
| }); | |
| } | |
| async function fetchMaze() { | |
| const response = await fetch('/step'); | |
| const data = await response.json(); | |
| maze = data.maze; | |
| agentPosition = data.agent_position; | |
| target = data.target; | |
| drawMaze(); | |
| } | |
| stepButton.addEventListener('click', fetchMaze); | |
| // Initial draw | |
| fetchMaze(); | |
| </script> | |
| </body> | |
| </html> |