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
|
|
@ -31,6 +31,7 @@
|
|||
<div id="dots"></div>
|
||||
</div>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
<div id="coordinates" class="coordinates"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main JavaScript file for WebSocket communication and UI logic -->
|
||||
|
|
|
|||
BIN
static/prismatic-taper-icon.png
Normal file
BIN
static/prismatic-taper-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
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';
|
||||
});
|
||||
|
|
|
|||
731
static/style-ac.css
Normal file
731
static/style-ac.css
Normal file
|
|
@ -0,0 +1,731 @@
|
|||
/*
|
||||
* style-ac.css - Asheron's Call themed styles for Dereth Tracker
|
||||
*
|
||||
* Recreates the classic AC UI with stone textures, beveled edges,
|
||||
* golden accents, and medieval fantasy aesthetics.
|
||||
*/
|
||||
|
||||
/* CSS Custom Properties for AC theme colors and sizing */
|
||||
:root {
|
||||
--sidebar-width: 340px;
|
||||
|
||||
/* AC Color Palette */
|
||||
--ac-black: #0a0a0a;
|
||||
--ac-dark-stone: #1a1a1a;
|
||||
--ac-medium-stone: #2a2a2a;
|
||||
--ac-light-stone: #3a3a3a;
|
||||
--ac-border-dark: #000;
|
||||
--ac-border-light: #4a4a4a;
|
||||
--ac-gold: #d4af37;
|
||||
--ac-gold-bright: #ffd700;
|
||||
--ac-gold-dark: #b8941f;
|
||||
--ac-green: #00ff00;
|
||||
--ac-cyan: #00ffff;
|
||||
--ac-text: #e0e0e0;
|
||||
--ac-text-dim: #a0a0a0;
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-main: var(--ac-black);
|
||||
--bg-side: var(--ac-dark-stone);
|
||||
--card: var(--ac-medium-stone);
|
||||
--card-hov: var(--ac-light-stone);
|
||||
--text: var(--ac-text);
|
||||
--accent: var(--ac-gold);
|
||||
}
|
||||
|
||||
/* Placeholder text in chat input */
|
||||
.chat-input::placeholder {
|
||||
color: var(--ac-text-dim);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
background: var(--bg-main);
|
||||
color: var(--text);
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(255, 255, 255, 0.01) 10px,
|
||||
rgba(255, 255, 255, 0.01) 20px
|
||||
);
|
||||
}
|
||||
|
||||
/* AC-style stone textured panels with beveled edges */
|
||||
.ac-panel {
|
||||
background: linear-gradient(135deg, var(--ac-medium-stone) 0%, var(--ac-dark-stone) 100%);
|
||||
border: 2px solid var(--ac-border-dark);
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(255, 255, 255, 0.1),
|
||||
inset -2px -2px 3px rgba(0, 0, 0, 0.5),
|
||||
0 2px 5px rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Sort buttons - AC style */
|
||||
.sort-buttons {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
margin: 12px 16px 8px;
|
||||
padding: 8px;
|
||||
background: var(--ac-dark-stone);
|
||||
border: 1px solid var(--ac-border-dark);
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sort-buttons .btn {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
background: linear-gradient(180deg, var(--ac-light-stone) 0%, var(--ac-medium-stone) 100%);
|
||||
color: var(--ac-text-dim);
|
||||
border: 1px solid var(--ac-border-dark);
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.15s;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.sort-buttons .btn:hover {
|
||||
background: linear-gradient(180deg, var(--ac-light-stone) 0%, var(--ac-light-stone) 100%);
|
||||
color: var(--ac-gold-bright);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
|
||||
0 0 5px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
.sort-buttons .btn:active {
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(0, 0, 0, 0.7),
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.sort-buttons .btn.active {
|
||||
background: linear-gradient(180deg, var(--ac-gold) 0%, var(--ac-gold-dark) 100%);
|
||||
color: var(--ac-black);
|
||||
border-color: var(--ac-gold-dark);
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.3),
|
||||
0 0 10px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
|
||||
.sort-buttons .btn.active:hover {
|
||||
background: linear-gradient(180deg, var(--ac-gold-bright) 0%, var(--ac-gold) 100%);
|
||||
color: var(--ac-black);
|
||||
}
|
||||
|
||||
/* Sort direction indicators */
|
||||
.sort-buttons .btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
}
|
||||
|
||||
/* Most sorts are descending (down arrow) */
|
||||
.sort-buttons .btn.active::after {
|
||||
border-top: 4px solid var(--ac-black);
|
||||
}
|
||||
|
||||
/* Name and KPR are ascending (up arrow) */
|
||||
.sort-buttons .btn.active[data-value="name"]::after,
|
||||
.sort-buttons .btn.active[data-value="kpr"]::after {
|
||||
border-top: none;
|
||||
border-bottom: 4px solid var(--ac-black);
|
||||
}
|
||||
|
||||
/* Sidebar - AC stone panel style */
|
||||
#sidebar {
|
||||
width: var(--sidebar-width);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--ac-gold-dark) var(--ac-dark-stone);
|
||||
background: linear-gradient(180deg, var(--ac-dark-stone) 0%, var(--ac-black) 100%);
|
||||
border-right: 3px solid var(--ac-border-dark);
|
||||
box-shadow:
|
||||
inset -2px 0 5px rgba(0, 0, 0, 0.5),
|
||||
2px 0 5px rgba(0, 0, 0, 0.8);
|
||||
box-sizing: border-box;
|
||||
padding: 18px 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#sidebar h2 {
|
||||
margin: 8px 0 12px;
|
||||
font-size: 1.25rem;
|
||||
color: var(--ac-gold);
|
||||
text-shadow:
|
||||
2px 2px 3px rgba(0, 0, 0, 0.8),
|
||||
0 0 10px rgba(212, 175, 55, 0.3);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#playerList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Filter input - AC style */
|
||||
.player-filter {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 12px;
|
||||
background: var(--ac-dark-stone);
|
||||
color: var(--ac-gold);
|
||||
border: 2px solid var(--ac-border-dark);
|
||||
border-radius: 2px;
|
||||
font-size: 0.9rem;
|
||||
box-sizing: border-box;
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(0, 0, 0, 0.5),
|
||||
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
}
|
||||
|
||||
.player-filter:focus {
|
||||
outline: none;
|
||||
border-color: var(--ac-gold-dark);
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
|
||||
/* Map container */
|
||||
#mapContainer {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg-main);
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Player list items - AC stone panels */
|
||||
#playerList li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto auto auto auto;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
grid-template-areas:
|
||||
"name name name name name name"
|
||||
"kills totalkills kph kph kph kph"
|
||||
"rares kpr meta meta meta meta"
|
||||
"onlinetime deaths tapers tapers tapers tapers";
|
||||
gap: 4px 8px;
|
||||
margin: 6px 0;
|
||||
padding: 10px 12px;
|
||||
background: linear-gradient(135deg, var(--ac-medium-stone) 0%, var(--ac-dark-stone) 100%);
|
||||
border: 2px solid var(--ac-border-dark);
|
||||
border-left: 4px solid var(--ac-gold-dark);
|
||||
transition: all 0.2s;
|
||||
box-shadow:
|
||||
1px 1px 3px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Grid assignments */
|
||||
.player-name {
|
||||
grid-area: name;
|
||||
font-weight: 700;
|
||||
color: var(--ac-gold);
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.coordinates-inline {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ac-text-dim);
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.stat.kills { grid-area: kills; }
|
||||
.stat.total-kills { grid-area: totalkills; }
|
||||
.stat.kph { grid-area: kph; }
|
||||
.stat.rares { grid-area: rares; }
|
||||
.stat.kpr { grid-area: kpr; }
|
||||
.stat.meta { grid-area: meta; }
|
||||
.stat.onlinetime { grid-area: onlinetime; }
|
||||
.stat.deaths { grid-area: deaths; }
|
||||
.stat.tapers { grid-area: tapers; }
|
||||
|
||||
/* Stat pills - AC style */
|
||||
#playerList li .stat {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
color: var(--ac-text);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.3),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Icons & suffixes */
|
||||
.stat.kills::before { content: "⚔️ "; }
|
||||
.stat.total-kills::before { content: "🏆 "; }
|
||||
.stat.kph::after { content: " KPH"; font-size:0.7em; color: var(--ac-text-dim); }
|
||||
.stat.rares::before { content: "💎 "; }
|
||||
.stat.rares::after { content: " Rares"; font-size:0.7em; color: var(--ac-text-dim); }
|
||||
.stat.kpr::before { content: "📊 "; }
|
||||
.stat.kpr::after { content: " KPR"; font-size:0.7em; color: var(--ac-text-dim); }
|
||||
|
||||
/* Metastate pills */
|
||||
#playerList li .stat.meta {
|
||||
background: linear-gradient(180deg, var(--ac-gold) 0%, var(--ac-gold-dark) 100%);
|
||||
color: var(--ac-black);
|
||||
border-color: var(--ac-gold-dark);
|
||||
}
|
||||
|
||||
#playerList li .stat.meta.green {
|
||||
background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
|
||||
color: var(--ac-black);
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
#playerList li .stat.meta.red {
|
||||
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
|
||||
color: #fff;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
/* Chat/Stats/Inventory buttons - AC style */
|
||||
.chat-btn, .stats-btn, .inventory-btn {
|
||||
margin-top: 4px;
|
||||
margin-right: 4px;
|
||||
padding: 3px 8px;
|
||||
background: linear-gradient(180deg, var(--ac-gold) 0%, var(--ac-gold-dark) 100%);
|
||||
color: var(--ac-black);
|
||||
border: 1px solid var(--ac-gold-dark);
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.chat-btn:hover, .stats-btn:hover, .inventory-btn:hover {
|
||||
background: linear-gradient(180deg, var(--ac-gold-bright) 0%, var(--ac-gold) 100%);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.4),
|
||||
0 0 5px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
|
||||
/* Windows - AC stone panel style */
|
||||
.chat-window, .stats-window, .inventory-window {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(var(--sidebar-width) + 10px);
|
||||
width: 760px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, var(--ac-medium-stone) 0%, var(--ac-dark-stone) 100%);
|
||||
border: 3px solid var(--ac-border-dark);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10000;
|
||||
box-shadow:
|
||||
0 5px 20px rgba(0, 0, 0, 0.8),
|
||||
inset 2px 2px 3px rgba(255, 255, 255, 0.05);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: linear-gradient(180deg, var(--ac-light-stone) 0%, var(--ac-medium-stone) 100%);
|
||||
border-bottom: 2px solid var(--ac-border-dark);
|
||||
color: var(--ac-gold);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-close-btn {
|
||||
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
|
||||
color: #fff;
|
||||
border: 1px solid #991b1b;
|
||||
border-radius: 2px;
|
||||
padding: 2px 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.chat-close-btn:hover {
|
||||
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.4),
|
||||
0 0 5px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 10px 15px;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: var(--ac-green);
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-track {
|
||||
background: var(--ac-dark-stone);
|
||||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb {
|
||||
background: var(--ac-gold-dark);
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-form {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
background: var(--ac-dark-stone);
|
||||
border-top: 2px solid var(--ac-border-dark);
|
||||
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: var(--ac-green);
|
||||
border: 2px solid var(--ac-border-dark);
|
||||
border-radius: 2px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--ac-gold-dark);
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
/* Map elements */
|
||||
#mapGroup {
|
||||
transform-origin: top left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
display: block;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
filter: brightness(0.9) contrast(1.1);
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
box-shadow:
|
||||
0 0 5px rgba(0, 0, 0, 0.8),
|
||||
0 0 10px currentColor;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dot.highlight {
|
||||
animation: pulse 2s infinite;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px currentColor; }
|
||||
50% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px currentColor, 0 0 30px currentColor; }
|
||||
100% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px currentColor; }
|
||||
}
|
||||
|
||||
/* Tooltip - AC style */
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
|
||||
color: var(--ac-gold);
|
||||
padding: 6px 10px;
|
||||
border: 2px solid var(--ac-gold-dark);
|
||||
border-radius: 2px;
|
||||
font-size: 0.8rem;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.8),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Coordinate display - AC style */
|
||||
.coordinates {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: linear-gradient(135deg, rgba(0, 50, 100, 0.95) 0%, rgba(0, 30, 60, 0.95) 100%);
|
||||
color: var(--ac-cyan);
|
||||
padding: 4px 8px;
|
||||
border: 2px solid rgba(0, 100, 150, 0.8);
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
z-index: 999;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.8),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Hover states */
|
||||
#playerList li:hover {
|
||||
background: linear-gradient(135deg, var(--ac-light-stone) 0%, var(--ac-medium-stone) 100%);
|
||||
border-left-color: var(--ac-gold-bright);
|
||||
box-shadow:
|
||||
2px 2px 5px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.1),
|
||||
0 0 10px rgba(212, 175, 55, 0.2);
|
||||
}
|
||||
|
||||
#playerList li.selected {
|
||||
background: linear-gradient(135deg, var(--ac-gold-dark) 0%, var(--ac-medium-stone) 100%);
|
||||
border-left-color: var(--ac-gold-bright);
|
||||
box-shadow:
|
||||
2px 2px 5px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
|
||||
0 0 15px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
/* Trail paths */
|
||||
#trails {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.trail-path {
|
||||
stroke-width: 2;
|
||||
stroke-opacity: 0.8;
|
||||
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
|
||||
}
|
||||
|
||||
/* Stats window specific */
|
||||
.stats-window {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.stats-window .chat-messages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
overflow: visible;
|
||||
background: var(--ac-dark-stone);
|
||||
color: var(--ac-text);
|
||||
}
|
||||
|
||||
.stats-window iframe {
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
border: 2px solid var(--ac-border-dark);
|
||||
box-shadow:
|
||||
inset 2px 2px 3px rgba(0, 0, 0, 0.5),
|
||||
1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
background: var(--ac-black);
|
||||
}
|
||||
|
||||
/* Stats time controls - AC style */
|
||||
.stats-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 15px;
|
||||
background: var(--ac-medium-stone);
|
||||
border-bottom: 2px solid var(--ac-border-dark);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.time-range-btn {
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(180deg, var(--ac-light-stone) 0%, var(--ac-medium-stone) 100%);
|
||||
color: var(--ac-text-dim);
|
||||
border: 1px solid var(--ac-border-dark);
|
||||
border-radius: 2px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.time-range-btn:hover {
|
||||
background: linear-gradient(180deg, var(--ac-light-stone) 0%, var(--ac-light-stone) 100%);
|
||||
color: var(--ac-gold);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
|
||||
0 0 5px rgba(212, 175, 55, 0.2);
|
||||
}
|
||||
|
||||
.time-range-btn.active {
|
||||
background: linear-gradient(180deg, var(--ac-gold) 0%, var(--ac-gold-dark) 100%);
|
||||
color: var(--ac-black);
|
||||
border-color: var(--ac-gold-dark);
|
||||
font-weight: 700;
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.3),
|
||||
0 0 10px rgba(212, 175, 55, 0.4);
|
||||
}
|
||||
|
||||
/* Inventory window */
|
||||
.inventory-content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
background: var(--ac-dark-stone);
|
||||
color: var(--ac-text);
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.inventory-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 1.1rem;
|
||||
color: var(--ac-text-dim);
|
||||
font-style: italic;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.stat.onlinetime::before { content: "🕑 "; }
|
||||
.stat.deaths::before { content: "💀 "; }
|
||||
.stat.tapers::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url('prismatic-taper-icon.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 4px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/* Disable text selection during drag */
|
||||
.noselect {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for sidebar */
|
||||
#sidebar::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-track {
|
||||
background: var(--ac-dark-stone);
|
||||
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, var(--ac-gold) 0%, var(--ac-gold-dark) 100%);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--ac-gold-dark);
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 1px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, var(--ac-gold-bright) 0%, var(--ac-gold) 100%);
|
||||
}
|
||||
|
||||
/* Map container special effects */
|
||||
#mapContainer.dragging {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* Additional hover effects */
|
||||
.player-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.2) 50%, transparent 100%);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.player-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
165
static/style.css
165
static/style.css
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
/* CSS Custom Properties for theme colors and sizing */
|
||||
:root {
|
||||
--sidebar-width: 280px;
|
||||
--sidebar-width: 340px;
|
||||
--bg-main: #111;
|
||||
--bg-side: #1a1a1a;
|
||||
--card: #222;
|
||||
|
|
@ -43,27 +43,68 @@ body {
|
|||
.sort-buttons {
|
||||
/* Container for sorting controls; uses flex layout to distribute buttons equally */
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
margin: 12px 16px 8px;
|
||||
}
|
||||
.sort-buttons .btn {
|
||||
/* Base styling for each sort button: color, padding, border */
|
||||
/* Compact styling for sort buttons to fit 6 options */
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
background: #222;
|
||||
color: #eee;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
border: 1px solid #666;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sort-buttons .btn:hover {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
border-color: #777;
|
||||
}
|
||||
|
||||
.sort-buttons .btn.active {
|
||||
/* Active sort button highlighted with accent color */
|
||||
background: var(--accent);
|
||||
color: #111;
|
||||
border-color: var(--accent);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sort-buttons .btn.active:hover {
|
||||
background: var(--accent);
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* Sort direction indicators */
|
||||
.sort-buttons .btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
}
|
||||
|
||||
/* Most sorts are descending (down arrow) */
|
||||
.sort-buttons .btn.active::after {
|
||||
border-top: 4px solid #111;
|
||||
}
|
||||
|
||||
/* Name and KPR are ascending (up arrow) */
|
||||
.sort-buttons .btn.active[data-value="name"]::after,
|
||||
.sort-buttons .btn.active[data-value="kpr"]::after {
|
||||
border-top: none;
|
||||
border-bottom: 4px solid #111;
|
||||
}
|
||||
|
||||
/* ---------- sidebar --------------------------------------------- */
|
||||
|
|
@ -178,6 +219,22 @@ body {
|
|||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* ---------- coordinate display ---------------------------------- */
|
||||
.coordinates {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: rgba(0, 50, 100, 0.9);
|
||||
color: #fff;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
font-family: monospace;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
z-index: 999;
|
||||
border: 1px solid rgba(100, 150, 200, 0.5);
|
||||
}
|
||||
/* make each row a flex container */
|
||||
/* 2-column flex layout for each player row */
|
||||
/* make each row a flex container */
|
||||
|
|
@ -185,13 +242,13 @@ body {
|
|||
/* make each player row into a 3×2 grid */
|
||||
#playerList li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: 1fr auto auto auto auto auto;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
grid-template-areas:
|
||||
"name loc"
|
||||
"kills kph"
|
||||
"rares meta"
|
||||
"onlinetime deaths";
|
||||
"name name name name name name"
|
||||
"kills totalkills kph kph kph kph"
|
||||
"rares kpr meta meta meta meta"
|
||||
"onlinetime deaths tapers tapers tapers tapers";
|
||||
gap: 4px 8px;
|
||||
margin: 6px 0;
|
||||
padding: 8px 10px;
|
||||
|
|
@ -203,14 +260,17 @@ body {
|
|||
|
||||
/* assign each span into its grid cell */
|
||||
.player-name { grid-area: name; font-weight: 600; color: var(--text); }
|
||||
.player-loc { grid-area: loc; font-size: 0.75rem; color: #aaa; }
|
||||
.coordinates-inline { font-size: 0.75rem; color: #aaa; font-weight: 400; margin-left: 8px; }
|
||||
|
||||
.stat.kills { grid-area: kills; }
|
||||
.stat.total-kills { grid-area: totalkills; }
|
||||
.stat.kph { grid-area: kph; }
|
||||
.stat.rares { grid-area: rares; }
|
||||
.stat.kpr { grid-area: kpr; }
|
||||
.stat.meta { grid-area: meta; }
|
||||
.stat.onlinetime { grid-area: onlinetime; }
|
||||
.stat.deaths { grid-area: deaths; }
|
||||
.stat.tapers { grid-area: tapers; }
|
||||
|
||||
/* pill styling */
|
||||
#playerList li .stat {
|
||||
|
|
@ -224,9 +284,13 @@ body {
|
|||
}
|
||||
|
||||
/* icons & suffixes */
|
||||
.stat.kills::before { content: "⚔️ "; }
|
||||
.stat.kph::after { content: " KPH"; font-size:0.7em; color:#aaa; }
|
||||
.stat.rares::after { content: " Rares"; font-size:0.7em; color:#aaa; }
|
||||
.stat.kills::before { content: "⚔️ "; }
|
||||
.stat.total-kills::before { content: "🏆 "; }
|
||||
.stat.kph::after { content: " KPH"; font-size:0.7em; color:#aaa; }
|
||||
.stat.rares::before { content: "💎 "; }
|
||||
.stat.rares::after { content: " Rares"; font-size:0.7em; color:#aaa; }
|
||||
.stat.kpr::before { content: "📊 "; }
|
||||
.stat.kpr::after { content: " KPR"; font-size:0.7em; color:#aaa; }
|
||||
/* metastate pill colors are assigned dynamically: green for “good” states, red otherwise */
|
||||
#playerList li .stat.meta {
|
||||
/* fallback */
|
||||
|
|
@ -245,7 +309,7 @@ body {
|
|||
}
|
||||
|
||||
/* ---------- chat window styling ------------------------------- */
|
||||
.chat-btn, .stats-btn {
|
||||
.chat-btn, .stats-btn, .inventory-btn {
|
||||
margin-top: 4px;
|
||||
padding: 2px 6px;
|
||||
background: var(--accent);
|
||||
|
|
@ -256,7 +320,7 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-window, .stats-window {
|
||||
.chat-window, .stats-window, .inventory-window {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
/* position window to start just right of the sidebar */
|
||||
|
|
@ -326,6 +390,17 @@ body.noselect, body.noselect * {
|
|||
}
|
||||
.stat.onlinetime::before { content: "🕑 "}
|
||||
.stat.deaths::before { content: "💀 "}
|
||||
.stat.tapers::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url('prismatic-taper-icon.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 4px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/* hover & selected states */
|
||||
#playerList li:hover { background: var(--card-hov); }
|
||||
|
|
@ -365,3 +440,53 @@ body.noselect, body.noselect * {
|
|||
height: 200px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ---------- stats window time controls --------------------------- */
|
||||
.stats-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 15px;
|
||||
background: #333;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
.time-range-btn {
|
||||
padding: 6px 12px;
|
||||
background: #444;
|
||||
color: #ccc;
|
||||
border: 1px solid #666;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.time-range-btn:hover {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time-range-btn.active {
|
||||
background: var(--accent);
|
||||
color: #111;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------- inventory window styling ----------------------------- */
|
||||
.inventory-content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
background: var(--card);
|
||||
color: var(--text);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.inventory-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 1.1rem;
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue