From eaff26c8d9202c4ba11c3e0aa7c3c11431be318b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sun, 31 Mar 2024 18:49:17 -0500 Subject: [PATCH] feat: crew skills ui --- .../{Equipments.tsx => Equipment.tsx} | 4 +- .../Characteristics/components/Skills.tsx | 71 +++++++++++++++++++ src/app/tools/tankopedia/[id]/page.tsx | 8 +-- src/core/blitzkrieg/skillDefinitions.ts | 2 +- src/stores/tankopedia.ts | 2 + 5 files changed, 80 insertions(+), 7 deletions(-) rename src/app/tools/tankopedia/[id]/components/Characteristics/components/{Equipments.tsx => Equipment.tsx} (96%) create mode 100644 src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx similarity index 96% rename from src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx index 7bf344a3e..8774b60b8 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx @@ -5,7 +5,7 @@ import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equip import { mutateDuel, useDuel } from '../../../../../../../stores/duel'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; -export function Equipments() { +export function Equipment() { const protagonist = useDuel((state) => state.protagonist!); const awaitedEquipmentDefinitions = use(equipmentDefinitions); const equipmentRows = @@ -14,7 +14,7 @@ export function Equipments() { return ( - Equipments + Equipment {equipmentRows.map((equipmentRow, rowIndex) => ( diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx new file mode 100644 index 000000000..482786f2a --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx @@ -0,0 +1,71 @@ +import { Flex, Heading } from '@radix-ui/themes'; +import { use } from 'react'; +import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton'; +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 mutateTankopediaPersistent, { + useTankopediaPersistent, +} from '../../../../../../../stores/tankopedia'; +import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; + +export function Skills() { + const awaitedSkillDefinitions = use(skillDefinitions); + const skillLevels = useTankopediaPersistent((state) => state.skills); + + if (Object.keys(skillLevels).length === 0) { + mutateTankopediaPersistent((draft) => { + Object.values(awaitedSkillDefinitions.classes).forEach((skills) => { + skills.forEach((skill) => { + draft.skills[skill] = 0; + }); + }); + }); + + return null; + } + + return ( + + Crew 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) => { + mutateTankopediaPersistent((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; + } + }); + }} + /> + ); + })} + + ), + )} + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index 2a632f1ae..a40688167 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -10,10 +10,11 @@ import { mutateTankopediaTemporary } from '../../../../stores/tankopedia'; import { AntagonistBar } from './components/AntagonistBar'; import { Characteristics } from './components/Characteristics'; import { Consumables } from './components/Characteristics/components/Consumables'; -import { Equipments } from './components/Characteristics/components/Equipments'; +import { Equipment } from './components/Characteristics/components/Equipment'; import { Miscellaneous } from './components/Characteristics/components/Miscellaneous'; import { Modules } from './components/Characteristics/components/Modules'; import { Provisions } from './components/Characteristics/components/Provisions'; +import { Skills } from './components/Characteristics/components/Skills'; import { TankSandbox } from './components/Model/TankSandbox'; import { Title } from './components/Title'; @@ -63,8 +64,6 @@ export default function Page({ params }: { params: { id: string } }) { }; }, [initialId, assigned]); - - return ( {assigned && ( @@ -94,9 +93,10 @@ export default function Page({ params }: { params: { id: string } }) { - + + diff --git a/src/core/blitzkrieg/skillDefinitions.ts b/src/core/blitzkrieg/skillDefinitions.ts index 13e9ff847..660d87bb6 100644 --- a/src/core/blitzkrieg/skillDefinitions.ts +++ b/src/core/blitzkrieg/skillDefinitions.ts @@ -7,5 +7,5 @@ export interface SkillDefinitions { } export const skillDefinitions = fetchCdonLz4( - asset('definitions/equipment.cdon.lz4'), + asset('definitions/skills.cdon.lz4'), ); diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index 92a5fee0c..9565bd407 100644 --- a/src/stores/tankopedia.ts +++ b/src/stores/tankopedia.ts @@ -38,6 +38,7 @@ export interface TankopediaPersistent { test: TankopediaTestTankDisplay; page: number; }; + skills: Record; mode: TankopediaMode; } @@ -146,6 +147,7 @@ export const useTankopediaPersistent = create()( test: 'include', page: 0, }, + skills: {}, mode: 'model', })), { name: 'tankopedia', merge: (a, b) => merge(b, a) },