ps99-api 2.4.0 → 2.5.0

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

@@ -1,46 +1,109 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useExpandableList } from "../hooks/useExpandableList";
 
 const MasteryComponent: React.FC<{
   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 (
-    <div>
-      <h2>{configData.Name}</h2>
-      <ImageComponent src={configData.Icon} alt={configData.Name} />
-      <p>Description: {configData.Desc}</p>
-      {configData.ToggleablePerks && (
-        <div>
-          <h3>Toggleable Perks</h3>
-          {Object.entries(configData.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>
-      )}
-      <div>
-        <h3>Perks</h3>
-        {renderPerks(configData.Perks)}
+
+        {/* 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>
+          )}
+
+          {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

@@ -7,28 +7,53 @@ const MerchantsComponent: React.FC<{
   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 (
-    <div>
-      <h2>{configData.DisplayName}</h2>
-      <p>Price Multiplier: {configData.PriceMult}</p>
-      <p>Machine Name: {configData.MachineName}</p>
-      <p>Refresh Rate: {configData.RefreshRate} seconds</p>
-      {configData.HideNotification && <p>Notification: Hidden</p>}
-      {configData.HideRespect && <p>Respect: Hidden</p>}
-      {configData.IsStatic && <p>Static Merchant</p>}
-      {renderStockRange(configData.StockRangeByRespectLevel)}
+    <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>
-          <h3>Slot Respect Levels</h3>
-          <p>{configData.SlotRespectLevels.join(", ")}</p>
+        <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>

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

@@ -1,42 +1,37 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const MiscItemsComponent: React.FC<{
   configData: CollectionConfigData<"MiscItems">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div
-      style={{
-        padding: "1em",
-        border: "1px solid #ccc",
-        borderRadius: "8px",
-        backgroundColor: "#f9f9f9",
-      }}
-    >
-      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
-        {configData.DisplayName}
-      </h2>
-      <p>
-        <strong>Category:</strong> {configData.Category}
-      </p>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      {configData.AltIcon && (
-        <ImageComponent
-          src={configData.AltIcon}
-          alt={`${configData.DisplayName} (Alternate)`}
+    <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}
         />
-      )}
-      <p>
-        <strong>Description:</strong> {configData.Desc}
-      </p>
-      <p>
-        <strong>Rarity:</strong> {configData.Rarity.DisplayName} (Rarity Number:{" "}
-        {configData.Rarity.RarityNumber})
-      </p>
-      <p>
-        <strong>Tradable:</strong> {configData.Tradable ? "Yes" : "No"}
-      </p>
+      </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,12 +1,17 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
 import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const PetsComponent: React.FC<{
   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)";
@@ -14,79 +19,113 @@ const PetsComponent: React.FC<{
   };
 
   return (
-    <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} />
+    <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 && (
-            <ImageComponent
-              src={configData.goldenThumbnail}
-              alt={`${configData.name} (Golden)`}
-            />
-          )}
-        </>
-      )}
-      {displayType === "specific" && (
-        <>
-          {pt === 1 && configData.goldenThumbnail ? (
-            <div style={{ minWidth: '250px' }}>
+            <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>
-          ) : (
-            <div style={{ minWidth: '250px', outline: pt === 2 ? '4px solid #FFD700' : 'none', borderRadius: '8px' }}>
-              <ImageComponent
-                src={configData.thumbnail}
-                alt={configData.name}
-              />
-            </div>
           )}
-        </>
-      )}
-      <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>
-              ),
+
+        {/* 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>
             )}
-          </ul>
+            {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>
+          )}
+
+          {/* 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>
+          )}
+
         </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>
     </div>
   );
 };
 
+
 export default PetsComponent;

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

@@ -1,46 +1,62 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
+import ItemCard from "./ItemCard";
 import ImageComponent from "./ImageComponent";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const PotionsComponent: React.FC<{
   configData: CollectionConfigData<"Potions">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+
   return (
-    <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' }}>
+
+    <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>
-          <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 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: '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 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>
-              <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,38 +1,47 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const RandomEventsComponent: React.FC<{
   configData: CollectionConfigData<"RandomEvents">;
 }> = ({ configData }) => {
   return (
-    <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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.Name}
+          amount={1}
+          label={configData.Name}
+          itemData={{
+            icon: configData.Icon,
+            rarity: undefined,
+            name: configData.Name
+          }}
+          rarityColor={configData.Color}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Color:</strong> <span style={{ color: configData.Color }}>{configData.Color}</span></p>
+        <p><strong>Duration:</strong> {configData.Duration}s</p>
+        <p><strong>Chance:</strong> {configData.Chance}</p>
+        {configData.BreakingRequirement && <p><strong>Break Req:</strong> {configData.BreakingRequirement}</p>}
       </div>
-      <div>
-        <h3>Area Whitelist:</h3>
-        <ul>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.1em', marginBottom: '10px' }}>Area Whitelist</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px', justifyContent: 'center' }}>
           {Object.entries(configData.AreaWhitelist).map(
             ([area, allowed], index) => (
-              <li key={index}>
-                {area.replace("_", " ")}: {allowed ? "Yes" : "No"}
-              </li>
+              allowed && (
+                <span key={index} className="badge">
+                  {area.replace(/_/g, " ")}
+                </span>
+              )
             ),
           )}
-        </ul>
+        </div>
       </div>
     </div>
   );