From 2067e8f7a74fcb7dc907809e6e84f834f90374aa Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 26 Nov 2022 17:38:17 +0200
Subject: [PATCH] Build Analyzer: Highlight when section/card active

---
 app/routes/analyzer.tsx | 22 ++++++++++++++++++----
 app/styles/analyzer.css |  8 ++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/routes/analyzer.tsx b/app/routes/analyzer.tsx
index b9b0bc035..d7b6989fb 100644
--- a/app/routes/analyzer.tsx
+++ b/app/routes/analyzer.tsx
@@ -48,6 +48,7 @@ import {
   subWeaponImageUrl,
 } from "~/utils/urls";
 import { getAbilityChunksMapAsArray } from "~/modules/analyzer/abilityChunksCalc";
+import clsx from "clsx";
 
 export const CURRENT_PATCH = "1.2";
 
@@ -503,6 +504,12 @@ export default function BuildAnalyzerPage() {
               title={t("analyzer:stat.category.actionsPerInkTank")}
               containerClassName="analyzer__table-container"
             >
+              {/** Hack the :has ;) */}
+              {build
+                .flat()
+                .some((ability) => ability === "ISM" || ability === "ISS") ? (
+                <div className="analyzer__stat-card-highlighted" />
+              ) : null}
               <ConsumptionTable
                 options={analyzed.stats.fullInkTankOptions}
                 subWeaponId={analyzed.weapon.subWeaponSplId}
@@ -794,7 +801,7 @@ function StatCategory({
   textBelow?: string;
 }) {
   return (
-    <details>
+    <details className="analyzer__details">
       <summary className="analyzer__summary">{title}</summary>
       <div className={containerClassName}>{children}</div>
       {textBelow && (
@@ -816,10 +823,17 @@ function StatCard({
   popoverInfo?: string;
 }) {
   const { t } = useTranslation("analyzer");
+
   const baseValue = typeof stat === "number" ? stat : stat.baseValue;
+  const showBuildValue =
+    typeof stat !== "number" && stat.value !== stat.baseValue;
 
   return (
-    <div className="analyzer__stat-card">
+    <div
+      className={clsx("analyzer__stat-card", {
+        "analyzer__stat-card-highlighted": showBuildValue,
+      })}
+    >
       <div className="analyzer__stat-card__title-and-value-container">
         <h3 className="analyzer__stat-card__title">
           {title}{" "}
@@ -843,7 +857,7 @@ function StatCard({
               {suffix}
             </div>
           </div>
-          {typeof stat !== "number" && stat.value !== stat.baseValue && (
+          {showBuildValue ? (
             <div className="analyzer__stat-card__value">
               <h4 className="analyzer__stat-card__value__title">
                 {t("build")}
@@ -853,7 +867,7 @@ function StatCard({
                 {suffix}
               </div>
             </div>
-          )}
+          ) : null}
         </div>
       </div>
       <div className="analyzer__stat-card__ability-container">
diff --git a/app/styles/analyzer.css b/app/styles/analyzer.css
index b6d90edc0..c9320378f 100644
--- a/app/styles/analyzer.css
+++ b/app/styles/analyzer.css
@@ -83,6 +83,10 @@
   padding-inline: var(--s-3);
 }
 
+.analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary {
+  background-color: var(--theme-transparent);
+}
+
 .analyzer__stat-collection {
   display: grid;
   gap: var(--s-2);
@@ -100,6 +104,10 @@
   gap: var(--s-4);
 }
 
+.analyzer__stat-card-highlighted {
+  background-color: var(--theme-transparent);
+}
+
 .analyzer__stat-card__title-and-value-container {
   display: flex;
   height: 100%;