Skip to content

Commit d6baa9d

Browse files
https-samhttps-sam
committed
cleaning
1 parent ab99a38 commit d6baa9d

File tree

4 files changed

+278
-0
lines changed

4 files changed

+278
-0
lines changed

‎src/components/Algorithms/.Display.js.icloud‎

-158 Bytes
Binary file not shown.

‎src/components/Algorithms/.display.css.icloud‎

-159 Bytes
Binary file not shown.

‎src/components/Algorithms/Display.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React, {Component, useState, useRef} from 'react';
2+
import Board from '../BoardCanvas/Board';
3+
import Navigation from '../Page/partial/Navbar/Navigation';
4+
import './display.css';
5+
import {useBinaryTreeCreation} from './Maze/Generation/BinaryTreeCreation';
6+
import {Strategy} from '../Strategy/Strategy';
7+
8+
/*
9+
10+
This is the main display of the game/visual demonstration.
11+
It contains the board, board control interface, orbital(camera)/Input interface,
12+
the game control interface, and the navigation bar.
13+
14+
"The Mediator"
15+
or a psudo
16+
"Layers Pattern"
17+
18+
*/
19+
export default function Display() {
20+
const [layoutType, setLayout] = useState('standard');
21+
const [mazeType, setMazeType] = useState("_none_");
22+
const [selectedPoint, setSelectedPoint] = useState(null);
23+
const [selectedGoalPoint, setSelectedGoalPoint] = useState(null);
24+
const [selectedStartPoint, setSelectedStartPoint] = useState(null);
25+
// const board = new Array(10000).fill(0).map(
26+
const board = new Array(3844).fill(0).map(
27+
// (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({id, type, visited}));
28+
// (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({x, y} ({id, type, visited})));
29+
(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}));
30+
31+
const boardRef = useRef(); // Mutable(Persistant) board reference object.
32+
33+
const handleResetCamera = () => {
34+
boardRef.current.resetCamera();
35+
};
36+
const handleResetBoard = () => {
37+
boardRef.current.resetBoard();
38+
};
39+
const handleMazeGeneration = (Strategy) => {
40+
boardRef.current.generateMaze(Strategy);
41+
};
42+
43+
44+
return (
45+
<>
46+
<Navigation/>
47+
<div className = "display-container">
48+
49+
<Board
50+
ref = {boardRef}
51+
board = {board}
52+
layoutType = {layoutType}
53+
mazeType = {mazeType}
54+
selectedPoint = {selectedPoint}
55+
onSelectPoint = {setSelectedPoint}
56+
/>
57+
<div className = "point-desc">
58+
{selectedPoint && (
59+
<p>Cell:
60+
#<span className = "point-select">{selectedPoint.id}</span>
61+
</p>
62+
)}
63+
</div>
64+
65+
<div className = "control-group-one">
66+
<h2 className = "control-header">Display <br/> Strategy</h2>
67+
<button
68+
onClick = {() => setLayout('standard')}
69+
className = {layoutType === 'standard' ? 'active' : undefined}
70+
>
71+
Standard Grid
72+
</button>
73+
{/* <button */}
74+
{/* onClick = {() => setLayout('circular')} */}
75+
{/* className = {layoutType === 'circular' ? 'active' : undefined} */}
76+
{/* > */}
77+
{/* Circular */}
78+
{/* </button> */}
79+
80+
<button className = "reset-button" onClick = {handleResetCamera}>
81+
View Reset
82+
</button>
83+
</div>
84+
85+
<div className = "control-group-two">
86+
<h2 className = "control-header">Generate Maze</h2>
87+
<div className = "maze-toggle-group" >
88+
<button
89+
onClick = {() => {
90+
if (mazeType === '_none_') {
91+
setMazeType('_BinaryTree_');
92+
}
93+
}}
94+
className = {`maze-toggle ${mazeType !== '_none_' ? 'active' : undefined}`}
95+
>
96+
ON
97+
</button>
98+
99+
<button
100+
onClick = {() => setMazeType('_none_')}
101+
className = {`maze-toggle ${mazeType === '_none_' ? 'active' : undefined}`}
102+
>
103+
OFF
104+
</button>
105+
106+
</div>
107+
<button
108+
onClick = {() => setMazeType('_BinaryTree_')}
109+
className = {mazeType === '_BinaryTree_' ? 'active' : undefined}
110+
>
111+
Binary Tree
112+
</button>
113+
<button
114+
onClick = {() => setMazeType('_GrowingTree_')}
115+
className = {mazeType === '_GrowingTree_' ? 'active' : undefined}
116+
>
117+
Growing Tree
118+
</button>
119+
<button
120+
onClick = {() => setMazeType('_BFS_')}
121+
className = {mazeType === '_BFS_' ? 'active' : undefined}
122+
>
123+
Breath First Search
124+
</button>
125+
<button className = "reset-button" onClick = {handleResetBoard}>
126+
Board Reset
127+
</button>
128+
</div>
129+
</div>
130+
</>
131+
);
132+
}

