feat: bar coloring

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -7,7 +7,7 @@ import {
   fetchTankDefinitions,
 } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
-import { useMemo } from 'react';
+import { useMemo, type ComponentProps } from 'react';
 import {
   tankCharacteristics,
   type TankCharacteristics,
@@ -95,6 +95,13 @@ export function InfoWithDelta({
       ? othersValue < uhWhatDoICallThisVariable
       : othersValue > uhWhatDoICallThisVariable;
   });
+  const goodness = (others.length - betterTanks.length) / others.length;
+  let color: ComponentProps<typeof Progress>['color'];
+
+  if (goodness <= 0.25) color = 'red';
+  else if (goodness <= 0.5) color = 'orange';
+  else if (goodness <= 0.75) color = 'yellow';
+  else color = 'green';
 
   return (
     <Flex direction="column">
@@ -103,12 +110,12 @@ export function InfoWithDelta({
       </Info>
 
       {!noRanking && (
-        <Flex pl={indent ? '2' : '0'} align="center" gap="2">
+        <Flex pl={indent ? '2' : '0'} align="center" gap="2" mb="2">
           <Progress
             variant="soft"
             size="1"
-            value={((betterTanks.length + 1) / others.length) * 100}
+            value={goodness * 100}
-            color="gray"
+            color={color}
           />
           <Text color="gray" size="1">
             {betterTanks.length + 1} / {others.length}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -138,7 +138,7 @@ export function Characteristics() {
       }}
     >
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
-        <Flex direction="column" gap="4">
+        <Flex direction="column" gap="2">
           <Flex align="center" gap="4">
             <Heading size="5">Firepower</Heading>
 
@@ -520,7 +520,7 @@ export function Characteristics() {
           )}
         </Flex>
 
-        <Flex direction="column" gap="4">
+        <Flex direction="column" gap="2">
           <Flex gap="2" align="center">
             <Heading size="5">Crew training</Heading>
 
@@ -598,7 +598,7 @@ export function Characteristics() {
       </Flex>
 
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
-        <Flex direction="column" gap="4">
+        <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>
           <Info name="Speed" unit="kph" />
           <InfoWithDelta
@@ -735,7 +735,7 @@ export function Characteristics() {
           />
         </Flex>
 
-        <Flex direction="column" gap="4">
+        <Flex direction="column" gap="2">
           <Heading size="5">Survivability</Heading>
           <InfoWithDelta
             value="health"