Optimize renderTrails to build SVG point strings directly

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erik 2026-02-26 09:31:03 +00:00
parent 982bdb77e2
commit 6f121e2a90

View file

@ -1777,25 +1777,24 @@ function render(players) {
/* ---------- rendering trails ------------------------------- */ /* ---------- rendering trails ------------------------------- */
function renderTrails(trailData) { function renderTrails(trailData) {
trailsContainer.innerHTML = ''; trailsContainer.innerHTML = '';
const byChar = trailData.reduce((acc, pt) => { // Build point strings directly - avoid intermediate arrays
(acc[pt.character_name] = acc[pt.character_name] || []).push(pt); const byChar = {};
return acc; for (const pt of trailData) {
}, {}); const { x, y } = worldToPx(pt.ew, pt.ns);
for (const [name, pts] of Object.entries(byChar)) { const key = pt.character_name;
if (pts.length < 2) continue; if (!byChar[key]) byChar[key] = { points: `${x},${y}`, count: 1 };
const points = pts.map(pt => { else { byChar[key].points += ` ${x},${y}`; byChar[key].count++; }
const { x, y } = worldToPx(pt.ew, pt.ns); }
return `${x},${y}`; for (const name in byChar) {
}).join(' '); if (byChar[name].count < 2) continue;
const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
poly.setAttribute('points', points); poly.setAttribute('points', byChar[name].points);
// Use the same color as the player dot for consistency poly.setAttribute('stroke', getColorFor(name));
poly.setAttribute('stroke', getColorFor(name)); poly.setAttribute('fill', 'none');
poly.setAttribute('fill', 'none'); poly.setAttribute('class', 'trail-path');
poly.setAttribute('class', 'trail-path'); trailsContainer.appendChild(poly);
trailsContainer.appendChild(poly); }
}
} }
/* ---------- selection centering, focus zoom & blink ------------ */ /* ---------- selection centering, focus zoom & blink ------------ */
function selectPlayer(p, x, y) { function selectPlayer(p, x, y) {