ps99-api 2.3.3 → 2.5.0

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

@@ -1,55 +1,111 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useExpandableList } from "../hooks/useExpandableList";
 
 const MasteryComponent: React.FC<{
-  configData?: CollectionConfigData<"Mastery">;
+  configData: CollectionConfigData<"Mastery">;
 }> = ({ configData }) => {
-  const renderPerks = (perks: any) => {
-    return Object.entries(perks).map(
-      ([perkType, perkDetails]: [string, any]) => (
-        <div key={perkType}>
-          <h3>{perkType}</h3>
-          {perkDetails.map((detail: any, index: number) => (
-            <div key={index}>
-              <p>Level: {detail.Level}</p>
-              <p>Title: {detail.Title}</p>
-              <p>Description: {detail.Text}</p>
-              {detail.Power && <p>Power: {detail.Power}</p>}
+  const perksEntries = React.useMemo(() => configData.Perks ? Object.entries(configData.Perks) : [], [configData.Perks]);
+  const { expandedIndices, toggle, expandAll, collapseAll, isExpanded } = useExpandableList(perksEntries.length);
+
+  const renderPerks = () => {
+    return perksEntries.map(
+      ([perkType, perkDetails]: [string, any], index: number) => (
+        <div key={perkType} style={{ marginBottom: '15px', textAlign: 'left', background: '#f9f9f9', padding: '10px', borderRadius: '8px' }}>
+          <h4
+            onClick={() => toggle(index)}
+            style={{ margin: '0 0 10px 0', color: '#333', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            {isExpanded(index) ? '▼' : '▶'} {perkType}
+          </h4>
+          {isExpanded(index) && (
+            <div>
+              {perkDetails.map((detail: any, idx: number) => (
+                <div key={idx} style={{ marginBottom: '8px', paddingLeft: '10px', borderLeft: '2px solid #ddd' }}>
+                  <div style={{ fontWeight: 'bold', fontSize: '0.9em' }}>Lvl {detail.Level}: {detail.Title}</div>
+                  <div style={{ fontSize: '0.9em', color: '#666' }}>{detail.Text}</div>
+                  {detail.Power && <div style={{ fontSize: '0.8em', color: '#1976d2' }}>Power: {detail.Power}</div>}
+                </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
       ),
     );
   };
 
   return (
-    <GenericFetchComponent<CollectionConfigData<"Mastery">>
-      collectionName="Mastery"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.Name}</h2>
-          <ImageComponent src={data.Icon} alt={data.Name} />
-          <p>Description: {data.Desc}</p>
-          {data.ToggleablePerks && (
-            <div>
-              <h3>Toggleable Perks</h3>
-              {Object.entries(data.ToggleablePerks).map(([perk, value]) => (
-                <p key={perk}>
-                  {perk}: {value ? "Enabled" : "Disabled"}
-                </p>
-              ))}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'minmax(300px, 1fr) 2fr',
+        gap: '40px',
+        height: '100%',
+        alignItems: 'start'
+      }}>
+
+        {/* Left Column: Icon */}
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '20px',
+          background: '#f9f9f9',
+          padding: '30px',
+          borderRadius: '24px',
+          border: '2px solid #eee'
+        }}>
+          <div style={{ width: '100%', maxWidth: '300px' }}>
+            <ItemCard
+              id={configData.Name}
+              amount={1}
+              label={configData.Name}
+              itemData={{
+                icon: configData.Icon,
+                rarity: undefined,
+                name: configData.Name
+              }}
+              rarityColor={null}
+            />
+          </div>
+          <p style={{ fontStyle: 'italic', textAlign: 'center', color: '#666' }}>{configData.Desc}</p>
+        </div>
+
+        {/* Right Column: Perks */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+
+          {configData.ToggleablePerks && (
+            <div style={{ background: '#fff', padding: '20px', borderRadius: '16px', border: '1px solid #eee', boxShadow: '0 2px 4px rgba(0,0,0,0.02)' }}>
+              <h3 style={{ fontSize: '1.1em', marginTop: 0, borderBottom: '1px solid #eee', paddingBottom: '10px' }}>Toggleable Perks</h3>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                {Object.entries(configData.ToggleablePerks).map(([perk, value]) => (
+                  <span key={perk} className="badge" style={{ background: value ? '#e8f5e9' : '#ffebee', color: value ? '#2e7d32' : '#c62828', padding: '8px 12px', fontSize: '0.9rem' }}>
+                    {perk}: {value ? "Enabled" : "Disabled"}
+                  </span>
+                ))}
+              </div>
             </div>
           )}
-          <div>
-            <h3>Perks</h3>
-            {renderPerks(data.Perks)}
-          </div>
+
+          {configData.Perks && (
+            <div style={{ background: '#fff' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+                <h3 style={{ fontSize: '1.4em', margin: 0 }}>Mastery Perks</h3>
+                <div style={{ display: 'flex', gap: '10px' }}>
+                  <button onClick={expandAll} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer', fontSize: '0.9rem' }}>Expand All</button>
+                  <button onClick={collapseAll} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer', fontSize: '0.9rem' }}>Collapse All</button>
+                </div>
+              </div>
+              {renderPerks()}
+            </div>
+          )}
+
         </div>
-      )}
-    />
+
+      </div>
+    </div>
   );
 };
 

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

@@ -1,45 +1,63 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
-const MerchantComponent: React.FC<{
-  configData?: CollectionConfigData<"Merchants">;
+const MerchantsComponent: React.FC<{
+  configData: CollectionConfigData<"Merchants">;
 }> = ({ configData }) => {
   const renderStockRange = (stockRange: number[][] | undefined) => {
     if (!stockRange) return null;
     return stockRange.map((range, index) => (
-      <div key={index}>
-        <p>
-          Level {index + 1}: {range[0]} - {range[1]}
-        </p>
+      <div key={index} style={{ background: '#e1f5fe', padding: '8px', borderRadius: '4px', textAlign: 'center' }}>
+        <strong>Lvl {index + 1}</strong>
+        <div>{range[0]} - {range[1]} items</div>
       </div>
     ));
   };
 
   return (
-    <GenericFetchComponent<CollectionConfigData<"Merchants">>
-      collectionName="Merchants"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <p>Price Multiplier: {data.PriceMult}</p>
-          <p>Machine Name: {data.MachineName}</p>
-          <p>Refresh Rate: {data.RefreshRate} seconds</p>
-          {data.HideNotification && <p>Notification: Hidden</p>}
-          {data.HideRespect && <p>Respect: Hidden</p>}
-          {data.IsStatic && <p>Static Merchant</p>}
-          {renderStockRange(data.StockRangeByRespectLevel)}
-          {data.SlotRespectLevels && (
-            <div>
-              <h3>Slot Respect Levels</h3>
-              <p>{data.SlotRespectLevels.join(", ")}</p>
-            </div>
-          )}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', width: '100%', marginBottom: '15px' }}>
+        <p><strong>Machine:</strong> {configData.MachineName}</p>
+        <p><strong>Price Mult:</strong> {configData.PriceMult}x</p>
+        <p><strong>Refresh:</strong> {configData.RefreshRate}s</p>
+        {configData.IsStatic && <p><strong>Type:</strong> Static Merchant</p>}
+      </div>
+
+      {configData.StockRangeByRespectLevel && (
+        <div style={{ width: '100%', marginBottom: '15px' }}>
+          <h4>Stock Ranges</h4>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '10px' }}>
+            {renderStockRange(configData.StockRangeByRespectLevel)}
+          </div>
+        </div>
+      )}
+
+      {configData.SlotRespectLevels && (
+        <div style={{ width: '100%' }}>
+          <h4>Slot Respect Levels</h4>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+            {configData.SlotRespectLevels.map((level, idx) => (
+              <span key={idx} style={{
+                background: '#fff9c4',
+                color: '#fbc02d',
+                padding: '5px 10px',
+                borderRadius: '50%',
+                width: '30px',
+                height: '30px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                border: '2px solid #fbc02d'
+              }}>
+                {level}
+              </span>
+            ))}
+          </div>
         </div>
       )}
-    />
+    </div>
   );
 };
 
-export default MerchantComponent;
+export default MerchantsComponent;

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

@@ -1,36 +1,38 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const MiscItemsComponent: React.FC<{
-  configData?: CollectionConfigData<"MiscItems">;
+  configData: CollectionConfigData<"MiscItems">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"MiscItems">>
-      collectionName="MiscItems"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <p>Category: {data.Category}</p>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          {data.AltIcon && (
-            <ImageComponent
-              src={data.AltIcon}
-              alt={`${data.DisplayName} (Alternate)`}
-            />
-          )}
-          <p>Description: {data.Desc}</p>
-          <p>
-            Rarity: {data.Rarity.DisplayName} (Rarity Number:{" "}
-            {data.Rarity.RarityNumber})
-          </p>
-          {data.Tradable && <p>Tradable: Yes</p>}
-          {!data.Tradable && <p>Tradable: No</p>}
+    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '30px' }}>
+
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '1.1em', color: '#555', textAlign: 'center', maxWidth: '600px', lineHeight: '1.6' }}>
+        <p style={{ marginBottom: '20px', background: '#fff', padding: '20px', borderRadius: '12px', border: '1px solid #eee' }}>"{configData.Desc}"</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          {configData.Tradable && <span className="badge" style={{ background: '#9c27b0', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Tradable</span>}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

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

@@ -1,62 +1,131 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const PetsComponent: React.FC<{
-  configData?: CollectionConfigData<"Pets">;
-}> = ({ configData }) => {
+  configData: CollectionConfigData<"Pets">;
+  displayType?: "all" | "specific";
+  pt?: number;
+}> = ({ configData, displayType = "all", pt }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = (configData as any).rarity ? getRarityColor((configData as any).rarity) : null;
+
+  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 && (
-            <ImageComponent
-              src={data.goldenThumbnail}
-              alt={`${data.name} (Golden)`}
-            />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      {/* 2-Column Grid Layout */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'minmax(300px, 1fr) 2fr', // Left (Image) : Right (Details)
+        gap: '40px',
+        height: '100%',
+        alignItems: 'start'
+      }}>
+
+        {/* Left Column: Images */}
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '20px'
+        }}>
+          {/* Main Image */}
+          <div style={{ width: '250px', height: '250px' }}>
+            <ImageComponent src={configData.thumbnail} alt={configData.name} />
+          </div>
+          {/* Golden Variant if exists */}
+          {configData.goldenThumbnail && (
+            <div style={{ width: '150px', height: '150px', opacity: 0.8 }}>
+              <p style={{ textAlign: 'center', margin: '0 0 5px 0', fontSize: '0.9rem', fontWeight: 'bold', color: '#888' }}>Golden Variant</p>
+              <ImageComponent
+                src={configData.goldenThumbnail}
+                alt={`${configData.name} (Golden)`}
+              />
+            </div>
           )}
-          <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>
+        </div>
+
+        {/* Right Column: details */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+
+          {/* Stats Grid */}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+            gap: '20px',
+            width: '100%'
+          }}>
+            <div style={{ background: '#f5f5f5', padding: '15px', borderRadius: '12px', border: '1px solid #ddd' }}>
+              <strong style={{ display: 'block', fontSize: '0.9rem', color: '#666', marginBottom: '5px' }}>FROM WORLD</strong>
+              <span style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#333' }}>{configData.fromWorldNumber || "?"}</span>
+            </div>
+            <div style={{ background: '#f5f5f5', padding: '15px', borderRadius: '12px', border: '1px solid #ddd' }}>
+              <strong style={{ display: 'block', fontSize: '0.9rem', color: '#666', marginBottom: '5px' }}>FROM ZONE</strong>
+              <span style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#333' }}>{configData.fromZoneNumber || "?"}</span>
+            </div>
+            {configData.power && (
+              <div style={{ background: '#e3f2fd', padding: '15px', borderRadius: '12px', border: '1px solid #90caf9' }}>
+                <strong style={{ display: 'block', fontSize: '0.9rem', color: '#1565c0', marginBottom: '5px' }}>POWER</strong>
+                <span style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#1565c0' }}>{configData.power}</span>
+              </div>
+            )}
+            {configData.exclusiveLevel && (
+              <div style={{ background: '#f3e5f5', padding: '15px', borderRadius: '12px', border: '1px solid #ce93d8' }}>
+                <strong style={{ display: 'block', fontSize: '0.9rem', color: '#7b1fa2', marginBottom: '5px' }}>EXCLUSIVE LEVEL</strong>
+                <span style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#7b1fa2' }}>{configData.exclusiveLevel}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Badges */}
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+            {configData.indexObtainable && <span className="badge" style={{ background: '#4caf50', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Index Obtainable</span>}
+            {configData.huge && <span className="badge" style={{ background: '#ff9800', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>HUGE</span>}
+            {configData.fly && <span className="badge" style={{ background: '#2196f3', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Fly</span>}
+            {configData.tradable && <span className="badge" style={{ background: '#9c27b0', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Tradable</span>}
+            {configData.secret && <span className="badge" style={{ background: '#607d8b', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Secret</span>}
+            {configData.hidden && <span className="badge" style={{ background: '#333', color: 'white', padding: '8px 16px', borderRadius: '20px', fontWeight: 'bold' }}>Hidden</span>}
+          </div>
+
+          {/* Description / Index Desc */}
+          {configData.indexDesc && (
+            <div style={{
+              marginTop: '10px',
+              padding: '20px',
+              background: '#fff3e0',
+              borderLeft: '5px solid #ff9800',
+              borderRadius: '4px',
+              fontStyle: 'italic',
+              fontSize: '1.1rem',
+              lineHeight: '1.6',
+              color: '#5d4037'
+            }}>
+              "{configData.indexDesc}"
             </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>
+
+          {/* Cached Power (Debug/Extra info) */}
+          {configData.cachedPower && (
+            <div style={{ marginTop: 'auto', paddingTop: '20px', borderTop: '1px solid #eee' }}>
+              <h4 style={{ margin: '0 0 10px 0', color: '#999', fontSize: '0.8rem', textTransform: 'uppercase' }}>Technical Data</h4>
+              <div style={{ fontSize: '0.86rem', color: '#aaa', fontFamily: 'monospace' }}>
+                Cached Power: {configData.cachedPower.join(', ')}
+              </div>
             </div>
           )}
-          {data.indexDesc && <p>Description: {data.indexDesc}</p>}
-          {data.exclusiveLevel && <p>Exclusive Level: {data.exclusiveLevel}</p>}
-          {data.power && <p>Power: {data.power}</p>}
+
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 
+
 export default PetsComponent;

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

@@ -1,48 +1,65 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
+import ItemCard from "./ItemCard";
 import ImageComponent from "./ImageComponent";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const PotionsComponent: React.FC<{
-  configData?: CollectionConfigData<"Potions">;
+  configData: CollectionConfigData<"Potions">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Potions">>
-      collectionName="Potions"
-      configData={configData}
-      render={(data) => (
-        <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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ display: 'flex', gap: '20px', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', justifyContent: 'center' }}>
+        <div style={{ width: '150px', height: '150px' }}>
+          <ImageComponent
+            src={configData.Tiers[0].Icon}
+            alt={configData.Tiers[0].DisplayName}
+          />
+        </div>
+        <div style={{ textAlign: 'left', flex: 1, minWidth: '200px' }}>
+          <p style={{ marginBottom: '8px' }}><strong>Description:</strong> {configData.Tiers[0].Desc}</p>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+            <p><strong>Primary:</strong> <span style={{ color: configData.PrimaryColor }}>{configData.PrimaryColor}</span></p>
+            <p><strong>Secondary:</strong> <span style={{ color: configData.SecondaryColor }}>{configData.SecondaryColor}</span></p>
+            <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
+            <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
           </div>
         </div>
-      )}
-    />
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <h3>Tiers</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '15px' }}>
+          {configData.Tiers.map((tier, index) => {
+            const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+            return (
+              <div key={index} style={{ marginBottom: '10px' }}>
+                <ItemCard
+                  id={tier.DisplayName}
+                  amount={1}
+                  label={tier.DisplayName}
+                  tn={index + 1}
+                  itemData={{
+                    icon: tier.Icon,
+                    rarity: tier.Rarity,
+                    name: tier.DisplayName
+                  }}
+                  rarityColor={rarityColor}
+                />
+                <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+                  <p style={{ fontWeight: 'bold' }}>Power: {tier.Power}</p>
+                  <p>Time: {tier.Time}s</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
   );
 };