Merge pull request #98 from tomt610/feature/infobox-edit-start-time

feat: add editable start time to infobox time widget

src/systems/rendering/infoBox.js

@@ -436,14 +436,12 @@ export function renderInfoBox() {
 
     // Time widget - show if enabled
     if (config?.widgets?.time?.enabled) {
-        // Determine which time value to display and edit
-        const hasTimeEnd = Boolean(data.timeEnd);
-        const hasTimeStart = Boolean(data.timeStart);
-        const timeDisplay = data.timeEnd || data.timeStart || '12:00';
-        const timeField = hasTimeEnd ? 'timeEnd' : 'timeStart';
+        // Get both start and end times
+        const timeStartDisplay = data.timeStart || '12:00';
+        const timeEndDisplay = data.timeEnd || data.timeStart || '12:00';
 
-        // Parse time for clock hands
-        const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
+        // Parse end time for clock hands (use end time for visual display)
+        const timeMatch = timeEndDisplay.match(/(\d+):(\d+)/);
         let hourAngle = 0;
         let minuteAngle = 0;
         if (timeMatch) {
@@ -465,7 +463,11 @@ export function renderInfoBox() {
                         <div class="rpg-clock-center"></div>
                     </div>
                 </div>
-                <div class="rpg-time-value rpg-editable" contenteditable="true" data-field="${timeField}" title="Click to edit">${timeDisplay}</div>
+                <div class="rpg-time-range">
+                    <div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeStart" title="Click to edit start time">${timeStartDisplay}</div>
+                    <span class="rpg-time-separator">→</span>
+                    <div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeEnd" title="Click to edit end time">${timeEndDisplay}</div>
+                </div>
             </div>
         `);
     }

style.css

@@ -1582,6 +1582,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     margin-top: 0.25em;
 }
 
+.rpg-time-range {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+    margin-top: 0.25em;
+}
+
+.rpg-time-range .rpg-time-value {
+    margin-top: 0;
+    min-width: 2.5em;
+}
+
+.rpg-time-separator {
+    font-size: clamp(0.5rem, 0.5vw, 0.625rem);
+    color: var(--rpg-text-muted, var(--rpg-text));
+    opacity: 0.7;
+}
+
 /* Location Widget - Map */
 .rpg-map-bg {
     width: 100%;
@@ -5721,6 +5740,14 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
         font-size: min(2.5vw, 0.8125rem) !important;
     }
 
+    .rpg-time-range {
+        gap: 0.15em;
+    }
+
+    .rpg-time-separator {
+        font-size: min(2vw, 0.625rem) !important;
+    }
+
     .rpg-location-text {
         font-size: min(2.8vw, 0.875rem) !important;
     }