dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

refactor(MapNode, StatisticsToggle): streamline text rendering in MapNode and replace switches with buttons in StatisticsToggle for improved UI

Browse Source
This commit is contained in:
PhatPhuckDave
2025-09-15 17:39:07 +02:00
parent 0c5d0616e5
commit 7f4ca796aa
2 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/components/MapNode.tsx
View File

@@ -208,61 +208,85 @@ export const MapNode: React.FC<MapNodeProps> = ({
<tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
)}
</text>
<text
x="0"
y={textOffset + 15}
textAnchor="middle"
fill="#a3a3a3"
fontSize="12"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
{signatures !== undefined && signatures > 0 && `📡 ${signatures}`}
</text>
{/* Statistics display - fixed visual size regardless of zoom */}
{showJumps && jumps !== undefined && (
<text
x="0"
y={textOffset + 30}
textAnchor="middle"
fill="#60a5fa"
fontSize="10"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
🚀 {jumps}
</text>
)}
{/* Dynamic text positioning based on what's shown */}
{(() => {
let currentY = textOffset + 15;
const textElements = [];
{showKills && kills !== undefined && (
<text
x="0"
y={textOffset + 45}
textAnchor="middle"
fill="#f87171"
fontSize="10"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
⚔️ {kills}
</text>
)}
// Add signatures if present
if (signatures !== undefined && signatures > 0) {
textElements.push(
<text
key="signatures"
x="0"
y={currentY}
textAnchor="middle"
fill="#a3a3a3"
fontSize="12"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
📡 {signatures}
</text>
);
currentY += 15;
}
// Add jumps if enabled and present
if (showJumps && jumps !== undefined) {
textElements.push(
<text
key="jumps"
x="0"
y={currentY}
textAnchor="middle"
fill="#60a5fa"
fontSize="10"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
🚀 {jumps}
</text>
);
currentY += 15;
}
// Add kills if enabled and present
if (showKills && kills !== undefined) {
textElements.push(
<text
key="kills"
x="0"
y={currentY}
textAnchor="middle"
fill="#f87171"
fontSize="10"
className="pointer-events-none select-none"
style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke'
}}
transform={`scale(${1 / (1200 / viewBoxWidth)})`}
transformOrigin="0 0"
>
⚔️ {kills}
</text>
);
}
return textElements;
})()}
</g>
);
}

47
frontend/src/components/StatisticsToggle.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { Switch } from '@/components/ui/switch';
interface StatisticsToggleProps {
jumpsEnabled: boolean;
@@ -15,28 +14,30 @@ export const StatisticsToggle: React.FC<StatisticsToggleProps> = ({
onKillsToggle,
}) => {
return (
<div className="absolute top-2 left-2 bg-slate-800/90 backdrop-blur-sm rounded-lg p-3 shadow-lg border border-slate-700">
<div className="flex flex-col gap-3">
<div className="flex items-center gap-3">
<Switch
id="jumps-toggle"
checked={jumpsEnabled}
onCheckedChange={onJumpsToggle}
/>
<label htmlFor="jumps-toggle" className="text-sm font-medium text-white">
🚀 Show Jumps
</label>
</div>
<div className="flex items-center gap-3">
<Switch
id="kills-toggle"
checked={killsEnabled}
onCheckedChange={onKillsToggle}
/>
<label htmlFor="kills-toggle" className="text-sm font-medium text-white">
⚔️ Show Kills
</label>
</div>
<div className="absolute top-2 right-2 bg-slate-800/90 backdrop-blur-sm rounded-lg p-2 shadow-lg border border-slate-700">
<div className="flex gap-2">
<button
onClick={() => onJumpsToggle(!jumpsEnabled)}
className={`p-2 rounded transition-colors ${
jumpsEnabled
? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30'
: 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
}`}
title={jumpsEnabled ? 'Hide Jumps' : 'Show Jumps'}
>
🚀
</button>
<button
onClick={() => onKillsToggle(!killsEnabled)}
className={`p-2 rounded transition-colors ${
killsEnabled
? 'bg-red-600/20 text-red-400 hover:bg-red-600/30'
: 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
}`}
title={killsEnabled ? 'Hide Kills' : 'Show Kills'}
>
⚔️
</button>
</div>
</div>
);