Skip to content

Commit efb5ff7

Browse files
mime9599mime9599
committed
broken
1 parent 044b177 commit efb5ff7

File tree

3 files changed

+30
-109
lines changed

3 files changed

+30
-109
lines changed

‎src/components/Algorithms/Maze/Generation/BinaryTreeCreation.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ export function BinaryTreeCreation(board) {
3838
for (var x = 0; x < numPoints; x++) {
3939
let node = board[x];
4040

41+
node.x = board[x].x = Math.floor(node.x);
42+
node.y = board[x].y = Math.floor(node.y);
43+
node.z = 0;
4144

4245
if (!node.visited) {
4346
node.type = '_wall_';

‎src/components/BoardCanvas/Cells.js‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,7 @@ function getColor(type) {
5555
function updateInstancedMeshMatrices({mesh, board}) {
5656
if (!mesh) {
5757
return;
58-
5958
}
60-
6159
// transform mesh to world space
6260
for (let i = 0; i < board.length; ++i) {
6361
const {x, y, z} = board[i];
@@ -68,41 +66,26 @@ function updateInstancedMeshMatrices({mesh, board}) {
6866
mesh.setMatrixAt(i, tempOBJ.matrix);
6967
}
7068
mesh.instanceMatrix.needsUpdate = true;
69+
}
70+
71+
function updateInstancedMeshColors({mesh, board}) {
7172

7273
}
7374

7475

76+
7577
const tempCOLOR = new THREE.Color();
7678

7779
const usePointColorsHook = ({board, mazeType}) => {
80+
console.log('usePointColorsHook');
7881
const numPoints = board.length;
7982
const colorAttrib = useRef();
8083
const colorArray = useMemo(() => new Float32Array(numPoints * 3), [
8184
numPoints,
8285
]);
8386
useEffect(() => {
8487
for (let i = 0; i < board.length; ++i) {
85-
switch (board[i].type) {
86-
case '_wall_':
87-
tempCOLOR.set(WALL_COLOR);
88-
break;
89-
case '_path_':
90-
tempCOLOR.set(PATH_COLOR);
91-
break;
92-
case '_goal_':
93-
tempCOLOR.set(GOAL_COLOR);
94-
break;
95-
case '_start_':
96-
tempCOLOR.set(START_COLOR);
97-
break;
98-
case '_test_':
99-
tempCOLOR.set(TEST_COLOR);
100-
break;
101-
case '_floor_':
102-
default:
103-
tempCOLOR.set(FLOOR_COLOR);
104-
break;
105-
}
88+
tempCOLOR.set(getColor(board[i].type));
10689
tempCOLOR.toArray(colorArray, i * 3);
10790
}
10891
colorAttrib.current.needsUpdate = true;
@@ -164,6 +147,7 @@ const _mouseClickHook = ({board, selectedPoint, onSelectPoint/* , useDrag */})
164147

165148
const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*, useDrag */}) => {
166149
const meshRef = useRef();
150+
167151
const mazeRef = useRef(mazeType);
168152
// const boardRef = useRef(board);
169153
const numPoints = board.length;
@@ -175,23 +159,26 @@ const Cells = ({board, layoutType, mazeType, selectedPoint, onSelectPoint /*, u
175159
board[1].type = '_goal_';
176160

177161

178-
useAnimationHook({board, layoutType, mazeType});
162+
useAnimationHook({board, layoutType});
179163

180164
useGenerateMazeHook({board, mazeType});
181165

182-
useEffect(() => {
183-
console.log('Board updated');
184-
updateInstancedMeshMatrices({mesh: meshRef.current, board});
185-
}, [layoutType]);
186-
187166
const {getClickTarget, setDownPointerCoord} = _mouseClickHook({
188167
board,
189168
selectedPoint,
190169
onSelectPoint,
191170
/* useDrag */
192171
});
193172

194-
const {colorAttrib, colorArray} = usePointColorsHook({board, mazeType});
173+
const {colorAttrib, colorArray} = usePointColorsHook({board});
174+
175+
useEffect(() => {
176+
console.log('Board updated');
177+
updateInstancedMeshMatrices({mesh: meshRef.current, board});
178+
});
179+
180+
181+
195182

196183

197184

‎src/components/BoardCanvas/Layouts.js‎

Lines changed: 10 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ import {BinaryTreeCreation} from '../Algorithms/Maze/Generatio
1717
* Board type selector hook.
1818
*
1919
*/
20-
export const useLayoutHook = ({board, layoutType = 'standard'}) => {
20+
export const useLayoutHook = ({board, layoutType}) => {
2121
console.log('useLayoutHook used.');
2222

2323
useEffect(() => {
24-
console.log('useLayoutHook MEMO E1 used.');
24+
console.log('useLayoutHook used.');
2525

2626
// if === "none") {
2727
switch (layoutType) {
@@ -54,90 +54,19 @@ export const useLayoutHook = ({board, layoutType = 'standard'}) => {
5454
// return;
5555
// }
5656
// }
57-
// }, [board]);
58-
// };
59-
60-
61-
/*
62-
This function component is used to animate the grid layout by
63-
altering the points(Cells)' position on the board.
64-
65-
"Deep Linking" is used to animate the grid layout.
66-
*/
67-
// function useTargetLayoutHook({board, layoutType}) {
68-
//
69-
// useEffect(() => {
70-
// for (let i = 0; i < board.length; ++i) {
71-
// board[i].sourceX = board[i].x || 0;
72-
// board[i].sourceY = board[i].y || 0;
73-
// board[i].sourceZ = board[i].z || 0;
74-
// board[i].sourceType = board[i].type;
75-
// }
76-
// }, [board, layoutType]);
77-
//
78-
// useLayoutHook({board, layoutType});
79-
80-
// useEffect(() => {
81-
// for (let i = 0; i < board.length; ++i) {
82-
// board[i].targetX = board[i].x;
83-
// board[i].targetY = board[i].y;
84-
// board[i].targetZ = board[i].z;
85-
// board[i].targetType = board[i].type;
86-
// }
87-
// }, [board, layoutType]);
88-
//
89-
90-
// interpolateSourceTarget({board});
91-
// }
92-
93-
94-
/*
95-
function useMazeTargetHook({board}) {
96-
useEffect(() => {
97-
for (let i = 0; i < board.length; ++i) {
98-
board[i].sourceX = board[i].x || 0;
99-
board[i].sourceY = board[i].y || 0;
100-
board[i].sourceZ = board[i].z || 0;
101-
board[i].sourceType = board[i].type || '_floor_';
102-
}
103-
}, [board]);
104-
105-
useMazeTypeHook({board});
106-
107-
useEffect(() => {
108-
for (let i = 0; i < board.length; ++i) {
109-
board[i].targetX = board[i].x;
110-
board[i].targetY = board[i].y;
111-
board[i].targetZ = board[i].z;
112-
board[i].targetType = board[i].type;
113-
}
114-
}, [board]);
115-
}
116-
*/
117-
118-
119-
// function interpolateSourceTarget(board) {
120-
// for (let i = 0; i < board.length; ++i) {
121-
// board[i].x = board[i].targetX;
122-
// board[i].y = board[i].targetY;
123-
// board[i].z = board[i].targetZ;
124-
// board[i].type = board[i].targetType;
125-
// }
126-
// }
127-
128-
129-
130-
13157

13258
export function useAnimationHook({board, layoutType}) {
133-
59+
console.log('useAnimationHook used.');
13460
useLayoutHook({board, layoutType}); // do the actual animation when layoutType changes
61+
console.log('useAnimationHook ended.');
62+
13563
}
13664

13765

13866
export function useGenerateMazeHook({board, mazeType}) {
67+
console.log('generatedMaze used.');
68+
13969
useEffect(() => {
140-
console.log('generatedMaze used.');
14170
switch (mazeType) {
14271
case 'binaryTree':
14372
BinaryTreeCreation(board);
@@ -153,6 +82,8 @@ export function useGenerateMazeHook({board, mazeType}) {
15382
return;
15483
}
15584
}
85+
console.log('generatedMaze ended.');
86+
15687
}, [board, mazeType]);
15788
}
15889

@@ -171,7 +102,7 @@ export function useGenerateMazeHook({board, mazeType}) {
171102
node.x = col * 1.05;
172103
node.y = row * 1.05;
173104
node.z = 0;
174-
node.type = board[i].type || '_wall_';
105+
// node.type = board[i].type || '_wall_';
175106

176107
}
177108
}

0 commit comments

Comments
 (0)