diff --git a/components/Map.tsx b/components/Map.tsx index a5750c7..8d70984 100644 --- a/components/Map.tsx +++ b/components/Map.tsx @@ -7,6 +7,13 @@ export function getCellImage(cell: string) { src="/entities/zombie_alive_1.svg" alt="Zombie" className="w-full h-full" + style={{ + width: '100%', + height: '100%', + position: 'relative', + top: '-20px', + left: '4px', + }} /> ); } @@ -16,17 +23,31 @@ export function getCellImage(cell: string) { src="/entities/player_alive_1.svg" alt="Player" className="w-full h-full" + style={{ + position: 'relative', + top: '-20px', + left: '4px', + }} /> ); } if (cell === "R") { return ( - Block + Block ); } if (cell === "B") { return ( - Block + Block ); } return null; @@ -34,13 +55,8 @@ export function getCellImage(cell: string) { export function Map({ map, size = 64 }: { map: string[][]; size?: number }) { return ( -
- Background Map -
+
+
{map.map((row, y) => (
{row.map((cell, x) => ( diff --git a/components/Visualizer.tsx b/components/Visualizer.tsx index 1c5bfe0..2fe2717 100644 --- a/components/Visualizer.tsx +++ b/components/Visualizer.tsx @@ -108,12 +108,15 @@ export function Visualizer({ return ( <> -
- Background Map +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/map_tiles.svg b/public/map_tiles.svg new file mode 100644 index 0000000..484dad8 --- /dev/null +++ b/public/map_tiles.svg @@ -0,0 +1,916 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +