33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import {useReducer} from 'react';
|
|
import Maze from "./Maze.tsx";
|
|
import InputForm from "./InputForm.tsx";
|
|
import reduce from "./state/reducer.ts";
|
|
import MessageBanner from "./MessageBanner.tsx";
|
|
import {INITIAL_STATE} from "./state/state.ts";
|
|
import {actionToggledShowSolution} from "./state/action.ts";
|
|
|
|
export default function App() {
|
|
const [state, dispatch] = useReducer(reduce, INITIAL_STATE);
|
|
const hasValidMaze = !!state.maze;
|
|
return (
|
|
<>
|
|
<MessageBanner state={state}
|
|
dispatch={dispatch}/>
|
|
<InputForm state={state}
|
|
dispatch={dispatch}/>
|
|
{hasValidMaze &&
|
|
<>
|
|
<h1>The Maze ({state.maze.width}x{state.maze.height}, ID: {state.maze.id})</h1>
|
|
<input type={"checkbox"}
|
|
onChange={(e) => {
|
|
dispatch(actionToggledShowSolution(e.target.checked));
|
|
}}
|
|
id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
|
|
<Maze state={state}
|
|
dispatch={dispatch}/>
|
|
</>
|
|
}
|
|
</>
|
|
);
|
|
}
|