Skip to content

Commit

Permalink
Some tweaks.
Browse files Browse the repository at this point in the history 
1. Added option to show the final state before dropping matches of a
   solution.
2. Added option to change the type of orbs.
3. Matches within a solution is now sorted.
4. The path now shows an arrow to make the direction clearer.
5. Support middle click to clear an orb.
  • Loading branch information
@kennytm
kennytm committed Apr 4, 2013
1 parent 31c0b7d commit 65d89fd
Showing 1 changed file with 134 additions and 41 deletions.
175 changes: 134 additions & 41 deletions pndopt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
position: absolute;
left: 40px;
top: 480px;
z-index: 10000;
}
#solve {
width: 180px;
Expand All @@ -106,33 +107,36 @@
bottom: 20px;
overflow: scroll;
}
#solutions li {
padding: 4px;
cursor: pointer;
}
#solutions li:hover {
background: lightyellow;
}
#solutions li { padding: 4px; cursor: pointer; }
#solutions li:hover { background: #cfc; }
#hand {
position: absolute;
background: yellow;
border: 2px solid black;
width: 10px;
height: 10px;
}
#import-popup {
#import-popup, #change-popup {
position: absolute;
border: 3px solid black;
background: #eee;
padding: 20px;
}
#import-popup {
width: 400px;
height: 220px;
left: 440px;
top: 190px;
}
#import-legend {
line-height: 1.6em;
#change-popup {
width: 150px;
height: 430px;
top: 65px;
left: 450px;
font-size: 30px;
z-index: 10001;
}
#import-legend, #change-popup { line-height: 1.6em; }
#import-textarea {
position: absolute;
left: 125px;
Expand All @@ -141,14 +145,14 @@
font-family: Consolas, monospace;
letter-spacing: 28px;
}
#import-control {
#import-control, #change-control {
position: absolute;
right: 20px;
bottom: 20px;
}
#import-import {
font-weight: bold;
}
#import-import, #change-change { font-weight: bold; }
.change-target { cursor: pointer; }
.prev-selection { background: #ffc; }
</style>
<link rel="stylesheet" href="github-fork-ribbon-css/gh-fork-ribbon.css"/>
</head>
Expand Down Expand Up @@ -240,6 +244,10 @@
</tr>
</table>
<p>Profile: <select id="profile-selector">
<option value="1,3,1,3,1,3,1,3,1,3,0.3,0.3,0.1,0.1" selected="selected">5-color team, multiple target</option>
<option value="1,1,1,1,1,1,1,1,1,1,0.3,0.3,0.1,0.1">5-color team, single target</option>
<option value="0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,1,1,0.1,0.1">Recovery</option>
<option value="0.1,0.3,0.1,0.3,0.1,0.3,0.1,0.3,0.1,0.3,1,1,0.1,0.1">Recovery, multiple target</option>
<option value="1,3,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.3,0.3,0.1,0.1">Fire team, multiple target</option>
<option value="1,1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.3,0.3,0.1,0.1">Fire team, single target</option>
<option value="0.1,0.1,1,3,0.1,0.1,0.1,0.1,0.1,0.1,0.3,0.3,0.1,0.1">Water team, multiple target</option>
Expand All @@ -250,9 +258,6 @@
<option value="0.1,0.1,0.1,0.1,0.1,0.1,1,1,0.1,0.1,0.3,0.3,0.1,0.1">Light team, single target</option>
<option value="0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,1,3,0.3,0.3,0.1,0.1">Dark team, multiple target</option>
<option value="0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,1,1,0.3,0.3,0.1,0.1">Dark team, single target</option>
<option value="1,3,1,3,1,3,1,3,1,3,0.3,0.3,0.1,0.1" selected="selected">5-color team, multiple target</option>
<option value="1,1,1,1,1,1,1,1,1,1,0.3,0.3,0.1,0.1">5-color team, single target</option>
<option value="0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,1,1,0.1,0.1">Recovery</option>
</select></p>
</div>

Expand All @@ -265,20 +270,19 @@
</div>

<div id="extra-controls">
<input type="button" value="Drop matches" id="drop"/>
&bull;
<input type="button" value="Drop matches" id="drop"/> &bull;
<input type="button" value="Final state" id="final"/> &bull;
<select id="randomization-type">
<option value="0,1,2">3-color</option>
<option value="0,1,2,5">3 + Heal</option>
<option value="0,1,2,3,4">5-color</option>
<option value="0,1,2,3,4,5" selected="selected">5 + Heal</option>
<option value="0,1,2,3,4,5,6">All</option>
</select>
<input type="button" value="Randomize" id="randomize"/>
&bull;
<input type="button" value="Clear" id="clear"/>
&bull;
<input type="button" value="Import" id="import"/>
<input type="button" value="Randomize" id="randomize"/> &bull;
<input type="button" value="Clear" id="clear"/> &bull;
<input type="button" value="Import" id="import"/> &bull;
<input type="button" value="Change orbs" id="change"/>
</div>

<div id="solutions">
Expand All @@ -299,13 +303,30 @@
<span class="e6"></span> = 6 / j<br />
<span class="eX"></span> = . / x<br />
</div>
<textarea id="import-textarea" cols="6" rows="5"></textarea>
<textarea id="import-textarea" cols="6" rows="5" spellcheck="false"></textarea>
<div id="import-control">
<input type="button" value="Cancel" id="import-cancel"/>
<input type="button" value="Import" id="import-import"/>
</div>
</div>

<div id="change-popup">
<div>
<span class="e0"></span> &rarr; <span class="e0 change-target"></span><br />
<span class="e1"></span> &rarr; <span class="e1 change-target"></span><br />
<span class="e2"></span> &rarr; <span class="e2 change-target"></span><br />
<span class="e3"></span> &rarr; <span class="e3 change-target"></span><br />
<span class="e4"></span> &rarr; <span class="e4 change-target"></span><br />
<span class="e5"></span> &rarr; <span class="e5 change-target"></span><br />
<span class="e6"></span> &rarr; <span class="e6 change-target"></span><br />
<span class="eX"></span> &rarr; <span class="eX change-target"></span>
</div>
<div id="change-control">
<input type="button" value="Cancel" id="change-cancel"/>
<input type="button" value="Change" id="change-change"/>
</div>
</div>

<div class="github-fork-ribbon-wrapper left-bottom">
<div class="github-fork-ribbon">
<a href="https://github.com/kennytm/pndopt">Fork me on GitHub</a>
Expand Down Expand Up @@ -712,7 +733,19 @@
html_array.push(solution.weight.toFixed(2));
html_array.push(', L=');
html_array.push(solution.path.length);
solution.matches.forEach(function(match, i) {
var sorted_matches = solution.matches.slice();
sorted_matches.sort(function(a, b) {
if (a.count != b.count) {
return b.count - a.count;
} else if (a.type > b.type) {
return 1;
} else if (a.type < b.type) {
return -1;
} else {
return 0;
}
});
sorted_matches.forEach(function(match, i) {
html_array.push(', <span class="e');
html_array.push(match.type);
html_array.push('"></span> &times; ');
Expand Down Expand Up @@ -760,6 +793,21 @@
return simplified_solutions;
}

function draw_line_to(canvas, px, py, x, y) {
var mx = (px*2 + x) / 3;
var my = (py*2 + y) / 3;
canvas.lineTo(mx, my);
var dx = x - px;
var dy = y - py;
var dr = Math.sqrt(dx*dx + dy*dy) / 3;
dx /= dr;
dy /= dr;
canvas.lineTo(mx - (dx+dy), my + (dx-dy));
canvas.lineTo(mx - (dx-dy), my - (dx+dy));
canvas.lineTo(mx, my);
canvas.lineTo(x, y);
}

function draw_path(init_rc, path) {
var canvas = clear_canvas();

Expand All @@ -775,9 +823,15 @@
canvas.lineWidth = 4;
canvas.strokeStyle = 'rgba(0, 0, 0, 0.75)';
canvas.beginPath();
xys.forEach(function(xy, i) {
canvas[i == 0 ? 'moveTo' : 'lineTo'](xy.x, xy.y);
});
for (var i = 0; i < xys.length; ++ i) {
var xy = xys[i];
if (i == 0) {
canvas.moveTo(xy.x, xy.y);
} else {
var prev_xy = xys[i-1];
draw_line_to(canvas, prev_xy.x, prev_xy.y, xy.x, xy.y);
}
}
canvas.stroke();

var init_xy = xys[0];
Expand Down Expand Up @@ -815,14 +869,22 @@
$(document).ready(function() {
$('#grid > div').each(function() {
$(this).addClass('eX');
}).mousedown(function(e) {
})

$('#grid > div, .change-target').mousedown(function(e) {
var type = get_type(this);
show_element_type($(this), advance_type(type, e.which == 1 ? 1 : -1));
var target_type;
switch (e.which) {
case 1: target_type = advance_type(type, 1); break; // left
case 3: target_type = advance_type(type, -1); break; // right
case 2: target_type = 'X'; break; // middle
default: break;
}
show_element_type($(this), target_type);
clear_canvas();
});

$('#hand').hide();
$('#import-popup').hide();
$('#hand, #import-popup, #change-popup').hide();

$('#profile-selector').change(function() {
var values = this.value.split(/,/);
Expand Down Expand Up @@ -857,12 +919,14 @@
var solution = global_solutions[global_index];
var path = draw_path(solution.init_cursor, solution.path);
var hand_elem = $('#hand');
hand_elem.stop().show();
hand_elem.stop(/*clearQueue*/true).show();
path.forEach(function(xy, i) {
var left = xy.x + 13;
var top = xy.y + 13;
hand_elem[i == 0 ? 'offset' : 'animate']({left: left, top: top});
});
$('#solutions li.prev-selection').removeClass('prev-selection');
$(this).addClass('prev-selection');
});

$('#randomize').click(function() {
Expand All @@ -875,9 +939,7 @@
});

$('#clear').click(function() {
$('#grid > div').each(function() {
show_element_type($(this), 'X');
});
$('#grid > div').each(function() { show_element_type($(this), 'X'); });
clear_canvas();
});

Expand All @@ -891,16 +953,26 @@
clear_canvas();
});

$('#final').click(function() {
var solution = global_solutions[global_index];
if (solution) {
show_board(solution.board);
}
});

$('#import').click(function() {
var board = get_board();
var content = board.map(function(row) { return row.join(''); }).join('\n').replace(/X/g, '.');
var type_chars = 'rbgyphj';
var content = board.map(function(row) { return row.join(''); }).join('\n')
.replace(/X/g, '.')
.replace(/(\d)/g, function(s) { return type_chars.charAt(s); });
$('#import-textarea').val(content);
$('#import-popup').show();
});

$('#import-cancel').click(function() {
$('#import-popup').hide();
});
$('#change').click(function() { $('#change-popup').show(); });
$('#import-cancel').click(function() { $('#import-popup').hide(); });
$('#change-cancel').click(function() { $('#change-popup').hide(); });

$('#import-import').click(function() {
var board_raw = $('#import-textarea').val();
Expand All @@ -923,6 +995,27 @@
clear_canvas();
$('#import-popup').hide();
});

$('#change-change').click(function() {
var change_targets = $('.change-target').map(function() {
return get_type(this);
});
var board = get_board();
for (var i = 0; i < ROWS; ++ i) {
for (var j = 0; j < COLS; ++ j) {
var type = board[i][j];
if (type == 'X') {
type = change_targets[change_targets.length-1];
} else {
type = change_targets[type];
}
board[i][j] = type;
}
}
show_board(board);
clear_canvas();
$('#change-popup').hide();
});
});


Expand Down

0 comments on commit 65d89fd

Please sign in to comment.