Skip to content

Commit 30e1032

Browse files
TiTiTiTi
committed
demo.js code formatting
Ability to put breakpoints into setTimeout functions
1 parent 2aba351 commit 30e1032

File tree

1 file changed

+61
-60
lines changed

1 file changed

+61
-60
lines changed

‎demo/demo.js‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,38 @@ window.log = function(){
1010
}
1111
};
1212

13-
var WALL = 0;
14-
var OPEN = 1;
13+
var WALL = 0,
14+
OPEN = 1;
1515

1616
var generateRandom = function (width, height, wallFrequency) {
17-
1817
var nodes = [];
18+
for (var x = 0; x < width; x++) {
19+
var nodeRow = [],
20+
gridRow = [];
1921

20-
for (var x=0; x < width; x++) {
21-
var nodeRow = [];
22-
var gridRow = [];
23-
24-
for(var y=0; y < height; y++) {
25-
22+
for (var y = 0; y < height; y++) {
2623
var isWall = Math.floor(Math.random()*(1/wallFrequency));
27-
if(isWall == 0) {
24+
if (isWall == 0) {
2825
nodeRow.push(WALL);
2926
}
30-
else {
27+
else {
3128
nodeRow.push(OPEN);
3229
}
3330
}
3431
nodes.push(nodeRow);
3532
}
3633

37-
3834
return new Graph(nodes);
3935
};
4036

4137
$(function() {
4238

43-
var $grid = $("#search_grid");
44-
var $selectWallFrequency = $("#selectWallFrequency");
45-
var $selectGridSize = $("#selectGridSize");
46-
var $checkDebug = $("#checkDebug");
47-
var $searchDiagonal = $("#searchDiagonal");
48-
var $checkClosest = $("#checkClosest");
49-
39+
var $grid = $("#search_grid"),
40+
$selectWallFrequency = $("#selectWallFrequency"),
41+
$selectGridSize = $("#selectGridSize"),
42+
$checkDebug = $("#checkDebug"),
43+
$searchDiagonal = $("#searchDiagonal"),
44+
$checkClosest = $("#checkClosest");
5045

5146
var opts = {
5247
wallFrequency: $selectWallFrequency.val(),
@@ -111,28 +106,26 @@ GraphSearch.prototype.setOption = function(opt) {
111106
}
112107
};
113108
GraphSearch.prototype.initialize = function() {
114-
115-
var self = this;
116109
this.grid = [];
117-
var nodes = [];
118-
var $graph = this.$graph;
110+
var self = this,
111+
nodes = [],
112+
$graph = this.$graph;
119113

120114
$graph.empty();
121115

122-
var cellWidth = ($graph.width()/this.opts.gridSize)-2; // -2 for border
123-
var cellHeight = ($graph.height()/this.opts.gridSize)-2;
124-
var $cellTemplate = $("<span />").addClass("grid_item").width(cellWidth).height(cellHeight);
125-
var startSet = false;
116+
var cellWidth = ($graph.width()/this.opts.gridSize)-2, // -2 for border
117+
cellHeight = ($graph.height()/this.opts.gridSize)-2,
118+
$cellTemplate = $("<span />").addClass("grid_item").width(cellWidth).height(cellHeight),
119+
startSet = false;
126120

127-
for(var x=0;x<this.opts.gridSize;x++) {
128-
var $row = $("<div class='clear' />");
121+
for(var x = 0; x < this.opts.gridSize; x++) {
122+
var $row = $("<div class='clear' />"),
123+
nodeRow = [],
124+
gridRow = [];
129125

130-
var nodeRow = [];
131-
var gridRow = [];
132-
133-
for(var y=0;y<this.opts.gridSize;y++) {
134-
var id = "cell_"+x+"_"+y;
135-
var $cell = $cellTemplate.clone();
126+
for(var y = 0; y < this.opts.gridSize; y++) {
127+
var id = "cell_"+x+"_"+y,
128+
$cell = $cellTemplate.clone();
136129
$cell.attr("id", id).attr("x", x).attr("y", y);
137130
$row.append($cell);
138131
gridRow.push($cell);
@@ -146,7 +139,9 @@ GraphSearch.prototype.initialize = function() {
146139
var cell_weight = ($("#generateWeights").prop("checked") ? (Math.floor(Math.random() * 3)) * 2 + 1 : 1);
147140
nodeRow.push(cell_weight);
148141
$cell.addClass('weight' + cell_weight);
149-
if ($("#displayWeights").prop("checked")) {$cell.html(cell_weight)};
142+
if ($("#displayWeights").prop("checked")) {
143+
$cell.html(cell_weight);
144+
}
150145
if (!startSet) {
151146
$cell.addClass(css.start);
152147
startSet = true;
@@ -163,7 +158,9 @@ GraphSearch.prototype.initialize = function() {
163158

164159
// bind cell event, set start/wall positions
165160
this.$cells = $graph.find(".grid_item");
166-
this.$cells.click(function() { self.cellClicked($(this)) });
161+
this.$cells.click(function() {
162+
self.cellClicked($(this));
163+
});
167164
};
168165
GraphSearch.prototype.cellClicked = function($end) {
169166

@@ -176,17 +173,18 @@ GraphSearch.prototype.cellClicked = function($end) {
176173

177174
this.$cells.removeClass(css.finish);
178175
$end.addClass("finish");
179-
var $start = this.$cells.filter("." + css.start);
180-
var start = this.nodeFromElement($start);
176+
var $start = this.$cells.filter("." + css.start),
177+
start = this.nodeFromElement($start);
181178

182179
var sTime = performance ? performance.now() : new Date().getTime();
180+
183181
var path = this.search(this.graph, start, end, {
184182
closest: this.opts.closest
185183
});
186-
var fTime = performance ? performance.now() : new Date().getTime();
187-
var duration = (fTime-sTime).toFixed(2);
184+
var fTime = performance ? performance.now() : new Date().getTime(),
185+
duration = (fTime-sTime).toFixed(2);
188186

189-
if(!path || path.length == 0) {
187+
if(!path || path.length == 0) {
190188
$("#message").text("couldn't find a path (" + duration + "ms)");
191189
this.animateNoPath();
192190
}
@@ -203,8 +201,8 @@ GraphSearch.prototype.drawDebugInfo = function(show) {
203201
var that = this;
204202
if(show) {
205203
that.$cells.each(function(i) {
206-
var node = that.nodeFromElement($(this));
207-
var debug = false;
204+
var node = that.nodeFromElement($(this)),
205+
debug = false;
208206
if (node.visited) {
209207
debug = "F: " + node.f + "<br />G: " + node.g + "<br />H: " + node.h;
210208
}
@@ -213,7 +211,6 @@ GraphSearch.prototype.drawDebugInfo = function(show) {
213211
$(this).html(debug);
214212
}
215213
});
216-
217214
}
218215
};
219216
GraphSearch.prototype.nodeFromElement = function($cell) {
@@ -222,18 +219,20 @@ GraphSearch.prototype.nodeFromElement = function($cell) {
222219
GraphSearch.prototype.animateNoPath = function() {
223220
var $graph = this.$graph;
224221
var jiggle = function(lim, i) {
225-
if(i>=lim) { $graph.css("top", 0).css("left", 0); return; }
222+
if(i>=lim) { $graph.css("top", 0).css("left", 0); return; }
226223
if(!i) i=0;
227224
i++;
228225
$graph.css("top", Math.random()*6).css("left", Math.random()*6);
229-
setTimeout( function() { jiggle(lim, i) }, 5 );
226+
setTimeout(function() {
227+
jiggle(lim, i);
228+
}, 5);
230229
};
231230
jiggle(15);
232231
};
233232
GraphSearch.prototype.animatePath = function(path) {
234-
var grid = this.grid;
235-
var timeout = 1000 / grid.length;
236-
var elementFromNode = function(node) {
233+
var grid = this.grid,
234+
timeout = 1000 / grid.length,
235+
elementFromNode = function(node) {
237236
return grid[node.x][node.y];
238237
};
239238

@@ -244,25 +243,27 @@ GraphSearch.prototype.animatePath = function(path) {
244243
return setStartClass(path, i);
245244
}
246245
elementFromNode(path[i]).removeClass(css.active);
247-
setTimeout( function() { removeClass(path, i+1) }, timeout*path[i].cost);
248-
}
249-
var setStartClass = function(path, i){
250-
if(i === path.length){
246+
setTimeout(function() {
247+
removeClass(path, i+1);
248+
}, timeout*path[i].cost);
249+
};
250+
var setStartClass = function(path, i) {
251+
if(i === path.length) {
251252
self.$graph.find("." + css.start).removeClass(css.start);
252253
elementFromNode(path[i-1]).addClass(css.start);
253254
}
254-
}
255-
var addClass = function(path, i) {
255+
};
256+
var addClass = function(path, i) {
256257
if(i>=path.length) { // Finished showing path, now remove
257258
return removeClass(path, 0);
258259
}
259260
elementFromNode(path[i]).addClass(css.active);
260-
setTimeout( function() { addClass(path, i+1) }, timeout*path[i].cost);
261+
setTimeout(function() {
262+
addClass(path, i+1);
263+
}, timeout*path[i].cost);
261264
};
262265

263-
addClass(path, 0)
266+
addClass(path, 0);
264267
this.$graph.find("." + css.start).removeClass(css.start);
265268
this.$graph.find("." + css.finish).removeClass(css.finish).addClass(css.start);
266269
};
267-
268-

0 commit comments

Comments
 (0)