Update hideout tracker to match quest tracker style

- Replace slider with tick-based progress UI
- Add hover popover showing level requirements with item icons
- Match quest tracker styling (rounded ends, hover effects)
- Click tick to set/unset level progress

Author: otdavies

src/main.ts

@@ -482,7 +482,9 @@ class App {
       const moduleName = module.name;
 
       const getLevelText = (level: number) => {
-        return level === 0 ? 'Not Unlocked' : `Level ${level} / ${module.maxLevel}`;
+        if (level === 0) return 'Not Unlocked';
+        if (level === module.maxLevel) return `Level ${level} (Max)`;
+        return `Level ${level} / ${module.maxLevel}`;
       };
 
       const card = document.createElement('div');
@@ -491,34 +493,136 @@ class App {
         <h3>${moduleName}</h3>
         <div class="workshop-card__level">
           <span class="workshop-card__level-text">${getLevelText(currentLevel)}</span>
-          <input
-            type="range"
-            min="0"
-            max="${module.maxLevel}"
-            value="${currentLevel}"
-            data-module-id="${module.id}"
-            class="workshop-card__slider"
-          />
+          <div class="workshop-card__ticks"></div>
         </div>
       `;
 
-      const slider = card.querySelector('.workshop-card__slider') as HTMLInputElement;
       const levelText = card.querySelector('.workshop-card__level-text') as HTMLSpanElement;
+      const ticksContainer = card.querySelector('.workshop-card__ticks') as HTMLDivElement;
 
-      slider.addEventListener('input', (e) => {
-        const newLevel = parseInt((e.target as HTMLInputElement).value);
+      // Helper to update UI and save progress
+      const updateProgress = (newLevel: number) => {
         levelText.textContent = getLevelText(newLevel);
-      });
 
-      slider.addEventListener('change', (e) => {
-        const newLevel = parseInt((e.target as HTMLInputElement).value);
+        // Update tick visual states
+        ticksContainer.querySelectorAll('.workshop-card__tick').forEach((tick, idx) => {
+          tick.classList.toggle('completed', idx < newLevel);
+        });
+
+        // Save progress
         this.updateWorkshopLevel(module.id, newLevel);
-      });
+      };
+
+      // Create tick marks for each level (1 to maxLevel)
+      for (let level = 1; level <= module.maxLevel; level++) {
+        const tick = document.createElement('div');
+        tick.className = 'workshop-card__tick';
+        if (level <= currentLevel) {
+          tick.classList.add('completed');
+        }
+        tick.dataset.moduleId = module.id;
+        tick.dataset.level = String(level);
+
+        // Find level data for requirements
+        const levelData = module.levels.find(l => l.level === level);
+
+        // Add hover for popover
+        tick.addEventListener('mouseenter', (e) => this.showHideoutPopover(module, level, levelData, e));
+        tick.addEventListener('mouseleave', () => this.hideHideoutPopover());
+
+        // Click to set progress
+        tick.addEventListener('click', () => {
+          const currentlyCompleted = tick.classList.contains('completed');
+          // If clicking on a completed level, set to previous level
+          // If clicking on incomplete level, complete up to and including this one
+          const newLevel = currentlyCompleted ? level - 1 : level;
+          updateProgress(newLevel);
+        });
+
+        ticksContainer.appendChild(tick);
+      }
 
       workshopGrid.appendChild(card);
     });
   }
 
+  private showHideoutPopover(module: any, level: number, levelData: any, event: MouseEvent) {
+    // Remove existing popover if any
+    this.hideHideoutPopover();
+
+    const popover = document.createElement('div');
+    popover.className = 'quest-popover'; // Reuse quest popover styling
+    popover.id = 'hideout-popover';
+
+    // Build requirements HTML
+    let requirementsHtml = '<span class="quest-popover__none">None</span>';
+    if (levelData?.requirementItemIds && levelData.requirementItemIds.length > 0) {
+      requirementsHtml = levelData.requirementItemIds.map((req: any) => {
+        const itemId = req.item_id || req.itemId;
+        const quantity = req.quantity || '?';
+        const item = this.gameData.items.find(i => i.id === itemId);
+        const itemName = item?.name || itemId || 'Unknown';
+        const iconUrl = item ? dataLoader.getIconUrl(item) : '';
+
+        return `
+          <div class="quest-popover__item">
+            ${iconUrl ? `<img src="${iconUrl}" alt="" class="quest-popover__item-icon" />` : ''}
+            <span>${quantity}x ${itemName}</span>
+          </div>
+        `;
+      }).join('');
+    }
+
+    // Check for other requirements (like coins for stash)
+    let otherReqsHtml = '';
+    if (levelData?.otherRequirements && levelData.otherRequirements.length > 0) {
+      otherReqsHtml = levelData.otherRequirements.map((req: string) => `
+        <div class="quest-popover__item">
+          <span>${req}</span>
+        </div>
+      `).join('');
+    }
+
+    const allRequirementsHtml = requirementsHtml + otherReqsHtml || '<span class="quest-popover__none">None</span>';
+
+    popover.innerHTML = `
+      <div class="quest-popover__title">${module.name} - Level ${level}</div>
+      ${levelData?.description ? `<div class="quest-popover__desc">${levelData.description}</div>` : ''}
+      <div class="quest-popover__section">
+        <div class="quest-popover__section-title">Requirements</div>
+        <div class="quest-popover__items">${allRequirementsHtml}</div>
+      </div>
+    `;
+
+    document.body.appendChild(popover);
+
+    // Position the popover near the tick (above it)
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    const popoverRect = popover.getBoundingClientRect();
+
+    let left = rect.left + rect.width / 2 - popoverRect.width / 2;
+    let top = rect.top - popoverRect.height - 8;
+
+    // Keep popover within viewport
+    if (left < 8) left = 8;
+    if (left + popoverRect.width > window.innerWidth - 8) {
+      left = window.innerWidth - popoverRect.width - 8;
+    }
+    if (top < 8) {
+      top = rect.bottom + 8;
+    }
+
+    popover.style.left = `${left}px`;
+    popover.style.top = `${top}px`;
+  }
+
+  private hideHideoutPopover() {
+    const existing = document.getElementById('hideout-popover');
+    if (existing) {
+      existing.remove();
+    }
+  }
+
   private updateWorkshopLevel(moduleId: string, level: number) {
     this.userProgress.hideoutLevels[moduleId] = level;
     StorageManager.saveUserProgress(this.userProgress);

src/styles/main.css

@@ -802,10 +802,49 @@ body {
   transition: all var(--transition-fast);
 }
 
-.workshop-card__slider::-moz-range-thumb:hover {
-  width: 14px;
+/* Workshop card ticks (matching quest tracker style) */
+.workshop-card__ticks {
+  display: flex;
+  gap: 2px;
+  width: 100%;
+  margin-top: var(--spacing-sm);
+}
+
+.workshop-card__tick {
+  flex: 1;
   height: 14px;
-  box-shadow: 0 0 12px rgba(0, 188, 212, 0.8);
+  min-width: 0;
+  border-radius: 0;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+/* Rounded left end on first tick */
+.workshop-card__tick:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+/* Rounded right end on last tick */
+.workshop-card__tick:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+/* Single tick gets both rounded ends */
+.workshop-card__tick:only-child {
+  border-radius: 6px;
+}
+
+.workshop-card__tick:hover {
+  transform: scaleY(1.15);
+  border-color: var(--color-accent-cyan);
+  background: rgba(0, 188, 212, 0.2);
+}
+
+.workshop-card__tick.completed {
+  background: var(--color-accent-cyan);
+  border-color: var(--color-accent-cyan);
 }
 
 /* ========================================