feat: code split module buttons

This commit is contained in:
TrèsAbhi committed 2024-02-12 19:24:34 -06:00
1 parent 9d7c60e92d
commit 574b1eec92
17 files changed
+230 -153

No files matched your search

@@ -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() {
<Flex>
{antagonist.gun.shells.map((shell, index) => {
return (
<ModuleButton
<ShellButton
selected={antagonist.shell.id === shell.id}
type="shell"
shell={shell.icon}
rowChild
first={index === 0}
@@ -155,7 +155,6 @@ export function AntagonistBar() {
discriminator={
TIER_ROMAN_NUMERALS[turret.tier]
}
type="module"
module="turret"
/>
</Tooltip>
@@ -178,7 +177,6 @@ export function AntagonistBar() {
}}
selected={antagonist.gun.id === gun.id}
discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
type="module"
module="gun"
/>
</Tooltip>
@@ -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() {
<ConfigurationChildWrapper>
<Heading size="4">Camouflage</Heading>
<ModuleButton
<CamouflageButton
selected={camouflage}
first
last
type="camouflage"
onClick={() => {
mutateTankopediaTemporary((draft) => {
draft.camouflage = !camouflage;
@@ -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 (
<ModuleButton
<ConsumableButton
key={consumable.id}
first={index === 0}
last={index === consumablesList.length - 1}
rowChild
type="consumable"
disabled={
protagonist.tank.consumables === consumables.length && !selected
}
@@ -1,6 +1,6 @@
import { Flex, Heading } from '@radix-ui/themes';
import { use } from 'react';
import { ModuleButton } from '../../../../../../../components/ModuleButton';
import { EquipmentButton } from '../../../../../../../components/ModuleButtons/EquipmentButton';
import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
import { useDuel } from '../../../../../../../stores/duel';
import {
@@ -27,8 +27,7 @@ export function Equipments() {
<Flex gap="2" key={rowIndex}>
{equipmentRow.map((equipment, columnIndex) => (
<Flex key={columnIndex}>
<ModuleButton
type="equipment"
<EquipmentButton
equipment={equipment[0]}
first
rowChild
@@ -43,8 +42,7 @@ export function Equipments() {
});
}}
/>
<ModuleButton
type="equipment"
<EquipmentButton
equipment={equipment[1]}
last
rowChild
@@ -1,6 +1,10 @@
import { Flex, Heading } from '@radix-ui/themes';
import { ModuleButton } from '../../../../../../../components/ModuleButton';
import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions';
import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
import { ShellButton } from '../../../../../../../components/ModuleButtons/ShellButton';
import {
SHELL_NAMES,
TIER_ROMAN_NUMERALS,
} from '../../../../../../../core/blitzkrieg/tankDefinitions';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -18,7 +22,6 @@ export function Modules() {
<ModuleButton
key={turret.id}
selected={protagonist.turret.id === turret.id}
type="module"
module="turret"
discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
first={index === 0}
@@ -41,7 +44,6 @@ export function Modules() {
return (
<ModuleButton
key={gun.id}
type="module"
module="gun"
discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
selected={protagonist.gun.id === gun.id}
@@ -64,7 +66,6 @@ export function Modules() {
return (
<ModuleButton
key={engine.id}
type="module"
module="engine"
discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
selected={protagonist.engine.id === engine.id}
@@ -86,7 +87,6 @@ export function Modules() {
return (
<ModuleButton
key={track.id}
type="module"
module="chassis"
discriminator={TIER_ROMAN_NUMERALS[track.tier]}
selected={protagonist.track.id === track.id}
@@ -106,10 +106,10 @@ export function Modules() {
<Flex>
{protagonist.gun.shells.map((shell, index) => {
return (
<ModuleButton
<ShellButton
key={shell.id}
type="shell"
shell={shell.icon}
discriminator={SHELL_NAMES[shell.type]}
selected={protagonist.shell.id === shell.id}
first={index === 0}
last={index === protagonist.gun.shells.length - 1}
@@ -1,6 +1,6 @@
import { Flex, Heading } from '@radix-ui/themes';
import { use } from 'react';
import { ModuleButton } from '../../../../../../../components/ModuleButton';
import { ProvisionButton } from '../../../../../../../components/ModuleButtons/ProvisionButton';
import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableProvisionInclusivity';
import { provisionDefinitions } from '../../../../../../../core/blitzkrieg/provisionDefinitions';
import { useDuel } from '../../../../../../../stores/duel';
@@ -32,12 +32,11 @@ export function Provisions() {
const selected = provisions.includes(provision.id);
return (
<ModuleButton
<ProvisionButton
key={provision.id}
first={index === 0}
last={index === provisionsList.length - 1}
rowChild
type="provision"
disabled={
protagonist.tank.provisions === provisions.length && !selected
}