labyrinth-frontend/src/app/maze.tsx

29 lines
960 B
TypeScript

import Cell from "./cell.tsx";
import styles from "./maze.module.css";
import {State} from "@/app/state/state.ts";
import {ActionDispatch, JSX} from "react";
import {Action} from "@/app/state/action.ts";
export default function Maze({state, dispatch}:
{
state: State,
dispatch: ActionDispatch<[Action]>
}) {
if (!state.maze) {
return <div>No valid maze.</div>
}
const maze: JSX.Element[] = [];
for (let y = 0; y < state.maze.height; y++) {
const row: JSX.Element[] = [];
for (let x = 0; x < state.maze.width; x++) {
row.push(<Cell key={`${x}x${y}`} x={x} y={y} state={state} dispatch={dispatch}/>)
}
maze.push(<div key={`r${y}`} className={styles.row}>{row}</div>);
}
return (
<div className={styles.maze}>
{maze}
</div>
);
}