added inventory service for armor and jewelry

static/index.html

@@ -31,6 +31,21 @@
       ⚔️ Total Kills: <span id="totalKillsCount">Loading...</span>
     </div>
     
+    <!-- Heat map toggle -->
+    <div class="heatmap-toggle">
+      <label>
+        <input type="checkbox" id="heatmapToggle">
+        🔥 Show Spawn Heat Map
+      </label>
+    </div>
+    
+    <!-- Inventory search link -->
+    <div class="inventory-search-link">
+      <a href="#" id="inventorySearchBtn" onclick="openInventorySearch()">
+        📦 Inventory Search
+      </a>
+    </div>
+    
     <!-- Text input to filter active players by name -->
     <input type="text" id="playerFilter" class="player-filter" placeholder="Filter players..." />
     
@@ -48,6 +63,7 @@
   <div id="mapContainer">
     <div id="mapGroup">
       <img id="map" src="dereth.png" alt="Dereth map">
+      <canvas id="heatmapCanvas"></canvas>
       <svg id="trails"></svg>
       <div id="dots"></div>
     </div>

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');
+}
+
+

static/style.css

@@ -1176,3 +1176,129 @@ body.noselect, body.noselect * {
 .screen-shake {
   animation: screen-shake 0.5s ease-in-out;
 }
+
+/* ---------- Heat Map Canvas Layer ---------- */
+#heatmapCanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.85;
+  mix-blend-mode: screen;  /* Additive blending for nice heat map effect */
+}
+
+/* Trails and dots use default positioning - no changes needed for layering */
+
+/* Heat map toggle styling */
+.heatmap-toggle {
+  margin: 0 0 12px;
+  padding: 6px 12px;
+  background: var(--card);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.heatmap-toggle input {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.heatmap-toggle label {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Inventory search link styling */
+.inventory-search-link {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  background: var(--card);
+  border: 1px solid #4a9eff;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.inventory-search-link a {
+  color: #4a9eff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+.inventory-search-link a:hover {
+  color: #fff;
+  background: rgba(74, 158, 255, 0.1);
+  border-radius: 2px;
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+/* Sortable column styles for inventory tables */
+.sortable {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    padding-right: 20px \!important;
+}
+
+.sortable:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+
+.results-table th,
+.results-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #333;
+    text-align: left;
+}
+
+.results-table th {
+    background-color: #222;
+    font-weight: bold;
+    color: #eee;
+}
+
+.results-table tr:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.text-right {
+    text-align: right \!important;
+}
+
+.results-info {
+    margin-bottom: 10px;
+    color: #ccc;
+    font-size: 14px;
+}
+
+/* Spell/Cantrip column styling */
+.spells-cell {
+    font-size: 10px;
+    line-height: 1.2;
+    max-width: 200px;
+    word-wrap: break-word;
+    vertical-align: top;
+}
+
+.legendary-cantrip {
+    color: #ffd700;
+    font-weight: bold;
+}
+
+.regular-spell {
+    color: #88ccff;
+}