45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import styles from "./page.module.scss";
|
|
import {useReducer} from "react";
|
|
import reduce from "./state/reducer.ts";
|
|
import {INITIAL_STATE} from "./state/state.ts";
|
|
import MessageBanner from "./message-banner.tsx";
|
|
import InputForm from "./input-form.tsx";
|
|
import {actionToggledShowSolution} from "./state/action.ts";
|
|
import Maze from "./maze.tsx";
|
|
|
|
export default function Home() {
|
|
const [state, dispatch] = useReducer(reduce, INITIAL_STATE);
|
|
const hasValidMaze = !!state.maze;
|
|
return (
|
|
<div className={styles.page}>
|
|
<h1 className={styles.mainheading}>A-Maze-R! Create your own maze!</h1>
|
|
<h2 className={styles.mainheading}>A fun little maze generator written by fritteli</h2>
|
|
<MessageBanner state={state}
|
|
dispatch={dispatch}/>
|
|
<InputForm state={state}
|
|
dispatch={dispatch}/>
|
|
{hasValidMaze &&
|
|
<>
|
|
<h1>The Maze ({state.maze!.width}x{state.maze!.height}, Algorithm: {state.maze!.algorithm},
|
|
ID: {state.maze!.id})</h1>
|
|
<a href={"https://manuel.friedli.info/labyrinth/create/pdffile?w="
|
|
+ state.maze!.width
|
|
+ "&h=" + state.maze!.height
|
|
+ "&id=" + state.maze!.id
|
|
+ "&a=" + state.maze!.algorithm}
|
|
className={styles.downloadlink}>Download as PDF file</a>
|
|
<input type={"checkbox"}
|
|
checked={state.showSolution}
|
|
onChange={(e) => {
|
|
dispatch(actionToggledShowSolution(e.target.checked));
|
|
}}
|
|
id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
|
|
<Maze state={state}
|
|
dispatch={dispatch}/>
|
|
</>
|
|
}
|
|
</div>
|
|
);
|
|
}
|