From 7c3cad2c7de5e29b628652e5f9a76fd2779117fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Tue, 9 Apr 2024 09:47:57 -0500 Subject: [PATCH] feat: crew button and missing traverse stats --- src/app/tools/compare/page.tsx | 37 +++++++++-- .../components/Skills/index.tsx | 51 +++------------- .../[id]/components/Characteristics/index.tsx | 18 +++--- src/components/CrewSkillManager.tsx | 61 +++++++++++++++++++ 4 files changed, 112 insertions(+), 55 deletions(-) create mode 100644 src/components/CrewSkillManager.tsx diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx index a5cd4a860..4cf519287 100644 --- a/src/app/tools/compare/page.tsx +++ b/src/app/tools/compare/page.tsx @@ -23,6 +23,7 @@ import { times } from 'lodash'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { use, useCallback, useEffect, useMemo, useState } from 'react'; import { ConsumablesManager } from '../../../components/ConsumablesManager'; +import { CrewSkillManager } from '../../../components/CrewSkillManager'; import { EquipmentManager } from '../../../components/EquipmentManager'; import { ModuleManager } from '../../../components/ModuleManager'; import PageWrapper from '../../../components/PageWrapper'; @@ -520,7 +521,14 @@ export default function Page() { - ඞ + { + mutateCompareTemporary((draft) => { + draft.crewSkills = skills; + }); + }} + /> @@ -1016,21 +1024,42 @@ export default function Page() { + + + + + Survivability diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx index 2a557c630..f1b22ee53 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx @@ -9,18 +9,14 @@ import { Text, } from '@radix-ui/themes'; import { use } from 'react'; -import { GenericTankComponentButton } from '../../../../../../../../components/ModuleButtons/GenericTankComponentButton'; -import { asset } from '../../../../../../../../core/blitzkrieg/asset'; +import { CrewSkillManager } from '../../../../../../../../components/CrewSkillManager'; import { createDefaultSkills } from '../../../../../../../../core/blitzkrieg/createDefaultSkills'; import { skillDefinitions } from '../../../../../../../../core/blitzkrieg/skillDefinitions'; -import { Tier } from '../../../../../../../../core/blitzkrieg/tankDefinitions'; -import { TIER_ROMAN_NUMERALS } from '../../../../../../../../core/blitzkrieg/tankDefinitions/constants'; import { mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../../../stores/tankopedia'; import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper'; -import { permanentSkills } from './constants'; export function Skills() { const awaitedSkillDefinitions = use(skillDefinitions); @@ -89,43 +85,14 @@ export function Skills() { - - {Object.entries(awaitedSkillDefinitions.classes).map( - ([tankClass, skills]) => ( - - {skills.map((skill) => { - const level = skillLevels[skill]; - - return ( - 0} - discriminator={ - level === 0 - ? undefined - : TIER_ROMAN_NUMERALS[level as Tier] - } - icon={asset(`icons/skills/${skill}.webp`)} - onClick={(event) => { - mutateTankopediaTemporary((draft) => { - if (event.shiftKey) { - draft.skills[skill] = - draft.skills[skill] === 0 ? 7 : 0; - } else { - draft.skills[skill] = level - 1; - if (draft.skills[skill] < 0) draft.skills[skill] = 7; - } - }); - }} - /> - ); - })} - - ), - )} - + { + mutateTankopediaTemporary((draft) => { + draft.skills = skills; + }); + }} + /> ); } diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx index 8b829a651..520c56ae9 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx @@ -411,6 +411,14 @@ export function Characteristics() { {stats.enginePower} + + {stats.weight} + {stats.powerToWeightRatioHardTerrain} @@ -421,18 +429,10 @@ export function Characteristics() { {stats.powerToWeightRatioSoftTerrain} - - {stats.weight} - {stats.turretTraverseSpeed} - + {stats.hullTraverseHardTerrain} diff --git a/src/components/CrewSkillManager.tsx b/src/components/CrewSkillManager.tsx new file mode 100644 index 000000000..606ed7161 --- /dev/null +++ b/src/components/CrewSkillManager.tsx @@ -0,0 +1,61 @@ +import { Flex } from '@radix-ui/themes'; +import { use } from 'react'; +import { permanentSkills } from '../app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants'; +import { asset } from '../core/blitzkrieg/asset'; +import { skillDefinitions } from '../core/blitzkrieg/skillDefinitions'; +import { Tier } from '../core/blitzkrieg/tankDefinitions'; +import { TIER_ROMAN_NUMERALS } from '../core/blitzkrieg/tankDefinitions/constants'; +import { GenericTankComponentButton } from './ModuleButtons/GenericTankComponentButton'; + +interface CrewSkillManagerProps { + skillLevels: Record; + onChange?: (skillLevels: Record) => void; +} + +export function CrewSkillManager({ + skillLevels, + onChange, +}: CrewSkillManagerProps) { + const awaitedSkillDefinitions = use(skillDefinitions); + + return ( + + {Object.entries(awaitedSkillDefinitions.classes).map( + ([tankClass, skills]) => ( + + {skills.map((skill) => { + const level = skillLevels[skill]; + + return ( + 0} + discriminator={ + level === 0 ? undefined : TIER_ROMAN_NUMERALS[level as Tier] + } + icon={asset(`icons/skills/${skill}.webp`)} + onClick={(event) => { + if (!onChange) return; + + const draft = { ...skillLevels }; + + if (event.shiftKey) { + draft[skill] = draft[skill] === 0 ? 7 : 0; + } else { + draft[skill] = level - 1; + if (draft[skill] < 0) draft[skill] = 7; + } + + onChange(draft); + }} + /> + ); + })} + + ), + )} + + ); +}