Board maze switch functioning correctly, but maze not correctly updating board. Might be adding cells.

mime9599 · mime9599 · commit 8474eca764bb · 2022-07-17T20:48:32.000-06:00
diff --git a/src/components/Algorithms/Display.js b/src/components/Algorithms/Display.js
@@ -18,15 +18,15 @@ import {Strategy}                           from '../Strategy/Strategy';
  */
 export default function Display() {
   const [layoutType, setLayout]                     = useState('standard');
-  const [mazeType, setMazeType]                    = useState("none");
+  const [mazeType, setMazeType]                    = useState("_none_");
   const [selectedPoint, setSelectedPoint]           = useState(null);
   const [selectedGoalPoint, setSelectedGoalPoint]   = useState(null);
   const [selectedStartPoint, setSelectedStartPoint] = useState(null);
   // const board                                       = new Array(10000).fill(0).map(
   const board                                       = new Array(3844).fill(0).map(
-      // (i, id, type: String = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({id, type, visited}));
-      // (i, id, type: String = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({x, y} ({id, type, visited})));
-      (i, id, type: String = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({x, y}));
+      // (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({id, type, visited}));
+      // (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({x, y} ({id, type, visited})));
+      (i, id: number, type: String = '_wall_', sourceType: String = '_wall_', targetType: String = '_wall_', visited: Boolean = false, x: number, y: number ) => ({x, y, id, type, visited, sourceType, targetType}));
 
   const boardRef = useRef(); // Mutable(Persistant) board reference object.
 
@@ -87,18 +87,18 @@ export default function Display() {
             <div className = "maze-toggle-group" >
               <button
                   onClick = {() => {
-                    if (mazeType === 'none') {
+                    if (mazeType === '_none_') {
                       setMazeType('_BinaryTree_');
                     }
                   }}
-                  className = {`maze-toggle ${mazeType !== 'none' ? 'active' : undefined}`}
+                  className = {`maze-toggle ${mazeType !== '_none_' ? 'active' : undefined}`}
               >
                 ON
               </button>
 
             <button
-                onClick = {() => setMazeType('none')}
-                className = {`maze-toggle ${mazeType === 'none' ? 'active' : undefined}`}
+                onClick = {() => setMazeType('_none_')}
+                className = {`maze-toggle ${mazeType === '_none_' ? 'active' : undefined}`}
             >
               OFF
             </button>
diff --git a/src/components/Algorithms/Maze/Generation/BinaryTreeCreation.js b/src/components/Algorithms/Maze/Generation/BinaryTreeCreation.js
@@ -4,16 +4,16 @@ import {_FindCellVisitState, _FindCellTypeState, _FindCell} from './Tools';
 
 
 
-export function BinaryTreeCreation(board) {
-  for (var i = 0; i < board.length; i++) {
+export function BinaryTreeCreation({board}) {
+  for (var i = 0; i < board.i.length; i++) {
     let direction = Math.random() * 4;
     // console.log(board[i]);
 
     // console.log(direction);
     // console.log(directions[direction].x);
     // console.log(board[i].x + directions[direction].x);
-    let xcord  = board[i].x + directions[direction].x;
-    let ycord  = board[i].y + directions[direction].y;
+    let xcord  = board[i].i.x + directions[direction].x;
+    let ycord  = board[i].i.y + directions[direction].y;
     const cell = board.find(item => Math.floor(item.x) === Math.floor(xcord) && Math.floor(item.y) === Math.floor(ycord));
     // console.log(cell);
 
diff --git a/src/components/Algorithms/Maze/Generation/Tools.js b/src/components/Algorithms/Maze/Generation/Tools.js
@@ -21,9 +21,11 @@ export const _FindCellTypeState = (board, x, y) => {
 
 export function _FindCell(board, x, y) {
   for (let i = 0; i < board.length; i++) {
-    console.log(Math.floor(board[i].x), Math.floor(x));
+    // console.log(board[i].x, x, board[i].y, y);
+
+    if (board[i].x === x && board[i].y === y) {
+      console.log(board[i].x, x, board[i].y, y);
 
-    if (Math.floor(board[i].x) === Math.floor(x) && Math.floor(board[i].y) === Math.floor(y)) {
       return board[i];
     }
   }
diff --git a/src/components/BoardCanvas/Cells.js b/src/components/BoardCanvas/Cells.js
@@ -52,14 +52,15 @@ function updateInstancedMeshMatrices({mesh, board}) {
     return;
 
   }
+
   // transform mesh to world space
   for (let i = 0; i < board.length; ++i) {
     const {x, y, z} = board[i];
     tempOBJ.position.set(x, y, z);
     tempOBJ.rotation.set(0.5 * Math.PI, 0, 0); // Look at the origin
+    tempCOLOR.set(getColor(board[i].type));
     tempOBJ.updateMatrix();
-    mesh.setMatrixAt(i, tempOBJ.matrix);
-
+    mesh.setMatrixAt(i, tempOBJ.matrix, tempCOLOR);
   }
   mesh.instanceMatrix.needsUpdate = true;
 
@@ -68,7 +69,7 @@ function updateInstancedMeshMatrices({mesh, board}) {
 
 const tempCOLOR = new THREE.Color();
 
-const usePointColorsHook = ({board, selectedPoint}) => {
+const usePointColorsHook = ({board}) => {
   const numPoints   = board.length;
   const colorAttrib = useRef();
   const colorArray  = useMemo(() => new Float32Array(numPoints * 3), [
@@ -100,7 +101,7 @@ const usePointColorsHook = ({board, selectedPoint}) => {
       tempCOLOR.toArray(colorArray, i * 3);
     }
     colorAttrib.current.needsUpdate = true;
-  }, [board, selectedPoint, colorArray]);
+  }, [board, colorArray]);
 
   return {colorAttrib, colorArray};
 };
@@ -139,6 +140,7 @@ const _mouseClickHook = ({board, selectedPoint, onSelectPoint/* , useDrag  */})
     }
 
     const point = board[instanceId];
+    console.log(board[instanceId]);
     console.log('Point clicked: ', point);
     // toggle the point
     if (point === selectedPoint) {
@@ -164,40 +166,6 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
   board[1].type   = '_goal_';
 
 
-  /*
-   * Update the mesh matrixes based on the board state
-   * with the goal of constructing a solvable maze.
-   */
-  // useEffect(() => {
-  //
-  // })
-
-
-  /*
-   * Recursive backtracking algorithm to generate a solvable maze.
-   */
-  const backtrack = (board, start, goal) => {
-    let current = start;
-    let path    = [];
-    while (current !== goal) {
-      path.push(current);
-      current = board[current.parent];
-    }
-    path.push(current);
-    return path;
-  };
-
-
-
-
-  const {generationInProgress} = useGeneratedMazeHook({
-    board,
-    mazeType,
-    onFrame: () => {
-      updateInstancedMeshMatrices({mesh: meshRef.current, board});
-    },
-  });
-
   const {animationInProgress} = useAnimationHook({
     board,
     layoutType,
@@ -209,7 +177,7 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
 
   useEffect(() => {
     updateInstancedMeshMatrices({mesh: meshRef.current, board});
-  }, [board, layoutType]);
+  }, [board, layoutType, mazeType]);
 
   const {getClickTarget, setDownPointerCoord} = _mouseClickHook({
     board,
@@ -219,7 +187,7 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
   });
 
 
-  const {colorAttrib, colorArray} = usePointColorsHook({board, selectedPoint});
+  const {colorAttrib, colorArray} = usePointColorsHook({board});
 
 
   return (
@@ -231,14 +199,14 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
             onClick = {getClickTarget}
             onPointerDown = {setDownPointerCoord}
         >
-          <boxBufferGeometry attach = "geometry" args = {[1, 0.5, 1, 18]}>
+          <boxBufferGeometry attach = "geometry" args = {[0.6, 0.3, 0.6, 18]}>
             <instancedBufferAttribute
                 ref = {colorAttrib}
                 attachObject = {['attributes', 'color']}
                 args = {[colorArray, 3]}
             />
           </boxBufferGeometry>
-          <boxBufferGeometry
+{/*           <boxBufferGeometry
               attach = "geometry"
               args = {[.9, .4, 0.9, 18]}
               color = "black"
@@ -247,13 +215,15 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
                 attachObject = {['attributes', 'color']}
                 args = {[colorArray, 3]}
             />
-          </boxBufferGeometry>
+          </boxBufferGeometry> */}
           <meshStandardMaterial
               attach = "material"
               vertexColors = {THREE.VertexColors}
           />
         </instancedMesh>
-
+        {/* {generationInProgress && <a.group */}
+        {/*     position = {generationInProgress.interpolate((x, y, z) => [x, y, z])} */}
+        {/* />} */}
         {selectedPoint && (
             <a.group
                 position = {animationInProgress.interpolate(() => [
diff --git a/src/components/BoardCanvas/layouts.js b/src/components/BoardCanvas/layouts.js

Original file line number	Diff line number	Diff line change
`@@ -21,9 +21,11 @@ export const _FindCellTypeState = (board, x, y) => {`
`21`	`21`
`22`	`22`	`export function _FindCell(board, x, y) {`
`23`	`23`	`for (let i = 0; i < board.length; i++) {`
`24`		`- console.log(Math.floor(board[i].x), Math.floor(x));`
	`24`	`+ // console.log(board[i].x, x, board[i].y, y);`
	`25`	`+`
	`26`	`+ if (board[i].x === x && board[i].y === y) {`
	`27`	`+ console.log(board[i].x, x, board[i].y, y);`
`25`	`28`
`26`		`- if (Math.floor(board[i].x) === Math.floor(x) && Math.floor(board[i].y) === Math.floor(y)) {`
`27`	`29`	`return board[i];`
`28`	`30`	`}`
`29`	`31`	`}`