{hasAtLeastOneMainOnlyAbility ? (
<>
{buildMains.map((ability) => (
))}
{build2Mains.map((ability) => (
))}
) : null}
{([...abilitiesShort, "UNKNOWN"] as const).map((ability) => {
const ap = abilityPoints.get(ability) ?? 0;
const ap2 = abilityPoints2.get(ability) ?? 0;
if (!ap && !ap2) return null;
return (
{ap}
{t("analyzer:abilityPoints.short")}
= ap2,
})}
style={{ width: `${ap}px` }}
/>
{ap2}
{t("analyzer:abilityPoints.short")}
);
})}
;
ldeIntensity: number;
handleLdeIntensityChange: (newLdeIntensity: number) => void;
handleAddEffect: (effect: SpecialEffectType) => void;
handleRemoveEffect: (effect: SpecialEffectType) => void;
}) {
const { t } = useTranslation(["weapons", "analyzer"]);
const effectsToShow = SPECIAL_EFFECTS.filter(
(effect) =>
!isAbility(effect.type) ||
build.flat().includes(effect.type) ||
build2.flat().includes(effect.type)
).reverse(); // reverse to show Tacticooler first as it always shows
return (
{effectsToShow.map((effect) => {
return (
{isAbility(effect.type) ? (
) : (
)}
{effect.type === "LDE" ? (
handleLdeIntensityChange(Number(e.target.value))
}
className="analyzer__lde-intensity-select"
>
{new Array(MAX_LDE_INTENSITY + 1).fill(null).map((_, i) => {
const percentage = ((i / MAX_LDE_INTENSITY) * 100)
.toFixed(2)
.replace(".00", "");
return (
{percentage}% (+{lastDitchEffortIntensityToAp(i)}{" "}
{t("analyzer:abilityPoints.short")})
);
})}
) : (
checked
? handleAddEffect(effect.type)
: handleRemoveEffect(effect.type)
}
tiny
/>
)}
);
})}
{t("abilityChunks")}
{abilityChunksMapAsArray.map((a) => {
const mainAbilityName = a[0];
const numChunksRequired = a[1];
return (
);
})}
);
}
function StatCategory({
title,
children,
containerClassName = "analyzer__stat-collection",
textBelow,
summaryRightContent,
testId,
}: {
title: string;
children: React.ReactNode;
containerClassName?: string;
textBelow?: string;
summaryRightContent?: React.ReactNode;
testId?: string;
}) {
return (
{title}
{summaryRightContent}
{children}
{textBelow && (
{textBelow}
)}
);
}
function StatCard({
title,
stat,
suffix,
popoverInfo,
abilityPoints,
isComparing,
testId,
}: {
title: string;
stat: [Stat, Stat] | [Stat, Stat] | number | string;
suffix?: string;
popoverInfo?: string;
abilityPoints: AbilityPoints;
isComparing: boolean;
testId?: string;
}) {
const { t } = useTranslation("analyzer");
const isStaticValue = typeof stat === "number" || typeof stat === "string";
const baseValue = isStaticValue ? stat : stat[0].baseValue;
const showBuildValue = () => {
if (isStaticValue) return false;
if (isComparing) return true;
// slightly hacky but handles the edge case
// where baseValue === value which can happen when
// you have Ninja Squid and stack swim speed
// -> we still want to show the build value
return [stat[0].modifiedBy].flat().some((ability) => {
const hasStackable = (abilityPoints.get(ability) ?? 0) > 0;
const hasEffect = baseValue !== stat[0].value;
return hasEffect || hasStackable;
});
};
const showComparison = isComparing && !isStaticValue;
const isHighlighted = () => {
if (!showComparison) return showBuildValue();
return (
stat[0].value !== stat[0].baseValue || stat[1].value !== stat[1].baseValue
);
};
return (
{title}{" "}
{popoverInfo && (
?}
>
{popoverInfo}
)}
{typeof stat === "number"
? t("value")
: showComparison
? t("build1")
: t("base")}
{" "}
{showComparison ? (stat as [Stat, Stat])[0].value : baseValue}
{suffix}
{showBuildValue() ? (
{showComparison ? t("build2") : t("build")}
{" "}
{(stat as [Stat, Stat])[showComparison ? 1 : 0].value}
{suffix}
) : null}
{!isStaticValue && (
);
}
function ModifiedByAbilities({ abilities }: { abilities: Stat["modifiedBy"] }) {
const abilitiesArray = Array.isArray(abilities) ? abilities : [abilities];
return (
{abilitiesArray.map((ability) => (
))}
{t("analyzer:damage.header.type")}
{showDistanceColumn && (
{t("analyzer:damage.header.distance")}
)}
{damageIsSubWeaponDamage(firstRow) ? (
{t("analyzer:damage.header.baseDamage")}
) : null}
{showDamageColumn && {t("analyzer:damage.header.damage")} }
{values.map((val) => {
const damage =
multiShots && damageTypeToWeaponType[val.type] === "MAIN"
? new Array(multiShots).fill(val.value).join(" + ")
: val.value;
const typeRowName = damageIsSubWeaponDamage(val)
? (`weapons:SUB_${val.subWeaponId}` as const)
: damageTypeTranslationString({
damageType: val.type,
});
return (
{damageIsSubWeaponDamage(val) ? (
{showDistanceColumn && (
{typeof val.distance === "number"
? val.distance
: val.distance?.join("-")}
)}
{damageIsSubWeaponDamage(val) && {val.baseValue} }
{showDamageColumn && (
{damage}{" "}
{val.shotsToSplat && (
{t("analyzer:damage.toSplat", {
count: val.shotsToSplat,
})}
)}
)}
);
})}
);
}
function ConsumptionTable({
isComparing,
options,
subWeaponId,
}: {
isComparing: boolean;
options: [
AnalyzedBuild["stats"]["fullInkTankOptions"],
AnalyzedBuild["stats"]["fullInkTankOptions"]
];
subWeaponId: SubWeaponId;
}) {
const [options1, options2] = options;
const { t } = useTranslation(["analyzer", "weapons"]);
const maxSubsToUse =
subWeaponId === TORPEDO_ID
? 1
: Math.max(...options.flat().map((opt) => opt.subsUsed));
const types = Array.from(new Set(options1.map((opt) => opt.type)));
return (
<>
{t(`weapons:SUB_${subWeaponId}`)}
{types.map((type) => (
{t(`analyzer:stat.consumption.${type}`)}
))}
{new Array(maxSubsToUse + 1).fill(null).map((_, subsUsed) => {
const options1ForThisSubsUsed = options1.filter(
(opt) => opt.subsUsed === subsUsed
);
const options2ForThisSubsUsed = options2.filter(
(opt) => opt.subsUsed === subsUsed
);
const cells: React.ReactNode[] = [];
// weird using basic for loop in react code but here we are essentially
// zipping these two arrays into one cell and if one of the arrays
// doesn't have value then it shows as a dash instead
for (
let i = 0;
i <
Math.max(
options1ForThisSubsUsed.length,
options2ForThisSubsUsed.length
);
i++
) {
const opt1 = options1ForThisSubsUsed[i];
const opt2 = options2ForThisSubsUsed[i];
const contents = !isComparing
? opt1.value
: `${opt1?.value ?? "-"}/${opt2?.value ?? "-"}`;
cells.push({contents} );
}
return (
×{subsUsed}
{cells}
);
})}
{subWeaponId === TORPEDO_ID && (
<> {t("analyzer:torpedoExplanation")}
)}
);
}