Skip to content

Commit a6b64cd

Browse files
uturetuturet
committed
Add responsive changes on resize
1 parent ae13df3 commit a6b64cd

File tree

4 files changed

+56
-33
lines changed

4 files changed

+56
-33
lines changed

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14-
<title>React App</title>
14+
<title>Algorithm Visualiser</title>
1515
</head>
1616
<body>
1717
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/Algorithm.tsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@ export class BFSAlgorithm extends Algorithm {
5353
}
5454

5555
nextStep(count: number): boolean {
56-
let index: number|undefined = this.nextPoints.keys().next().value;
56+
let index: number|undefined = this.nextPoints.values().next().value;
5757
if (index === undefined) return true;
5858
let point = this.indexToPoint(index);
5959
if (point[0] === this.endPoint[0] && point[1] === this.endPoint[1]) return true;
6060
this.nextPoints.delete(index);
6161
while (this.usedCells.has(index) || !this.usePoint(point)) {
62-
index = this.nextPoints.keys().next().value;
62+
index = this.nextPoints.values().next().value;
6363
if (index === undefined) return true;
6464
point = this.indexToPoint(index);
6565
if (point[0] === this.endPoint[0] && point[1] === this.endPoint[1]) return true;
@@ -121,24 +121,26 @@ export class AstarAlgorithm extends Algorithm {
121121
}
122122

123123
nextStep(count: number) {
124-
if (this.openList.size === 0) return true;
125-
if (this.curIndex === 0) {
126-
this.curNode = this.openList.values().next().value;
127-
this.openList.forEach((n) => {
128-
if (n.f < this.curNode.f) {
129-
this.curNode = n;
130-
}
131-
});
132-
this.openList.delete(this.curNode.index);
133-
this.closedList.set(this.curNode.index, this.curNode);
124+
while (true) {
125+
if (this.openList.size === 0) return true;
126+
if (this.curIndex === 0) {
127+
this.curNode = this.openList.values().next().value;
128+
this.openList.forEach((n) => {
129+
if (n.f < this.curNode.f) {
130+
this.curNode = n;
131+
}
132+
});
133+
this.openList.delete(this.curNode.index);
134+
this.closedList.set(this.curNode.index, this.curNode);
135+
}
136+
if (this.curNode.index === this.endNode.index) return true;
137+
if (this.getNewNodes()) break;
134138
}
135-
if (this.curNode.index === this.endNode.index) return true;
136139

137-
this.getNewNodes();
138140
return false;
139141
}
140142

141-
getNewNodes(): void {
143+
getNewNodes(): boolean {
142144
for (let i=this.curIndex; i<8; i++) {
143145
const p: Point = [this.curNode.point[0]+this.around[this.curIndex][0], this.curNode.point[1]+this.around[this.curIndex][1]];
144146
const index = this.pointToIndex(p);
@@ -149,7 +151,7 @@ export class AstarAlgorithm extends Algorithm {
149151
n.f = n.g + n.h;
150152
if (index === this.endNode.index) {
151153
this.openList.clear();
152-
return;
154+
return false;
153155
}
154156
if (this.closedList.has(n.index)) {
155157
if ((this.closedList.get(n.index) as Node).f > n.f) this.closedList.set(n.index, n);
@@ -158,10 +160,11 @@ export class AstarAlgorithm extends Algorithm {
158160
} else {
159161
this.openList.set(n.index, n);
160162
this.curIndex = (this.curIndex+1) % 8;
161-
break;
163+
return true;
162164
};
163165
}
164166
this.curIndex = (this.curIndex+1) % 8;
165167
}
168+
return false;
166169
}
167170
}

‎src/App.tsx

+34-14
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {AlgorithInterface, BFSAlgorithm, AstarAlgorithm, Point} from './Algorith
33

44
type CellType = 'start'|'end'|'disabled'|'used'|'default'
55

6-
const TIMEOUT = 30;
6+
const TIMEOUT = 50;
77
const CELLSIZE = 48;
88
const colorType: { disabled: string; start: string; end: string; used: string; default: string; } = {
99
disabled: 'bg-slate-400',
@@ -16,6 +16,12 @@ const algorithms = [
1616
BFSAlgorithm,
1717
AstarAlgorithm,
1818
];
19+
const calculateWidthHeight = (e: HTMLDivElement): [number, number] => {
20+
let width = (e.offsetWidth-24) / CELLSIZE;
21+
width = width%10 === 0? width-1: Math.floor(width);
22+
const height = Math.floor(e.offsetHeight / CELLSIZE);
23+
return [width, height];
24+
};
1925
const cellTypes: CellType[] = ['start', 'end', 'disabled', 'used', 'default'];
2026

2127
function App() {
@@ -31,6 +37,7 @@ function App() {
3137
const [endPoint, setEndPoint] = useState<number>(1);
3238
const [disabledCells, setDisabledCells] = useState<Set<number>>(new Set());
3339
const [usedCells, setUsedCells] = useState<Set<number>>(new Set());
40+
const windowRef = useRef<HTMLDivElement>(null);
3441
const fieldRef = useRef<HTMLDivElement>(null);
3542
const selectRef = useRef<HTMLSelectElement>(null);
3643

@@ -107,16 +114,6 @@ function App() {
107114
setDisabledCells(new Set());
108115
};
109116

110-
useEffect(() => {
111-
if (!fieldRef.current) return;
112-
let width = fieldRef.current.offsetWidth / CELLSIZE;
113-
width = width%10 === 0? width-1: Math.floor(width);
114-
const height = Math.floor(fieldRef.current.offsetHeight / CELLSIZE);
115-
setWidth(width);
116-
setHeight(height);
117-
setAmount(width*height);
118-
}, [fieldRef]);
119-
120117
useEffect(() => {
121118
if (!fill) return;
122119
const mouseEvent = (event: MouseEvent) => {
@@ -133,16 +130,39 @@ function App() {
133130
useEffect(() => {
134131
const mouseDown = (event: MouseEvent) => setFill(true);
135132
const mouseUp = (event: MouseEvent) => setFill(false);
133+
const resize = (event: Event) => {
134+
if (!windowRef.current || !fieldRef.current) return;
135+
windowRef.current.style.height = `${window.innerHeight}px`;
136+
setStarted(false);
137+
setCount(1);
138+
setUsedCells(new Set());
139+
setDisabledCells(new Set());
140+
const [width, height] = calculateWidthHeight(fieldRef.current);
141+
setWidth(width);
142+
setHeight(height);
143+
setAmount(width*height);
144+
};
136145

146+
addEventListener('resize', resize);
137147
addEventListener('mousedown', mouseDown);
138148
addEventListener('mouseup', mouseUp);
139149

140150
return () => {
151+
removeEventListener('resize', resize);
141152
removeEventListener('mousedown', mouseDown);
142153
removeEventListener('mouseup', mouseUp);
143154
};
144155
});
145156

157+
useEffect(() => {
158+
if (!windowRef.current || !fieldRef.current) return;
159+
windowRef.current.style.height = `${window.innerHeight}px`;
160+
const [width, height] = calculateWidthHeight(fieldRef.current);
161+
setWidth(width);
162+
setHeight(height);
163+
setAmount(width*height);
164+
}, [windowRef, fieldRef]);
165+
146166
useEffect(() => {
147167
if (!started || !algo) return;
148168
const timeout = setTimeout(() => {
@@ -156,10 +176,10 @@ function App() {
156176
}, [count, started, algo]);
157177

158178
return (
159-
<div className='w-screen h-screen flex flex-col overflow-hidden'>
179+
<div ref={windowRef} className='w-screen flex flex-col overflow-hidden'>
160180
<div className='h=[30px] flex flex-row items-center justify-center'>
161181
<div className='h-10 m-1 px-3 text-white font-bold flex items-center'>
162-
<span className='h-10 bg-cyan-400 p-2'>Algorithm</span>
182+
<span className='h-10 bg-cyan-400 p-2 hidden md:block'>Algorithm</span>
163183
<select ref={selectRef} className='h-10 bg-cyan-400' name="algorithms" id="algorithms">
164184
{algorithms.map((a, i) => <option key={a.title} value={i}>{a.title}</option>)}
165185
</select>
@@ -186,7 +206,7 @@ function App() {
186206
<span>{count}</span>
187207
</div>
188208
</div>
189-
<div ref={fieldRef} className='flex-grow h-full flex flex-row flex-wrap p-3'>
209+
<div ref={fieldRef} className='flex-grow h-full flex justify-center flex-row flex-wrap p-3'>
190210
{cells}
191211
</div>
192212
</div>

‎src/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44

55
.pointer {
66
cursor: pointer;
7-
}
7+
}

0 commit comments

Comments
 (0)