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

132
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>
)}
{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>
)}
{/* Dynamic text positioning based on what's shown */}
{(() => {
let currentY = textOffset + 15;
const textElements = [];
// 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>
);
}