Add node info section, add grid, style footer

src/components/grid.tsx

@@ -0,0 +1,14 @@
+import { createNode } from '@/models/createNode';
+import React from 'react';
+
+export default function Grid() {
+	const grid = Array.from({ length: 90 * 40 }, (_, index) => createNode(index)); // create the grid
+
+	return (
+		<div id="grid">
+			{grid.map((node, index) => (
+				<div key={node.id} className="grid-node"></div>
+			))}
+		</div>
+	);
+}

src/components/layout/info.tsx

@@ -2,8 +2,33 @@ import React from 'react';
 
 export default function Info() {
 	return (
-		<section>
-			<p>Display necessary info</p>
+		<section id="info">
+			<div className="node-colors-info">
+				<div className="node-info-item">
+					<div id="info-wall"></div>
+					<p>- Wall</p>
+				</div>
+				<div className="node-info-item">
+					<div id="info-visited"></div>
+					<p>- Visited</p>
+				</div>
+				<div className="node-info-item">
+					<div id="info-unvisited"></div>
+					<p>- Unvisited</p>
+				</div>
+				<div className="node-info-item">
+					<div id="info-path"></div>
+					<p>- Path</p>
+				</div>
+				<div className="node-info-item">
+					<div id="info-start"></div>
+					<p>- Start</p>
+				</div>
+				<div className="node-info-item">
+					<div id="info-end"></div>
+					<p>- End</p>
+				</div>
+			</div>
 		</section>
 	);
 }

src/components/layout/main.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
+import Grid from '../grid';
 
 export default function Main() {
-	return <main>Grid</main>;
+	return (
+		<main id="main">
+			<Grid />
+		</main>
+	);
 }

src/models/createNode.ts

@@ -0,0 +1,8 @@
+export const createNode = (id: number) => ({
+	id,
+	neighbors: [],
+	isBarrier: false,
+	isStart: false,
+	isEnd: false,
+	previousNode: undefined,
+});

src/styles/_variables.scss

@@ -1,13 +1,15 @@
 $background: #d1d1d1;
+$grid-line-color: rgba(0, 0, 0, 0.4);
 
 $primary: #fff;
 $secondary: #c8c8c8;
 $accent: #1ca0ff;
 $tertiary: #26324c;
 
-$openNode: #1cff6b;
-$closedNode: #ff1c1c;
+$unvisitedNode: #fff;
+$visitedNode: #ff1c1c;
 $wallNode: #1b1b1b;
 $pathNode: #e8ff1c;
+$openNode: #1cff6b;
 $startNode: #ff1c8e;
 $endNode: #331cff;

src/styles/globals.scss

@@ -2,7 +2,7 @@
 @import './layout/header';
 @import './layout/footer';
 @import './layout/main';
-@import './layout/selections';
+@import './layout/info';
 
 * {
 	box-sizing: border-box;
@@ -12,6 +12,7 @@
 
 html,
 body {
+	height: 100vh;
 	max-width: 100vw;
 	max-height: 100vh;
 	overflow: hidden;

src/styles/layout/_footer.scss

@@ -1,3 +1,7 @@
 #footer {
-	margin-top: auto;
+	display: grid;
+	place-items: center;
+	padding: 0.5rem;
+	background-color: $tertiary;
+	color: $primary;
 }

src/styles/layout/_info.scss

@@ -0,0 +1,45 @@
+#info {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: $secondary;
+	padding: 1rem;
+
+	.node-colors-info {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 3rem;
+
+		.node-info-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 0.5rem;
+
+			& > div {
+				height: 20px;
+				width: 20px;
+			}
+
+			#info-wall {
+				background-color: $wallNode;
+			}
+			#info-visited {
+				background-color: $visitedNode;
+			}
+			#info-unvisited {
+				background-color: $unvisitedNode;
+			}
+			#info-path {
+				background-color: $pathNode;
+			}
+			#info-start {
+				background-color: $startNode;
+			}
+			#info-end {
+				background-color: $endNode;
+			}
+		}
+	}
+}

src/styles/layout/_main.scss

@@ -1,3 +1,19 @@
 #main {
 	flex-grow: 1;
+	width: 100%;
+	display: grid;
+	place-items: center;
+
+	#grid {
+		display: grid;
+		place-items: center;
+
+		grid-template-columns: repeat(90, 1fr);
+
+		.grid-node {
+			border: 1px solid $grid-line-color;
+			height: 20px;
+			width: 20px;
+		}
+	}
 }

tsconfig.json

@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": 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": ["node_modules"]
+	"compilerOptions": {
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": 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": ["node_modules"]
 }