‎src/components/Algorithms/display.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
.display-container {
3+
position: absolute;
4+
background-color: #afa8a8;
5+
/*// Test*/
6+
/*background-color: white;*/
7+
z-index: -50;
8+
top: 60px;
9+
left: 0;
10+
right: 0;
11+
bottom: 0;
12+
}
13+
14+
.control-group-one, .control-group-two {
15+
position: absolute;
16+
z-index: 10;
17+
margin: auto;
18+
background: rgba(114, 108, 108, 0.9);
19+
padding: 0 10px 10px 10px;
20+
color: #fff;
21+
width: fit-content;
22+
block-size: fit-content;
23+
width: -moz-fit-content;
24+
}
25+
26+
.control-group-one {
27+
top: 50px;
28+
padding-left: 10px;
29+
}
30+
31+
.control-group-two {
32+
bottom: 16px;
33+
padding-right: 10px;
34+
}
35+
36+
37+
.control-header {
38+
text-align: center;
39+
font-size: 16px;
40+
font-weight: bold;
41+
padding-top: 5px;
42+
padding-bottom: 10px;
43+
margin-top: 0;
44+
}
45+
46+
.point-select {
47+
color: #2dcf05;
48+
font-weight: bold;
49+
}
50+
51+
.point-desc {
52+
align-content: center;
53+
z-index: 1;
54+
font-size: 16px;
55+
position: absolute;
56+
text-align: center;
57+
margin-top: 5px;
58+
color: white;
59+
bottom: 0;
60+
width: 100%;
61+
}
62+
63+
.control-group-one > button:hover {
64+
background-color: #111;
65+
color: #fff;
66+
}
67+
68+
.control-group-one > button {
69+
width: 100%;
70+
height: fit-content;
71+
display: block;
72+
padding: 5px;
73+
background: #222;
74+
color: #ccc;
75+
border: none;
76+
margin: 2px;
77+
text-transform: uppercase;
78+
letter-spacing: 1px;
79+
cursor: pointer;
80+
font-size: 10px;
81+
82+
}
83+
84+
.control-group-one > button.active {
85+
font-weight: bold;
86+
background-color: #333;
87+
color: #ff0;
88+
}
89+
90+
.control-group-two > button:hover {
91+
background-color: #111;
92+
color: #fff;
93+
}
94+
95+
.control-group-two > button {
96+
width: 100%;
97+
height: fit-content;
98+
display: block;
99+
padding: 5px;
100+
background: #222;
101+
color: #ccc;
102+
border: none;
103+
margin: 2px;
104+
text-transform: uppercase;
105+
letter-spacing: 1px;
106+
cursor: pointer;
107+
font-size: 10px;
108+
}
109+
110+
.maze-toggle-group {
111+
width: 100%;
112+
display: flex;
113+
justify-content: center;
114+
}
115+
116+
.maze-toggle {
117+
width: 30%;
118+
height: fit-content;
119+
text-align: center;
120+
background: #222;
121+
color: #ccc;
122+
cursor: pointer;
123+
border: none;
124+
padding: 1px;
125+
margin: 2px;
126+
}
127+
128+
.maze-toggle.active {
129+
background-color: #ff003b;
130+
color: #222;
131+
}
132+
133+
134+
.control-group-two > button.active {
135+
background-color: #333;
136+
color: #ff0;
137+
}
138+
139+
.selected-point {
140+
font-size: 0.85em;
141+
margin-top: 16px;
142+
}
143+
144+
.reset-button {
145+
padding-bottom: 5px;
146+
}

0 commit comments

Comments
 (0)