ps99-api 2.4.0 → 2.6.0

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

@@ -1,49 +1,184 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 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 groupedPerks = React.useMemo(() => {
+    if (!configData.Perks) return [];
+    const groups = new Map<number, any[]>();
+
+    Object.entries(configData.Perks).forEach(([type, levels]) => {
+      if (Array.isArray(levels)) {
+        levels.forEach((levelDetail: any) => {
+          const level = levelDetail.Level;
+          if (!groups.has(level)) {
+            groups.set(level, []);
+          }
+          groups.get(level)?.push({ ...levelDetail, type });
+        });
+      }
+    });
+
+    // Sort levels
+    const sortedLevels = Array.from(groups.keys()).sort((a, b) => a - b);
+    return sortedLevels.map(level => ({
+      level,
+      perks: groups.get(level) || []
+    }));
+  }, [configData.Perks]);
+
+  const renderGroupedPerks = () => {
+    return groupedPerks.map((group) => (
+      <div key={group.level} style={{
+        marginBottom: '20px',
+        background: '#fff',
+        borderRadius: '16px',
+        overflow: 'hidden',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
+        border: '1px solid #eee'
+      }}>
+        {/* Level Header */}
+        <div style={{
+          background: 'linear-gradient(90deg, #4CAF50 0%, #45a049 100%)',
+          padding: '12px 20px',
+          color: 'white',
+          fontWeight: 'bold',
+          fontSize: '1.2em',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px'
+        }}>
+          <span style={{ background: 'rgba(255,255,255,0.2)', padding: '4px 10px', borderRadius: '8px', fontSize: '0.9em' }}>
+            Lvl {group.level}
+          </span>
+          <span>Unlocks</span>
+        </div>
+
+        {/* Perks List */}
+        <div style={{ padding: '0' }}>
+          {group.perks.map((perk: any, index: number) => (
+            <div key={index} style={{
+              padding: '15px 20px',
+              borderBottom: index < group.perks.length - 1 ? '1px solid #f0f0f0' : 'none',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '4px'
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                <div style={{ fontWeight: '700', color: '#333', fontSize: '1.05em' }}>{perk.Title}</div>
+                <div style={{
+                  fontSize: '0.75em',
+                  color: '#888',
+                  background: '#f5f5f5',
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  textTransform: 'uppercase',
+                  fontWeight: '600',
+                  letterSpacing: '0.5px'
+                }}>
+                  {perk.type}
+                </div>
+              </div>
+              <div style={{ color: '#555', lineHeight: '1.4' }}>{perk.Text}</div>
+              {perk.Power && (
+                <div style={{
+                  color: '#1976d2',
+                  fontWeight: '600',
+                  fontSize: '0.9em',
+                  marginTop: '4px',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '4px'
+                }}>
+                  ⚡ Power: {perk.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: 'flex',
+        flexWrap: 'wrap',
+        gap: '40px',
+        height: '100%',
+        alignItems: 'start'
+      }}>
+
+        {/* Left Column: Icon */}
+        <div style={{
+          flex: '1 1 300px',
+          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={{
+          flex: '2 1 300px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '20px',
+          minWidth: '300px'
+        }}>
+
+          {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>
+              {renderGroupedPerks()}
+            </div>
+          )}
+
+        </div>
+
       </div>
     </div>
   );
 };
 
+
+
 export default MasteryComponent;

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;