Major overhaul of db -> hypertable conversion, updated GUI, added inventory
This commit is contained in:
erik
parent
fdf9f04bc6
commit
f218350959
8 changed files with 1565 additions and 210 deletions
397
static/script.js
397
static/script.js
|
|
@ -31,6 +31,74 @@ const trailsContainer = document.getElementById('trails');
|
|||
const list = document.getElementById('playerList');
|
||||
const btnContainer = document.getElementById('sortButtons');
|
||||
const tooltip = document.getElementById('tooltip');
|
||||
const coordinates = document.getElementById('coordinates');
|
||||
|
||||
// Global drag system to prevent event listener accumulation
|
||||
let currentDragWindow = null;
|
||||
let dragStartX = 0, dragStartY = 0, dragStartLeft = 0, dragStartTop = 0;
|
||||
|
||||
function makeDraggable(win, header) {
|
||||
if (!window.__chatZ) window.__chatZ = 10000;
|
||||
header.style.cursor = 'move';
|
||||
|
||||
const bringToFront = () => {
|
||||
window.__chatZ += 1;
|
||||
win.style.zIndex = window.__chatZ;
|
||||
};
|
||||
|
||||
header.addEventListener('mousedown', e => {
|
||||
if (e.target.closest('button')) return;
|
||||
e.preventDefault();
|
||||
currentDragWindow = win;
|
||||
bringToFront();
|
||||
dragStartX = e.clientX;
|
||||
dragStartY = e.clientY;
|
||||
dragStartLeft = win.offsetLeft;
|
||||
dragStartTop = win.offsetTop;
|
||||
document.body.classList.add('noselect');
|
||||
});
|
||||
|
||||
// Touch support
|
||||
header.addEventListener('touchstart', e => {
|
||||
if (e.touches.length !== 1 || e.target.closest('button')) return;
|
||||
currentDragWindow = win;
|
||||
bringToFront();
|
||||
const t = e.touches[0];
|
||||
dragStartX = t.clientX;
|
||||
dragStartY = t.clientY;
|
||||
dragStartLeft = win.offsetLeft;
|
||||
dragStartTop = win.offsetTop;
|
||||
});
|
||||
}
|
||||
|
||||
// Global mouse handlers (only added once)
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!currentDragWindow) return;
|
||||
const dx = e.clientX - dragStartX;
|
||||
const dy = e.clientY - dragStartY;
|
||||
currentDragWindow.style.left = `${dragStartLeft + dx}px`;
|
||||
currentDragWindow.style.top = `${dragStartTop + dy}px`;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (currentDragWindow) {
|
||||
currentDragWindow = null;
|
||||
document.body.classList.remove('noselect');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('touchmove', e => {
|
||||
if (!currentDragWindow || e.touches.length !== 1) return;
|
||||
const t = e.touches[0];
|
||||
const dx = t.clientX - dragStartX;
|
||||
const dy = t.clientY - dragStartY;
|
||||
currentDragWindow.style.left = `${dragStartLeft + dx}px`;
|
||||
currentDragWindow.style.top = `${dragStartTop + dy}px`;
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', () => {
|
||||
currentDragWindow = null;
|
||||
});
|
||||
// Filter input for player names (starts-with filter)
|
||||
let currentFilter = '';
|
||||
const filterInput = document.getElementById('playerFilter');
|
||||
|
|
@ -47,6 +115,8 @@ let socket;
|
|||
const chatWindows = {};
|
||||
// Keep track of open stats windows: character_name -> DOM element
|
||||
const statsWindows = {};
|
||||
// Keep track of open inventory windows: character_name -> DOM element
|
||||
const inventoryWindows = {};
|
||||
|
||||
/**
|
||||
* ---------- Application Constants -----------------------------
|
||||
|
|
@ -61,14 +131,15 @@ const statsWindows = {};
|
|||
* CHAT_COLOR_MAP: Color mapping for in-game chat channels by channel code
|
||||
*/
|
||||
/* ---------- constants ------------------------------------------- */
|
||||
const MAX_Z = 10;
|
||||
const MAX_Z = 20;
|
||||
const FOCUS_ZOOM = 3; // zoom level when you click a name
|
||||
const POLL_MS = 2000;
|
||||
const MAP_BOUNDS = {
|
||||
west : -102.04,
|
||||
east : 102.19,
|
||||
north: 102.16,
|
||||
south: -102.00
|
||||
// UtilityBelt's more accurate coordinate bounds
|
||||
const MAP_BOUNDS = {
|
||||
west: -102.1,
|
||||
east: 102.1,
|
||||
north: 102.1,
|
||||
south: -102.1
|
||||
};
|
||||
|
||||
// Base path for tracker API endpoints; prefix API calls with '/api' when served behind a proxy
|
||||
|
|
@ -119,8 +190,29 @@ const CHAT_COLOR_MAP = {
|
|||
/* ---------- player/dot color assignment ------------------------- */
|
||||
// A base palette of distinct, color-blind-friendly colors
|
||||
const PALETTE = [
|
||||
// Original colorblind-friendly base palette
|
||||
'#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd',
|
||||
'#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
|
||||
'#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf',
|
||||
|
||||
// Extended high-contrast colors
|
||||
'#ff4444', '#44ff44', '#4444ff', '#ffff44', '#ff44ff',
|
||||
'#44ffff', '#ff8844', '#88ff44', '#4488ff', '#ff4488',
|
||||
|
||||
// Darker variants
|
||||
'#cc3333', '#33cc33', '#3333cc', '#cccc33', '#cc33cc',
|
||||
'#33cccc', '#cc6633', '#66cc33', '#3366cc', '#cc3366',
|
||||
|
||||
// Brighter variants
|
||||
'#ff6666', '#66ff66', '#6666ff', '#ffff66', '#ff66ff',
|
||||
'#66ffff', '#ffaa66', '#aaff66', '#66aaff', '#ff66aa',
|
||||
|
||||
// Additional distinct colors
|
||||
'#990099', '#009900', '#000099', '#990000', '#009999',
|
||||
'#999900', '#aa5500', '#55aa00', '#0055aa', '#aa0055',
|
||||
|
||||
// Light pastels for contrast
|
||||
'#ffaaaa', '#aaffaa', '#aaaaff', '#ffffaa', '#ffaaff',
|
||||
'#aaffff', '#ffccaa', '#ccffaa', '#aaccff', '#ffaacc'
|
||||
];
|
||||
// Map from character name to assigned color
|
||||
const colorMap = {};
|
||||
|
|
@ -158,23 +250,37 @@ function getColorFor(name) {
|
|||
const sortOptions = [
|
||||
{
|
||||
value: "name",
|
||||
label: "Name ↑",
|
||||
label: "Name",
|
||||
comparator: (a, b) => a.character_name.localeCompare(b.character_name)
|
||||
},
|
||||
{
|
||||
value: "kph",
|
||||
label: "KPH ↓",
|
||||
label: "KPH",
|
||||
comparator: (a, b) => b.kills_per_hour - a.kills_per_hour
|
||||
},
|
||||
{
|
||||
value: "kills",
|
||||
label: "Kills ↓",
|
||||
label: "S.Kills",
|
||||
comparator: (a, b) => b.kills - a.kills
|
||||
},
|
||||
{
|
||||
value: "rares",
|
||||
label: "Session Rares ↓",
|
||||
label: "S.Rares",
|
||||
comparator: (a, b) => (b.session_rares || 0) - (a.session_rares || 0)
|
||||
},
|
||||
{
|
||||
value: "total_kills",
|
||||
label: "T.Kills",
|
||||
comparator: (a, b) => (b.total_kills || 0) - (a.total_kills || 0)
|
||||
},
|
||||
{
|
||||
value: "kpr",
|
||||
label: "KPR",
|
||||
comparator: (a, b) => {
|
||||
const aKpr = (a.total_rares || 0) > 0 ? (a.total_kills || 0) / (a.total_rares || 0) : Infinity;
|
||||
const bKpr = (b.total_rares || 0) > 0 ? (b.total_kills || 0) / (b.total_rares || 0) : Infinity;
|
||||
return aKpr - bKpr; // Ascending - lower KPR is better (more efficient rare finding)
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -226,11 +332,28 @@ function worldToPx(ew, ns) {
|
|||
return { x, y };
|
||||
}
|
||||
|
||||
function pxToWorld(x, y) {
|
||||
// Convert screen coordinates to map image coordinates
|
||||
const mapX = (x - offX) / scale;
|
||||
const mapY = (y - offY) / scale;
|
||||
|
||||
// Convert map image coordinates to world coordinates
|
||||
const ew = MAP_BOUNDS.west + (mapX / imgW) * (MAP_BOUNDS.east - MAP_BOUNDS.west);
|
||||
const ns = MAP_BOUNDS.north - (mapY / imgH) * (MAP_BOUNDS.north - MAP_BOUNDS.south);
|
||||
|
||||
return { ew, ns };
|
||||
}
|
||||
|
||||
// Show or create a stats window for a character
|
||||
function showStatsWindow(name) {
|
||||
if (statsWindows[name]) {
|
||||
const existing = statsWindows[name];
|
||||
existing.style.display = 'flex';
|
||||
// Toggle: close if already visible, open if hidden
|
||||
if (existing.style.display === 'flex') {
|
||||
existing.style.display = 'none';
|
||||
} else {
|
||||
existing.style.display = 'flex';
|
||||
}
|
||||
return;
|
||||
}
|
||||
const win = document.createElement('div');
|
||||
|
|
@ -248,6 +371,29 @@ function showStatsWindow(name) {
|
|||
header.appendChild(title);
|
||||
header.appendChild(closeBtn);
|
||||
win.appendChild(header);
|
||||
// Time period controls
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'stats-controls';
|
||||
const timeRanges = [
|
||||
{ label: '1H', value: 'now-1h' },
|
||||
{ label: '6H', value: 'now-6h' },
|
||||
{ label: '24H', value: 'now-24h' },
|
||||
{ label: '7D', value: 'now-7d' }
|
||||
];
|
||||
timeRanges.forEach(range => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'time-range-btn';
|
||||
btn.textContent = range.label;
|
||||
if (range.value === 'now-24h') btn.classList.add('active');
|
||||
btn.addEventListener('click', () => {
|
||||
controls.querySelectorAll('.time-range-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
updateStatsTimeRange(content, name, range.value);
|
||||
});
|
||||
controls.appendChild(btn);
|
||||
});
|
||||
win.appendChild(controls);
|
||||
|
||||
// Content container
|
||||
const content = document.createElement('div');
|
||||
content.className = 'chat-messages';
|
||||
|
|
@ -255,7 +401,13 @@ function showStatsWindow(name) {
|
|||
win.appendChild(content);
|
||||
document.body.appendChild(win);
|
||||
statsWindows[name] = win;
|
||||
// Embed a 2×2 grid of Grafana solo-panel iframes for this character
|
||||
// Load initial stats with default 24h range
|
||||
updateStatsTimeRange(content, name, 'now-24h');
|
||||
// Enable dragging using the global drag system
|
||||
makeDraggable(win, header);
|
||||
}
|
||||
|
||||
function updateStatsTimeRange(content, name, timeRange) {
|
||||
content.innerHTML = '';
|
||||
const panels = [
|
||||
{ title: 'Kills per Hour', id: 1 },
|
||||
|
|
@ -269,6 +421,8 @@ function showStatsWindow(name) {
|
|||
`/grafana/d-solo/dereth-tracker/dereth-tracker-dashboard` +
|
||||
`?panelId=${p.id}` +
|
||||
`&var-character=${encodeURIComponent(name)}` +
|
||||
`&from=${timeRange}` +
|
||||
`&to=now` +
|
||||
`&theme=light`;
|
||||
iframe.setAttribute('title', p.title);
|
||||
iframe.width = '350';
|
||||
|
|
@ -277,55 +431,48 @@ function showStatsWindow(name) {
|
|||
iframe.allowFullscreen = true;
|
||||
content.appendChild(iframe);
|
||||
});
|
||||
// Enable dragging of the stats window via its header
|
||||
if (!window.__chatZ) window.__chatZ = 10000;
|
||||
let drag = false;
|
||||
let startX = 0, startY = 0, startLeft = 0, startTop = 0;
|
||||
header.style.cursor = 'move';
|
||||
const bringToFront = () => {
|
||||
window.__chatZ += 1;
|
||||
win.style.zIndex = window.__chatZ;
|
||||
};
|
||||
header.addEventListener('mousedown', e => {
|
||||
if (e.target.closest('button')) return;
|
||||
e.preventDefault();
|
||||
drag = true;
|
||||
bringToFront();
|
||||
startX = e.clientX; startY = e.clientY;
|
||||
startLeft = win.offsetLeft; startTop = win.offsetTop;
|
||||
document.body.classList.add('noselect');
|
||||
});
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!drag) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
win.style.left = `${startLeft + dx}px`;
|
||||
win.style.top = `${startTop + dy}px`;
|
||||
});
|
||||
window.addEventListener('mouseup', () => {
|
||||
drag = false;
|
||||
document.body.classList.remove('noselect');
|
||||
});
|
||||
// Touch support for dragging
|
||||
header.addEventListener('touchstart', e => {
|
||||
if (e.touches.length !== 1 || e.target.closest('button')) return;
|
||||
drag = true;
|
||||
bringToFront();
|
||||
const t = e.touches[0];
|
||||
startX = t.clientX; startY = t.clientY;
|
||||
startLeft = win.offsetLeft; startTop = win.offsetTop;
|
||||
});
|
||||
window.addEventListener('touchmove', e => {
|
||||
if (!drag || e.touches.length !== 1) return;
|
||||
const t = e.touches[0];
|
||||
const dx = t.clientX - startX;
|
||||
const dy = t.clientY - startY;
|
||||
win.style.left = `${startLeft + dx}px`;
|
||||
win.style.top = `${startTop + dy}px`;
|
||||
});
|
||||
window.addEventListener('touchend', () => { drag = false; });
|
||||
}
|
||||
|
||||
// Show or create an inventory window for a character
|
||||
function showInventoryWindow(name) {
|
||||
if (inventoryWindows[name]) {
|
||||
const existing = inventoryWindows[name];
|
||||
// Toggle: close if already visible, open if hidden
|
||||
if (existing.style.display === 'flex') {
|
||||
existing.style.display = 'none';
|
||||
} else {
|
||||
existing.style.display = 'flex';
|
||||
}
|
||||
return;
|
||||
}
|
||||
const win = document.createElement('div');
|
||||
win.className = 'inventory-window';
|
||||
win.dataset.character = name;
|
||||
// Header (reuses chat-header styling)
|
||||
const header = document.createElement('div');
|
||||
header.className = 'chat-header';
|
||||
const title = document.createElement('span');
|
||||
title.textContent = `Inventory: ${name}`;
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'chat-close-btn';
|
||||
closeBtn.textContent = '×';
|
||||
closeBtn.addEventListener('click', () => { win.style.display = 'none'; });
|
||||
header.appendChild(title);
|
||||
header.appendChild(closeBtn);
|
||||
win.appendChild(header);
|
||||
// Content container
|
||||
const content = document.createElement('div');
|
||||
content.className = 'inventory-content';
|
||||
content.innerHTML = '<div class="inventory-placeholder">Inventory feature coming soon...</div>';
|
||||
win.appendChild(content);
|
||||
document.body.appendChild(win);
|
||||
inventoryWindows[name] = win;
|
||||
|
||||
// Enable dragging using the global drag system
|
||||
makeDraggable(win, header);
|
||||
}
|
||||
|
||||
|
||||
const applyTransform = () =>
|
||||
group.style.transform = `translate(${offX}px,${offY}px) scale(${scale})`;
|
||||
|
||||
|
|
@ -446,15 +593,22 @@ function render(players) {
|
|||
const color = getColorFor(p.character_name);
|
||||
li.style.borderLeftColor = color;
|
||||
li.className = 'player-item';
|
||||
// Calculate KPR (Kills Per Rare)
|
||||
const totalKills = p.total_kills || 0;
|
||||
const totalRares = p.total_rares || 0;
|
||||
const kpr = totalRares > 0 ? Math.round(totalKills / totalRares) : '∞';
|
||||
|
||||
li.innerHTML = `
|
||||
<span class="player-name">${p.character_name}</span>
|
||||
<span class="player-loc">${loc(p.ns, p.ew)}</span>
|
||||
<span class="player-name">${p.character_name} <span class="coordinates-inline">${loc(p.ns, p.ew)}</span></span>
|
||||
<span class="stat kills">${p.kills}</span>
|
||||
<span class="stat total-kills">${p.total_kills || 0}</span>
|
||||
<span class="stat kph">${p.kills_per_hour}</span>
|
||||
<span class="stat rares">${p.session_rares}/${p.total_rares}</span>
|
||||
<span class="stat kpr">${kpr}</span>
|
||||
<span class="stat meta">${p.vt_state}</span>
|
||||
<span class="stat onlinetime">${p.onlinetime}</span>
|
||||
<span class="stat deaths">${p.deaths}</span>
|
||||
<span class="stat deaths">${p.deaths}/${p.total_deaths || 0}</span>
|
||||
<span class="stat tapers">${p.prismatic_taper_count || 0}</span>
|
||||
`;
|
||||
|
||||
// Color the metastate pill according to its value
|
||||
|
|
@ -489,6 +643,15 @@ function render(players) {
|
|||
showStatsWindow(p.character_name);
|
||||
});
|
||||
li.appendChild(statsBtn);
|
||||
// Inventory button
|
||||
const inventoryBtn = document.createElement('button');
|
||||
inventoryBtn.className = 'inventory-btn';
|
||||
inventoryBtn.textContent = 'Inventory';
|
||||
inventoryBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
showInventoryWindow(p.character_name);
|
||||
});
|
||||
li.appendChild(inventoryBtn);
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
|
@ -553,12 +716,17 @@ function initWebSocket() {
|
|||
// Display or create a chat window for a character
|
||||
function showChatWindow(name) {
|
||||
if (chatWindows[name]) {
|
||||
// Restore flex layout when reopening & bring to front
|
||||
const existing = chatWindows[name];
|
||||
existing.style.display = 'flex';
|
||||
if (!window.__chatZ) window.__chatZ = 10000;
|
||||
window.__chatZ += 1;
|
||||
existing.style.zIndex = window.__chatZ;
|
||||
// Toggle: close if already visible, open if hidden
|
||||
if (existing.style.display === 'flex') {
|
||||
existing.style.display = 'none';
|
||||
} else {
|
||||
existing.style.display = 'flex';
|
||||
// Bring to front when opening
|
||||
if (!window.__chatZ) window.__chatZ = 10000;
|
||||
window.__chatZ += 1;
|
||||
existing.style.zIndex = window.__chatZ;
|
||||
}
|
||||
return;
|
||||
}
|
||||
const win = document.createElement('div');
|
||||
|
|
@ -600,76 +768,8 @@ function showChatWindow(name) {
|
|||
document.body.appendChild(win);
|
||||
chatWindows[name] = win;
|
||||
|
||||
/* --------------------------------------------------------- */
|
||||
/* enable dragging of the chat window via its header element */
|
||||
/* --------------------------------------------------------- */
|
||||
|
||||
// keep a static counter so newer windows can be brought to front
|
||||
if (!window.__chatZ) window.__chatZ = 10000;
|
||||
|
||||
let drag = false;
|
||||
let startX = 0, startY = 0;
|
||||
let startLeft = 0, startTop = 0;
|
||||
|
||||
header.style.cursor = 'move';
|
||||
|
||||
// bring to front when interacting
|
||||
const bringToFront = () => {
|
||||
window.__chatZ += 1;
|
||||
win.style.zIndex = window.__chatZ;
|
||||
};
|
||||
|
||||
header.addEventListener('mousedown', e => {
|
||||
// don't initiate drag when pressing the close button (or other clickable controls)
|
||||
if (e.target.closest('button')) return;
|
||||
e.preventDefault();
|
||||
drag = true;
|
||||
bringToFront();
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
// current absolute position
|
||||
startLeft = win.offsetLeft;
|
||||
startTop = win.offsetTop;
|
||||
document.body.classList.add('noselect');
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!drag) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
win.style.left = `${startLeft + dx}px`;
|
||||
win.style.top = `${startTop + dy}px`;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
drag = false;
|
||||
document.body.classList.remove('noselect');
|
||||
});
|
||||
|
||||
/* touch support */
|
||||
header.addEventListener('touchstart', e => {
|
||||
if (e.touches.length !== 1 || e.target.closest('button')) return;
|
||||
drag = true;
|
||||
bringToFront();
|
||||
const t = e.touches[0];
|
||||
startX = t.clientX;
|
||||
startY = t.clientY;
|
||||
startLeft = win.offsetLeft;
|
||||
startTop = win.offsetTop;
|
||||
});
|
||||
|
||||
window.addEventListener('touchmove', e => {
|
||||
if (!drag || e.touches.length !== 1) return;
|
||||
const t = e.touches[0];
|
||||
const dx = t.clientX - startX;
|
||||
const dy = t.clientY - startY;
|
||||
win.style.left = `${startLeft + dx}px`;
|
||||
win.style.top = `${startTop + dy}px`;
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', () => {
|
||||
drag = false;
|
||||
});
|
||||
// Enable dragging using the global drag system
|
||||
makeDraggable(win, header);
|
||||
}
|
||||
|
||||
// Append a chat message to the correct window
|
||||
|
|
@ -752,3 +852,24 @@ wrap.addEventListener('touchmove', e => {
|
|||
wrap.addEventListener('touchend', () => {
|
||||
dragging = false;
|
||||
});
|
||||
|
||||
/* ---------- coordinate display on hover ---------------------------- */
|
||||
wrap.addEventListener('mousemove', e => {
|
||||
if (!imgW) return;
|
||||
|
||||
const r = wrap.getBoundingClientRect();
|
||||
const x = e.clientX - r.left;
|
||||
const y = e.clientY - r.top;
|
||||
|
||||
const { ew, ns } = pxToWorld(x, y);
|
||||
|
||||
// Display coordinates using the same format as the existing loc function
|
||||
coordinates.textContent = loc(ns, ew);
|
||||
coordinates.style.left = `${x + 10}px`;
|
||||
coordinates.style.top = `${y + 10}px`;
|
||||
coordinates.style.display = 'block';
|
||||
});
|
||||
|
||||
wrap.addEventListener('mouseleave', () => {
|
||||
coordinates.style.display = 'none';
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue