Skip to content
This repository
  • 16 commits
  • 5 files changed
  • 0 comments
  • 2 contributors
Jan 30, 2012
Xueqiao Xu add: notice for smoothen_path f31e41a
Xueqiao Xu mod: readme cdcb034
Xueqiao Xu mod: download link afbaf3d
Xueqiao Xu mod: bump version to 0.3.0 2be7adb
Xueqiao Xu rm: npmignore 80d0c19
Xueqiao Xu fix: typo in readme and changed h2 styles 0bc84e3
Apr 21, 2012
Rory O’Kane roryokane relabel control buttons to accurately reflect current functionality
Added "Walls" to show that Reset resets not the colored squares, but the walls.
Added "Search" because it looks weird if one button is bigger than the others.
Changed "Reset" to "Clear" to indicate that walls disappear, but the start and end positions are not moved.
b281545
Rory O’Kane roryokane Lightened red color in instructions
Just changed Lightness in the color's HSL representation from 47% to 70%.

Yes, now it is no longer the exact same color as the actual red square. But it's easier to read the red text against the black background of the instructions bubble, and it's still red enough to look like the square.

Some possible alternatives to this:
give .red a white background so you can use the original red color and and still read it
keep this change, and also change the name of this class to .instructions-red so we don't confuse it with the red color of the end position square
cd1d12e
Rory O’Kane roryokane improve grammar of instructions text c9660a2
Xueqiao Xu Merge pull request #4 from roryokane/patch-2
Lightened red color in instructions
31ccacf
Xueqiao Xu Merge pull request #5 from roryokane/patch-3
improve grammar of instructions text
81a8383
Xueqiao Xu Merge pull request #3 from roryokane/patch-1
relabel control buttons to accurately reflect current functionality
2dda504
Apr 22, 2012
Xueqiao Xu add: indication for failed search. closes #7 fc9a02a
Xueqiao Xu Merge branch 'master' into gh-pages
Conflicts:
	package.json
	src/core/smoothen_path.js
851928c
Xueqiao Xu fix: superfluous start node check e32e44b
Xueqiao Xu Merge branch 'master' into gh-pages d833e92
6 .npmignore
... ... @@ -1,6 +0,0 @@
1   -doc/
2   -test/
3   -src/
4   -utils/
5   -visual/
6   -TODO
24 README.md
Source Rendered
@@ -2,13 +2,15 @@ PathFinding.js
2 2 ==============
3 3 #### A comprehensive path-finding library in javascript. ####
4 4
5   -## Introduction ##
  5 +Introduction
  6 +------------
6 7
7 8 The aim of this project is to provide a path-finding library that can be easily incorporated into web games. It may run on Node.js or the browser.
8 9
9 10 It comes along with an [online demo](http://qiao.github.com/PathFinding.js/visual) to show how the algorithms execute.
10 11
11   -## Server ##
  12 +Server
  13 +------
12 14
13 15 If you want to use it in Node.js, you may install it via `npm`.
14 16
@@ -25,15 +27,17 @@ var PF = require('pathfinding');
25 27 Now skip to the `Basic Usage` section of this readme.
26 28
27 29
28   -## Browser ##
  30 +Browser
  31 +-------
29 32
30   -Download the [minified js file](http://qiao.github.com/PathFinding.js/build/PathFinding.min.js) and include it in your web page.
  33 +Download the [minified js file](http://qiao.github.com/PathFinding.js/lib/pathfinding-browser.js) and include it in your web page.
31 34
32 35 ```html
33   -<script type="text/javascript" src="./PathFinding.min.js"></script>
  36 +<script type="text/javascript" src="./pathfinding-browser.js"></script>
34 37 ```
35 38
36   -## Basic Usage ##
  39 +Basic Usage
  40 +-----------
37 41
38 42 To build a grid-map of width 5 and height 3:
39 43
@@ -106,7 +110,8 @@ var gridBackup = grid.clone();
106 110 ```
107 111
108 112
109   -## Advanced Usage ##
  113 +Advanced Usage
  114 +--------------
110 115
111 116 When instantiating path-finders, you may pass in additional parameters to indicate which specific strategies to use.
112 117
@@ -143,9 +148,8 @@ var finder = new PF.BestFirstFinder({
143 148 });
144 149 ```
145 150
146   -For a detailed developer's API document, see http://qiao.github.com/PathFinding.js/doc
147 151
148   -
149   -## License ##
  152 +License
  153 +-------
150 154
151 155 This project is released under the [MIT License](http://www.opensource.org/licenses/mit-license.php) .
21 visual/grid.js
@@ -146,6 +146,10 @@ window.GridView = {
146 146 fill: '#afeeee',
147 147 'stroke-opacity': 0.2,
148 148 },
  149 + failedNodeAttr: {
  150 + fill: '#ffff88',
  151 + 'stroke-opacity': 0.2,
  152 + },
149 153 pathAttr: {
150 154 stroke: 'yellow',
151 155 'stroke-width': 3,
@@ -328,6 +332,17 @@ window.GridView = {
328 332 }
329 333 },
330 334
  335 + showFailure: function() {
  336 + var i, node,
  337 + fill = this.failedNodeAttr.fill;
  338 +
  339 + for (i = 0; node = this.changedNodes[i]; ++i) {
  340 + if (GridModel.isWalkableAt(node.x, node.y)) {
  341 + this.colorizeNodeAt(node.x, node.y, fill);
  342 + }
  343 + }
  344 + },
  345 +
331 346 colorizeNodeAt: function(x, y, color) {
332 347 this.rects[y][x].animate({
333 348 fill: color,
@@ -485,7 +500,11 @@ window.GridController = {
485 500 self.step(function() {
486 501 self.stop();
487 502 callback();
488   - GridView.drawPath(self.path);
  503 + if (self.path.length) {
  504 + GridView.drawPath(self.path);
  505 + } else {
  506 + GridView.showFailure();
  507 + }
489 508 });
490 509 }, interval);
491 510
16 visual/index.html
@@ -33,11 +33,11 @@
33 33 <h2 class="header_title">Instructions</h2>
34 34 <span id="hide_instruction">hide</span>
35 35 </header>
36   - click on the <span class="white">white</span> grids and drag your mouse to draw obstacles. <br>
37   - drag <span class="green">green</span> node to set start position. <br>
38   - drag <span class="red">red</span> node to set end position. <br>
39   - choose algorithm from right panel. <br>
40   - click start button at the lower right corner to start the animation.
  36 + Click within the <span class="white">white</span> grid and drag your mouse to draw obstacles. <br>
  37 + Drag the <span class="green">green</span> node to set the start position. <br>
  38 + Drag the <span class="red">red</span> node to set the end position. <br>
  39 + Choose an algorithm from the right-hand panel. <br>
  40 + Click Start Search in the lower-right corner to start the animation.
41 41 </div>
42 42
43 43 <div id="algorithm_panel" class="control_panel">
@@ -125,9 +125,9 @@ <h3 id="dijkstra_header"><a href="#">Dijkstra</a></h3>
125 125
126 126 <div id="play_panel" class="control_panel">
127 127 <!--<div id="speed_slider"></div>-->
128   - <button id="start_button">Start</button>
129   - <button id="stop_button">Stop</button>
130   - <button id="reset_button">Reset</button>
  128 + <button id="start_button">Start Search</button>
  129 + <button id="stop_button">Stop Search</button>
  130 + <button id="reset_button">Clear Walls</button>
131 131 </div>
132 132
133 133 <div id="timer">
2  visual/main.css
@@ -137,5 +137,5 @@ footer {
137 137 }
138 138
139 139 .red {
140   - color: #e40;
  140 + color: #ff9166;
141 141 }

No commit comments for this range

Something went wrong with that request. Please try again.