Refactor

app/page.tsx

@@ -0,0 +1,45 @@
+'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>
+    );
+}