Skip to content

Commit 30bd36f

Browse files
author
Rory Sullivan
committed
More refactoring.
1 parent f92f7b6 commit 30bd36f

9 files changed

+443
-347
lines changed

‎grid/Grid.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import HexTile from './HexTile.js';
2+
3+
export default class Grid extends Array {
4+
constructor(rows, cols, hexSize) {
5+
super();
6+
7+
this.rows = rows;
8+
this.cols = cols;
9+
this.hexSize = hexSize;
10+
11+
for (let i = 0; i < this.rows; i += 1) {
12+
const gridRow = [];
13+
for (let j = 0; j < this.cols; j += 1) {
14+
gridRow.push(new HexTile([i, j], this.hexSize));
15+
}
16+
this.push(gridRow);
17+
}
18+
}
19+
}

‎grid/HexTile.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Object for storing information about our hexagons.
3+
*/
4+
export default class HexTile {
5+
constructor(
6+
gridPosition,
7+
hexSize,
8+
isWall = false,
9+
isStart = false,
10+
isEnd = false
11+
) {
12+
[this.row, this.col] = gridPosition;
13+
14+
[this.width, this.height] = hexSize;
15+
16+
this.isWall = isWall;
17+
this.isStart = isStart;
18+
this.isEnd = isEnd;
19+
20+
if (this.col % 2 === 0) {
21+
this.xPos = (this.col / 2) * (this.width * 3);
22+
this.yPos = this.height + this.row * (2 * this.height);
23+
} else {
24+
this.xPos = hexSize * (3 / 2) + ((this.col - 1) / 2) * (hexSize * 3);
25+
this.yPos = 2 * this.height + this.row * (2 * this.height);
26+
}
27+
}
28+
29+
get fill() {
30+
if (this.isStart) {
31+
return 'green';
32+
}
33+
if (this.isEnd) {
34+
return 'red';
35+
}
36+
if (this.isWall) {
37+
return 'black';
38+
}
39+
return 'white';
40+
}
41+
42+
reset() {
43+
this.isWall = false;
44+
this.isStart = false;
45+
this.isEnd = false;
46+
}
47+
}

‎index.html

+47-40
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="UTF-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title>Path Finding Visualiser</title>
87
<link rel="stylesheet" href="./style.css" />
98

10-
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
11-
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
12-
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
13-
14-
<script src="./main.js"></script>
15-
16-
</head>
17-
18-
<body onload="setup();">
9+
<link
10+
rel="apple-touch-icon"
11+
sizes="180x180"
12+
href="./icons/apple-touch-icon.png"
13+
/>
14+
<link
15+
rel="icon"
16+
type="image/png"
17+
sizes="32x32"
18+
href="./icons/favicon-32x32.png"
19+
/>
20+
<link
21+
rel="icon"
22+
type="image/png"
23+
sizes="16x16"
24+
href="./icons/favicon-16x16.png"
25+
/>
26+
</head>
27+
28+
<body>
1929
<div id="appContainer">
20-
<div id="header">
21-
<div id="instructionsContainer">
22-
<h2 id="instructions">Select start position</h2>
23-
</div>
24-
<div id="resetContainer">
25-
<button onclick="reset();">Reset</button>
26-
</div>
27-
<div class="buttonsContainer">
28-
<h3>Algorithms</h3>
29-
<button onclick="runAlgorithm('dijkstra');">
30-
Dijkstra
31-
</button>
32-
<button onclick="runAlgorithm('aStar');">A*</button>
33-
<button onclick="runAlgorithm('biasedAStar');">
34-
Biased A*
35-
</button>
36-
</div>
37-
38-
<div class="buttonsContainer">
39-
<h3>Mazes</h3>
40-
<button onclick="randomMaze();">Random maze</button>
41-
<button onclick="verticalMaze();">Vertical maze</button>
42-
<button onclick="horizontalMaze();">Horizontal maze</button>
43-
<button onclick="radialMaze();">Radial maze</button>
44-
</div>
30+
<div id="header">
31+
<div id="instructionsContainer">
32+
<h2 id="instructions">Select start position</h2>
33+
</div>
34+
<div id="resetContainer">
35+
<button id="resetButton">Reset</button>
36+
</div>
37+
<div class="buttonsContainer">
38+
<h3>Algorithms</h3>
39+
<button id="dijkstraButton">Dijkstra</button>
40+
<button id="aStarButton">A*</button>
41+
<button id="biasedAStarButton">Biased A*</button>
4542
</div>
4643

47-
<div id="canvasContainer">
48-
<canvas id="background"></canvas>
49-
<canvas id="animation"></canvas>
44+
<div class="buttonsContainer">
45+
<h3>Mazes</h3>
46+
<button id="randomMazeButton">Random maze</button>
47+
<button id="verticalMazeButton">Vertical maze</button>
48+
<button id="horizontalMazeButton">Horizontal maze</button>
49+
<button id="radialMazeButton">Radial maze</button>
5050
</div>
51+
</div>
52+
53+
<div id="canvasContainer">
54+
<canvas id="background"></canvas>
55+
<canvas id="animation"></canvas>
56+
</div>
5157
</div>
52-
</body>
5358

59+
<script type="module" src="./main.js"></script>
60+
</body>
5461
</html>

0 commit comments

Comments
 (0)