Skip to content

Added click-to-copy coordinates and auto-fill in modals #246

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
ashboundscar wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added click-to-copy coordinates and auto-fill in modals #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ae8ec4
Added click-to-copy and cursor toggle to coordinate display
ashboundscar May 23, 2026
75147c9
Added auto-fill in go to coordinates modal
ashboundscar May 23, 2026
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
79 changes: 78 additions & 1 deletion frontend/static/yw/javascript/owot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,9 @@ defineElements({ // elm[<name>]
nav_elm: byId("nav"),
menu_corner_area_elm: byId("menu_corner_area"),
coords: byId("coords"),
coord_display: byId("coord_display"),
toggle_cursor: byId("toggle_cursor"),
coord_status: byId("coord_status"),
cursor_coords: byId("cursor_coords"),
cursor_on: byId("cursor_on"),
cursor_off: byId("cursor_off"),
Expand Down Expand Up @@ -7249,16 +7252,43 @@ function setupDOMEvents() {
}
}

elm.coords.onclick = function() {
elm.toggle_cursor.onclick = function() {
showCursorCoordinates = !showCursorCoordinates;
if(showCursorCoordinates) {
elm.cursor_coords.style.display = "";
elm.toggle_cursor.innerText = "▲";
updateCoordDisplay();
} else {
elm.cursor_coords.style.display = "none";
elm.toggle_cursor.innerText = "▼";
updateCoordDisplay();
}
}

elm.coord_display.onclick = function() {
var x = elm.coord_X.innerText;
var y = elm.coord_Y.innerText;
var coordStr = "X: " + x + ", Y: " + y;
w.clipboard.copy(coordStr);
elm.coord_status.style.display = "";
setTimeout(function() {
elm.coord_status.style.display = "none";
}, 1000);
}

elm.cursor_coords.onclick = function() {
if(elm.cursor_on.style.display == "none") return;
var tx = elm.tile_X.innerText;
var ty = elm.tile_Y.innerText;
var cx = elm.char_X.innerText;
var cy = elm.char_Y.innerText;
var coordStr = "Tile: " + tx + ", " + ty + " / Char: " + cx + ", " + cy;
w.clipboard.copy(coordStr);
elm.coord_status.style.display = "";
setTimeout(function() {
elm.coord_status.style.display = "none";
}, 1000);
}

window.onhashchange = function(e) {
manageCoordHash();
Expand Down Expand Up @@ -7293,12 +7323,52 @@ function enableBgColorPicker() {
colorInputBg.jscolor.fromString("#DCE943");
}

function handleCoordPaste(e, coordX, coordY) {
var data = (e.clipboardData || window.clipboardData).getData("text");
if(!data) return;

var match1 = data.match(/X:\s*([\d.-]+),\s*Y:\s*([\d.-]+)/i);
if(match1) {
coordX.value = match1[1];
coordY.value = match1[2];
e.preventDefault();
return;
}

var match2 = data.match(/Tile:\s*([\d.-]+),\s*([\d.-]+)\s*\/\s*Char:\s*([\d.-]+),\s*([\d.-]+)/i);
if(match2) {
var tx = parseFloat(match2[1]);
var ty = parseFloat(match2[2]);
var cx = parseFloat(match2[3]);
var cy = parseFloat(match2[4]);
coordX.value = (tx + (cx / 16)) / coordSizeX;
coordY.value = -(ty + (cy / 8)) / coordSizeY;
e.preventDefault();
return;
}

var match3 = data.match(/^\s*([\d.-]+),\s*([\d.-]+)\s*$/);
if(match3) {
coordX.value = match1 ? match1[1] : match3[1];
coordY.value = match1 ? match1[2] : match3[2];
e.preventDefault();
return;
}
}

function makeCoordLinkModal() {
var modal = new Modal();
modal.createForm();
modal.setFormTitle("Enter the coordinates to create a link to. You can then click on a cell to create the link.\n");
var coordX = modal.addEntry("X", "text", "number").input;
var coordY = modal.addEntry("Y", "text", "number").input;

var pasteFunc = function(e) {
handleCoordPaste(e, coordX, coordY);
};
coordX.addEventListener("paste", pasteFunc);
coordY.addEventListener("paste", pasteFunc);

var relative = modal.addEntry("Relative", "checkbox").input;
relative.parentElement.title = "When checked, this coord link will teleport the user relative to the coordinates provided";
relative.type = "checkbox";
Expand All @@ -7316,6 +7386,13 @@ function makeCoordGotoModal() {
modal.setFormTitle("Go to coordinates:\n");
var coordX = modal.addEntry("X", "text", "number").input;
var coordY = modal.addEntry("Y", "text", "number").input;

var pasteFunc = function(e) {
handleCoordPaste(e, coordX, coordY);
};
coordX.addEventListener("paste", pasteFunc);
coordY.addEventListener("paste", pasteFunc);

modal.onSubmit(function() {
w.doGoToCoord(parseFloat(coordY.value), parseFloat(coordX.value));
});
Expand Down
10 changes: 7 additions & 3 deletions frontend/templates/yourworld.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,13 @@
<ul></ul>
</div>
<div id="coords" class="ui ui-vis" style="display: none;">
X: <span id="coord_X"></span>
Y: <span id="coord_Y"></span>
<div id="cursor_coords" style="display: none;">
<div id="coord_display" style="cursor: pointer; display: inline-block;" title="Click to copy coordinates">
X: <span id="coord_X"></span>
Y: <span id="coord_Y"></span>
</div>
<span id="toggle_cursor" style="cursor: pointer; font-size: 80%; padding-left: 3px;" title="Toggle cursor coordinates">▼</span>
<span id="coord_status" style="display: none; padding-left: 5px;">Copied!</span>
<div id="cursor_coords" style="display: none; cursor: pointer;" title="Click to copy cursor coordinates">
Cursor:
<span id="cursor_on" style="display: none;">
<span id="tile_X"></span>, <span id="tile_Y"></span> /
Expand Down