From d90a3cc0100f20e93f0f06ea3d175759339bb953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 23 Sep 2024 10:49:54 -0500 Subject: [PATCH] feat: progress on compare --- .../src/app/tools/compare/page.tsx | 8 +- packages/website-legacy/tsconfig.json | 2 +- packages/website/package.json | 2 +- .../src/components/Compare}/Body.tsx | 6 +- .../src/components/Compare}/CompareRow.tsx | 10 +- .../Compare}/CompareSectionTitle.tsx | 4 +- .../src/components/Compare}/CompareTable.tsx | 36 +++--- .../src/components/Compare}/Controls.tsx | 29 ++--- .../Compare}/IntersectionMarker/constants.ts | 0 .../Compare}/IntersectionMarker/index.tsx | 2 +- .../src/components/Compare}/TankCard.tsx | 6 +- .../src/components/Compare}/TankControl.tsx | 11 +- .../src}/components/DamageWarning.tsx | 2 +- .../website/src/components/ModuleManager.tsx | 12 +- packages/website/src/components/Navbar.astro | 1 - .../src/components/StickyColumnHeaderCell.tsx | 2 +- .../src/components/StickyRowHeaderCell.tsx | 2 +- .../src/components/StickyTableRoot.tsx | 2 +- .../src/components/TankRowHeaderCell.tsx | 4 +- .../src/core/blitzkit/tankToCompareMember.ts | 4 +- .../src/pages/tools/compare/index.astro | 8 ++ .../website/src/pages/tools/compare/index.tsx | 118 ++++++++++++++++++ .../website/src/stores/compareEphemeral.ts | 11 +- .../website/src/stores/comparePersistent.ts | 25 ++-- 24 files changed, 214 insertions(+), 93 deletions(-) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/Body.tsx (97%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/CompareRow.tsx (93%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/CompareSectionTitle.tsx (79%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/CompareTable.tsx (94%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/Controls.tsx (78%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/IntersectionMarker/constants.ts (100%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/IntersectionMarker/index.tsx (93%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/TankCard.tsx (95%) rename packages/{website-legacy/src/app/tools/compare/components => website/src/components/Compare}/TankControl.tsx (86%) rename packages/{website-legacy/src/app/tools/compare => website/src}/components/DamageWarning.tsx (91%) create mode 100644 packages/website/src/pages/tools/compare/index.astro create mode 100644 packages/website/src/pages/tools/compare/index.tsx diff --git a/packages/website-legacy/src/app/tools/compare/page.tsx b/packages/website-legacy/src/app/tools/compare/page.tsx index 7470dc6d2..f9d264bf5 100644 --- a/packages/website-legacy/src/app/tools/compare/page.tsx +++ b/packages/website-legacy/src/app/tools/compare/page.tsx @@ -10,13 +10,13 @@ import { PlusIcon } from '@radix-ui/react-icons'; import { Box, Flex, Heading, IconButton, Text } from '@radix-ui/themes'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { use, useCallback, useEffect, useMemo, useState } from 'react'; +import { CompareControls } from '../../../../../website/src/components/Controls'; +import { DamageWarning } from '../../../../../website/src/components/DamageWarning'; import { PageWrapper } from '../../../components/PageWrapper'; import { tankCharacteristics } from '../../../core/blitzkit/tankCharacteristics'; import { tankToCompareMember } from '../../../core/blitzkit/tankToCompareMember'; import * as CompareEphemeral from '../../../stores/compareEphemeral'; -import { CompareTable } from './components/CompareTable'; -import { Controls } from './components/Controls'; -import { DamageWarning } from './components/DamageWarning'; +import { CompareTable } from '../../../../../website/src/components/Compare/CompareTable'; export default function Page() { const pathname = usePathname(); @@ -116,7 +116,7 @@ export default function Page() { - diff --git a/packages/website-legacy/tsconfig.json b/packages/website-legacy/tsconfig.json index 7daa61dbc..225fc5b93 100644 --- a/packages/website-legacy/tsconfig.json +++ b/packages/website-legacy/tsconfig.json @@ -18,5 +18,5 @@ "../website/src/components/Tankopedia/HistorySection.tsx", "../website/src/components/Tankopedia/CalloutsSection.tsx", "../website/src/components/Tankopedia/ShotDisplaySection.tsx" -, "../website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx", "../website/src/components/Tankopedia/VideoSection.tsx" ] +, "../website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx", "../website/src/components/Tankopedia/VideoSection.tsx", "../website/src/components/DamageWarning.tsx", "../website/src/components/Controls.tsx", "../website/src/components/Compare/CompareTable.tsx" ] } diff --git a/packages/website/package.json b/packages/website/package.json index 4418620a2..122d490a7 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -4,7 +4,7 @@ "scripts": { "dev": "astro dev", "start": "astro dev", - "build": "astro build", + "build": "astro check && astro build", "preview": "astro preview", "astro": "astro" }, diff --git a/packages/website-legacy/src/app/tools/compare/components/Body.tsx b/packages/website/src/components/Compare/Body.tsx similarity index 97% rename from packages/website-legacy/src/app/tools/compare/components/Body.tsx rename to packages/website/src/components/Compare/Body.tsx index a50484782..cb5e37142 100644 --- a/packages/website-legacy/src/app/tools/compare/components/Body.tsx +++ b/packages/website/src/components/Compare/Body.tsx @@ -1,8 +1,8 @@ import { asset } from '@blitzkit/core'; import { Flex, Heading, IconButton, Table } from '@radix-ui/themes'; -import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell'; -import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; +import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell'; import { CompareRow } from './CompareRow'; import { CompareSectionTitle } from './CompareSectionTitle'; diff --git a/packages/website-legacy/src/app/tools/compare/components/CompareRow.tsx b/packages/website/src/components/Compare/CompareRow.tsx similarity index 93% rename from packages/website-legacy/src/app/tools/compare/components/CompareRow.tsx rename to packages/website/src/components/Compare/CompareRow.tsx index 7a2e17dd1..1956e4588 100644 --- a/packages/website-legacy/src/app/tools/compare/components/CompareRow.tsx +++ b/packages/website/src/components/Compare/CompareRow.tsx @@ -4,11 +4,11 @@ import { CaretSortIcon, } from '@radix-ui/react-icons'; import { Flex, IconButton, Table, Text } from '@radix-ui/themes'; -import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell'; -import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics'; -import { Var } from '../../../../core/radix/var'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; -import * as ComparePersistent from '../../../../stores/comparePersistent'; +import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics'; +import { Var } from '../../core/radix/var'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { ComparePersistent } from '../../stores/comparePersistent'; +import { StickyRowHeaderCell } from '../StickyRowHeaderCell'; interface CompareRowProps { name: string; diff --git a/packages/website-legacy/src/app/tools/compare/components/CompareSectionTitle.tsx b/packages/website/src/components/Compare/CompareSectionTitle.tsx similarity index 79% rename from packages/website-legacy/src/app/tools/compare/components/CompareSectionTitle.tsx rename to packages/website/src/components/Compare/CompareSectionTitle.tsx index bc6b3481f..545481905 100644 --- a/packages/website-legacy/src/app/tools/compare/components/CompareSectionTitle.tsx +++ b/packages/website/src/components/Compare/CompareSectionTitle.tsx @@ -1,7 +1,7 @@ import { Heading, Table } from '@radix-ui/themes'; import { times } from 'lodash-es'; -import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell'; export function CompareSectionTitle({ children }: { children: string }) { const memberCount = CompareEphemeral.use((state) => state.members.length); diff --git a/packages/website-legacy/src/app/tools/compare/components/CompareTable.tsx b/packages/website/src/components/Compare/CompareTable.tsx similarity index 94% rename from packages/website-legacy/src/app/tools/compare/components/CompareTable.tsx rename to packages/website/src/components/Compare/CompareTable.tsx index dd2560342..3d681e2a3 100644 --- a/packages/website-legacy/src/app/tools/compare/components/CompareTable.tsx +++ b/packages/website/src/components/Compare/CompareTable.tsx @@ -1,29 +1,28 @@ import { asset, availableProvisions, - checkConsumableProvisionInclusivity, consumableDefinitions, equipmentDefinitions, permanentSkills, provisionDefinitions, skillDefinitions, } from '@blitzkit/core'; +import { checkConsumableProvisionInclusivity } from '@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity'; import { ComponentPlaceholderIcon } from '@radix-ui/react-icons'; import { Button, Flex, Popover, Slider, Table, Text } from '@radix-ui/themes'; import { debounce, times } from 'lodash-es'; -import { use } from 'react'; -import { BlitzkitButtonGrayIcon } from '../../../../components/BlitzkitButtonGrayIcon'; -import { ConsumablesManager } from '../../../../components/ConsumablesManager'; -import { CrewSkillManager } from '../../../../components/CrewSkillManager'; -import { EquipmentManager } from '../../../../components/EquipmentManager'; -import { ModuleManager } from '../../../../components/ModuleManager'; -import { ProvisionsManager } from '../../../../components/ProvisionsManager'; -import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell'; -import { StickyTableRoot } from '../../../../components/StickyTableRoot'; -import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics'; -import { Var } from '../../../../core/radix/var'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; -import { EquipmentMatrix } from '../../../../stores/duel'; +import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics'; +import { Var } from '../../core/radix/var'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import type { EquipmentMatrix } from '../../stores/duel'; +import { BlitzkitButtonGrayIcon } from '../BlitzkitButtonGrayIcon'; +import { ConsumablesManager } from '../ConsumablesManager'; +import { CrewSkillManager } from '../CrewSkillManager'; +import { EquipmentManager } from '../EquipmentManager'; +import { ModuleManager } from '../ModuleManager'; +import { ProvisionsManager } from '../ProvisionsManager'; +import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell'; +import { StickyTableRoot } from '../StickyTableRoot'; import { Body } from './Body'; import { InsertionMarker } from './IntersectionMarker'; import { TankCard } from './TankCard'; @@ -32,14 +31,15 @@ interface CompareTableProps { stats: TankCharacteristics[]; } +const awaitedSkillDefinitions = await skillDefinitions; +const awaitedEquipmentDefinitions = await equipmentDefinitions; +const awaitedConsumableDefinitions = await consumableDefinitions; +const awaitedProvisionDefinitions = await provisionDefinitions; + export function CompareTable({ stats }: CompareTableProps) { const crewSkills = CompareEphemeral.use((state) => state.crewSkills); const members = CompareEphemeral.use((state) => state.members); - const awaitedSkillDefinitions = use(skillDefinitions); const mutateCompareEphemeral = CompareEphemeral.useMutation(); - const awaitedEquipmentDefinitions = use(equipmentDefinitions); - const awaitedConsumableDefinitions = use(consumableDefinitions); - const awaitedProvisionDefinitions = use(provisionDefinitions); return ( void; } +const awaitedProvisionDefinitions = await provisionDefinitions; + export function Controls({ addTankDialogOpen, onAddTankDialogOpenChange, }: ControlsProps) { const deltaMode = ComparePersistent.use((state) => state.deltaMode); - const awaitedProvisionDefinitions = use(provisionDefinitions); const mutateCompareEphemeral = CompareEphemeral.useMutation(); const mutateComparePersistent = ComparePersistent.useMutation(); @@ -88,23 +91,17 @@ export function Controls({ value={deltaMode} onValueChange={(value) => { mutateComparePersistent((draft) => { - draft.deltaMode = value as ComparePersistent.DeltaMode; + draft.deltaMode = value as DeltaMode; }); }} > - + No deltas - + Percentage - + Absolute diff --git a/packages/website-legacy/src/app/tools/compare/components/IntersectionMarker/constants.ts b/packages/website/src/components/Compare/IntersectionMarker/constants.ts similarity index 100% rename from packages/website-legacy/src/app/tools/compare/components/IntersectionMarker/constants.ts rename to packages/website/src/components/Compare/IntersectionMarker/constants.ts diff --git a/packages/website-legacy/src/app/tools/compare/components/IntersectionMarker/index.tsx b/packages/website/src/components/Compare/IntersectionMarker/index.tsx similarity index 93% rename from packages/website-legacy/src/app/tools/compare/components/IntersectionMarker/index.tsx rename to packages/website/src/components/Compare/IntersectionMarker/index.tsx index 1f7384d52..03249f681 100644 --- a/packages/website-legacy/src/app/tools/compare/components/IntersectionMarker/index.tsx +++ b/packages/website/src/components/Compare/IntersectionMarker/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import { Var } from '../../../../../core/radix/var'; +import { Var } from '../../../core/radix/var'; import { insertionMarkers } from './constants'; export function InsertionMarker({ index }: { index: number }) { diff --git a/packages/website-legacy/src/app/tools/compare/components/TankCard.tsx b/packages/website/src/components/Compare/TankCard.tsx similarity index 95% rename from packages/website-legacy/src/app/tools/compare/components/TankCard.tsx rename to packages/website/src/components/Compare/TankCard.tsx index 9ab059a60..803eb19a6 100644 --- a/packages/website-legacy/src/app/tools/compare/components/TankCard.tsx +++ b/packages/website/src/components/Compare/TankCard.tsx @@ -1,9 +1,9 @@ -import { TankDefinition, tankIcon } from '@blitzkit/core'; +import { type TankDefinition, tankIcon } from '@blitzkit/core'; import { Flex, Text } from '@radix-ui/themes'; import { useEffect, useRef } from 'react'; import { Vector2 } from 'three'; -import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell'; import { InsertionMarker } from './IntersectionMarker'; import { insertionMarkers } from './IntersectionMarker/constants'; import { TankControl } from './TankControl'; diff --git a/packages/website-legacy/src/app/tools/compare/components/TankControl.tsx b/packages/website/src/components/Compare/TankControl.tsx similarity index 86% rename from packages/website-legacy/src/app/tools/compare/components/TankControl.tsx rename to packages/website/src/components/Compare/TankControl.tsx index 6597a1901..92208dc86 100644 --- a/packages/website-legacy/src/app/tools/compare/components/TankControl.tsx +++ b/packages/website/src/components/Compare/TankControl.tsx @@ -2,18 +2,19 @@ import { provisionDefinitions } from '@blitzkit/core'; import { ExternalLinkIcon, LoopIcon, TrashIcon } from '@radix-ui/react-icons'; import { Dialog, Flex, IconButton } from '@radix-ui/themes'; import Link from 'next/link'; -import { use, useState } from 'react'; -import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; -import { TankSearch } from '../../tankopedia/components/TankSearch'; +import { useState } from 'react'; +import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember'; +import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { TankSearch } from '../TankSearch'; interface TankControlProps { index: number; id: number; } +const awaitedProvisionDefinitions = await provisionDefinitions; + export function TankControl({ index, id }: TankControlProps) { - const awaitedProvisionDefinitions = use(provisionDefinitions); const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false); const mutateCompareEphemeral = CompareEphemeral.useMutation(); diff --git a/packages/website-legacy/src/app/tools/compare/components/DamageWarning.tsx b/packages/website/src/components/DamageWarning.tsx similarity index 91% rename from packages/website-legacy/src/app/tools/compare/components/DamageWarning.tsx rename to packages/website/src/components/DamageWarning.tsx index 4c29ad59a..1e7bfd7df 100644 --- a/packages/website-legacy/src/app/tools/compare/components/DamageWarning.tsx +++ b/packages/website/src/components/DamageWarning.tsx @@ -1,6 +1,6 @@ import { InfoCircledIcon } from '@radix-ui/react-icons'; import { Callout } from '@radix-ui/themes'; -import * as CompareEphemeral from '../../../../stores/compareEphemeral'; +import { CompareEphemeral } from '../stores/compareEphemeral'; export function DamageWarning() { const members = CompareEphemeral.use((state) => state.members); diff --git a/packages/website/src/components/ModuleManager.tsx b/packages/website/src/components/ModuleManager.tsx index 39bfb6225..39c1b34cb 100644 --- a/packages/website/src/components/ModuleManager.tsx +++ b/packages/website/src/components/ModuleManager.tsx @@ -1,11 +1,11 @@ import { - EngineDefinition, - GunDefinition, - ShellDefinition, - TankDefinition, TIER_ROMAN_NUMERALS, - TrackDefinition, - TurretDefinition, + type EngineDefinition, + type GunDefinition, + type ShellDefinition, + type TankDefinition, + type TrackDefinition, + type TurretDefinition, } from '@blitzkit/core'; import { DropdownMenu, Flex } from '@radix-ui/themes'; import { useState } from 'react'; diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro index 95137401c..de0827042 100644 --- a/packages/website/src/components/Navbar.astro +++ b/packages/website/src/components/Navbar.astro @@ -32,7 +32,6 @@ const isBranchNamed =