From f3cb583836b2c32d49d0fdc61a48323e82e81ffc Mon Sep 17 00:00:00 2001 From: Evan Scamehorn Date: Thu, 4 Dec 2025 13:08:07 -0600 Subject: [PATCH] small updates --- index.html | 2 +- presentation.md | 8 +++- src/RouteManager.js | 2 +- src/UIManager.js | 111 +++++++++++++++++++++++++++++++------------- src/tmp | 0 5 files changed, 88 insertions(+), 35 deletions(-) delete mode 100644 src/tmp diff --git a/index.html b/index.html index 0ffd31a..49a958c 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
+ style="position:absolute; top:60px; left:220px; color:#6AFF00; font-weight:bold; font-size:20px; opacity:0; transition: all 1s ease-out; z-index:90; text-shadow: 3px 3px 5px black;"> +$0
diff --git a/presentation.md b/presentation.md index 73ee5bc..604cf62 100644 --- a/presentation.md +++ b/presentation.md @@ -18,7 +18,13 @@ This project: - Recall: each component can be only claimed by one group member - I created this project alone -- I only claim to complete **game design** +- I only claim to complete **user interaction**, including: + - Click to add route nodes + - Drag to edit route nodes + - A* pathfinding updates instantly on node movement + - UI provides immediate feedback on cost and ridership + - Multiple mapping layers to help plan out building routes + - Save/load system - You only will grade me on that category - All other categories you should score with a 1, as I do not claim to complete them diff --git a/src/RouteManager.js b/src/RouteManager.js index bae95e5..91cf9c7 100644 --- a/src/RouteManager.js +++ b/src/RouteManager.js @@ -288,7 +288,7 @@ export class RouteManager { } }); const synergy = Math.min(totalPop, totalJobs); - const GAME_BALANCE_MULTIPLIER = 5.0; + const GAME_BALANCE_MULTIPLIER = 1.0; return Math.floor(synergy * GAME_BALANCE_MULTIPLIER); } diff --git a/src/UIManager.js b/src/UIManager.js index 0b346fd..1c85ea6 100644 --- a/src/UIManager.js +++ b/src/UIManager.js @@ -1,7 +1,7 @@ export class UIManager { constructor(routeManager) { this.routeManager = routeManager; - this.gameManager = null; // Set via dependency injection in main.js if needed, or we just access logic differently + this.gameManager = null; // UI Elements this.elCurrentLength = document.getElementById('current-length'); @@ -76,7 +76,7 @@ export class UIManager { } }; reader.readAsText(file); - e.target.value = ''; // Reset so we can load same file again if needed + e.target.value = ''; }); } @@ -116,43 +116,87 @@ export class UIManager { routes.forEach((route, index) => { const li = document.createElement('li'); + li.style.display = 'flex'; + li.style.alignItems = 'center'; + li.style.justifyContent = 'space-between'; + li.style.padding = '8px 0'; + li.style.borderBottom = '1px solid #eee'; + // --- BADGE CONTAINER --- + // This holds both the visual badge and the invisible input on top of it + const badgeContainer = document.createElement('div'); + badgeContainer.style.position = 'relative'; + badgeContainer.style.width = '28px'; + badgeContainer.style.height = '28px'; + badgeContainer.style.marginRight = '10px'; + + // 1. The Visual Badge (Background) + const badge = document.createElement('div'); + badge.textContent = (index + 1); + badge.style.width = '100%'; + badge.style.height = '100%'; + badge.style.backgroundColor = route.color; + badge.style.color = '#fff'; + badge.style.fontWeight = 'bold'; + badge.style.display = 'flex'; + badge.style.alignItems = 'center'; + badge.style.justifyContent = 'center'; + badge.style.borderRadius = '4px'; + badge.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; + badge.style.textShadow = '0 1px 2px rgba(0,0,0,0.5)'; + + // 2. The Invisible Input (Overlay) + const colorInput = document.createElement('input'); + colorInput.type = 'color'; + colorInput.value = route.color || "#000000"; + + // Style to overlay exactly on top of the badge + colorInput.style.position = 'absolute'; + colorInput.style.top = '0'; + colorInput.style.left = '0'; + colorInput.style.width = '100%'; + colorInput.style.height = '100%'; + colorInput.style.opacity = '0'; // Visually invisible + colorInput.style.cursor = 'pointer'; // Show pointer so user knows it's clickable + colorInput.style.border = 'none'; + colorInput.style.padding = '0'; + + // Update logic + colorInput.addEventListener('input', (e) => { + const newColor = e.target.value; + badge.style.backgroundColor = newColor; + this.routeManager.updateRouteColor(index, newColor); + }); + + badgeContainer.appendChild(badge); + badgeContainer.appendChild(colorInput); + li.appendChild(badgeContainer); + + // --- ROUTE INFO --- let lenStr = route.stats.length > 1000 ? (route.stats.length / 1000).toFixed(1) + "km" : Math.round(route.stats.length) + "m"; - // Color Picker - const colorInput = document.createElement('input'); - colorInput.type = 'color'; - colorInput.value = route.color || "#000000"; - colorInput.style.border = "none"; - colorInput.style.width = "24px"; - colorInput.style.height = "24px"; - colorInput.style.cursor = "pointer"; - colorInput.title = "Change Route Color"; + const infoDiv = document.createElement('div'); + infoDiv.style.flex = '1'; + infoDiv.style.display = 'flex'; + infoDiv.style.flexDirection = 'column'; - colorInput.addEventListener('input', (e) => { - this.routeManager.updateRouteColor(index, e.target.value); - }); + infoDiv.innerHTML = ` + Line ${index + 1} + ${lenStr} | ${route.stats.ridership} riders + `; - const span = document.createElement('span'); - span.innerHTML = ` - Route ${index + 1}
- ${lenStr} | ${route.stats.ridership} riders - `; - - const detailsDiv = document.createElement('div'); - detailsDiv.style.display = "flex"; - detailsDiv.style.alignItems = "center"; - detailsDiv.style.gap = "8px"; - detailsDiv.appendChild(colorInput); - detailsDiv.appendChild(span); - - li.appendChild(detailsDiv); + // --- BUTTONS --- + const btnDiv = document.createElement('div'); + btnDiv.style.display = 'flex'; + btnDiv.style.gap = '4px'; const btnEdit = document.createElement('button'); - btnEdit.textContent = "Edit"; - btnEdit.className = "btn-icon btn-edit"; + btnEdit.textContent = "✎"; + btnEdit.className = "btn-icon"; + btnEdit.title = "Redraw Route"; + btnEdit.style.padding = "4px 8px"; btnEdit.onclick = () => { this.routeManager.editSavedRoute(index); this.renderRouteList(); @@ -160,16 +204,19 @@ export class UIManager { const btnDel = document.createElement('button'); btnDel.textContent = "✕"; - btnDel.className = "btn-icon btn-del"; + btnDel.className = "btn-icon"; + btnDel.title = "Delete Route"; + btnDel.style.color = "#ef4444"; + btnDel.style.padding = "4px 8px"; btnDel.onclick = () => { this.routeManager.deleteSavedRoute(index); this.renderRouteList(); }; - const btnDiv = document.createElement('div'); btnDiv.appendChild(btnEdit); btnDiv.appendChild(btnDel); + li.appendChild(infoDiv); li.appendChild(btnDiv); this.elRouteList.appendChild(li); diff --git a/src/tmp b/src/tmp deleted file mode 100644 index e69de29..0000000