From 3fe59c1a88bfbe979161abdf2a4f2159d3bba284 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 23 Oct 2022 11:18:57 +0300
Subject: [PATCH] Table layout to work with any number of data cols

---
 app/routes/object-damage.tsx | 17 +++++++++++++----
 app/styles/object-damage.css |  3 ---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/routes/object-damage.tsx b/app/routes/object-damage.tsx
index dc6fcd63c..a14500dc2 100644
--- a/app/routes/object-damage.tsx
+++ b/app/routes/object-damage.tsx
@@ -1,7 +1,7 @@
 import { WeaponCombobox } from "~/components/Combobox";
 import { Image } from "~/components/Image";
 import { Main } from "~/components/Main";
-import { DAMAGE_RECEIVERS, useObjectDamage } from "~/modules/analyzer";
+import { useObjectDamage } from "~/modules/analyzer";
 import {
   type MainWeaponId,
   BIG_BUBBLER_ID,
@@ -93,9 +93,11 @@ function DamageReceiversGrid({
   return (
     <div
       className="object-damage__grid"
-      style={
-        { "--columns-count": String(2 + damagesToReceivers.length) } as any
-      }
+      style={{
+        gridTemplateColumns: gridTemplateColumnsValue(
+          damagesToReceivers[0]?.damages.length ?? 0
+        ),
+      }}
     >
       <div />
       <div />
@@ -154,3 +156,10 @@ function DamageReceiversGrid({
     </div>
   );
 }
+
+function gridTemplateColumnsValue(dataColumnsCount: number) {
+  return `max-content max-content ${new Array(dataColumnsCount)
+    .fill(null)
+    .map(() => `1fr`)
+    .join(" ")}`;
+}
diff --git a/app/styles/object-damage.css b/app/styles/object-damage.css
index 845d61dd5..cc0a54a0a 100644
--- a/app/styles/object-damage.css
+++ b/app/styles/object-damage.css
@@ -2,9 +2,6 @@
   display: grid;
   width: 100%;
   column-gap: var(--s-6);
-
-  /* xxx: make dynamic */
-  grid-template-columns: max-content max-content 1fr 1fr 1fr 1fr 1fr;
   place-items: center;
   row-gap: var(--s-3);
 }