feat: css improvements

HasangerGames · Dec 20, 2024 · 91531c2 · 91531c2
1 parent 6d13953
commit 91531c2
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 46 deletions.
diff --git a/app/(wiki)/loot/page.tsx b/app/(wiki)/loot/page.tsx
@@ -27,7 +27,7 @@ export default function LootPage() {
         <div className="prose prose-invert">
           <h2>Loot Tables</h2>
           <p>
-            These tables determine which loot tiers to use for a given obstacle.
+            These tables determine which loot tiers to use for a given obstacle. Multiple tables inside of a tier indicate that the corresponding obstacle drops a random item from each table.
           </p>
         </div>
       </div>

diff --git a/components/tables/LootTable.tsx b/components/tables/LootTable.tsx
@@ -12,8 +12,8 @@ export default function LootTable({
 }: LootTable) {
   return (
     <div className="p-4">
-      <div className="flex flex-col p-4 pt-0 bg-muted rounded-md not-prose overflow-y-auto">
-        <div className="flex flex-col gap-2 bg-muted sticky pt-4 top-0">
+      <div className="flex flex-col p-4 pt-0 rounded-md not-prose overflow-y-auto bg-white/5">
+        <div className="flex flex-col gap-2 sticky pt-4 top-0">
           <h3 className="text-xl font-bold">{title}</h3>
         </div>
         <div>{notice && <p className="text-l pt-2">{notice}</p>}</div>
@@ -22,21 +22,47 @@ export default function LootTable({
             // differentiate between simple and full loot tables
             Array.isArray(content[0]) ? (
               content.map(tables => (
-                <TableWithHeader
-                  header={["Item", "Count", "Weight", "% Chance"]}
-                  content={tables.map((table: WeightedItem) => [
-                    "item" in table
-                      ? `Item ${
-                        Loots.definitions.find(
+                <div className="pt-4">
+                  <TableWithHeader
+                    header={["Item", "Count", "Weight", "% Chance"]}
+                    content={tables.map((table: WeightedItem) => [
+                      "item" in table
+                        ? `Item ${Loots.definitions.find(
                           loot => loot.idString === table.item
                         )?.name
+                        }`
+                        : `Table ${table.table}`,
+                      table.count ? table.count.toString() : "1",
+                      table.weight,
+                      `${(
+                        (table.weight /
+                          ("loot" in tables ? tables.loot : tables).reduce(
+                            (acc: number, table: WeightedItem) =>
+                              acc + table.weight,
+                            0
+                          )) *
+                          100
+                      ).toFixed(2)}%`
+                    ])}
+                  />
+                </div>
+              ))
+            ) : (
+              <div className="pt-4">
+                <TableWithHeader
+                  header={["Item", "Count", "Weight", "% Chance"]}
+                  content={content.map((item: WeightedItem) => [
+                    "item" in item
+                      ? `Item ${Loots.definitions.find(
+                        loot => loot.idString === item.item
+                      )?.name
                       }`
-                      : `Table ${table.table}`,
-                    table.count ? table.count.toString() : "1",
-                    table.weight,
+                      : `Table ${item.table}`,
+                    item.count ? item.count.toString() : "1",
+                    item.weight,
                     `${(
-                      (table.weight /
-                        ("loot" in tables ? tables.loot : tables).reduce(
+                      (item.weight /
+                        content.reduce(
                           (acc: number, table: WeightedItem) =>
                             acc + table.weight,
                           0
@@ -45,11 +71,14 @@ export default function LootTable({
                     ).toFixed(2)}%`
                   ])}
                 />
-              ))
-            ) : (
+              </div>
+            )
+          ) : (
+            <div className="pt-4">
               <TableWithHeader
                 header={["Item", "Count", "Weight", "% Chance"]}
-                content={content.map((item: WeightedItem) => [
+                content={content.loot.map((item: WeightedItem) => [
+                //               ^^^^ this will never cause any issues because the tenary only returns this section if "content" isn't an array, which means it is a Full Loot Table and must have a "loot" property
                   "item" in item
                     ? `Item ${
                       Loots.definitions.find(
@@ -61,41 +90,16 @@ export default function LootTable({
                   item.weight,
                   `${(
                     (item.weight /
-                      content.reduce(
-                        (acc: number, table: WeightedItem) =>
-                          acc + table.weight,
+                      content.loot.reduce(
+                      //    ^^^^ same goes for here
+                        (acc: number, table: WeightedItem) => acc + table.weight,
                         0
                       )) *
                       100
                   ).toFixed(2)}%`
                 ])}
               />
-            )
-          ) : (
-            <TableWithHeader
-              header={["Item", "Count", "Weight", "% Chance"]}
-              content={content.loot.map((item: WeightedItem) => [
-              //               ^^^^ this will never cause any issues because the tenary only returns this section if "content" isn't an array, which means it is a Full Loot Table and must have a "loot" property
-                "item" in item
-                  ? `Item ${
-                    Loots.definitions.find(
-                      loot => loot.idString === item.item
-                    )?.name
-                  }`
-                  : `Table ${item.table}`,
-                item.count ? item.count.toString() : "1",
-                item.weight,
-                `${(
-                  (item.weight /
-                    content.loot.reduce(
-                      //    ^^^^ same goes for here
-                      (acc: number, table: WeightedItem) => acc + table.weight,
-                      0
-                    )) *
-                    100
-                ).toFixed(2)}%`
-              ])}
-            />
+            </div>
           )}
         </div>
       </div>