Merge pull request #7 from philfreshman/feature-maze-grid

Feature maze grid

.prettierrc

@@ -1,4 +1,6 @@
 {
   "printWidth": 180,
-  "semi": false
+  "semi": false,
+  "plugins": ["prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+    "tailwindFunctions": ["tw", "clsx"]
 }

package.json

@@ -16,20 +16,22 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "next": "14.1.4",
-    "next-themes": "^0.3.0",
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0"
+    "prettier-plugin-organize-attributes": "^1.0.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
   }
 }

src/app/globals.css

@@ -93,4 +93,11 @@
   }
 
 
+.checked{
+  background-color: gray;
+}
+
+.wall{
+  background-color: black;
+}
 

src/app/page.tsx

@@ -1,11 +1,12 @@
 import Board from "@/components/board"
+import React, { memo } from "react"
+
+const MemoizedBoard = memo(Board) // Memoize the Board component
 
 export default function Home() {
   return (
-    <div className="w-full h-full flex justify-center items-center p-7 min-w-[900px] ">
-      <div className="w-full h-full overflow-scroll ">
-        <Board />
-      </div>
+    <div className="flex h-full w-full items-center justify-center overflow-scroll p-7">
+      <MemoizedBoard />
     </div>
   )
 }

src/components/board.tsx

@@ -1,3 +1,24 @@
+"use client"
+
+import Box from "@/components/ui/box"
+import { useBoxes } from "@/lib/maze/maze"
+
 export default function Board() {
-  return <div>Board</div>
+  const { matrix, toggleBox } = useBoxes()
+
+  return (
+    <div className={"flex rotate-90 transform justify-center md:rotate-0"}>
+      <table>
+        <tbody>
+          {matrix.map((row, i) => (
+            <tr key={i}>
+              {row.map((value, j) => (
+                <Box id={`B${i}:${j}`} key={j} isToggled={value} toggleBox={() => toggleBox(i, j)} />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
 }

src/components/nav-menu.tsx

@@ -1,5 +1,5 @@
-import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar"
 import { Button } from "@/components/ui/button"
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar"
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 import { useState } from "react"
 import { useTheme } from "next-themes"
@@ -18,14 +18,14 @@ export default function NavMenu() {
       <MenubarMenu>
         <MenubarTrigger>Algorithm</MenubarTrigger>
         <MenubarContent>
-          <MenubarCheckboxItem checked>Algorithm A</MenubarCheckboxItem>
-          <MenubarCheckboxItem>Algorithm B</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Depth First Search</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Breath First Search</MenubarCheckboxItem>
           <MenubarCheckboxItem>Algorithm C</MenubarCheckboxItem>
         </MenubarContent>
       </MenubarMenu>
 
       <MenubarMenu>
-        <MenubarTrigger>Maze</MenubarTrigger>
+        <MenubarTrigger>Grid</MenubarTrigger>
         <MenubarContent>
           <MenubarCheckboxItem>Random</MenubarCheckboxItem>
           <MenubarCheckboxItem checked>Lines</MenubarCheckboxItem>
@@ -57,8 +57,8 @@ export default function NavMenu() {
           <MenubarCheckboxItem disabled>System</MenubarCheckboxItem>
         </MenubarContent>
       </MenubarMenu>
-
-      <Button variant={"ghost"}>Stop</Button>
+            
+      <Button variant={"ghost"}>Reset</Button>
       <Button variant={"ghost"}>Run</Button>
     </Menubar>
   )

src/components/ui/box.tsx

@@ -0,0 +1,23 @@
+import { memo } from "react"
+
+interface BoxProps {
+  id: string
+  isToggled: boolean
+  toggleBox: () => void
+}
+
+const Box = memo<BoxProps>(({ id, isToggled, toggleBox }) => {
+  const handleMouseDown = () => toggleBox()
+  const handleMouseOver = (e: any) => e.buttons === 1 && toggleBox()
+
+  return (
+    <td
+      id={id}
+      className={`md-min-w-[22px] h-[18px] min-w-[18px] border border-sky-500 hover:cursor-pointer sm:h-[20px] sm:min-w-[20px] md:h-[22px] lg:h-[24px] lg:min-w-[24px] ${isToggled ? "bg-gray-600" : "bg-white"}`}
+      onMouseDown={handleMouseDown}
+      onMouseOver={handleMouseOver}
+    />
+  )
+})
+
+export default Box

src/lib/maze/maze.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+
+export function useBoxes() {
+  // config
+  const width = 40
+  const height = 30
+
+  // Initialize matrix as a two-dimensional array filled with zeros
+  const [matrix, setMatrix] = useState(() => {
+    return Array(height)
+      .fill(0)
+      .map(() => Array(width).fill(0))
+  })
+
+  // handlers
+  const toggleBox = (i: number, j: number) => {
+    let box = document.querySelector(`#B${i}\\:${j}`)
+    if (box && !box.classList.contains("wall")) {
+      box!.classList.toggle("checked")
+    }
+    setMatrix((prevMatrix) => {
+      const newMatrix = prevMatrix.map((row) => [...row])
+      newMatrix[i][j] = newMatrix[i][j] === 0 ? 1 : 0
+      return newMatrix
+    })
+  }
+
+  return { width, height, matrix, toggleBox }
+}