Damage Calculator Grid Rework (#1523)

* Grid rework

* Ran Prettier

---------

Co-authored-by: hfcRed <hfcred@gmx.net>
Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>

app/features/object-damage-calculator/calculator.css

@@ -25,12 +25,40 @@
 }
 
 .object-damage__grid {
+  column-gap: var(--s-2);
   display: grid;
+  max-height: 60vh;
+  overflow: auto;
+  row-gap: var(--s-2);
   width: 100%;
-  column-gap: var(--s-6);
-  overflow-x: auto;
-  place-items: center;
-  row-gap: var(--s-3);
+}
+
+@media screen and (min-width: 431px) {
+  .object-damage__grid {
+    max-height: 70vh;
+  }
+}
+
+.object-damage__grid::-webkit-scrollbar {
+  width: 4px;
+  height: 8px;
+}
+
+.object-damage__grid::-webkit-scrollbar-track {
+  background-color: rgb(2, 1, 30);
+}
+
+.object-damage__grid::-webkit-scrollbar-corner {
+  background-color: rgb(2, 1, 30);
+}
+
+.object-damage__grid::-webkit-scrollbar-thumb {
+  background-color: rgb(83, 65, 91);
+  border-radius: 4px;
+}
+
+.object-damage__grid::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(62, 49, 68);
 }
 
 .object-damage__hp {
@@ -39,20 +67,24 @@
 }
 
 .object-damage__table-header {
-  position: sticky;
-  top: 0;
-  width: 100%;
+  align-items: center;
+  background-color: rgb(52 43 98);
   border-radius: var(--rounded);
-  background-color: var(--bg-lightest);
-  font-size: var(--fonts-xs);
-  font-weight: var(--semi-bold);
-  padding-block: var(--s-2);
-  padding-inline: var(--s-4);
-  text-align: center;
-  white-space: nowrap;
   display: flex;
   flex-direction: column;
-  gap: var(--s-1-5);
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  gap: var(--s-1);
+  height: 100%;
+  left: 0;
+  outline: 5px solid rgb(2, 1, 30);
+  padding-block: var(--s-2);
+  padding-inline: var(--s-2);
+  position: sticky;
+  text-align: center;
+  top: 0;
+  white-space: nowrap;
+  width: 100%;
 }
 
 .object-damage__weapon-image {
@@ -92,6 +124,8 @@
 
 .object-damage__select {
   width: initial;
+  padding-left: 0.5rem;
+  padding-right: 1.75rem;
 }
 
 .object-damage__abbr {

app/features/object-damage-calculator/routes/object-damage-calculator.tsx

@@ -238,146 +238,155 @@ function DamageReceiversGrid({
   const { t } = useTranslation(["weapons", "analyzer", "common"]);
   useSetTitle(t("common:pages.object-damage-calculator"));
   return (
-    <div
-      className="object-damage__grid"
-      style={{
-        gridTemplateColumns: gridTemplateColumnsValue(
-          damagesToReceivers[0]?.damages.length ?? 0,
-        ),
-      }}
-    >
-      <div>
-        <Label htmlFor="ap">
-          {t("analyzer:labels.amountOf")}
-          <div className="object-damage__ap-label">
-            <Ability ability="BRU" size="TINY" />
-            <Ability ability="SPU" size="TINY" />
-          </div>
-        </Label>
-      </div>
-      <div>{children}</div>
-      {damagesToReceivers[0]?.damages.map((damage) => (
-        <div key={damage.id} className="object-damage__table-header">
-          <div className="stack horizontal sm justify-center items-center">
-            {t(
-              damageTypeTranslationString({
-                damageType: damage.type,
-              }),
-            )}
-            {damage.objectShredder && <Ability ability="OS" size="TINY" />}
-          </div>
-          <div
-            className={clsx("object-damage__distance", {
-              invisible: !damage.distance,
-            })}
-          >
-            {t("analyzer:distanceInline", {
-              value: Array.isArray(damage.distance)
-                ? damage.distance.join("-")
-                : damage.distance,
-            })}
-          </div>
-          <div className="text-lighter stack horizontal sm justify-center items-center">
-            {weapon.type === "MAIN" ? (
-              <WeaponImage
-                weaponSplId={weapon.id}
-                width={24}
-                height={24}
-                variant="build"
-                className="object-damage__weapon-image"
-              />
-            ) : weapon.type === "SUB" ? (
-              <Image
-                alt=""
-                path={subWeaponImageUrl(weapon.id)}
-                width={24}
-                height={24}
-                className="object-damage__weapon-image"
-              />
-            ) : (
-              <Image
-                alt=""
-                path={specialWeaponImageUrl(weapon.id)}
-                width={24}
-                height={24}
-                className="object-damage__weapon-image"
-              />
-            )}
-            {t(`weapons:${weapon.type}_${weapon.id}` as any)}
+    <div>
+      <div
+        className="object-damage__grid"
+        style={{
+          gridTemplateColumns: gridTemplateColumnsValue(
+            damagesToReceivers[0]?.damages.length ?? 0,
+          ),
+        }}
+      >
+        <div
+          className="object-damage__table-header"
+          style={{ zIndex: "1", justifyContent: "center" }}
+        >
+          <div>
+            <Label htmlFor="ap">
+              {t("analyzer:labels.amountOf")}
+              <div className="object-damage__ap-label">
+                <Ability ability="BRU" size="TINY" />
+                <Ability ability="SPU" size="TINY" />
+              </div>
+            </Label>
           </div>
+          <div>{children}</div>
         </div>
-      ))}
-      {damagesToReceivers.map((damageToReceiver, i) => {
-        return (
-          <React.Fragment key={damageToReceiver.receiver}>
-            <div>
-              <Label htmlFor="ap">
-                <div className="object-damage__ap-label">
-                  {abilityPoints !== "0" &&
-                    damageReceiverAp[damageToReceiver.receiver]}
-                </div>
-              </Label>
-              <Image
-                className="object-damage__receiver-image"
-                key={i}
-                alt=""
-                path={damageReceiverImages[damageToReceiver.receiver]}
-                width={40}
-                height={40}
-              />
+        {damagesToReceivers[0]?.damages.map((damage) => (
+          <div key={damage.id} className="object-damage__table-header">
+            {t(`weapons:${weapon.type}_${weapon.id}` as any)}
+            <div className="text-lighter stack horizontal sm justify-center items-center">
+              {weapon.type === "MAIN" ? (
+                <WeaponImage
+                  weaponSplId={weapon.id}
+                  width={24}
+                  height={24}
+                  variant="build"
+                  className="object-damage__weapon-image"
+                />
+              ) : weapon.type === "SUB" ? (
+                <Image
+                  alt=""
+                  path={subWeaponImageUrl(weapon.id)}
+                  width={24}
+                  height={24}
+                  className="object-damage__weapon-image"
+                />
+              ) : (
+                <Image
+                  alt=""
+                  path={specialWeaponImageUrl(weapon.id)}
+                  width={24}
+                  height={24}
+                  className="object-damage__weapon-image"
+                />
+              )}
             </div>
-            <div className="object-damage__hp">
-              <span data-testid={`hp-${damageToReceiver.receiver}`}>
-                {damageToReceiver.hitPoints}
-              </span>
-              {t("analyzer:suffix.hp")}
+            <div
+              className={clsx("object-damage__distance", {
+                invisible: !damage.distance,
+              })}
+            >
+              {t("analyzer:distanceInline", {
+                value: Array.isArray(damage.distance)
+                  ? damage.distance.join("-")
+                  : damage.distance,
+              })}
             </div>
-            {damageToReceiver.damages.map((damage) => {
-              return (
-                <div key={damage.id} className="object-damage__table-card">
-                  <div className="object-damage__table-card__results">
-                    <abbr
-                      className="object-damage__abbr"
-                      title={t("analyzer:stat.category.damage")}
-                    >
-                      {t("analyzer:damageShort")}
-                    </abbr>
-                    <div
-                      data-testid={`dmg${damage.objectShredder ? "-os" : ""}-${
-                        damageToReceiver.receiver
-                      }`}
-                    >
-                      {damage.value}
+            <div className="stack horizontal sm justify-center items-center">
+              {t(
+                damageTypeTranslationString({
+                  damageType: damage.type,
+                }),
+              )}
+              {damage.objectShredder && <Ability ability="OS" size="TINY" />}
+            </div>
+          </div>
+        ))}
+        {damagesToReceivers.map((damageToReceiver, i) => {
+          return (
+            <React.Fragment key={damageToReceiver.receiver}>
+              <div className="object-damage__table-header">
+                <div>
+                  <Label htmlFor="ap">
+                    <div className="object-damage__ap-label">
+                      {abilityPoints !== "0" &&
+                        damageReceiverAp[damageToReceiver.receiver]}
                     </div>
-                    <abbr
-                      className="object-damage__abbr"
-                      title={t("analyzer:hitsToDestroyLong")}
-                    >
-                      {t("analyzer:hitsToDestroyShort")}
-                    </abbr>
-                    <div
-                      data-testid={`htd${damage.objectShredder ? "-os" : ""}-${
-                        damageToReceiver.receiver
-                      }`}
-                    >
-                      {damage.hitsToDestroy}
+                  </Label>
+                  <Image
+                    className="object-damage__receiver-image"
+                    key={i}
+                    alt=""
+                    path={damageReceiverImages[damageToReceiver.receiver]}
+                    width={40}
+                    height={40}
+                  />
+                </div>
+                <div className="object-damage__hp">
+                  <span data-testid={`hp-${damageToReceiver.receiver}`}>
+                    {damageToReceiver.hitPoints}
+                  </span>
+                  {t("analyzer:suffix.hp")}
+                </div>
+              </div>
+              {damageToReceiver.damages.map((damage) => {
+                return (
+                  <div key={damage.id} className="object-damage__table-card">
+                    <div className="object-damage__table-card__results">
+                      <abbr
+                        className="object-damage__abbr"
+                        title={t("analyzer:stat.category.damage")}
+                      >
+                        {t("analyzer:damageShort")}
+                      </abbr>
+                      <div
+                        data-testid={`dmg${
+                          damage.objectShredder ? "-os" : ""
+                        }-${damageToReceiver.receiver}`}
+                      >
+                        {damage.value}
+                      </div>
+                      <abbr
+                        className="object-damage__abbr"
+                        title={t("analyzer:hitsToDestroyLong")}
+                      >
+                        {t("analyzer:hitsToDestroyShort")}
+                      </abbr>
+                      <div
+                        data-testid={`htd${
+                          damage.objectShredder ? "-os" : ""
+                        }-${damageToReceiver.receiver}`}
+                      >
+                        {damage.hitsToDestroy}
+                      </div>
+                    </div>
+                    <div className="object-damage__multiplier">
+                      ×{damage.multiplier}
                     </div>
                   </div>
-                  <div className="object-damage__multiplier">
-                    ×{damage.multiplier}
-                  </div>
-                </div>
-              );
-            })}
-          </React.Fragment>
-        );
-      })}
+                );
+              })}
+            </React.Fragment>
+          );
+        })}
+      </div>
     </div>
   );
 }
 
 function gridTemplateColumnsValue(dataColumnsCount: number) {
-  return `max-content max-content ${new Array(dataColumnsCount)
+  return `max-content ${new Array(dataColumnsCount)
     .fill(null)
     .map(() => `1fr`)
     .join(" ")}`;