mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-11-14 13:16:11 +01:00
feat: upgrade CompareEphemeral
This commit is contained in:
TrèsAbhi committed
1 parent
ef2a47e756
commit
fe4afdcbf0
8 files changed
+202
-212
No files matched your search
@@ -2,21 +2,21 @@ import {
|
||||
CaretLeftIcon,
|
||||
CaretRightIcon,
|
||||
CaretSortIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import { Flex, IconButton, Table, Text } from '@radix-ui/themes';
|
||||
import { useRef } from 'react';
|
||||
import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
|
||||
import { Var } from '../../core/radix/var';
|
||||
import { useLocale } from '../../hooks/useLocale';
|
||||
import { CompareEphemeral } from '../../stores/compareEphemeral';
|
||||
import { ComparePersistent } from '../../stores/comparePersistent';
|
||||
import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
|
||||
} from "@radix-ui/react-icons";
|
||||
import { Flex, IconButton, Table, Text } from "@radix-ui/themes";
|
||||
import { useRef } from "react";
|
||||
import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
|
||||
import { Var } from "../../core/radix/var";
|
||||
import { useLocale } from "../../hooks/useLocale";
|
||||
import { CompareEphemeral } from "../../stores/compareEphemeral";
|
||||
import { ComparePersistent } from "../../stores/comparePersistent";
|
||||
import { StickyRowHeaderCell } from "../StickyRowHeaderCell";
|
||||
|
||||
type CompareRowProps = {
|
||||
display?: (
|
||||
member: Awaited<TankCharacteristics>,
|
||||
member: Awaited<TankCharacteristics>
|
||||
) => number | string | undefined;
|
||||
deltaType?: 'higherIsBetter' | 'lowerIsBetter';
|
||||
deltaType?: "higherIsBetter" | "lowerIsBetter";
|
||||
decimals?: number;
|
||||
deltaNominalDisplay?: (delta: number) => string | number;
|
||||
indent?: boolean;
|
||||
@@ -33,7 +33,7 @@ type CompareRowProps = {
|
||||
|
||||
export function CompareRow({
|
||||
display,
|
||||
deltaType = 'higherIsBetter',
|
||||
deltaType = "higherIsBetter",
|
||||
decimals,
|
||||
deltaNominalDisplay,
|
||||
indent,
|
||||
@@ -41,17 +41,16 @@ export function CompareRow({
|
||||
...props
|
||||
}: CompareRowProps) {
|
||||
const { strings } = useLocale();
|
||||
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||
const sorting = CompareEphemeral.use((state) => state.sorting);
|
||||
const deltaMode = ComparePersistent.use((state) => state.deltaMode);
|
||||
const values = stats.map((stat) =>
|
||||
typeof props.value === 'function'
|
||||
typeof props.value === "function"
|
||||
? props.value(stat)!
|
||||
: (stat[props.value] as number),
|
||||
: (stat[props.value] as number)
|
||||
);
|
||||
const id = useRef(Math.random());
|
||||
const name =
|
||||
typeof props.value === 'string'
|
||||
typeof props.value === "string"
|
||||
? strings.website.tools.tankopedia.characteristics.values[props.value]
|
||||
: props.name;
|
||||
|
||||
@@ -60,21 +59,21 @@ export function CompareRow({
|
||||
<StickyRowHeaderCell>
|
||||
<Flex
|
||||
align="center"
|
||||
style={{ whiteSpace: 'nowrap' }}
|
||||
gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
|
||||
style={{ whiteSpace: "nowrap" }}
|
||||
gap={indent ? { initial: "4", sm: "6" } : { initial: "1", sm: "2" }}
|
||||
>
|
||||
<IconButton
|
||||
color={sorting?.by === id.current ? undefined : 'gray'}
|
||||
color={sorting?.by === id.current ? undefined : "gray"}
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
mutateCompareEphemeral((draft) => {
|
||||
CompareEphemeral.mutate((draft) => {
|
||||
draft.members.sort((memberA, memberB) => {
|
||||
const indexA = draft.members.indexOf(memberA);
|
||||
const indexB = draft.members.indexOf(memberB);
|
||||
const valueA = values[indexA];
|
||||
const valueB = values[indexB];
|
||||
|
||||
return draft.sorting?.direction === 'ascending' &&
|
||||
return draft.sorting?.direction === "ascending" &&
|
||||
draft.sorting.by === id.current
|
||||
? valueA - valueB
|
||||
: valueB - valueA;
|
||||
@@ -83,26 +82,26 @@ export function CompareRow({
|
||||
draft.sorting = {
|
||||
by: id.current,
|
||||
direction:
|
||||
draft.sorting?.direction === 'ascending' &&
|
||||
draft.sorting?.direction === "ascending" &&
|
||||
draft.sorting.by === id.current
|
||||
? 'descending'
|
||||
: 'ascending',
|
||||
? "descending"
|
||||
: "ascending",
|
||||
};
|
||||
});
|
||||
}}
|
||||
>
|
||||
{(sorting === undefined || sorting.by !== id.current) && (
|
||||
<CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
|
||||
<CaretSortIcon style={{ transform: "rotate(90deg)" }} />
|
||||
)}
|
||||
{sorting?.by === id.current && (
|
||||
<>
|
||||
{sorting.direction === 'ascending' && <CaretRightIcon />}
|
||||
{sorting.direction === 'descending' && <CaretLeftIcon />}
|
||||
{sorting.direction === "ascending" && <CaretRightIcon />}
|
||||
{sorting.direction === "descending" && <CaretLeftIcon />}
|
||||
</>
|
||||
)}
|
||||
</IconButton>
|
||||
|
||||
<Text size={{ initial: '1', sm: '2' }}>{name}</Text>
|
||||
<Text size={{ initial: "1", sm: "2" }}>{name}</Text>
|
||||
</Flex>
|
||||
</StickyRowHeaderCell>
|
||||
|
||||
@@ -110,7 +109,7 @@ export function CompareRow({
|
||||
const delta = value - values[0];
|
||||
const deltaPercentage = value / values[0] - 1;
|
||||
const normalizedDeltaPercentage = Math.round(
|
||||
Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25),
|
||||
Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25)
|
||||
);
|
||||
const resolvedDisplayValue = display
|
||||
? display(stats[index])
|
||||
@@ -129,12 +128,12 @@ export function CompareRow({
|
||||
value === values[0]
|
||||
? undefined
|
||||
: (
|
||||
deltaType === 'higherIsBetter'
|
||||
deltaType === "higherIsBetter"
|
||||
? value > values[0]
|
||||
: value < values[0]
|
||||
)
|
||||
? `color-mix(in srgb, ${Var('green-7')} ${normalizedDeltaPercentage}%, ${Var('green-3')})`
|
||||
: `color-mix(in srgb, ${Var('red-7')} ${normalizedDeltaPercentage}%, ${Var('red-3')})`,
|
||||
? `color-mix(in srgb, ${Var("green-7")} ${normalizedDeltaPercentage}%, ${Var("green-3")})`
|
||||
: `color-mix(in srgb, ${Var("red-7")} ${normalizedDeltaPercentage}%, ${Var("red-3")})`,
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
@@ -142,11 +141,11 @@ export function CompareRow({
|
||||
justify="center"
|
||||
gap="2"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Text style={{ textAlign: 'center' }} wrap="nowrap">
|
||||
<Text style={{ textAlign: "center" }} wrap="nowrap">
|
||||
{resolvedDisplayValue}
|
||||
</Text>
|
||||
|
||||
@@ -154,10 +153,10 @@ export function CompareRow({
|
||||
resolvedDisplayValue !== undefined &&
|
||||
values[0] !== undefined && (
|
||||
<>
|
||||
{deltaMode === 'absolute' && (
|
||||
{deltaMode === "absolute" && (
|
||||
<Text color="gray">
|
||||
(
|
||||
{`${delta > 0 ? '+' : ''}${
|
||||
{`${delta > 0 ? "+" : ""}${
|
||||
deltaNominalDisplay
|
||||
? deltaNominalDisplay(delta)
|
||||
: decimals === undefined
|
||||
@@ -168,11 +167,11 @@ export function CompareRow({
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{deltaMode === 'percentage' && (
|
||||
{deltaMode === "percentage" && (
|
||||
<Text color="gray">
|
||||
(
|
||||
{`${deltaPercentage > 0 ? '+' : ''}${Math.round(
|
||||
deltaPercentage * 100,
|
||||
{`${deltaPercentage > 0 ? "+" : ""}${Math.round(
|
||||
deltaPercentage * 100
|
||||
)}%`}
|
||||
)
|
||||
</Text>
|
||||
|
||||
Reference in new issue
Block a user