TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 10:47:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: bar coloring

Browse Source
This commit is contained in:
tresabhi committed 2024-11-12 20:28:41 -06:00
1 parent cd277fb2f1
commit e0e5ea8995
2 files changed
+15 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx
+11 -4
View File
@@ -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}
color="gray"
value={goodness * 100}
color={color}
/>
<Text color="gray" size="1">
{betterTanks.length + 1} / {others.length}
packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
+4 -4
View File
@@ -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"