Spaces:
Sleeping
Sleeping
File size: 2,307 Bytes
2f18fbc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!-- templates/index.html -->
<!DOCTYPE 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> |