diff --git a/app/routes/object-damage-calculator.tsx b/app/routes/object-damage-calculator.tsx index a0d114d60..7c27f6202 100644 --- a/app/routes/object-damage-calculator.tsx +++ b/app/routes/object-damage-calculator.tsx @@ -82,34 +82,31 @@ export default function ObjectDamagePage() { allDamageTypes={allDamageTypes} /> -
- - -
{damagesToReceivers ? ( + abilityPoints={abilityPoints} + > +
+ +
+
) : (
{t("analyzer:noDmgData")}
)} @@ -177,18 +174,37 @@ const damageReceiverImages: Record = { BulletUmbrellaCanopyCompact: mainWeaponImageUrl(6020), }; +const damageReceiverAp: Record = { + Bomb_TorpedoBullet:
, + Chariot:
, + Gachihoko_Barrier:
, + GreatBarrier_Barrier: , + GreatBarrier_WeakPoint: , + NiceBall_Armor:
, + ShockSonar:
, + Wsb_Flag:
, + Wsb_Shield: , + Wsb_Sprinkler:
, + BulletUmbrellaCanopyNormal:
, + BulletUmbrellaCanopyWide:
, + BulletUmbrellaCanopyCompact:
, +}; + function DamageReceiversGrid({ subWeaponId, damagesToReceivers, + children, + abilityPoints, }: { subWeaponId: ReturnType["subWeaponId"]; damagesToReceivers: NonNullable< ReturnType["damagesToReceivers"] >; -}) { + children: React.ReactNode; + abilityPoints: string; +}): JSX.Element { const { t } = useTranslation(["weapons", "analyzer", "common"]); useSetTitle(t("common:pages.object-damage-calculator")); - return (
-
-
+
+ +
+
{children}
{damagesToReceivers[0]?.damages.map((damage) => (
@@ -223,13 +247,21 @@ function DamageReceiversGrid({ {damagesToReceivers.map((damageToReceiver, i) => { return ( - +
+ + +
{damageToReceiver.hitPoints} {t("analyzer:suffix.hp")} diff --git a/app/styles/object-damage.css b/app/styles/object-damage.css index c781599f0..a4989ea6b 100644 --- a/app/styles/object-damage.css +++ b/app/styles/object-damage.css @@ -1,13 +1,12 @@ .object-damage__controls { display: flex; flex-wrap: wrap; - justify-content: space-between; - gap: var(--s-4); + gap: var(--s-5); } .object-damage__ap-label { display: flex; - align-items: center; + justify-content: center; gap: var(--s-1-5); }