@@ -37,7 +37,11 @@ export function BinaryTreeCreation(board) {
   }
   for (var x = 0; x < numPoints; x++) {
     let node = board[x];
+    // const col  = (i % numCols) - numCols / 2;
+    // const row  = Math.floor(i / numCols) - numCols / 2;
 
+    // node.x = col * 1.05;
+    // node.y = row * 1.05;
     node.x = board[x].x = Math.floor(node.x);
     node.y = board[x].y = Math.floor(node.y);
     node.z = 0;
 
@@ -63,7 +63,7 @@ function updateInstancedMeshMatrices({mesh, board}) {
     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;
 }
@@ -175,7 +175,7 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*,  u
   useEffect(() => {
     console.log('Board updated');
     updateInstancedMeshMatrices({mesh: meshRef.current, board});
-  });
+  }, [layoutType, mazeType]);
 
 
 
 
@@ -37,24 +37,6 @@ export const useLayoutHook = ({board, layoutType}) => {
 };
 
 
-// export const useMazeTypeHook = ({board}) => {
-//   useEffect(() => {
-//     switch {
-//       case 'binaryTree':
-//         BinaryTreeCreation(board);
-//         break;
-//       case '_RecursiveBacktracker_':
-//
-//         break;
-//       case '_RecursiveDivision_':
-//
-//         break;
-//       case 'none':
-//       default: {
-//         return;
-//       }
-//     }
-
 export function useAnimationHook({board, layoutType}) {
   console.log('useAnimationHook used.');
   useLayoutHook({board, layoutType});  // do the actual animation when layoutType changes
@@ -82,9 +64,10 @@ export function useGenerateMazeHook({board, mazeType}) {
         return;
       }
     }
-    console.log('generatedMaze ended.');
 
   }, [board, mazeType]);
+  console.log('generatedMaze ended.');
+
 }
 
 
@@ -123,28 +106,6 @@ export function useGenerateMazeHook({board, mazeType}) {
   };
 
 
-  /* function BinaryTreeMaze(board) {
-   const numPoints = board.length;
-   const numCols   = Math.ceil(Math.sqrt(numPoints));
-
-   for (let i = 0; i < numPoints; ++i) {
-   const node = board[i];
-   let direction = Math.random() * 4;
-
-   let xcord  = board[i].x + directions[direction].x;
-   let ycord  = board[i].y + directions[direction].y;
-   const col   = (i % numCols) - numCols / 2;
-   const row   = Math.floor(i / numCols) - numCols / 2;
-
-   node.x = col;
-   node.y = row;
-   node.z = 0;
-   node.type = board[i].type;
-   }
-   } */
-
-
-
 
 
   function circularLayout(board) {
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ function updateInstancedMeshMatrices({mesh, board}) {`
`63`	`63`	`tempOBJ.rotation.set(0.5 * Math.PI, 0, 0); // Look at the origin`
`64`	`64`	`tempCOLOR.set(getColor(board[i].type));`
`65`	`65`	`tempOBJ.updateMatrix();`
`66`		`- mesh.setMatrixAt(i, tempOBJ.matrix);`
	`66`	`+ mesh.setMatrixAt(i, tempOBJ.matrix, tempCOLOR);`
`67`	`67`	`}`
`68`	`68`	`mesh.instanceMatrix.needsUpdate = true;`
`69`	`69`	`}`
`@@ -175,7 +175,7 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*, u`
`175`	`175`	`useEffect(() => {`
`176`	`176`	`console.log('Board updated');`
`177`	`177`	`updateInstancedMeshMatrices({mesh: meshRef.current, board});`
`178`		`- });`
	`178`	`+ }, [layoutType, mazeType]);`
`179`	`179`
`180`	`180`
`181`	`181`