ps99-api 2.3.2 → 2.4.0

package/example-web/react2/src/components/PetsComponent.tsx

@@ -1,61 +1,91 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const PetsComponent: React.FC<{
-  configData?: CollectionConfigData<"Pets">;
-}> = ({ configData }) => {
+  configData: CollectionConfigData<"Pets">;
+  displayType?: "all" | "specific";
+  pt?: number;
+}> = ({ configData, displayType = "all", pt }) => {
+  const getVariationName = () => {
+    if (pt === 1) return "(Golden)";
+    if (pt === 2) return "(Rainbow)";
+    return "";
+  };
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Pets">>
-      collectionName="Pets"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.name}</h2>
-          <ImageComponent src={data.thumbnail} alt={data.name} />
-          {data.goldenThumbnail && (
+    <div style={{ padding: "1em", border: "1px solid #ccc", borderRadius: "8px", backgroundColor: "#f9f9f9" }}>
+      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
+        {configData.name} {getVariationName()}
+      </h2>
+      {displayType === "all" && (
+        <>
+          <ImageComponent src={configData.thumbnail} alt={configData.name} />
+          {configData.goldenThumbnail && (
             <ImageComponent
-              src={data.goldenThumbnail}
-              alt={`${data.name} (Golden)`}
+              src={configData.goldenThumbnail}
+              alt={`${configData.name} (Golden)`}
             />
           )}
-          <p>From World Number: {data.fromWorldNumber}</p>
-          <p>From Zone Number: {data.fromZoneNumber}</p>
-          {data.indexObtainable && <p>Index Obtainable: Yes</p>}
-          {data.huge && <p>Huge: Yes</p>}
-          {data.fly && <p>Can Fly: Yes</p>}
-          {data.tradable && <p>Tradable: Yes</p>}
-          {data.secret && <p>Secret: Yes</p>}
-          {data.hidden && <p>Hidden: Yes</p>}
-          {data.cachedPower && (
-            <div>
-              <h3>Cached Power:</h3>
-              <ul>
-                {data.cachedPower.map((power, index) => (
-                  <li key={index}>{power}</li>
-                ))}
-              </ul>
+        </>
+      )}
+      {displayType === "specific" && (
+        <>
+          {pt === 1 && configData.goldenThumbnail ? (
+            <div style={{ minWidth: '250px' }}>
+              <ImageComponent
+                src={configData.goldenThumbnail}
+                alt={`${configData.name} (Golden)`}
+              />
             </div>
-          )}
-          {data.animations && (
-            <div>
-              <h3>Animations:</h3>
-              <ul>
-                {Object.entries(data.animations).map(([key, value], index) => (
-                  <li key={index}>
-                    {key}: {JSON.stringify(value)}
-                  </li>
-                ))}
-              </ul>
+          ) : (
+            <div style={{ minWidth: '250px', outline: pt === 2 ? '4px solid #FFD700' : 'none', borderRadius: '8px' }}>
+              <ImageComponent
+                src={configData.thumbnail}
+                alt={configData.name}
+              />
             </div>
           )}
-          {data.indexDesc && <p>Description: {data.indexDesc}</p>}
-          {data.exclusiveLevel && <p>Exclusive Level: {data.exclusiveLevel}</p>}
-          {data.power && <p>Power: {data.power}</p>}
+        </>
+      )}
+      <p><strong>From World Number:</strong> {configData.fromWorldNumber}</p>
+      <p><strong>From Zone Number:</strong> {configData.fromZoneNumber}</p>
+      {configData.indexObtainable && <p><strong>Index Obtainable:</strong> Yes</p>}
+      {configData.huge && <p><strong>Huge:</strong> Yes</p>}
+      {configData.fly && <p><strong>Can Fly:</strong> Yes</p>}
+      {configData.tradable && <p><strong>Tradable:</strong> Yes</p>}
+      {configData.secret && <p><strong>Secret:</strong> Yes</p>}
+      {configData.hidden && <p><strong>Hidden:</strong> Yes</p>}
+      {configData.cachedPower && (
+        <div>
+          <h3>Cached Power:</h3>
+          <ul>
+            {configData.cachedPower.map((power, index) => (
+              <li key={index}>{power}</li>
+            ))}
+          </ul>
         </div>
       )}
-    />
+      {configData.animations && (
+        <div>
+          <h3>Animations:</h3>
+          <ul>
+            {Object.entries(configData.animations).map(
+              ([key, value], index) => (
+                <li key={index}>
+                  {key}: {JSON.stringify(value)}
+                </li>
+              ),
+            )}
+          </ul>
+        </div>
+      )}
+      {configData.indexDesc && <p><strong>Description:</strong> {configData.indexDesc}</p>}
+      {configData.exclusiveLevel && (
+        <p><strong>Exclusive Level:</strong> {configData.exclusiveLevel}</p>
+      )}
+      {configData.power && <p><strong>Power:</strong> {configData.power}</p>}
+    </div>
   );
 };
 

package/example-web/react2/src/components/PotionsComponent.tsx

@@ -1,48 +1,49 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const PotionsComponent: React.FC<{
-  configData?: CollectionConfigData<"Potions">;
+  configData: CollectionConfigData<"Potions">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Potions">>
-      collectionName="Potions"
-      configData={configData}
-      render={(data) => (
+    <div style={{ padding: "1em", border: "1px solid #ccc", borderRadius: "8px", backgroundColor: "#f9f9f9" }}>
+      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
+        Potion: {configData.Tiers[0].DisplayName}
+      </h2>
+      <div style={{ display: 'flex', gap: '1em' }}>
+        <div style={{ minWidth: '250px' }}>
+          <ImageComponent
+            src={configData.Tiers[0].Icon}
+            alt={configData.Tiers[0].DisplayName}
+          />
+        </div>
         <div>
-          <h2>Potion: {data.Tiers[0].DisplayName}</h2>
-          <div>
-            <ImageComponent
-              src={data.Tiers[0].Icon}
-              alt={data.Tiers[0].DisplayName}
-            />
-            <p>Description: {data.Tiers[0].Desc}</p>
-            <p>Primary Color: {data.PrimaryColor}</p>
-            <p>Secondary Color: {data.SecondaryColor}</p>
-            <p>Base Tier: {data.BaseTier}</p>
-            <p>Max Tier: {data.MaxTier}</p>
-          </div>
-          <div>
-            <h3>Tiers:</h3>
-            <ul>
-              {data.Tiers.map((tier, index) => (
-                <li key={index}>
-                  <p>Tier {index + 1}:</p>
-                  <p>Display Name: {tier.DisplayName}</p>
-                  <p>Description: {tier.Desc}</p>
-                  <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
-                  <p>Power: {tier.Power}</p>
-                  <p>Time: {tier.Time}</p>
-                  <p>Rarity: {tier.Rarity.DisplayName}</p>
-                </li>
-              ))}
-            </ul>
-          </div>
+          <p><strong>Description:</strong> {configData.Tiers[0].Desc}</p>
+          <p><strong>Primary Color:</strong> {configData.PrimaryColor}</p>
+          <p><strong>Secondary Color:</strong> {configData.SecondaryColor}</p>
+          <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
+          <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
+        </div>
+      </div>
+      <div style={{ marginTop: '1em' }}>
+        <h3>Tiers:</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1em' }}>
+          {configData.Tiers.map((tier, index) => (
+            <div key={index} style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '1em', flex: '1 1 calc(33% - 1em)', boxSizing: 'border-box' }}>
+              <p><strong>Tier {index + 1}:</strong></p>
+              <p><strong>Display Name:</strong> {tier.DisplayName}</p>
+              <p><strong>Description:</strong> {tier.Desc}</p>
+              <div style={{ minWidth: '250px' }}>
+                <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
+              </div>
+              <p><strong>Power:</strong> {tier.Power}</p>
+              <p><strong>Time:</strong> {tier.Time}</p>
+              <p><strong>Rarity:</strong> {tier.Rarity.DisplayName}</p>
+            </div>
+          ))}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/RandomEventsComponent.tsx

@@ -1,45 +1,40 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const RandomEventsComponent: React.FC<{
-  configData?: CollectionConfigData<"RandomEvents">;
+  configData: CollectionConfigData<"RandomEvents">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"RandomEvents">>
-      collectionName="RandomEvents"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Random Event: {data.Name}</h2>
-          <div>
-            <ImageComponent src={data.Icon} alt={data.Name} />
-            <p>Color: {data.Color}</p>
-            <p>Duration: {data.Duration} seconds</p>
-            <p>Breaking Requirement: {data.BreakingRequirement}</p>
-            <p>Playtime Requirement: {data.PlaytimeRequirement} minutes</p>
-            <p>Chance: {data.Chance}</p>
-            <p>Allow in Zones: {data.AllowInZones ? "Yes" : "No"}</p>
-            <p>Allow in Instances: {data.AllowInInstances ? "Yes" : "No"}</p>
-            <p>Allow Multiple: {data.AllowMultiple ? "Yes" : "No"}</p>
-            {data.MinimumZone && <p>Minimum Zone: {data.MinimumZone}</p>}
-          </div>
-          <div>
-            <h3>Area Whitelist:</h3>
-            <ul>
-              {Object.entries(data.AreaWhitelist).map(
-                ([area, allowed], index) => (
-                  <li key={index}>
-                    {area.replace("_", " ")}: {allowed ? "Yes" : "No"}
-                  </li>
-                ),
-              )}
-            </ul>
-          </div>
-        </div>
-      )}
-    />
+    <div>
+      <h2>Random Event: {configData.Name}</h2>
+      <div>
+        <ImageComponent src={configData.Icon} alt={configData.Name} />
+        <p>Color: {configData.Color}</p>
+        <p>Duration: {configData.Duration} seconds</p>
+        <p>Breaking Requirement: {configData.BreakingRequirement}</p>
+        <p>Playtime Requirement: {configData.PlaytimeRequirement} minutes</p>
+        <p>Chance: {configData.Chance}</p>
+        <p>Allow in Zones: {configData.AllowInZones ? "Yes" : "No"}</p>
+        <p>Allow in Instances: {configData.AllowInInstances ? "Yes" : "No"}</p>
+        <p>Allow Multiple: {configData.AllowMultiple ? "Yes" : "No"}</p>
+        {configData.MinimumZone && (
+          <p>Minimum Zone: {configData.MinimumZone}</p>
+        )}
+      </div>
+      <div>
+        <h3>Area Whitelist:</h3>
+        <ul>
+          {Object.entries(configData.AreaWhitelist).map(
+            ([area, allowed], index) => (
+              <li key={index}>
+                {area.replace("_", " ")}: {allowed ? "Yes" : "No"}
+              </li>
+            ),
+          )}
+        </ul>
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/RanksComponent.tsx

@@ -1,86 +1,77 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const RanksComponent: React.FC<{
-  configData?: CollectionConfigData<"Ranks">;
+  configData: CollectionConfigData<"Ranks">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Ranks">>
-      collectionName="Ranks"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Rank: {data.Title}</h2>
-          <p>Rank Number: {data.RankNumber}</p>
-          <p>Max Enchants Equipped: {data.MaxEnchantsEquipped}</p>
-          <p>Maximum Active Goals: {data.MaximumActiveGoals}</p>
-          <p>Unlockable Egg Slots: {data.UnlockableEggSlots}</p>
-          <p>Unlockable Pet Slots: {data.UnlockablePetSlots}</p>
-          {data.RequiredRebirth && (
-            <p>Required Rebirth: {data.RequiredRebirth}</p>
-          )}
-          {data.RequiredZone && <p>Required Zone: {data.RequiredZone}</p>}
-
-          <div>
-            <h3>Goals:</h3>
-            {data.Goals.map((goalSet, index) => (
-              <div key={index}>
-                <h4>Goal Set {index + 1}</h4>
-                <ul>
-                  {goalSet.map((goal, goalIndex) => (
-                    <li key={goalIndex}>
-                      <p>Type: {goal.Type}</p>
-                      <p>Amount: {goal.Amount}</p>
-                      <p>Weight: {goal.Weight}</p>
-                      {goal.CurrencyID && <p>Currency ID: {goal.CurrencyID}</p>}
-                      {goal.BreakableType && (
-                        <p>Breakable Type: {goal.BreakableType}</p>
-                      )}
-                      {goal.PotionTier && <p>Potion Tier: {goal.PotionTier}</p>}
-                      {goal.EnchantTier && (
-                        <p>Enchant Tier: {goal.EnchantTier}</p>
-                      )}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
+    <div>
+      <h2>Rank: {configData.Title}</h2>
+      <p>Rank Number: {configData.RankNumber}</p>
+      <p>Max Enchants Equipped: {configData.MaxEnchantsEquipped}</p>
+      <p>Maximum Active Goals: {configData.MaximumActiveGoals}</p>
+      <p>Unlockable Egg Slots: {configData.UnlockableEggSlots}</p>
+      <p>Unlockable Pet Slots: {configData.UnlockablePetSlots}</p>
+      {configData.RequiredRebirth && (
+        <p>Required Rebirth: {configData.RequiredRebirth}</p>
+      )}
+      {configData.RequiredZone && (
+        <p>Required Zone: {configData.RequiredZone}</p>
+      )}
 
-          <div>
-            <h3>Rewards:</h3>
+      <div>
+        <h3>Goals:</h3>
+        {configData.Goals.map((goalSet, index) => (
+          <div key={index}>
+            <h4>Goal Set {index + 1}</h4>
             <ul>
-              {data.Rewards.map((reward, rewardIndex) => (
-                <li key={rewardIndex}>
-                  <p>Stars Required: {reward.StarsRequired}</p>
-                  <p>Reward Item ID: {reward.Item._data.id}</p>
-                  {reward.Item._data._am && (
-                    <p>Amount: {reward.Item._data._am}</p>
+              {goalSet.map((goal, goalIndex) => (
+                <li key={goalIndex}>
+                  <p>Type: {goal.Type}</p>
+                  <p>Amount: {goal.Amount}</p>
+                  <p>Weight: {goal.Weight}</p>
+                  {goal.CurrencyID && <p>Currency ID: {goal.CurrencyID}</p>}
+                  {goal.BreakableType && (
+                    <p>Breakable Type: {goal.BreakableType}</p>
                   )}
-                  {reward.Item._data.tn && <p>TN: {reward.Item._data.tn}</p>}
+                  {goal.PotionTier && <p>Potion Tier: {goal.PotionTier}</p>}
+                  {goal.EnchantTier && <p>Enchant Tier: {goal.EnchantTier}</p>}
                 </li>
               ))}
             </ul>
           </div>
+        ))}
+      </div>
+
+      <div>
+        <h3>Rewards:</h3>
+        <ul>
+          {configData.Rewards.map((reward, rewardIndex) => (
+            <li key={rewardIndex}>
+              <p>Stars Required: {reward.StarsRequired}</p>
+              <p>Reward Item ID: {reward.Item._data.id}</p>
+              {reward.Item._data._am && <p>Amount: {reward.Item._data._am}</p>}
+              {reward.Item._data.tn && <p>TN: {reward.Item._data.tn}</p>}
+            </li>
+          ))}
+        </ul>
+      </div>
 
-          {data.RankUpRewards && (
-            <div>
-              <h3>Rank Up Rewards:</h3>
-              <ul>
-                {data.RankUpRewards.map((reward, rewardIndex) => (
-                  <li key={rewardIndex}>
-                    <p>Reward Item ID: {reward._data.id}</p>
-                    {reward._data._am && <p>Amount: {reward._data._am}</p>}
-                    {reward._data.tn && <p>TN: {reward._data.tn}</p>}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
+      {configData.RankUpRewards && (
+        <div>
+          <h3>Rank Up Rewards:</h3>
+          <ul>
+            {configData.RankUpRewards.map((reward, rewardIndex) => (
+              <li key={rewardIndex}>
+                <p>Reward Item ID: {reward._data.id}</p>
+                {reward._data._am && <p>Amount: {reward._data._am}</p>}
+                {reward._data.tn && <p>TN: {reward._data.tn}</p>}
+              </li>
+            ))}
+          </ul>
         </div>
       )}
-    />
+    </div>
   );
 };
 

package/example-web/react2/src/components/RarityComponent.tsx

@@ -1,23 +1,16 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const RarityComponent: React.FC<{
-  configData?: CollectionConfigData<"Rarity">;
+  configData: CollectionConfigData<"Rarity">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Rarity">>
-      collectionName="Rarity"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Rarity: {data.DisplayName}</h2>
-          <p>Rarity Number: {data.RarityNumber}</p>
-          <p>Color: {data.Color}</p>
-          <p>Announce: {data.Announce ? "Yes" : "No"}</p>
-        </div>
-      )}
-    />
+    <div>
+      <h2>Rarity: {configData.DisplayName}</h2>
+      <p>Rarity Number: {configData.RarityNumber}</p>
+      <p>Color: {configData.Color}</p>
+      <p>Announce: {configData.Announce ? "Yes" : "No"}</p>
+    </div>
   );
 };
 

package/example-web/react2/src/components/RebirthsComponent.tsx

@@ -1,36 +1,30 @@
 import React from "react";
 import { CollectionConfigData, RebirthUnlock } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const RebirthComponent: React.FC<{
-  configData?: CollectionConfigData<"Rebirths">;
+  configData: CollectionConfigData<"Rebirths">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Rebirths">>
-      collectionName="Rebirths"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Rebirth: {data.DisplayName}</h2>
-          <p>Rebirth Number: {data.RebirthNumber}</p>
-          <p>Zone Number Required: {data.ZoneNumberRequired}</p>
-          <p>Strength Power Boost: {data.StrengthPowerBoost}%</p>
-          <p>Boost Description: {data.BoostDesc}</p>
-          {data.ResetZone && <p>Reset Zone: {data.ResetZone}</p>}
-          <h3>Unlocks:</h3>
-          <ul>
-            {data.RebirthUnlocks.map((unlock: RebirthUnlock, index: number) => (
-              <li key={index}>
-                <ImageComponent src={unlock.Icon} alt={unlock.Title} />
-                <strong>{unlock.GuiTitle || unlock.Title}</strong>:{" "}
-                {unlock.Desc}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    />
+    <div>
+      <h2>Rebirth: {configData.DisplayName}</h2>
+      <p>Rebirth Number: {configData.RebirthNumber}</p>
+      <p>Zone Number Required: {configData.ZoneNumberRequired}</p>
+      <p>Strength Power Boost: {configData.StrengthPowerBoost}%</p>
+      <p>Boost Description: {configData.BoostDesc}</p>
+      {configData.ResetZone && <p>Reset Zone: {configData.ResetZone}</p>}
+      <h3>Unlocks:</h3>
+      <ul>
+        {configData.RebirthUnlocks.map(
+          (unlock: RebirthUnlock, index: number) => (
+            <li key={index}>
+              <ImageComponent src={unlock.Icon} alt={unlock.Title} />
+              <strong>{unlock.GuiTitle || unlock.Title}</strong>: {unlock.Desc}
+            </li>
+          ),
+        )}
+      </ul>
+    </div>
   );
 };
 

package/example-web/react2/src/components/SecretRoomsComponent.tsx

@@ -1,22 +1,15 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const SecretRoomComponent: React.FC<{
-  configData?: CollectionConfigData<"SecretRooms">;
+  configData: CollectionConfigData<"SecretRooms">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"SecretRooms">>
-      collectionName="SecretRooms"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Secret Room: {data.DisplayName}</h2>
-          <p>Instance ID: {data.InstanceId}</p>
-          <p>Required Zone: {data.RequiredZone}</p>
-        </div>
-      )}
-    />
+    <div>
+      <h2>Secret Room: {configData.DisplayName}</h2>
+      <p>Instance ID: {configData.InstanceId}</p>
+      <p>Required Zone: {configData.RequiredZone}</p>
+    </div>
   );
 };
 

package/example-web/react2/src/components/SeedsComponent.tsx

@@ -6,7 +6,6 @@ import {
   RawStackKey,
   LootTableData,
 } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
@@ -45,29 +44,23 @@ const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
 };
 
 const SeedComponent: React.FC<{
-  configData?: CollectionConfigData<"Seeds">;
+  configData: CollectionConfigData<"Seeds">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Seeds">>
-      collectionName="Seeds"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Seed: {data.DisplayName}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Grow Time: {data.GrowTime} seconds</p>
-          <p>
-            Rarity: {data.Rarity.DisplayName} (Rarity Number:{" "}
-            {data.Rarity.RarityNumber})
-          </p>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <div>
-            <h3>Loot Table</h3>
-            {renderLootTable(data.LootTable)}
-          </div>
-        </div>
-      )}
-    />
+    <div>
+      <h2>Seed: {configData.DisplayName}</h2>
+      <p>Description: {configData.Desc}</p>
+      <p>Grow Time: {configData.GrowTime} seconds</p>
+      <p>
+        Rarity: {configData.Rarity.DisplayName} (Rarity Number:{" "}
+        {configData.Rarity.RarityNumber})
+      </p>
+      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+      <div>
+        <h3>Loot Table</h3>
+        {renderLootTable(configData.LootTable)}
+      </div>
+    </div>
   );
 };