From 574b1eec9259708044e8472bc2b83d686f5b65d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 12 Feb 2024 19:24:34 -0600 Subject: [PATCH] feat: code split module buttons --- .../buildAssets/consumableProvisionIcons.ts | 14 ++- .../[id]/components/AntagonistBar/index.tsx | 8 +- .../Characteristics/components/Camouflage.tsx | 5 +- .../components/Consumables.tsx | 5 +- .../Characteristics/components/Equipments.tsx | 8 +- .../Characteristics/components/Modules.tsx | 16 +-- .../Characteristics/components/Provisions.tsx | 5 +- src/components/ModuleButton.tsx | 118 ------------------ .../ModuleButtons/CamouflageButton.tsx | 17 +++ .../ModuleButtons/ConsumableButton.tsx | 19 +++ .../ModuleButtons/EquipmentButton.tsx | 16 +++ .../GenericTankComponentButton.tsx | 33 +++++ src/components/ModuleButtons/ModuleButton.tsx | 21 ++++ .../ModuleButtons/ProvisionButton.tsx | 16 +++ src/components/ModuleButtons/ShellButton.tsx | 16 +++ .../ModuleButtons/TankComponentButton.tsx | 64 ++++++++++ src/core/blitzkrieg/consumableDefinitions.ts | 2 - 17 files changed, 230 insertions(+), 153 deletions(-) delete mode 100644 src/components/ModuleButton.tsx create mode 100644 src/components/ModuleButtons/CamouflageButton.tsx create mode 100644 src/components/ModuleButtons/ConsumableButton.tsx create mode 100644 src/components/ModuleButtons/EquipmentButton.tsx create mode 100644 src/components/ModuleButtons/GenericTankComponentButton.tsx create mode 100644 src/components/ModuleButtons/ModuleButton.tsx create mode 100644 src/components/ModuleButtons/ProvisionButton.tsx create mode 100644 src/components/ModuleButtons/ShellButton.tsx create mode 100644 src/components/ModuleButtons/TankComponentButton.tsx diff --git a/scripts/buildAssets/consumableProvisionIcons.ts b/scripts/buildAssets/consumableProvisionIcons.ts index 65dc49727..fb866d7c3 100644 --- a/scripts/buildAssets/consumableProvisionIcons.ts +++ b/scripts/buildAssets/consumableProvisionIcons.ts @@ -63,9 +63,10 @@ export async function consumableProvisionIcons(production: boolean) { .replace('.txt', ''); if (configPath.startsWith('Gfx/Shared')) { - const content = ( - await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`) - ).toString('base64'); + const image = sharp( + await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`), + ); + const content = (await image.trim().toBuffer()).toString('base64'); changes.push({ path: `icons/consumables/${consumable.id}.webp`, @@ -119,9 +120,10 @@ export async function consumableProvisionIcons(production: boolean) { .replace('.txt', ''); if (configPath.startsWith('Gfx/Shared')) { - const content = ( - await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`) - ).toString('base64'); + const image = sharp( + await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`), + ); + const content = (await image.trim().toBuffer()).toString('base64'); changes.push({ path: `icons/provisions/${provision.id}.webp`, diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx index 55907e0a0..0c597e968 100644 --- a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx +++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx @@ -10,7 +10,8 @@ import { Tooltip, } from '@radix-ui/themes'; import { useState } from 'react'; -import { ModuleButton } from '../../../../../../components/ModuleButton'; +import { ModuleButton } from '../../../../../../components/ModuleButtons/ModuleButton'; +import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton'; import { SmallTankIcon } from '../../../../../../components/SmallTankIcon'; import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration'; import { @@ -39,9 +40,8 @@ export function AntagonistBar() { {antagonist.gun.shells.map((shell, index) => { return ( - @@ -178,7 +177,6 @@ export function AntagonistBar() { }} selected={antagonist.gun.id === gun.id} discriminator={TIER_ROMAN_NUMERALS[gun.tier]} - type="module" module="gun" /> diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx index e1233adb6..1ea489369 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Camouflage.tsx @@ -1,5 +1,5 @@ import { Heading } from '@radix-ui/themes'; -import { ModuleButton } from '../../../../../../../components/ModuleButton'; +import { CamouflageButton } from '../../../../../../../components/ModuleButtons/CamouflageButton'; import { mutateTankopediaTemporary, useTankopediaTemporary, @@ -13,11 +13,10 @@ export function Camouflage() { Camouflage - { mutateTankopediaTemporary((draft) => { draft.camouflage = !camouflage; diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx index 971ffa3fe..6f2de5d54 100644 --- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx +++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx @@ -1,6 +1,6 @@ import { Flex, Heading } from '@radix-ui/themes'; import { use } from 'react'; -import { ModuleButton } from '../../../../../../../components/ModuleButton'; +import { ConsumableButton } from '../../../../../../../components/ModuleButtons/ConsumableButton'; import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableProvisionInclusivity'; import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumableDefinitions'; import { useDuel } from '../../../../../../../stores/duel'; @@ -32,12 +32,11 @@ export function Consumables() { const selected = consumables.includes(consumable.id); return ( - {equipmentRow.map((equipment, columnIndex) => ( - - {protagonist.gun.shells.map((shell, index) => { return ( - , 'type'> & { - selected?: boolean; - first?: boolean; - last?: boolean; - rowChild?: boolean; - discriminator?: string; -} & ( - | { - type: 'module'; - module: string; - } - | { - type: 'shell'; - shell: string; - } - | { - type: 'equipment'; - equipment: number; - } - | { - type: 'consumable'; - consumable: number; - } - | { - type: 'provision'; - provision: number; - } - | { - type: 'camouflage'; - } - ); - -export function ModuleButton({ - selected, - style, - first = false, - last = false, - rowChild, - discriminator, - disabled, - ...props -}: ModuleButtonProps) { - const imageStyles: CSSProperties = { - width: 32, - height: 32, - position: 'absolute', - opacity: disabled ? 0.5 : 1, - transform: 'scale(0.75)', - }; - - if (props.type === 'module') { - imageStyles.top = '50%'; - imageStyles.left = '50%'; - imageStyles.transform = 'translate(calc(-50% + 2px), calc(-50% + 2px))'; - } else if (props.type === 'camouflage') { - imageStyles.top = '50%'; - imageStyles.left = '50%'; - imageStyles.transform = 'translate(calc(-50% + 4px), calc(-50% + 4px))'; - } - - return ( - - ); -} diff --git a/src/components/ModuleButtons/CamouflageButton.tsx b/src/components/ModuleButtons/CamouflageButton.tsx new file mode 100644 index 000000000..0964d85af --- /dev/null +++ b/src/components/ModuleButtons/CamouflageButton.tsx @@ -0,0 +1,17 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +export function CamouflageButton(props: TankComponentButtonProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/ConsumableButton.tsx b/src/components/ModuleButtons/ConsumableButton.tsx new file mode 100644 index 000000000..242ae959c --- /dev/null +++ b/src/components/ModuleButtons/ConsumableButton.tsx @@ -0,0 +1,19 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +interface ConsumableButtonProps extends TankComponentButtonProps { + consumable: number; +} + +export function ConsumableButton({ + consumable, + ...props +}: ConsumableButtonProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/EquipmentButton.tsx b/src/components/ModuleButtons/EquipmentButton.tsx new file mode 100644 index 000000000..d9da23176 --- /dev/null +++ b/src/components/ModuleButtons/EquipmentButton.tsx @@ -0,0 +1,16 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +interface EquipmentButtonProps extends TankComponentButtonProps { + equipment: number; +} + +export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/GenericTankComponentButton.tsx b/src/components/ModuleButtons/GenericTankComponentButton.tsx new file mode 100644 index 000000000..6cf4fce8f --- /dev/null +++ b/src/components/ModuleButtons/GenericTankComponentButton.tsx @@ -0,0 +1,33 @@ +import { HTMLAttributes } from 'react'; +import { + TankComponentButton, + TankComponentButtonProps, +} from './TankComponentButton'; + +interface GenericTankComponentButtonProps extends TankComponentButtonProps { + icon: string; + iconStyles?: HTMLAttributes['style']; +} + +export function GenericTankComponentButton({ + icon, + iconStyles, + ...props +}: GenericTankComponentButtonProps) { + return ( + + + + ); +} diff --git a/src/components/ModuleButtons/ModuleButton.tsx b/src/components/ModuleButtons/ModuleButton.tsx new file mode 100644 index 000000000..a1223c597 --- /dev/null +++ b/src/components/ModuleButtons/ModuleButton.tsx @@ -0,0 +1,21 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +interface ModuleProps extends TankComponentButtonProps { + module: string; +} + +export function ModuleButton({ module, ...props }: ModuleProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/ProvisionButton.tsx b/src/components/ModuleButtons/ProvisionButton.tsx new file mode 100644 index 000000000..a8cf07eb6 --- /dev/null +++ b/src/components/ModuleButtons/ProvisionButton.tsx @@ -0,0 +1,16 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +interface ProvisionButtonProps extends TankComponentButtonProps { + provision: number; +} + +export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/ShellButton.tsx b/src/components/ModuleButtons/ShellButton.tsx new file mode 100644 index 000000000..7646c0783 --- /dev/null +++ b/src/components/ModuleButtons/ShellButton.tsx @@ -0,0 +1,16 @@ +import { asset } from '../../core/blitzkrieg/asset'; +import { GenericTankComponentButton } from './GenericTankComponentButton'; +import { TankComponentButtonProps } from './TankComponentButton'; + +interface ShellButtonProps extends TankComponentButtonProps { + shell: string; +} + +export function ShellButton({ shell, ...props }: ShellButtonProps) { + return ( + + ); +} diff --git a/src/components/ModuleButtons/TankComponentButton.tsx b/src/components/ModuleButtons/TankComponentButton.tsx new file mode 100644 index 000000000..6cc91df77 --- /dev/null +++ b/src/components/ModuleButtons/TankComponentButton.tsx @@ -0,0 +1,64 @@ +import { Button, Text } from '@radix-ui/themes'; +import { ComponentProps, ReactNode } from 'react'; + +export interface TankComponentButtonProps + extends ComponentProps { + selected?: boolean; + first?: boolean; + last?: boolean; + rowChild?: boolean; + children?: ReactNode; + discriminator?: ReactNode; + disabled?: boolean; +} + +export function TankComponentButton({ + selected, + first = false, + last = false, + rowChild, + discriminator, + disabled, + children, + ...props +}: TankComponentButtonProps) { + return ( + + ); +} diff --git a/src/core/blitzkrieg/consumableDefinitions.ts b/src/core/blitzkrieg/consumableDefinitions.ts index 97828ea3f..f15523343 100644 --- a/src/core/blitzkrieg/consumableDefinitions.ts +++ b/src/core/blitzkrieg/consumableDefinitions.ts @@ -36,5 +36,3 @@ export interface ConsumableDefinitions { export const consumableDefinitions = fetchCdonLz4( asset('definitions/consumables.cdon.lz4'), ); - -consumableDefinitions.then(console.log);