Skip to content

Complete pending TODOs: scroll wheel, coordinate helper, size indicator, instructions #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BentWorks wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Complete pending TODOs: scroll wheel, coordinate helper, size indicator, instructions #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 44 additions & 12 deletions dfdesigner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
// DFDesigner - 2013
// Jos van Egmond / info@josvanegmond.nl / @manadar

// Todo's:
// - Small indicator of size of selection: Format: XxY. Eg: 7x6

// map is a 3d array which can be accessed in this way: map[z][x][y]
// z = elevation, top to bottom (0 = top, map_size_z = bottom)
// x = west to east (0 = west, map_size_x = east)
Expand Down Expand Up @@ -765,7 +762,19 @@ function enableDesigner() {
return false;
});

// TODO: Functionality for scroll wheel. What makes sense? Menu item switch or z-level change or ...?
container_element.addEventListener('wheel', function(evt) {
if (evt.deltaY < 0) {
moveCursor(camera_z + 1, cursor_x, cursor_y);
} else if (evt.deltaY > 0) {
moveCursor(camera_z - 1, cursor_x, cursor_y);
}

requestDrawZlevel = true;
requestDrawMenu = true;

evt.preventDefault();
return false;
});
}

function handle_onMouseDown(x, y) {
Expand All @@ -775,11 +784,9 @@ function handle_onMouseDown(x, y) {

if (x > menu_border) { return; }

// TODO: Make function out of this
var tile_x = Math.floor(x / tile_size) - 1; // minus 1 because of the chrome
var tile_y = Math.floor(y / tile_size) - 1;
var tile = pixelToTile(x, y);

moveCursor(camera_z, tile_x + camera_x, tile_y + camera_y);
moveCursor(camera_z, tile.x + camera_x, tile.y + camera_y);

if (cursor_tool.type & tool_type_area_square) {
cursor_start_x = cursor_x;
Expand Down Expand Up @@ -859,8 +866,9 @@ function handle_onMouseMove(x, y) {
cursor_in_menu = false;
}

var tile_x = camera_x + Math.floor(x / tile_size) - 1; // minus 1 because of the chrome
var tile_y = camera_y + Math.floor(y / tile_size) - 1;
var tile = pixelToTile(x, y);
var tile_x = camera_x + tile.x;
var tile_y = camera_y + tile.y;

// move the cursor, but dont follow the camera immediately
var moved = moveCursor(camera_z, tile_x, tile_y, true);
Expand All @@ -881,8 +889,9 @@ function handle_onMouseMove(x, y) {
moveCameraToCursor();

// and repeat the process in order to keep the camera moving
tile_x = camera_x + Math.floor(x / tile_size) - 1; // minus 1 because of the chrome
tile_y = camera_y + Math.floor(y / tile_size) - 1;
var newTile = pixelToTile(x, y);
tile_x = camera_x + newTile.x;
tile_y = camera_y + newTile.y;
moved = moveCursor(camera_z, tile_x, tile_y, true);

setTimeout(moveCameraLater, 300);
Expand All @@ -892,6 +901,14 @@ function handle_onMouseMove(x, y) {
setTimeout(moveCameraLater, 300);
}

// Convert pixel coordinates to tile coordinates, accounting for chrome offset
function pixelToTile(px, py) {
return {
x: Math.floor(px / tile_size) - 1,
y: Math.floor(py / tile_size) - 1
};
}

// move the cursor, with a flag to indicate if the camera should follow the cursor.
// returns whether or not the cursor has moved
function moveCursor(z, x, y, dont_move_camera) {
Expand Down Expand Up @@ -1142,6 +1159,21 @@ function draw() {
// render cursor
viewport_cursor_drawcontext.drawImage(images.cursor, (cursor_x - camera_x + 1) * 16, (cursor_y - camera_y + 1) * 16, tile_size, tile_size);

// render selection size indicator when making an area selection
if (cursor_down) {
var sel_w = Math.abs(cursor_x - cursor_start_x) + 1;
var sel_h = Math.abs(cursor_y - cursor_start_y) + 1;
var size_text = sel_w + "x" + sel_h;
var text_x = (cursor_x - camera_x + 2) * tile_size;
var text_y = (cursor_y - camera_y + 1) * tile_size;
viewport_cursor_drawcontext.font = "bold 11px sans-serif";
viewport_cursor_drawcontext.fillStyle = "white";
viewport_cursor_drawcontext.strokeStyle = "black";
viewport_cursor_drawcontext.lineWidth = 2;
viewport_cursor_drawcontext.strokeText(size_text, text_x, text_y);
viewport_cursor_drawcontext.fillText(size_text, text_x, text_y);
}

drawMenu();

drawChrome();
Expand Down
107 changes: 105 additions & 2 deletions instructions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,106 @@
Full instructions.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: black;
font-family: "sans-serif";
color: #CCC;
font-size: 100%;
max-width: 700px;
margin: 30px auto;
padding: 0 20px;
}

I'm sorry, I tricked you. There are no instructions yet.
body, a { color: #CCC; }
a:hover { color: white; }

h1 { border-bottom: 1px solid #555; padding-bottom: 10px; }
h2 { color: white; margin-top: 30px; }

table {
border-collapse: collapse;
width: 100%;
margin: 10px 0;
}

th, td {
border: 1px solid #555;
padding: 6px 12px;
text-align: left;
}

th { background: #222; color: white; }

kbd {
background: #333;
border: 1px solid #666;
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
}
</style>
</head>
<body>

<h1>DFPlanner Instructions</h1>

<p><a href="index.html">Back to Planner</a></p>

<p>DFPlanner is a web-based fortress designation tool for <a href="http://www.bay12games.com/dwarves/" target="_blank">Dwarf Fortress</a>. Design your fortress blueprint in the browser, then export it as a CSV file for import into your game using <a href="http://www.joelpt.net/quickfort/" target="_blank">QuickFort</a>.</p>

<h2>Designation Tools</h2>

<table>
<tr><th>Key</th><th>Tool</th><th>Description</th></tr>
<tr><td><kbd>D</kbd></td><td>Dig</td><td>Designate an area for digging</td></tr>
<tr><td><kbd>H</kbd></td><td>Channel</td><td>Designate an area for channeling</td></tr>
<tr><td><kbd>U</kbd></td><td>Upward Stairway</td><td>Designate upward staircases</td></tr>
<tr><td><kbd>J</kbd></td><td>Downward Stairway</td><td>Designate downward staircases</td></tr>
<tr><td><kbd>I</kbd></td><td>Up/Down Stairway</td><td>Designate bidirectional staircases</td></tr>
<tr><td><kbd>R</kbd></td><td>Upward Ramp</td><td>Designate upward ramps</td></tr>
</table>

<h2>Utility Tools</h2>

<table>
<tr><th>Key</th><th>Tool</th><th>Description</th></tr>
<tr><td><kbd>V</kbd></td><td>Invert Designation</td><td>Swap designated and undesignated tiles in an area</td></tr>
<tr><td><kbd>X</kbd></td><td>Remove Designation</td><td>Clear designations from an area</td></tr>
<tr><td><kbd>Q</kbd></td><td>Export to QuickFort</td><td>Select an area and export it as a QuickFort CSV</td></tr>
<tr><td><kbd>B</kbd></td><td>Switch Tool Shape</td><td>Toggle between square and circle selection shapes</td></tr>
</table>

<h2>Navigation</h2>

<table>
<tr><th>Key</th><th>Action</th></tr>
<tr><td><kbd>Arrow Keys</kbd></td><td>Move cursor</td></tr>
<tr><td><kbd>Shift</kbd> + <kbd>Arrow Keys</kbd></td><td>Move cursor by 10 tiles</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>Arrow Keys</kbd></td><td>Move cursor by 2 tiles</td></tr>
<tr><td><kbd>Page Up</kbd> / <kbd>,</kbd></td><td>Go up one z-level</td></tr>
<tr><td><kbd>Page Down</kbd> / <kbd>.</kbd></td><td>Go down one z-level</td></tr>
<tr><td><kbd>Scroll Wheel</kbd></td><td>Change z-level up/down</td></tr>
<tr><td>Move mouse to screen edge</td><td>Pan camera</td></tr>
</table>

<h2>Selection</h2>

<table>
<tr><th>Input</th><th>Action</th></tr>
<tr><td><kbd>Enter</kbd></td><td>Start/finish area selection (keyboard mode)</td></tr>
<tr><td>Click and drag</td><td>Select area (mouse mode)</td></tr>
<tr><td><kbd>Esc</kbd></td><td>Cancel current selection</td></tr>
</table>

<h2>How to Use Your Blueprint</h2>

<ol>
<li>Design your fortress using the tools above.</li>
<li>Press <kbd>Q</kbd> to export, then select the area to export.</li>
<li>Copy the CSV output and save it as a <code>.csv</code> file.</li>
<li>Use <a href="http://www.joelpt.net/quickfort/" target="_blank">QuickFort</a> to import the blueprint into Dwarf Fortress.</li>
</ol>

</body>
</html>