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

Fuck with the colors a bit

Browse Source
This commit is contained in:
PhatPhuckDave
2025-06-14 03:50:03 +02:00
parent 028f43e320
commit fed7400da1
1 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/utils/securityColors.ts
View File

@@ -1,23 +1,41 @@
export const getSecurityColor = (security: number): string => { export const getSecurityColor = (security: number): string => {
if (security > 0.5) { // Clamp security between -1 and 1
// Cyan to light blue for high security (0.5, 1] const clampedSecurity = Math.max(-1, Math.min(1, security));
const ratio = (security - 0.5) / 0.5;
const green = Math.round(200 + (180 - 200) * ratio); // From #00c8c8 to #00b4d8 // Define color points for specific security values
const blue = Math.round(200 + (216 - 200) * ratio); const colorPoints = [
return `rgb(${Math.round(0 * (1 - ratio) + 0 * ratio)}, ${green}, ${blue})`; { sec: -1.0, color: [75, 0, 130] }, // Dark purple (same as 0.1)
} else if (security >= 0) { { sec: 0.1, color: [75, 0, 130] }, // Dark purple
// Red to yellow for low security [0.0, 0.5] { sec: 0.2, color: [255, 0, 0] }, // Red
const ratio = security / 0.5; { sec: 0.3, color: [255, 165, 0] }, // Orange
const red = Math.round(239 + (234 - 239) * ratio); // From #ef4444 to #eab308 { sec: 0.4, color: [255, 200, 0] }, // Light orange
const green = Math.round(68 + (179 - 68) * ratio); { sec: 0.5, color: [255, 255, 0] }, // Yellow
const blue = Math.round(68 + (8 - 68) * ratio); { sec: 0.6, color: [0, 255, 0] }, // Green
return `rgb(${red}, ${green}, ${blue})`; { sec: 0.7, color: [0, 255, 255] }, // Cyan
} else { { sec: 0.8, color: [135, 206, 235] }, // Sky blue (more appropriate light blue)
// Purple to red for null security [-1, 0) { sec: 0.9, color: [0, 0, 255] }, // Blue
const ratio = (security + 1) / 1; { sec: 1.0, color: [0, 0, 139] } // Deep blue
const red = Math.round(147 + (239 - 147) * ratio); // From #9333ea to #ef4444 ];
const green = Math.round(51 + (68 - 51) * ratio);
const blue = Math.round(234 + (68 - 234) * ratio); // Find the two color points to interpolate between
return `rgb(${red}, ${green}, ${blue})`; let lowerPoint = colorPoints[0];
let upperPoint = colorPoints[colorPoints.length - 1];
for (let i = 0; i < colorPoints.length - 1; i++) {
if (clampedSecurity >= colorPoints[i].sec && clampedSecurity <= colorPoints[i + 1].sec) {
lowerPoint = colorPoints[i];
upperPoint = colorPoints[i + 1];
break;
}
} }
// Calculate the ratio between the two points
const ratio = (clampedSecurity - lowerPoint.sec) / (upperPoint.sec - lowerPoint.sec);
// Interpolate between the colors
const red = Math.round(lowerPoint.color[0] + (upperPoint.color[0] - lowerPoint.color[0]) * ratio);
const green = Math.round(lowerPoint.color[1] + (upperPoint.color[1] - lowerPoint.color[1]) * ratio);
const blue = Math.round(lowerPoint.color[2] + (upperPoint.color[2] - lowerPoint.color[2]) * ratio);
return `rgb(${red}, ${green}, ${blue})`;
}; };