added inventory service for armor and jewelry

static/script.js

@@ -181,6 +181,14 @@ const CHAT_COLOR_MAP = {
  31:  '#FFFF00'  // AdminTell
 };
 
+/* ---------- Heat Map Globals ---------- */
+let heatmapCanvas, heatmapCtx;
+let heatmapEnabled = false;
+let heatmapData = null;
+let heatTimeout = null;
+const HEAT_PADDING = 50;   // px beyond viewport to still draw
+const HEAT_THROTTLE = 16;  // ~60 fps
+
 /**
  * ---------- Player Color Assignment ----------------------------
  * Uses a predefined accessible color palette for player dots to ensure
@@ -344,6 +352,108 @@ function pxToWorld(x, y) {
   return { ew, ns };
 }
 
+/* ---------- Heat Map Functions ---------- */
+
+function initHeatMap() {
+  heatmapCanvas = document.getElementById('heatmapCanvas');
+  if (!heatmapCanvas) {
+    console.error('Heat map canvas not found');
+    return;
+  }
+  
+  heatmapCtx = heatmapCanvas.getContext('2d');
+  
+  const toggle = document.getElementById('heatmapToggle');
+  if (toggle) {
+    toggle.addEventListener('change', e => {
+      heatmapEnabled = e.target.checked;
+      if (heatmapEnabled) {
+        fetchHeatmapData();
+      } else {
+        clearHeatmap();
+      }
+    });
+  }
+  
+  window.addEventListener('resize', debounce(() => {
+    if (heatmapEnabled && heatmapData) {
+      renderHeatmap();
+    }
+  }, 250));
+}
+
+async function fetchHeatmapData() {
+  try {
+    const response = await fetch(`${API_BASE}/spawns/heatmap?hours=24&limit=50000`);
+    if (!response.ok) {
+      throw new Error(`Heat map API error: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    heatmapData = data.spawn_points; // [{ew, ns, intensity}]
+    console.log(`Loaded ${heatmapData.length} heat map points from last ${data.hours_window} hours`);
+    renderHeatmap();
+  } catch (err) {
+    console.error('Failed to fetch heat map data:', err);
+  }
+}
+
+function renderHeatmap() {
+  if (!heatmapEnabled || !heatmapData || !heatmapCanvas || !imgW || !imgH) {
+    return;
+  }
+  
+  // Set canvas size to match map dimensions (1:1 DPI)
+  heatmapCanvas.width = imgW;
+  heatmapCanvas.height = imgH;
+  heatmapCtx.clearRect(0, 0, imgW, imgH);
+  
+  // Current visible map rect in px for viewport culling
+  const vw = wrap.clientWidth;
+  const vh = wrap.clientHeight;
+  const viewL = -offX / scale;
+  const viewT = -offY / scale;
+  const viewR = viewL + vw / scale;
+  const viewB = viewT + vh / scale;
+  
+  // Render heat map points with viewport culling
+  for (const point of heatmapData) {
+    const { x, y } = worldToPx(point.ew, point.ns);
+    
+    // Skip points outside visible area (with padding for smooth edges)
+    if (x < viewL - HEAT_PADDING || x > viewR + HEAT_PADDING ||
+        y < viewT - HEAT_PADDING || y > viewB + HEAT_PADDING) {
+      continue;
+    }
+    
+    // Smaller, more precise spots to clearly show individual spawn locations
+    const radius = Math.max(5, Math.min(12, 5 + Math.sqrt(point.intensity * 0.5)));
+    
+    // Sharp gradient with distinct boundaries between spawn points
+    const gradient = heatmapCtx.createRadialGradient(x, y, 0, x, y, radius);
+    gradient.addColorStop(0, `rgba(255, 0, 0, ${Math.min(0.9, point.intensity / 40)})`);      // Bright red center
+    gradient.addColorStop(0.6, `rgba(255, 100, 0, ${Math.min(0.4, point.intensity / 120)})`); // Quick fade to orange
+    gradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+    
+    heatmapCtx.fillStyle = gradient;
+    heatmapCtx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+  }
+}
+
+function clearHeatmap() {
+  if (heatmapCtx && heatmapCanvas) {
+    heatmapCtx.clearRect(0, 0, heatmapCanvas.width, heatmapCanvas.height);
+  }
+}
+
+function debounce(fn, ms) {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), ms);
+  };
+}
+
 // Show or create a stats window for a character
 function showStatsWindow(name) {
   if (statsWindows[name]) {
@@ -892,6 +1002,14 @@ function clampPan() {
 function updateView() {
   clampPan();
   applyTransform();
+  
+  // Throttled heat map re-rendering during pan/zoom
+  if (heatmapEnabled && heatmapData && !heatTimeout) {
+    heatTimeout = setTimeout(() => {
+      renderHeatmap();
+      heatTimeout = null;
+    }, HEAT_THROTTLE);
+  }
 }
 
 function fitToWindow() {
@@ -970,6 +1088,7 @@ img.onload = () => {
   fitToWindow();
   startPolling();
   initWebSocket();
+  initHeatMap();
 };
 
 /* ---------- rendering sorted list & dots ------------------------ */
@@ -1647,3 +1766,14 @@ function createMilestoneFireworks() {
   }
 }
 
+/* ==================== INVENTORY SEARCH FUNCTIONALITY ==================== */
+
+/**
+ * Opens the dedicated inventory search page in a new browser tab.
+ */
+function openInventorySearch() {
+  // Open the dedicated inventory search page in a new tab
+  window.open('/inventory.html', '_blank');
+}
+
+