From cbb9e90b781cc0c68b47a7c8fc6cedb12e086506 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 13:26:53 +0000 Subject: [PATCH] Complete pending TODOs: scroll wheel, coordinate helper, size indicator, instructions - Add scroll wheel support for z-level navigation - Extract pixel-to-tile coordinate calculation into reusable pixelToTile() function - Display selection size indicator (WxH) next to cursor during area selection - Replace placeholder instructions.html with full documentation of tools, keybindings, and usage https://claude.ai/code/session_01FFhPSjY9tyEQfKUiSckTmu --- dfdesigner.js | 56 ++++++++++++++++++------ instructions.html | 107 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 149 insertions(+), 14 deletions(-) diff --git a/dfdesigner.js b/dfdesigner.js index 5ae4762..4d7965e 100644 --- a/dfdesigner.js +++ b/dfdesigner.js @@ -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) @@ -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) { @@ -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; @@ -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); @@ -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); @@ -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) { @@ -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(); diff --git a/instructions.html b/instructions.html index 0d16a3f..e70bc49 100644 --- a/instructions.html +++ b/instructions.html @@ -1,3 +1,106 @@ -Full instructions. + + + + + + + +

DFPlanner Instructions

+ +

Back to Planner

+ +

DFPlanner is a web-based fortress designation tool for Dwarf Fortress. Design your fortress blueprint in the browser, then export it as a CSV file for import into your game using QuickFort.

+ +

Designation Tools

+ + + + + + + + + +
KeyToolDescription
DDigDesignate an area for digging
HChannelDesignate an area for channeling
UUpward StairwayDesignate upward staircases
JDownward StairwayDesignate downward staircases
IUp/Down StairwayDesignate bidirectional staircases
RUpward RampDesignate upward ramps
+ +

Utility Tools

+ + + + + + + +
KeyToolDescription
VInvert DesignationSwap designated and undesignated tiles in an area
XRemove DesignationClear designations from an area
QExport to QuickFortSelect an area and export it as a QuickFort CSV
BSwitch Tool ShapeToggle between square and circle selection shapes
+ +

Navigation

+ + + + + + + + + + +
KeyAction
Arrow KeysMove cursor
Shift + Arrow KeysMove cursor by 10 tiles
Ctrl + Arrow KeysMove cursor by 2 tiles
Page Up / ,Go up one z-level
Page Down / .Go down one z-level
Scroll WheelChange z-level up/down
Move mouse to screen edgePan camera
+ +

Selection

+ + + + + + +
InputAction
EnterStart/finish area selection (keyboard mode)
Click and dragSelect area (mouse mode)
EscCancel current selection
+ +

How to Use Your Blueprint

+ +
    +
  1. Design your fortress using the tools above.
    2. +
  2. Press Q to export, then select the area to export.
    3. +
  3. Copy the CSV output and save it as a .csv file.
    4. +
  4. Use QuickFort to import the blueprint into Dwarf Fortress.
    5. +
+ + +