feat: better coloring

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -40,7 +40,7 @@ export function HeroSection({ id }: HeroSectionProps) {
     const entries = Object.values(awaitedTankDefinitions);
     const filtered = entries.filter((thisTank) => thisTank.tier === tank.tier);
     const value =
-      filtered.reduce((accumulator, thisTank) => {
+      (filtered.reduce((accumulator, thisTank) => {
         return (
           accumulator +
           resolveNearPenetration(
@@ -48,7 +48,8 @@ export function HeroSection({ id }: HeroSectionProps) {
           )
         );
       }, 0) /
-      ((4 / 3) * filtered.length);
+        filtered.length) *
+      (3 / 4);
 
     return { value } satisfies ThicknessRange;
   }, [tank.tier]);

src/app/tools/tankopedia/[id]/components/Thicknesses.tsx

@@ -50,7 +50,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
       >
         <Flex direction="column" align="end" justify="between">
           <Text color="gray" size="1">
-            {thicknessRange.value.toFixed(0)}
+            {(thicknessRange.value * 1.5).toFixed(0)}
           </Text>
           <Flex gap="1">
             {showPrimaryArmor ? <EyeOpenIcon /> : <EyeClosedIcon />}
@@ -66,7 +66,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
           style={{
             borderRadius: 'var(--radius-full)',
             overflow: 'hidden',
-            background: `linear-gradient(rgb(255, 0, 0), rgb(0, 255, 0))`,
+            background: `linear-gradient(rgb(128, 0, 0), rgb(255, 0, 0) 33%, rgb(0, 255, 0))`,
           }}
         />
       </Flex>

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -32,10 +32,6 @@ import { ArmorType } from '../SpacedArmorScene';
 import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
 import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';
 
-function to255(value: number) {
-  return Math.round(255 * value);
-}
-
 type SpacedArmorSceneComponentProps = {
   node: Object3D;
   thickness: number;
@@ -100,7 +96,7 @@ export function SpacedArmorSceneComponent({
   const camera = useThree((state) => state.camera);
 
   if (props.static) {
-    const x = clamp(thickness / props.thicknessRange.value, 0, 1);
+    const x = thickness / props.thicknessRange.value;
 
     let color: Color;
     let opacity: number;
@@ -108,13 +104,21 @@ export function SpacedArmorSceneComponent({
 
     switch (props.type) {
       case ArmorType.Primary:
-        color = new Color(-((1 - x) ** 2) + 1, -(x ** 2) + 1, 0);
+        if (x > 1) {
+          color = new Color(Math.max(2 - x, 0.5), 0, 0);
+        } else {
+          color = new Color(-((1 - x) ** 2) + 1, -(x ** 2) + 1, 0);
+        }
         opacity = 1;
         break;
 
       case ArmorType.Spaced:
-        color = new Color(1 - (7 / 8) * x, 0, 1 - (1 / 8) * x);
+        color = new Color(
-        opacity = x + 1 / 2;
+          clamp(1 - (7 / 8) * x, 0, 1),
+          0,
+          clamp(1 - (1 / 8) * x, 0, 1),
+        );
+        opacity = clamp(x + 1 / 2, 0, 1);
         break;
 
       case ArmorType.External: