Build Analyzer: Add comparing sub weapon damages Closes #1438

app/features/build-analyzer/routes/analyzer.tsx

@@ -708,6 +708,15 @@ export default function BuildAnalyzerPage() {
               ) : null}
               <DamageTable
                 values={analyzed.stats.subWeaponDefenseDamages}
+                comparisonValues={
+                  analyzed2.stats.subWeaponDefenseDamages.some(
+                    (dmg, i) =>
+                      dmg.value !==
+                      analyzed.stats.subWeaponDefenseDamages[i].value
+                  )
+                    ? analyzed2.stats.subWeaponDefenseDamages
+                    : undefined
+                }
                 multiShots={analyzed.weapon.multiShots}
               />
             </StatCategory>
@@ -1287,11 +1296,15 @@ function ModifiedByAbilities({ abilities }: { abilities: Stat["modifiedBy"] }) {
 
 function DamageTable({
   values,
+  comparisonValues,
   multiShots,
 }: {
   values:
     | AnalyzedBuild["stats"]["damages"]
     | AnalyzedBuild["stats"]["subWeaponDefenseDamages"];
+  comparisonValues?:
+    | AnalyzedBuild["stats"]["damages"]
+    | AnalyzedBuild["stats"]["subWeaponDefenseDamages"];
   multiShots?: AnalyzedBuild["weapon"]["multiShots"];
 }) {
   const { t } = useTranslation(["weapons", "analyzer"]);
@@ -1314,14 +1327,18 @@ function DamageTable({
               <th>{t("analyzer:damage.header.distance")}</th>
             )}
             {damageIsSubWeaponDamage(firstRow) ? (
-              <th>{t("analyzer:damage.header.baseDamage")}</th>
+              <th>
+                {comparisonValues
+                  ? t("analyzer:damage.header.baseDamage.short")
+                  : t("analyzer:damage.header.baseDamage")}
+              </th>
             ) : null}
             {showDamageColumn && <th>{t("analyzer:damage.header.damage")}</th>}
           </tr>
         </thead>
         <tbody>
-          {values.map((val) => {
-            const damage =
+          {values.map((val, i) => {
+            const damage = (val: AnalyzedBuild["stats"]["damages"][number]) =>
               multiShots && damageTypeToWeaponType[val.type] === "MAIN"
                 ? new Array(multiShots).fill(val.value).join(" + ")
                 : val.value;
@@ -1332,6 +1349,8 @@ function DamageTable({
                   damageType: val.type,
                 });
 
+            const comparisonVal = comparisonValues?.[i];
+
             return (
               <tr key={val.id}>
                 <td className="stack horizontal xs items-center">
@@ -1358,7 +1377,8 @@ function DamageTable({
                 {damageIsSubWeaponDamage(val) && <td>{val.baseValue}</td>}
                 {showDamageColumn && (
                   <td>
-                    {damage}{" "}
+                    {damage(val)}
+                    {comparisonVal ? `/${damage(comparisonVal)}` : null}{" "}
                     {val.shotsToSplat && (
                       <span className="analyzer__shots-to-splat">
                         {t("analyzer:damage.toSplat", {

public/locales/en/analyzer.json

@@ -86,6 +86,7 @@
   "damage.header.type": "Type",
   "damage.header.damage": "Damage",
   "damage.header.baseDamage": "Base damage",
+  "damage.header.baseDamage.short": "Base",
   "damage.header.distance": "Distance",
   "damage.toSplat_one": "{{count}} hit to splat",
   "damage.toSplat_other": "{{count}} hits to splat",