From 66cb197b53629f6e3ec718111a256517e1e0ca59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Fri, 26 Jan 2024 21:31:59 -0600 Subject: [PATCH] feat: crew --- scripts/buildAssets/definitions.ts | 2 +- .../Configure/components/Camouflage.tsx | 7 +++-- .../components/ConfigurationChildWrapper.tsx | 16 ++++++++++ .../Configure/components/Consumables.tsx | 5 ++-- .../components/Configure/components/Crew.tsx | 29 +++++++++++++++++++ .../Configure/components/Equipments.tsx | 5 ++-- .../Configure/components/Modules.tsx | 5 ++-- .../Configure/components/Provisions.tsx | 5 ++-- .../[id]/components/Configure/index.tsx | 8 +++-- src/app/tools/tankopedia/page.css.ts | 17 +++++++++++ 10 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx create mode 100644 src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx diff --git a/scripts/buildAssets/definitions.ts b/scripts/buildAssets/definitions.ts index 11e0df5dc..43a3c23a8 100644 --- a/scripts/buildAssets/definitions.ts +++ b/scripts/buildAssets/definitions.ts @@ -358,7 +358,7 @@ export async function definitions(production: boolean) { stringsCache[tank.userString], name_full: strings[tank.userString] ?? stringsCache[tank.userString], nation, - tree_type: (tank.sellPrice ? 'gold' in tank.sellPrice : false) + tree_type: tankTags.includes('collectible') ? 'collector' : (typeof tank.price === 'number' ? false : 'gold' in tank.price) ? 'premium' diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx index d5f46c2d4..e1233adb6 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx @@ -1,15 +1,16 @@ -import { Flex, Heading } from '@radix-ui/themes'; +import { Heading } from '@radix-ui/themes'; import { ModuleButton } from '../../../../../../../components/ModuleButton'; import { mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../../stores/tankopedia'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Camouflage() { const camouflage = useTankopediaTemporary((state) => state.camouflage); return ( - + Camouflage - + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx new file mode 100644 index 000000000..f768431ab --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/ConfigurationChildWrapper.tsx @@ -0,0 +1,16 @@ +import { Flex } from '@radix-ui/themes'; +import { ReactNode } from 'react'; + +interface ConfigurationChildWrapperProps { + children: ReactNode; +} + +export function ConfigurationChildWrapper({ + children, +}: ConfigurationChildWrapperProps) { + return ( + + {children} + + ); +} diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx index 75267ad49..1198205f2 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx @@ -8,6 +8,7 @@ import { mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../../stores/tankopedia'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Consumables() { const protagonist = useDuel((state) => state.protagonist!); @@ -23,7 +24,7 @@ export function Consumables() { ); return ( - + Consumables{' '} (max {protagonist.tank.consumables}) @@ -59,6 +60,6 @@ export function Consumables() { ); })} - + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx new file mode 100644 index 000000000..2eb767305 --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Crew.tsx @@ -0,0 +1,29 @@ +import { Flex, Heading, Slider, TextField } from '@radix-ui/themes'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; + +export function Crew() { + return ( + + Crew + + + + + % + + + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx index 551bb5dcc..e6e72652b 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx @@ -7,6 +7,7 @@ import { mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../../stores/tankopedia'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Equipments() { const protagonist = useDuel((state) => state.protagonist!); @@ -18,7 +19,7 @@ export function Equipments() { ); return ( - + Equipments @@ -63,6 +64,6 @@ export function Equipments() { ))} - + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx index d42383c53..5ebea0922 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx @@ -2,12 +2,13 @@ import { Flex, Heading } from '@radix-ui/themes'; import { ModuleButton } from '../../../../../../../components/ModuleButton'; import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions'; import { mutateDuel, useDuel } from '../../../../../../../stores/duel'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Modules() { const protagonist = useDuel((state) => state.protagonist!); return ( - + Modules @@ -59,6 +60,6 @@ export function Modules() { })} - + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx index 0c9fb0550..10ba9b4a3 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx @@ -8,6 +8,7 @@ import { mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../../stores/tankopedia'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; export function Provisions() { const protagonist = useDuel((state) => state.protagonist!); @@ -23,7 +24,7 @@ export function Provisions() { ); return ( - + Provisions (max {protagonist.tank.provisions}) @@ -58,6 +59,6 @@ export function Provisions() { ); })} - + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx index 32323b636..fbc138bea 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx @@ -1,6 +1,7 @@ import { Flex, Heading } from '@radix-ui/themes'; import { Camouflage } from './components/Camouflage'; import { Consumables } from './components/Consumables'; +import { Crew } from './components/Crew'; import { Equipments } from './components/Equipments'; import { Modules } from './components/Modules'; import { Provisions } from './components/Provisions'; @@ -10,12 +11,13 @@ export function Configure() { Configure - + - - + + + ); diff --git a/src/app/tools/tankopedia/page.css.ts b/src/app/tools/tankopedia/page.css.ts index 4065c1427..a6de47c73 100644 --- a/src/app/tools/tankopedia/page.css.ts +++ b/src/app/tools/tankopedia/page.css.ts @@ -55,3 +55,20 @@ export const alignTopRight = style({ }, }, }); + +export const configure = style({ + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gap: 16, +}); + +export const configureRight = style({ + display: 'flex', + flexDirection: 'column', + gap: 8, +}); +export const configureLeft = style({ + display: 'flex', + flexDirection: 'column', + gap: 8, +});