fix approval stat; save game; customize color

src/UIManager.js

@@ -1,6 +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
 
     // UI Elements
     this.elCurrentLength = document.getElementById('current-length');
@@ -10,7 +11,7 @@ export class UIManager {
     this.elBudget = document.getElementById('val-budget');
     this.elDay = document.getElementById('val-day');
     this.elTotalRiders = document.getElementById('val-riders');
-    this.elApproval = document.getElementById('val-approval'); // NEW
+    this.elApproval = document.getElementById('val-approval');
 
     this.elIncomeFloat = document.getElementById('income-float');
     this.elRouteList = document.getElementById('route-list');
@@ -20,7 +21,12 @@ export class UIManager {
     this.btnDiscard = document.getElementById('btn-discard');
     this.btnToggle = document.getElementById('ui-toggle');
 
-    // NEW: View Mode
+    // Save/Load
+    this.btnSaveGame = document.getElementById('btn-save-game');
+    this.btnLoadGame = document.getElementById('btn-load-game');
+    this.inputLoadGame = document.getElementById('file-load-game');
+
+    // View Mode
     this.selectViewMode = document.getElementById('view-mode');
 
     this.onViewModeChanged = null;
@@ -41,12 +47,37 @@ export class UIManager {
       this.elContainer.classList.toggle('hidden');
     });
 
-    // Handle Dropdown Change
     this.selectViewMode.addEventListener('change', (e) => {
       if (this.onViewModeChanged) {
         this.onViewModeChanged(e.target.value);
       }
     });
+
+    // Save / Load System
+    this.btnSaveGame.addEventListener('click', () => {
+      if (this.routeManager.gameManager) {
+        this.routeManager.gameManager.saveGame();
+      }
+    });
+
+    this.btnLoadGame.addEventListener('click', () => {
+      this.inputLoadGame.click();
+    });
+
+    this.inputLoadGame.addEventListener('change', (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (evt) => {
+        if (this.routeManager.gameManager) {
+          this.routeManager.gameManager.loadGame(evt.target.result);
+          this.renderRouteList();
+        }
+      };
+      reader.readAsText(file);
+      e.target.value = ''; // Reset so we can load same file again if needed
+    });
   }
 
   updateGameStats(stats) {
@@ -54,12 +85,10 @@ export class UIManager {
     this.elDay.textContent = stats.day;
     this.elTotalRiders.textContent = stats.totalRiders.toLocaleString();
 
-    // Update Approval
     this.elApproval.textContent = stats.approval + "%";
-    // Color code it
-    if (stats.approval > 75) this.elApproval.style.color = "#10B981"; // Green
-    else if (stats.approval < 40) this.elApproval.style.color = "#EF4444"; // Red
-    else this.elApproval.style.color = "#D97706"; // Orange
+    if (stats.approval > 75) this.elApproval.style.color = "#10B981";
+    else if (stats.approval < 40) this.elApproval.style.color = "#EF4444";
+    else this.elApproval.style.color = "#D97706";
   }
 
   showIncomeFeedback(amount) {
@@ -92,12 +121,34 @@ export class UIManager {
         ? (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";
+
+      colorInput.addEventListener('input', (e) => {
+        this.routeManager.updateRouteColor(index, e.target.value);
+      });
+
       const span = document.createElement('span');
       span.innerHTML = `
                 <strong>Route ${index + 1}</strong> <br>
                 <small>${lenStr} | ${route.stats.ridership} riders</small>
             `;
-      li.appendChild(span);
+
+      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);
 
       const btnEdit = document.createElement('button');
       btnEdit.textContent = "Edit";
@@ -106,7 +157,6 @@ export class UIManager {
         this.routeManager.editSavedRoute(index);
         this.renderRouteList();
       };
-      li.appendChild(btnEdit);
 
       const btnDel = document.createElement('button');
       btnDel.textContent = "✕";
@@ -115,7 +165,12 @@ export class UIManager {
         this.routeManager.deleteSavedRoute(index);
         this.renderRouteList();
       };
-      li.appendChild(btnDel);
+
+      const btnDiv = document.createElement('div');
+      btnDiv.appendChild(btnEdit);
+      btnDiv.appendChild(btnDel);
+
+      li.appendChild(btnDiv);
 
       this.elRouteList.appendChild(li);
     });