No actors match this view.
';
}
-function renderEvents() {
- const events = state.snapshot?.events || [];
- els.eventList.innerHTML = '';
+function actorById(id, kind) {
+ if (!state.snapshot) return null;
+ return kind === 'player'
+ ? state.snapshot.players.find((player) => String(player.id) === String(id))
+ : state.snapshot.bots.find((bot) => String(bot.id) === String(id));
+}
- events.slice(0, 18).forEach((event) => {
- const row = document.createElement('div');
- row.className = 'event-row';
- row.innerHTML = `
- Choose a bot from the scoped roster or open a smaller cluster.
+ Choose a point or cluster to inspect the bot.
';
+ return;
+ }
+ const activity = actor.target?.name || actor.spot?.name || actor.intent || actor.mode || 'idle';
els.selectedCard.innerHTML = `
-
-
-
+
Selected ${text(actor.phase || '')}
+
${text(actor.isPk ? `PK ${actor.name}` : actor.name)}
+
Lv ${number(actor.level, '?')} · ${text(actor.role || actor.classFamily || 'bot')} · ${text(activity)}
+ ${state.clusterScope ? '
' : ''}
+ `;
+}
+
+function renderInspector() {
+ const actor = selectedActor();
+ if (!actor) {
+ els.inspectorFreshness.textContent = 'live';
+ if (state.clusterScope) {
+ const scoped = filteredActors();
+ const counts = scoped.reduce((result, item) => {
+ const phase = item.kind === 'player' ? 'players' : item.phase;
+ result[phase] = (result[phase] || 0) + 1;
+ return result;
+ }, {});
+ els.selectedInspector.innerHTML = `
+
+
◎
+
${number(scoped.length)} actors in this cluster
+
${text(state.clusterScope.label)} · roster is scoped to this area.
+
+ ${['hot', 'warm', 'cold', 'players'].filter((phase) => counts[phase]).map((phase) => `${phase} ${number(counts[phase])}`).join('')}
+
+
+
+ `;
+ return;
+ }
+ els.selectedInspector.innerHTML = `
◎Nothing selectedClick any bot on the map to see its equipment, current action and runtime status.
`;
+ return;
+ }
+
+ if (state.detailLoading && !state.detail) {
+ els.inspectorFreshness.textContent = 'loading';
+ els.selectedInspector.innerHTML = '
Loading bot infoReading the live status and persisted equipment snapshot.
';
+ return;
+ }
+
+ if (state.detailError && !state.detail) {
+ els.inspectorFreshness.textContent = 'error';
+ els.selectedInspector.innerHTML = `
+
!
+
Bot info unavailable
+
${text(state.detailError)} · the compact map snapshot may be incomplete.
+
+
`;
+ return;
+ }
+
+ const build = actor.build;
+ const family = build?.classFamily || (actor.classId ? `class ${actor.classId}` : (actor.kind === 'player' ? 'player' : 'bot'));
+ const location = actor.loc ? `${Math.round(actor.loc.locX)}, ${Math.round(actor.loc.locY)}, ${Math.round(actor.loc.locZ || 0)}` : 'unknown';
+ const party = actor.party
+ ? actor.party.leader?.name
+ ? `${actor.party.role || actor.role || 'member'} · leader ${actor.party.leader.name}`
+ : `${actor.party.role || actor.role || 'member'} · leader ${actor.party.leaderId || 'unknown'}`
+ : 'solo';
+ const freshness = actor.updatedAt ? formatRelative(actor.updatedAt) : 'live';
+ els.inspectorFreshness.textContent = state.detailError ? 'stale' : freshness;
+ const detailWarning = state.detailError ? `
+ Refresh failed · ${text(state.detailError)}
+
+
` : '';
+ els.selectedInspector.innerHTML = `
+ ${detailWarning}
+
+
${text(String(actor.name || '?').slice(0, 1).toUpperCase())}
+
${text(actor.isPk ? `PK ${actor.name}` : actor.name)}Lv ${number(actor.level, '?')} · ${text(family)} · ${text(actor.role || '—')}
+
${text(actor.phase || 'bot')}
+
+
+ ${vitalBar('HP', actor.vitals, '#63d37b')}
+ ${vitalBar('MP', actor.vitals, '#57c7e8')}
-
${target}
Loc ${loc}
+ ${renderAction(actor)}
+
+
Mode${text(actor.mode)}
+
Region${text(actor.region || actor.home?.region)}
+
Spot${text(actor.spot?.name || actor.spot?.id)}
+
Party${text(party)}
+
Position${text(location)}
+
Blockers${text(actor.blockers?.join(' · '), 'none')}
+
+ ${renderSignals(actor)}
+ ${actor.equipment || actor.combat ? renderEquipment(actor.equipment, actor.combat) : ''}
+ ${renderBuild(build)}
+ ${renderDecisions(actor)}
+ ${actor.counters ? `
Progress
${formatRelative(actor.updatedAt)}${statCell('Wins', actor.counters.fightsWon)}${statCell('Resolves', actor.counters.fightsResolved)}${statCell('Deaths', actor.counters.deaths)}${statCell('Adena', actor.adena)}
` : ''}
`;
}
+function renderSelected() {
+ renderSelectedCard();
+ renderInspector();
+}
+
function renderSnapshot() {
const snap = state.snapshot;
if (!snap) return;
- els.botsTotal.textContent = snap.bots.length;
- els.playersTotal.textContent = snap.players.length;
- els.movingTotal.textContent = snap.stats.moving || 0;
- els.targetsTotal.textContent = snap.stats.activeTargets || 0;
- els.lastRefresh.textContent = new Date(snap.generatedAt).toLocaleTimeString();
- els.heapLine.textContent = `heap ${snap.runtime.heapUsedMb} MB`;
- els.serverLine.textContent = `uptime ${formatDuration(snap.uptimeMs)} / hot ${snap.population.hot} / warm ${snap.population.warm} / cold ${snap.population.cold}`;
-
+ const population = snap.population || {};
+ els.serverLine.textContent = `${number(population.total || snap.bots.length)} bots in simulation · ${number(population.hot || 0)} active · uptime ${formatDuration(snap.uptimeMs)}`;
setSvgViewBox();
renderTiles();
renderGrid();
renderLabels();
+ renderFilterCounts();
renderPoints();
- renderPhaseBars();
- renderModeList();
- renderActorList();
- renderEvents();
+ renderPopulation();
+ renderRoster();
+ renderSelected();
+}
+
+async function loadBotDetail(id, showLoading = true) {
+ if (!id || state.detailLoading) return;
+ const requestId = ++state.detailRequest;
+ state.detailLoading = showLoading;
+ state.detailError = null;
+ if (showLoading) renderSelected();
+ try {
+ const response = await fetch(`/observer/api/bot/${encodeURIComponent(id)}`, { cache: 'no-store' });
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ const detail = await response.json();
+ if (requestId !== state.detailRequest || String(state.selectedId?.id) !== String(id)) return;
+ state.detail = detail;
+ } catch (error) {
+ if (requestId === state.detailRequest) state.detailError = error.message;
+ } finally {
+ if (requestId === state.detailRequest) {
+ state.detailLoading = false;
+ renderSelected();
+ }
+ }
+}
+
+function selectActor(id, kind = 'bot', focus = false) {
+ state.selectedId = { id, kind };
+ state.detail = null;
+ state.detailError = null;
+ state.detailLoading = false;
+ if (focus) {
+ const actor = actorById(id, kind);
+ if (actor?.loc) {
+ const viewport = state.viewport || { x: 0, y: 0, width: mapMeta().width, height: mapMeta().height };
+ const point = worldToMap(actor.loc);
+ applyViewport({
+ x: point.x - viewport.width * 0.5,
+ y: point.y - viewport.height * 0.5,
+ width: viewport.width,
+ height: viewport.height
+ });
+ }
+ }
+ renderPoints();
+ renderRoster();
+ renderSelected();
+ if (kind === 'bot') loadBotDetail(id);
+}
+
+function focusCluster(cluster) {
+ if (cluster.size === 1) {
+ selectActor(cluster.members[0].actor.id, cluster.members[0].actor.kind);
+ return;
+ }
+ state.clusterScope = {
+ actorKeys: new Set(cluster.members.map(({ actor }) => actorKey(actor))),
+ label: clusterLocation(cluster)
+ };
+ state.selectedId = null;
+ state.detail = null;
+ state.detailLoading = false;
+ state.detailRequest += 1;
+
+ const points = cluster.members.map(({ point }) => point);
+ const xs = points.map((point) => point.x);
+ const ys = points.map((point) => point.y);
+ const pad = screenUnits(44);
+ const rect = els.worldMap.getBoundingClientRect();
+ const aspect = Math.max(1, rect.width / Math.max(1, rect.height));
+ let width = Math.max(240, Math.max(...xs) - Math.min(...xs) + pad * 2);
+ let height = Math.max(170, Math.max(...ys) - Math.min(...ys) + pad * 2);
+ if (width / height < aspect) width = height * aspect;
+ else height = width / aspect;
+ applyViewport({
+ x: ((Math.min(...xs) + Math.max(...xs)) / 2) - width / 2,
+ y: ((Math.min(...ys) + Math.max(...ys)) / 2) - height / 2,
+ width,
+ height
+ });
+ renderRoster();
+ renderSelected();
+}
+
+function clusterLocation(cluster) {
+ const labels = cluster.members
+ .map(({ actor }) => actor.home?.region || actor.region || actor.spot?.name)
+ .filter((label) => label && !/^-?\d+_-?\d+$/.test(label));
+ if (!labels.length) return 'this area';
+ const counts = labels.reduce((result, label) => result.set(label, (result.get(label) || 0) + 1), new Map());
+ return [...counts.entries()].sort((a, b) => b[1] - a[1])[0][0];
+}
+
+function clearClusterScope(resetViewport = false) {
+ state.clusterScope = null;
+ if (resetViewport) {
+ state.fit = true;
+ els.fitButton.classList.add('is-live');
+ setSvgViewBox();
+ renderLabels();
+ }
+ renderPoints();
+ renderRoster();
renderSelected();
}
@@ -504,8 +974,9 @@ async function refresh() {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
state.snapshot = await response.json();
renderSnapshot();
- } catch (err) {
- els.serverLine.textContent = `Observer snapshot failed: ${err.message}`;
+ if (state.selectedId?.kind === 'bot' && !state.detailLoading) loadBotDetail(state.selectedId.id, false);
+ } catch (error) {
+ els.serverLine.textContent = `Observer snapshot failed: ${error.message}`;
}
}
@@ -513,43 +984,61 @@ els.liveToggle.addEventListener('click', () => {
state.live = !state.live;
els.liveToggle.classList.toggle('is-live', state.live);
els.liveToggle.title = state.live ? 'Pause live refresh' : 'Resume live refresh';
- els.liveToggle.lastChild.textContent = state.live ? 'Live' : 'Paused';
+ els.liveLabel.textContent = state.live ? 'Live' : 'Paused';
if (state.live) refresh();
});
els.fitButton.addEventListener('click', () => {
+ state.clusterScope = null;
state.fit = true;
els.fitButton.classList.add('is-live');
setSvgViewBox();
renderLabels();
renderPoints();
+ renderRoster();
+ renderSelected();
+});
+
+document.addEventListener('click', (event) => {
+ if (event.target.closest('[data-retry-detail]')) {
+ if (state.selectedId?.kind === 'bot') loadBotDetail(state.selectedId.id);
+ return;
+ }
+ if (!event.target.closest('[data-clear-cluster]')) return;
+ clearClusterScope(true);
});
els.filterStrip.addEventListener('click', (event) => {
const button = event.target.closest('[data-phase]');
if (!button) return;
state.phase = button.dataset.phase;
- els.filterStrip.querySelectorAll('.filter').forEach((item) => {
- item.classList.toggle('is-active', item === button);
- });
+ els.filterStrip.querySelectorAll('.filter').forEach((item) => item.classList.toggle('is-active', item === button));
+ renderPoints();
+ renderRoster();
+});
+
+els.actorSearch.addEventListener('input', (event) => {
+ state.search = String(event.target.value || '').trim().toLowerCase();
+ renderFilterCounts();
renderPoints();
+ renderRoster();
+});
+
+els.actorList.addEventListener('click', (event) => {
+ const row = event.target.closest('[data-roster-id]');
+ if (!row) return;
+ selectActor(row.dataset.rosterId, row.dataset.rosterKind, true);
});
els.worldMap.addEventListener('wheel', (event) => {
event.preventDefault();
- const viewport = state.viewport || {
- x: 0,
- y: 0,
- width: mapMeta().width,
- height: mapMeta().height
- };
+ const viewport = state.viewport || { x: 0, y: 0, width: mapMeta().width, height: mapMeta().height };
const focus = clientToMapPoint(event.clientX, event.clientY);
const zoomFactor = event.deltaY < 0 ? 0.82 : 1.22;
const nextWidth = viewport.width * zoomFactor;
const nextHeight = viewport.height * zoomFactor;
const focusRatioX = (focus.x - viewport.x) / viewport.width;
const focusRatioY = (focus.y - viewport.y) / viewport.height;
-
applyViewport({
x: focus.x - nextWidth * focusRatioX,
y: focus.y - nextHeight * focusRatioY,
@@ -559,7 +1048,7 @@ els.worldMap.addEventListener('wheel', (event) => {
}, { passive: false });
els.worldMap.addEventListener('pointerdown', (event) => {
- if (event.button !== 0) return;
+ if (event.button !== 0 || event.target.closest?.('.point')) return;
els.worldMap.setPointerCapture(event.pointerId);
state.drag = {
pointerId: event.pointerId,
@@ -572,15 +1061,10 @@ els.worldMap.addEventListener('pointerdown', (event) => {
els.worldMap.addEventListener('pointermove', (event) => {
if (!state.drag || state.drag.pointerId !== event.pointerId) return;
- const rect = els.worldMap.getBoundingClientRect();
- const dx = ((event.clientX - state.drag.startX) / rect.width) * state.drag.viewport.width;
- const dy = ((event.clientY - state.drag.startY) / rect.height) * state.drag.viewport.height;
-
- applyViewport({
- ...state.drag.viewport,
- x: state.drag.viewport.x - dx,
- y: state.drag.viewport.y - dy
- });
+ const metrics = mapViewportMetrics(state.drag.viewport);
+ const dx = (event.clientX - state.drag.startX) / metrics.scale;
+ const dy = (event.clientY - state.drag.startY) / metrics.scale;
+ applyViewport({ ...state.drag.viewport, x: state.drag.viewport.x - dx, y: state.drag.viewport.y - dy });
});
function finishDrag(event) {
@@ -592,5 +1076,22 @@ function finishDrag(event) {
els.worldMap.addEventListener('pointerup', finishDrag);
els.worldMap.addEventListener('pointercancel', finishDrag);
+document.addEventListener('keydown', (event) => {
+ if (event.key === '/' && document.activeElement !== els.actorSearch) {
+ event.preventDefault();
+ els.actorSearch.focus();
+ }
+ if (event.key === 'Escape' && document.activeElement === els.actorSearch) {
+ els.actorSearch.value = '';
+ state.search = '';
+ renderFilterCounts();
+ renderPoints();
+ renderRoster();
+ els.actorSearch.blur();
+ return;
+ }
+ if (event.key === 'Escape' && state.clusterScope) clearClusterScope(true);
+});
+
refresh();
setInterval(refresh, 2000);
diff --git a/src/WorldObserver/public/index.html b/src/WorldObserver/public/index.html
index 290619d3..1bda1abd 100644
--- a/src/WorldObserver/public/index.html
+++ b/src/WorldObserver/public/index.html
@@ -11,27 +11,37 @@