From 92b9ad2c1a5b28a293ad7fa728b7a2be67075fc7 Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Sun, 9 Aug 2026 22:59:07 -0500
Subject: [PATCH] Partially cleaned up UX from pathfinding PR
- Reorganized sidebar into tabs
- Limited pathfinding markers to needing the tab open
- Draw path over junctions but under speed signage
---
README.md | 4 +-
index.html | 139 +++++++++++++++++++++++++++++------------------
index.js | 8 ++-
js/directions.js | 44 ++++-----------
js/mapdata.js | 3 +
legend.js | 56 +++++++++++++++----
style.css | 55 +++++++++++++++----
7 files changed, 199 insertions(+), 110 deletions(-)
diff --git a/README.md b/README.md
index 0c3265d..f01516d 100644
--- a/README.md
+++ b/README.md
@@ -3,4 +3,6 @@ A map to let you see the valley in more detail than the in-game map, featuring s
## Current Plans
- [ ] Generally improve the look and UX of the map
-- [ ] Add Points of Interest, like Stations, service points, shop locations, and maybe even the potential spawn locations of wrecked demonstrators.
+
+## Contribution Notes
+Please avoid using AI to generate code for pull requests. It makes it much more difficult to maintain and slows maintainence of features to a crawl. This project was built by hand with a specific architecture, AI may make functional code, but not sensible code.
\ No newline at end of file
diff --git a/index.html b/index.html
index f8f314e..081f9b7 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,21 @@
+
+
@@ -27,7 +42,7 @@
- Map v0.6.7 alpha
+ Map v0.6.9 alpha
Updated for Game Build 99.7
@@ -39,65 +54,81 @@
DV Community Map
-
+ Welcome to the WIP community map of Derail Valley, a resource for documenting and displaying all tracks and points of interest.
+
+ Problems? Suggestions? Head over to the issue tracker and see if it's already there, or submit if not. Or contribute a fix yourself if you really want!
+
+
+ Click the tabs to the left to view the Legend, Options, and more.
+
+
+ Hover over tracks and objects for detailed information.
+
+ Last update :
+
+
- Welcome to the WIP community map of Derail Valley, a resource for documenting and displaying all tracks and points of interest.
-
- Problems? Suggestions? Head over to the issue tracker and see if it's already there, or submit if not. Or contribute a fix yourself if you really want!
-
-
- Hover over tracks and objects for detailed information.
-
- Last update :
-
-
-
-
Key
-
-
-
- Track Colors:
-
-
-
-
Map Settings
-
(Page uses local-only cookies to keep settings)
-
-
-
-
diff --git a/index.js b/index.js
index 07de757..477df68 100644
--- a/index.js
+++ b/index.js
@@ -254,6 +254,8 @@ async function loadTrackData(file){
}
}
+ MapData.addPoi({type:'dummy_polyline', position:{x:0,y:0,z:0}});
+
MapData.sortTracks();
MapData.generateTrackSignage();
}
@@ -311,6 +313,7 @@ function redrawMap(){
mapctx.stroke();
}
}
+ Directions.drawPolyline(mapctx, trackWidth);
let curSprite;
let spriteSize;
let textMeasure;
@@ -324,6 +327,9 @@ function redrawMap(){
let markerY = MapData.view.convertY(marker.position.z);
if(markerX > mapCanvas.width + Config.viewCullMargin || markerX < -Config.viewCullMargin || markerY > mapCanvas.height + Config.viewCullMargin || markerY < -Config.viewCullMargin) continue; // View Culling
switch(marker.type){
+ case 'dummy_polyline':
+ Directions.drawPolyline(mapctx, trackWidth);
+ break;
case 'junction':
if(!(MapData.layers.junctions && MapData.layers.signage)) break;
marker.visible = true;
@@ -494,6 +500,7 @@ function redrawMap(){
);
}
}
+ Directions.drawMarkers(mapctx);
MapData.view.dirty = false;
@@ -503,7 +510,6 @@ function redrawMap(){
function redrawDynamics(){
dynCanvas.width = mapCanvas.width;
dynCanvas.height = mapCanvas.height;
- Directions.draw(dynctx);
let curSprite;
let spriteSize;
for(const marker of MapData.dynamicMarkers){
diff --git a/js/directions.js b/js/directions.js
index 11282da..2b92259 100644
--- a/js/directions.js
+++ b/js/directions.js
@@ -61,7 +61,7 @@ function clearPoints(){
state.route = null;
renderStops();
renderSummary('Click the map to set a start point.');
- MapData.view.dynDirty = true;
+ MapData.view.dirty = true;
}
function stopLabel(index){
@@ -146,7 +146,7 @@ function updateRoute(){
if(!state.graph || state.points.length < 2){
state.route = null;
renderSummary('Click the map to set a start and end point.');
- MapData.view.dynDirty = true;
+ MapData.view.dirty = true;
return;
}
@@ -160,7 +160,7 @@ function updateRoute(){
if(!result){
state.route = null;
renderSummary('No route found with current limits.');
- MapData.view.dynDirty = true;
+ MapData.view.dirty = true;
return;
}
combinedEdges = combinedEdges.concat(result.edges);
@@ -193,7 +193,7 @@ function updateRoute(){
`Max speed ${Math.round(stats.maxSpeed)} km/h`,
`Max speed limit ${Math.round(stats.maxSpeedLimit)} km/h`,
].join(' | ');
- MapData.view.dynDirty = true;
+ MapData.view.dirty = true;
}
function scheduleRouteUpdate(){
@@ -205,13 +205,13 @@ function scheduleRouteUpdate(){
});
}
-function drawPolyline(ctx){
+export function drawPolyline(ctx, trackWidth){
if(!state.route || !state.route.polyline || state.route.polyline.length < 2) return;
ctx.save();
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
- const width = 6 * MapData.view.pixelRatio;
- const outline = 10 * MapData.view.pixelRatio;
+ const width = trackWidth * 1.3;
+ const outline = trackWidth * 1.3 + 5;
ctx.beginPath();
for(let i=0; i {
- const width = state.ui.contents.offsetWidth;
- if(state.ui.panel.classList.contains('collapsed')){
- state.ui.panel.style.transform = `translateX(${-width}px)`;
- state.ui.toggle.textContent = '>';
- }else{
- state.ui.panel.style.transform = 'translateX(0px)';
- state.ui.toggle.textContent = '<';
- }
- };
-
- state.ui.toggle.addEventListener('click', () => {
- state.ui.panel.classList.toggle('collapsed');
- updatePanelState();
- });
-
- window.addEventListener('resize', updatePanelState);
-
const mapContainer = document.getElementById('mapContainer');
mapContainer.addEventListener('pointerdown', e => {
state.ui.lastPointerDown = {x:e.clientX, y:e.clientY};
@@ -349,12 +331,6 @@ export function initialize(){
renderStops();
renderSummary('Click the map to set a start point.');
- updatePanelState();
-}
-
-export function draw(ctx){
- drawPolyline(ctx);
- drawMarkers(ctx);
}
function hitTestMarker(e){
diff --git a/js/mapdata.js b/js/mapdata.js
index 36504fe..8ef3ea0 100644
--- a/js/mapdata.js
+++ b/js/mapdata.js
@@ -122,6 +122,8 @@ function markerSortFunction(a, b){
if(b.type == 'station') return -1;
if(a.type == 'speed') return 1;
if(b.type == 'speed') return -1;
+ if(a.type == 'dummy_polyline') return 1;
+ if(b.type == 'dummy_polyline') return -1;
if(a.type == 'junction') return 1;
if(b.type == 'junction') return -1;
if(a.type == 'service') return 1;
@@ -306,6 +308,7 @@ export function addPoi(poiData, level = 0){
newPoi.radius = poiData.radius;
break;
default:
+ if(poiData.type.startsWith('dummy_')) break;
newPoi.tooltip = `