feat(v2): 13 improvements — functional, visual, UX, backend
Functional:
1. Chat: "▼ New messages below" indicator when scrolled up, click to jump
2. Combat stats: "Clear Session" button (red, with confirm dialog)
3. Inventory: live updates via inventory_delta WS (re-fetches on change)
4. Inventory: real mana time from equipment_cantrip_state WS (live
countdown with state dot: green=active, red=inactive, yellow=unknown)
Visual:
5. Thin separator line between tool links and sort buttons
6. Selected player row highlighted with darker background (#2a3344)
7. Scroll-to-top button (▲) appears when scrolled past 200px in player list
UX:
8. Double-click player dot on map opens their chat window
9. Right-click player dot shows context menu (Chat/Stats/Inv/Char/Combat/Radar)
10. Ctrl+D keyboard shortcut toggles between map and dashboard views
11. Sound notification on rare drops (880Hz sine beep via Web Audio API)
Backend:
12. Deep-merge lifetime offense/defense per element — accumulates
total_attacks, failed_attacks, crits, damage per AttackType×Element
instead of overwriting with latest session data
13. Startup cleanup: deletes stale combat_stats records from before
the lifetime fix (pre-2026-04-14T09:00Z)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik
parent
0b64c6ccff
commit
0112c59514
41 changed files with 404 additions and 112 deletions
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, useCallback } from 'react';
|
|||
import { DraggableWindow } from './DraggableWindow';
|
||||
import { apiFetch } from '../../api/client';
|
||||
|
||||
interface Props { id: string; charName: string; zIndex: number; }
|
||||
interface Props { id: string; charName: string; zIndex: number; inventoryVersion?: number; equipmentCantrips?: any; }
|
||||
|
||||
// ── Item normalization (handles both inventory-service snake_case and plugin PascalCase) ──
|
||||
function normalizeItem(raw: any): any {
|
||||
|
|
@ -157,7 +157,7 @@ function PackIcon({ iconSrc, isActive, fillPct, label, onClick }: {
|
|||
);
|
||||
}
|
||||
|
||||
export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
|
||||
export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex, inventoryVersion, equipmentCantrips }) => {
|
||||
const [items, setItems] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activePack, setActivePack] = useState<number | null>(null);
|
||||
|
|
@ -175,7 +175,7 @@ export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
|
|||
setItems(rawItems.map(normalizeItem));
|
||||
setCharStats(stats);
|
||||
}).finally(() => setLoading(false));
|
||||
}, [charName]);
|
||||
}, [charName, inventoryVersion]); // re-fetch when inventory_delta arrives
|
||||
|
||||
const handleHover = useCallback((item: any | null, e?: React.MouseEvent) => {
|
||||
if (item && e) setTooltip({ item, x: e.clientX, y: e.clientY });
|
||||
|
|
@ -352,21 +352,41 @@ export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
|
|||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 160 }}>
|
||||
<div style={{ padding: '4px 8px', fontSize: '0.72rem', fontWeight: 600, color: '#aaa', background: '#111', borderBottom: `1px solid ${gold}` }}>Mana</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '2px 0' }}>
|
||||
{Array.from(equippedMap.values())
|
||||
.filter((i: any) => (i.current_mana > 0 || i.max_mana > 0))
|
||||
.sort((a: any, b: any) => (a.current_mana ?? 999999) - (b.current_mana ?? 999999))
|
||||
.map((item: any, i: number) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '2px 4px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer' }}
|
||||
onMouseEnter={e => handleHover(item, e)} onMouseMove={e => handleHover(item, e)} onMouseLeave={() => handleHover(null)}>
|
||||
<div style={{ width: 20, height: 20, flexShrink: 0 }}><ItemIcon item={item} size={20} /></div>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', background: item.current_mana > 0 ? '#4c4' : '#c44', flexShrink: 0 }} />
|
||||
<div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.68rem', color: '#ccc' }}>{item.name}</div>
|
||||
<div style={{ fontSize: '0.65rem', color: '#88bbff', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{item.current_mana ?? 0}/{item.max_mana ?? 0}</div>
|
||||
<div style={{ fontSize: '0.63rem', color: '#9c9', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', minWidth: 42, textAlign: 'right' }}>
|
||||
{item.max_mana > 0 ? formatManaTime(item.current_mana ?? 0, item.max_mana ?? 0) : ''}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(() => {
|
||||
// Merge real cantrip state data if available
|
||||
const cantripItems = equipmentCantrips?.items ?? [];
|
||||
const cantripMap: Map<number, any> = new Map(cantripItems.map((c: any) => [c.item_id, c]));
|
||||
const snapshotTime = equipmentCantrips?.timestamp ? new Date(equipmentCantrips.timestamp).getTime() : 0;
|
||||
const elapsed = snapshotTime > 0 ? Math.max(0, (Date.now() - snapshotTime) / 1000) : 0;
|
||||
|
||||
return Array.from(equippedMap.values())
|
||||
.map((item: any) => {
|
||||
const cantrip = cantripMap.get(item.item_id);
|
||||
const curMana = cantrip?.current_mana ?? item.current_mana ?? 0;
|
||||
const maxMana = cantrip?.max_mana ?? item.max_mana ?? 0;
|
||||
const rawRemaining = cantrip?.mana_time_remaining_seconds ?? null;
|
||||
const liveRemaining = rawRemaining != null ? Math.max(0, rawRemaining - elapsed) : null;
|
||||
const state = cantrip?.state ?? (curMana > 0 ? 'active' : 'not_active');
|
||||
return { ...item, current_mana: curMana, max_mana: maxMana, liveRemaining, manaState: state };
|
||||
})
|
||||
.filter((i: any) => i.current_mana > 0 || i.max_mana > 0)
|
||||
.sort((a: any, b: any) => (a.liveRemaining ?? 999999) - (b.liveRemaining ?? 999999))
|
||||
.map((item: any, i: number) => {
|
||||
const stateColor = item.manaState === 'active' ? '#4c4' : item.manaState === 'not_active' ? '#c44' : '#da8';
|
||||
return (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '2px 4px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer' }}
|
||||
onMouseEnter={e => handleHover(item, e)} onMouseMove={e => handleHover(item, e)} onMouseLeave={() => handleHover(null)}>
|
||||
<div style={{ width: 20, height: 20, flexShrink: 0 }}><ItemIcon item={item} size={20} /></div>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', background: stateColor, flexShrink: 0 }} />
|
||||
<div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.68rem', color: '#ccc' }}>{item.name}</div>
|
||||
<div style={{ fontSize: '0.65rem', color: '#88bbff', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{item.current_mana}/{item.max_mana}</div>
|
||||
<div style={{ fontSize: '0.63rem', color: '#9c9', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', minWidth: 42, textAlign: 'right' }}>
|
||||
{item.liveRemaining != null ? formatSeconds(item.liveRemaining) : ''}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
{Array.from(equippedMap.values()).filter((i: any) => (i.current_mana > 0 || i.max_mana > 0)).length === 0 && (
|
||||
<div style={{ padding: 12, color: '#555', textAlign: 'center', fontSize: '0.7rem' }}>No mana items equipped</div>
|
||||
)}
|
||||
|
|
@ -378,11 +398,10 @@ export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
|
|||
);
|
||||
};
|
||||
|
||||
function formatManaTime(current: number, max: number): string {
|
||||
if (max <= 0 || current <= 0) return '0h00m';
|
||||
// Rough estimate: ~20 mana per second drain rate for typical items
|
||||
const seconds = current * 20;
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
return `~${hours}h${String(minutes).padStart(2, '0')}m`;
|
||||
function formatSeconds(totalSeconds: number): string {
|
||||
if (totalSeconds <= 0) return '0h00m';
|
||||
const s = Math.floor(totalSeconds);
|
||||
const hours = Math.floor(s / 3600);
|
||||
const minutes = Math.floor((s % 3600) / 60);
|
||||
return `${hours}h${String(minutes).padStart(2, '0')}m`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue