+
{maze}
);
diff --git a/src/app/message-banner.module.css b/src/app/message-banner.module.css
new file mode 100644
index 0000000..77c9e08
--- /dev/null
+++ b/src/app/message-banner.module.css
@@ -0,0 +1,10 @@
+.banner {
+ height: 2em;
+}
+.empty {
+}
+
+.message {
+ border: 1px solid red;
+ background-color: #ff000044;
+}
diff --git a/src/app/message-banner.tsx b/src/app/message-banner.tsx
new file mode 100644
index 0000000..92fdd22
--- /dev/null
+++ b/src/app/message-banner.tsx
@@ -0,0 +1,18 @@
+import {actionClosedMessageBanner} from "./state/action.ts";
+import styles from "./message-banner.module.css";
+
+export default function MessageBanner({state, dispatch}) {
+ function handleClose() {
+ dispatch(actionClosedMessageBanner());
+ }
+
+ if (!!state.errorMessage) {
+ return (
+
+ {state.errorMessage}
+
+
+ );
+ }
+ return (
);
+}
diff --git a/src/model/Coordinates.ts b/src/app/model/coordinates.ts
similarity index 100%
rename from src/model/Coordinates.ts
rename to src/app/model/coordinates.ts
diff --git a/src/model/Maze.ts b/src/app/model/maze.ts
similarity index 80%
rename from src/model/Maze.ts
rename to src/app/model/maze.ts
index 57ab1fe..5070b60 100644
--- a/src/model/Maze.ts
+++ b/src/app/model/maze.ts
@@ -1,4 +1,4 @@
-import Coordinates from "./Coordinates";
+import Coordinates from "./coordinates.ts";
export default interface Maze {
id: string,
@@ -6,6 +6,7 @@ export default interface Maze {
height: number,
start: Coordinates,
end: Coordinates,
+ algorithm: string,
grid: MazeCell[][]
}
@@ -15,4 +16,4 @@ export interface MazeCell {
bottom: boolean,
left: boolean,
solution: boolean
-}
\ No newline at end of file
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
new file mode 100644
index 0000000..2073e79
--- /dev/null
+++ b/src/app/page.module.css
@@ -0,0 +1,179 @@
+.page {
+}
+
+.page h1.mainheading, .page h2.mainheading {
+ text-align: center;
+}
+
+.page h2.mainheading {
+ font-size: medium;
+}
+
+/*.page {*/
+/* --gray-rgb: 0, 0, 0;*/
+/* --gray-alpha-200: rgba(var(--gray-rgb), 0.08);*/
+/* --gray-alpha-100: rgba(var(--gray-rgb), 0.05);*/
+
+/* --button-primary-hover: #383838;*/
+/* --button-secondary-hover: #f2f2f2;*/
+
+/* display: grid;*/
+/* grid-template-rows: 20px 1fr 20px;*/
+/* align-items: center;*/
+/* justify-items: center;*/
+/* min-height: 100svh;*/
+/* padding: 80px;*/
+/* gap: 64px;*/
+/* font-family: var(--font-geist-sans);*/
+/*}*/
+
+/*@media (prefers-color-scheme: dark) {*/
+/* .page {*/
+/* --gray-rgb: 255, 255, 255;*/
+/* --gray-alpha-200: rgba(var(--gray-rgb), 0.145);*/
+/* --gray-alpha-100: rgba(var(--gray-rgb), 0.06);*/
+
+/* --button-primary-hover: #ccc;*/
+/* --button-secondary-hover: #1a1a1a;*/
+/* }*/
+/*}*/
+
+/*.main {*/
+/* display: flex;*/
+/* flex-direction: column;*/
+/* gap: 32px;*/
+/* grid-row-start: 2;*/
+/*}*/
+
+/*.main ol {*/
+/* font-family: var(--font-geist-mono);*/
+/* padding-left: 0;*/
+/* margin: 0;*/
+/* font-size: 14px;*/
+/* line-height: 24px;*/
+/* letter-spacing: -0.01em;*/
+/* list-style-position: inside;*/
+/*}*/
+
+/*.main li:not(:last-of-type) {*/
+/* margin-bottom: 8px;*/
+/*}*/
+
+/*.main code {*/
+/* font-family: inherit;*/
+/* background: var(--gray-alpha-100);*/
+/* padding: 2px 4px;*/
+/* border-radius: 4px;*/
+/* font-weight: 600;*/
+/*}*/
+
+/*.ctas {*/
+/* display: flex;*/
+/* gap: 16px;*/
+/*}*/
+
+/*.ctas a {*/
+/* appearance: none;*/
+/* border-radius: 128px;*/
+/* height: 48px;*/
+/* padding: 0 20px;*/
+/* border: none;*/
+/* border: 1px solid transparent;*/
+/* transition:*/
+/* background 0.2s,*/
+/* color 0.2s,*/
+/* border-color 0.2s;*/
+/* cursor: pointer;*/
+/* display: flex;*/
+/* align-items: center;*/
+/* justify-content: center;*/
+/* font-size: 16px;*/
+/* line-height: 20px;*/
+/* font-weight: 500;*/
+/*}*/
+
+/*a.primary {*/
+/* background: var(--foreground);*/
+/* color: var(--background);*/
+/* gap: 8px;*/
+/*}*/
+
+/*a.secondary {*/
+/* border-color: var(--gray-alpha-200);*/
+/* min-width: 180px;*/
+/*}*/
+
+/*.footer {*/
+/* grid-row-start: 3;*/
+/* display: flex;*/
+/* gap: 24px;*/
+/*}*/
+
+/*.footer a {*/
+/* display: flex;*/
+/* align-items: center;*/
+/* gap: 8px;*/
+/*}*/
+
+/*.footer img {*/
+/* flex-shrink: 0;*/
+/*}*/
+
+/*!* Enable hover only on non-touch devices *!*/
+/*@media (hover: hover) and (pointer: fine) {*/
+/* a.primary:hover {*/
+/* background: var(--button-primary-hover);*/
+/* border-color: transparent;*/
+/* }*/
+
+/* a.secondary:hover {*/
+/* background: var(--button-secondary-hover);*/
+/* border-color: transparent;*/
+/* }*/
+
+/* .footer a:hover {*/
+/* text-decoration: underline;*/
+/* text-underline-offset: 4px;*/
+/* }*/
+/*}*/
+
+/*@media (max-width: 600px) {*/
+/* .page {*/
+/* padding: 32px;*/
+/* padding-bottom: 80px;*/
+/* }*/
+
+/* .main {*/
+/* align-items: center;*/
+/* }*/
+
+/* .main ol {*/
+/* text-align: center;*/
+/* }*/
+
+/* .ctas {*/
+/* flex-direction: column;*/
+/* }*/
+
+/* .ctas a {*/
+/* font-size: 14px;*/
+/* height: 40px;*/
+/* padding: 0 16px;*/
+/* }*/
+
+/* a.secondary {*/
+/* min-width: auto;*/
+/* }*/
+
+/* .footer {*/
+/* flex-wrap: wrap;*/
+/* align-items: center;*/
+/* justify-content: center;*/
+/* }*/
+/*}*/
+
+/*@media (prefers-color-scheme: dark) {*/
+/* .logo {*/
+/* filter: invert();*/
+/* }*/
+/*}*/
diff --git a/src/App.tsx b/src/app/page.tsx
similarity index 63%
rename from src/App.tsx
rename to src/app/page.tsx
index 09ded60..fab1311 100644
--- a/src/App.tsx
+++ b/src/app/page.tsx
@@ -1,23 +1,29 @@
-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";
+'use client'
-export default function App() {
+import styles from "./page.module.css";
+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 (
- <>
+
+
A-Maze-R! Create your own maze!
+ A fun little maze generator written by fritteli
{hasValidMaze &&
<>
- The Maze ({state.maze.width}x{state.maze.height}, ID: {state.maze.id})
+ The Maze ({state.maze.width}x{state.maze.height}, Algorithm: {state.maze.algorithm},
+ ID: {state.maze.id})
{
dispatch(actionToggledShowSolution(e.target.checked));
@@ -27,6 +33,6 @@ export default function App() {
dispatch={dispatch}/>
}
-
+
);
}
diff --git a/src/state/action.ts b/src/app/state/action.ts
similarity index 96%
rename from src/state/action.ts
rename to src/app/state/action.ts
index 46fb132..2c08b17 100644
--- a/src/state/action.ts
+++ b/src/app/state/action.ts
@@ -1,4 +1,4 @@
-import Maze from "../model/Maze";
+import Maze from "../model/maze.ts";
export interface Action {
type: string,
@@ -57,4 +57,4 @@ export function actionClickedCell(x: number, y: number): Action {
x,
y
}
-}
\ No newline at end of file
+}
diff --git a/src/state/reducer.ts b/src/app/state/reducer.ts
similarity index 95%
rename from src/state/reducer.ts
rename to src/app/state/reducer.ts
index eaddcb3..04257a0 100644
--- a/src/state/reducer.ts
+++ b/src/app/state/reducer.ts
@@ -10,7 +10,7 @@ import {
ID_ACTION_TOGGLED_SHOW_SOLUTION
} from "./action.ts";
-export default function reduce(state: State, action: Action) {
+export default function reduce(state: State, action: Action): State {
switch (action.type) {
case ID_ACTION_STARTED_LOADING: {
return {
diff --git a/src/state/state.ts b/src/app/state/state.ts
similarity index 76%
rename from src/state/state.ts
rename to src/app/state/state.ts
index 999ed91..d040fc0 100644
--- a/src/state/state.ts
+++ b/src/app/state/state.ts
@@ -1,5 +1,5 @@
-import Coordinates from "../model/Coordinates";
-import Maze from "../model/Maze";
+import Coordinates from "../model/coordinates.ts";
+import Maze from "../model/maze.ts";
export interface State {
errorMessage: string | null,
@@ -15,4 +15,4 @@ export const INITIAL_STATE: State = {
maze: null,
showSolution: false,
userPath: []
-};
\ No newline at end of file
+};
diff --git a/src/state/userpathhandler.ts b/src/app/state/userpathhandler.ts
similarity index 89%
rename from src/state/userpathhandler.ts
rename to src/app/state/userpathhandler.ts
index dfa8251..56de445 100644
--- a/src/state/userpathhandler.ts
+++ b/src/app/state/userpathhandler.ts
@@ -1,15 +1,16 @@
import {State} from "./state";
-import Coordinates from "../model/Coordinates";
-import {MazeCell} from "../model/Maze";
+import Coordinates from "../model/coordinates.ts";
+import {MazeCell} from "../model/maze.ts";
export default function handleUserClicked(state: State, x: number, y: number): State {
if (isClickAllowed(x, y, state)) {
+ let maze = state.maze!;
// Okay, we clicked a cell that's adjacent to the end of the userpath (or which IS the end of the userpath)
// and that's not blocked by a wall. Now let's see.
if (-1 === state.userPath.findIndex(step => step.x === x && step.y === y)) {
// The clicked cell is not yet part of the userpath --> add it.
// If it's the end tile, also show a congratulation message
- const showMessage = x === state.maze.end.x && y === state.maze.end.y;
+ const showMessage = x === maze.end.x && y === maze.end.y;
return {
...state,
userPath: [...state.userPath, {x, y}],
@@ -17,7 +18,7 @@ export default function handleUserClicked(state: State, x: number, y: number): S
};
} else {
// The clicked cell IS part of the userpath. Is it the last cell of it?
- const lastCoordsFromUserPath = getLastCoordsFromUserPath(state);
+ const lastCoordsFromUserPath = getLastCoordsFromUserPath(state)!;
if (lastCoordsFromUserPath.x === x && lastCoordsFromUserPath.y === y) {
// Yes, it's the last cell of the userpath --> remove it.
return {
@@ -36,7 +37,7 @@ function isClickAllowed(x: number, y: number, state: State): boolean {
const lastCoordsFromUserPath = getLastCoordsFromUserPath(state);
if (!lastCoordsFromUserPath) {
// when nothing has been marked yet, we can only toggle the starting position
- return x === state.maze.start.x && y === state.maze.start.y;
+ return x === state.maze!.start.x && y === state.maze!.start.y;
}
if (lastCoordsFromUserPath.x === x && lastCoordsFromUserPath.y === y) {
// toggling the last position in the path is always allowed
@@ -70,7 +71,7 @@ function isClickAllowed(x: number, y: number, state: State): boolean {
}
function getCellAt(coords: Coordinates, state: State): MazeCell {
- return state.maze.grid[coords.y][coords.x];
+ return state.maze!.grid[coords.y][coords.x];
}
function getLastCoordsFromUserPath(state: State): Coordinates | null {
diff --git a/src/ValidatingInputNumberField.tsx b/src/app/validating-input-number-field.tsx
similarity index 97%
rename from src/ValidatingInputNumberField.tsx
rename to src/app/validating-input-number-field.tsx
index 0822b48..08842b1 100644
--- a/src/ValidatingInputNumberField.tsx
+++ b/src/app/validating-input-number-field.tsx
@@ -35,7 +35,7 @@ export default function ValidatingInputNumberField({
max={constraints.max || null}
disabled={disabled}
/>
- {!!error &&
{error}}
+
{error}
);
}
diff --git a/src/createServiceWorker.js b/src/createServiceWorker.js
deleted file mode 100644
index 5445ef5..0000000
--- a/src/createServiceWorker.js
+++ /dev/null
@@ -1,52 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-export default function register() {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- // eslint-disable-next-line no-param-reassign
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the old content will have been purged and
- // the fresh content will have been added to the cache.
- // It's the perfect time to display a "New content is
- // available; please refresh." message in your web app.
- console.log('New content is available; please refresh.'); // eslint-disable-line no-console
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.'); // eslint-disable-line no-console
- }
- }
- };
- };
- })
- .catch(error => {
- console.error('Error during service worker registration:', error);
- });
- });
- }
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister();
- });
- }
-}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 6f9bbb3..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {StrictMode} from "react";
-import {createRoot, Root} from "react-dom/client";
-import "./styles.css";
-import App from "./App.tsx";
-
-
-const root: Root = createRoot(document.getElementById("root"));
-root.render(
-
-
-
-);
\ No newline at end of file
diff --git a/src/package.json b/src/package.json
deleted file mode 100644
index 9279b3f..0000000
--- a/src/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "dependencies": {
- "react": "^18.0.0",
- "react-dom": "^18.0.0",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
\ No newline at end of file
diff --git a/src/public/index.html b/src/public/index.html
deleted file mode 100644
index e814c4d..0000000
--- a/src/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
A-Maze-R
-
-
-
-
-
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index b38b3a4..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,151 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-div.maze {
- display: table;
- border-collapse: collapse;
-}
-
-div.row {
- display: table-row;
- margin: 0;
- padding: 0;
-}
-
-div.cell {
- display: table-cell;
- border: 1px solid transparent;
- height: 2em;
- width: 2em;
- padding: 0;
-}
-
-div.cell.solution {
- background-color: lightgray;
-}
-
-div.cell.top {
- border-top-color: #000;
-}
-
-div.cell.right {
- border-right-color: #000;
-}
-
-div.cell.bottom {
- border-bottom-color: #000;
-}
-
-div.cell.left {
- border-left-color: #000;
-}
-
-div.cell.user {
- background-color: hotpink;
-}
-
-div.cell.user2 {
- border-radius: 0.5em;
-}
-
-div.cell.solution.user {
- background-color: darkred;
-}
-
-div.message-banner {
- border: 1px solid red;
- background-color: #ff000044;
-}
-
-input:invalid {
- border-color: #f00;
-}
-
-body {
- font-family: sans-serif;
- margin: 20px;
- padding: 0;
-}
-
-h1 {
- margin-top: 0;
- font-size: 22px;
-}
-
-h2 {
- margin-top: 0;
- font-size: 20px;
-}
-
-h3 {
- margin-top: 0;
- font-size: 18px;
-}
-
-h4 {
- margin-top: 0;
- font-size: 16px;
-}
-
-h5 {
- margin-top: 0;
- font-size: 14px;
-}
-
-h6 {
- margin-top: 0;
- font-size: 12px;
-}
-
-code {
- font-size: 1.2em;
-}
-
-ul {
- padding-left: 20px;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- font-family: sans-serif;
- margin: 20px;
- padding: 0;
-}
-
-.square {
- background: #fff;
- border: 1px solid #999;
- float: left;
- font-size: 24px;
- font-weight: bold;
- line-height: 34px;
- height: 34px;
- margin-right: -1px;
- margin-top: -1px;
- padding: 0;
- text-align: center;
- width: 34px;
-}
-
-.board-row:after {
- clear: both;
- content: '';
- display: table;
-}
-
-.status {
- margin-bottom: 10px;
-}
-
-.game {
- display: flex;
- flex-direction: row;
-}
-
-.game-info {
- margin-left: 20px;
-}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ef36eec
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "allowImportingTsExtensions": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": [
+ "a-maze-r/node_modules"
+ ]
+}