Session 13: Save Slot Preview (footer shows each slot's stardust, buildings, achievements, last-saved; hover to preview)

js/ui.js

@@ -45,6 +45,9 @@ const UI = {
 
         // Save Slot System highlight / toggle state
         this.updateSlotUI();
+
+        // Save Slot System live preview in the footer
+        this.updateSlotPreview();
     },
 
     /**
@@ -325,6 +328,49 @@ const UI = {
         }
     },
 
+    /**
+     * Update the one-line live preview of the active slot in the footer.
+     * Also wires hover handlers onto each slot button so hovering previews a
+     * different slot's contents (stardust, buildings, achievements, last saved).
+     * This is a read-only display helper and never mutates game state.
+     */
+    updateSlotPreview() {
+        const el = document.getElementById('slot-preview');
+        if (!el) return;
+
+        // Hovering a slot button previews that slot's contents instead of the
+        // active one. Track which slot is currently being previewed on hover.
+        let hovering = null;
+
+        const render = (slot) => {
+            const preview = Game.getSlotPreview(slot);
+            if (!preview.present) {
+                el.textContent = `Slot ${slot + 1}: empty`;
+                el.classList.add('empty');
+                return;
+            }
+            el.classList.remove('empty');
+            el.textContent =
+                `Slot ${slot + 1}: ${Game.formatNumber(preview.stardust)} ✨ · ` +
+                `${preview.buildings} plants · ${preview.achievements[0]}/${preview.achievements[1]} · ${preview.lastSaved}`;
+        };
+
+        // Default: preview the active slot live (updates every tick).
+        render(Game.state.activeSlot);
+
+        // Remove any previously-attached listeners to avoid duplicates on re-render.
+        document.querySelectorAll('.slot-btn').forEach(btn => {
+            btn.replaceWith(btn.cloneNode(true));
+        });
+
+        // On hover, preview the hovered slot; on leave, fall back to active.
+        document.querySelectorAll('.slot-btn').forEach(btn => {
+            const idx = parseInt(btn.dataset.slot, 10);
+            btn.addEventListener('mouseenter', () => { hovering = idx; render(idx); });
+            btn.addEventListener('mouseleave', () => { hovering = null; render(Game.state.activeSlot); });
+        });
+    },
+
     /**
      * Show floating text animation
      */