de7b547349
Phase 2 — Map overlays: - TrailsSVG: SVG polylines per character from /trails, polled 2s - HeatmapCanvas: canvas radial gradients from /spawns/heatmap - PortalMarkers: emoji markers from /portals - Sidebar toggles for heatmap and portals Phase 3 — Draggable windows: - WindowManagerContext: z-index stack for open windows - DraggableWindow: generic shell with drag-header, close btn, z-stack - ChatWindow: color-coded messages + input form (1000 msg buffer) - CharacterWindow: combat stats with monster damage table - InventoryWindow: item table with material/set/AL/dmg/workmanship - WindowRenderer: reads context, renders all open windows - Action buttons (Chat/Stats/Inv/Char/Radar) now open windows Phase 4 — Window types share same DraggableWindow shell with character-specific content. Combat stats and inventory via API. Phase 5 — Effects: - RareNotification: slide-in/slide-out banner with gold border - Fireworks: 30-particle explosion with CSS custom property animation - Notification queue with 6s display + 0.5s exit animation Phase 6 — Polish: - Window header uses modern blue gradient (not solid purple) - Chat uses monospace font - All overlay layers properly stacked (heatmap → trails → dots → portals) - Mobile: sidebar stacks above map at 768px breakpoint - Chat messages tracked per-character in useLiveData Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import React, { useRef, useEffect, useState } from 'react';
|
|
import { worldToPx } from '../../utils/coordinates';
|
|
import { apiFetch } from '../../api/client';
|
|
|
|
interface HeatmapPoint {
|
|
ew: number;
|
|
ns: number;
|
|
intensity: number;
|
|
}
|
|
|
|
interface Props {
|
|
imgW: number;
|
|
imgH: number;
|
|
enabled: boolean;
|
|
}
|
|
|
|
export const HeatmapCanvas: React.FC<Props> = ({ imgW, imgH, enabled }) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const [data, setData] = useState<HeatmapPoint[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
const fetch = async () => {
|
|
try {
|
|
const resp = await apiFetch<{ spawn_points: HeatmapPoint[] }>('/spawns/heatmap?hours=24&limit=50000');
|
|
setData(resp.spawn_points ?? []);
|
|
} catch { /* ignore */ }
|
|
};
|
|
fetch();
|
|
}, [enabled]);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !enabled || data.length === 0 || imgW === 0) return;
|
|
|
|
canvas.width = imgW;
|
|
canvas.height = imgH;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
ctx.clearRect(0, 0, imgW, imgH);
|
|
|
|
for (const point of data) {
|
|
const { x, y } = worldToPx(point.ew, point.ns, imgW, imgH);
|
|
const radius = Math.max(5, Math.min(12, 5 + Math.sqrt(point.intensity * 0.5)));
|
|
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
|
|
gradient.addColorStop(0, `rgba(255, 0, 0, ${Math.min(0.9, point.intensity / 40)})`);
|
|
gradient.addColorStop(0.6, `rgba(255, 100, 0, ${Math.min(0.4, point.intensity / 120)})`);
|
|
gradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
|
|
}
|
|
}, [data, imgW, imgH, enabled]);
|
|
|
|
if (!enabled) return null;
|
|
|
|
return <canvas ref={canvasRef} className="ml-heatmap-canvas" />;
|
|
};
|