ps99-api 2.3.3 → 2.5.0

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

@@ -1,45 +1,49 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 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 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 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) => (
+              allowed && (
+                <span key={index} className="badge">
+                  {area.replace(/_/g, " ")}
+                </span>
+              )
+            ),
+          )}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

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

@@ -1,87 +1,203 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
+
+import { useItemResolution } from "../hooks/useItemResolution";
+import ItemCard from "./ItemCard";
+import { useExpandableList } from "../hooks/useExpandableList";
 
 const RanksComponent: React.FC<{
-  configData?: CollectionConfigData<"Ranks">;
+  configData: CollectionConfigData<"Ranks">;
 }> = ({ configData }) => {
+  const { loading, resolveItem, getRarityColor } = useItemResolution();
+  const goalsLength = React.useMemo(() => Array.isArray(configData.Goals) ? configData.Goals.length : 0, [configData.Goals]);
+  const { expandedIndices, toggle, expandAll, collapseAll, isExpanded } = useExpandableList(goalsLength);
+
+  if (loading) {
+    return (
+      <div style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        fontSize: "1.5rem",
+        color: "#888"
+      }}>
+        Loading reference data...
+      </div>
+    );
+  }
+
+  /* renderItemCard logic moved to ItemCard.tsx */
+
   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 style={{ width: "100%", height: "100%", boxSizing: "border-box" }}>
+      <div style={{ width: "100%" }}>
 
-          <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>
-            ))}
+        {/* Info Grid */}
+        <div style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: "16px",
+          marginBottom: "60px",
+          background: "#ffffff",
+          padding: "24px",
+          borderRadius: "20px",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.05)"
+        }}>
+          <InfoItem label="Max Enchants" value={configData.MaxEnchantsEquipped} />
+          <InfoItem label="Max Goals" value={configData.MaximumActiveGoals} />
+          <InfoItem label="Egg Slots" value={configData.UnlockableEggSlots} />
+          <InfoItem label="Pet Slots" value={configData.UnlockablePetSlots} />
+          {configData.RequiredRebirth && <InfoItem label="Rebirth Req" value={configData.RequiredRebirth} />}
+          {configData.RequiredZone && <InfoItem label="Zone Req" value={configData.RequiredZone} />}
+        </div>
+
+        {/* Rewards Section */}
+        {configData.Rewards && configData.Rewards.length > 0 && (
+          <div style={{ marginBottom: "60px" }}>
+            <SectionTitle title="Rewards" />
+            <div style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+              gap: "24px"
+            }}>
+              {configData.Rewards.map((reward: any, i: number) => {
+                // Handle inconsistent reward structure if necessary
+                const data = reward.Item?._data || reward.Item || reward._data || reward;
+                const id = data.id || data._id || "Reward";
+                const amount = data._am || data.Amount || 1;
+                const tn = data.tn || data.Tier;
+                const itemData = resolveItem(id, tn);
+                return (
+                  <ItemCard
+                    key={`${id}-${tn}-${i}`}
+                    id={id}
+                    amount={amount}
+                    label={id}
+                    tn={tn}
+                    itemData={itemData}
+                    rarityColor={itemData?.rarity ? getRarityColor(itemData.rarity) : null}
+                  />
+                );
+              })}
+            </div>
           </div>
+        )}
 
+        {/* Goals Section */}
+        {configData.Goals && (
           <div>
-            <h3>Rewards:</h3>
-            <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>
-                  )}
-                  {reward.Item._data.tn && <p>TN: {reward.Item._data.tn}</p>}
-                </li>
-              ))}
-            </ul>
-          </div>
+            <SectionTitle title="Goals" />
 
-          {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 style={{ marginBottom: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
+              <button onClick={expandAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Expand All</button>
+              <button onClick={collapseAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Collapse All</button>
             </div>
-          )}
-        </div>
-      )}
-    />
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+              {Array.isArray(configData.Goals) ? configData.Goals.map((goalSet: any[], setIndex: number) => (
+                <div key={setIndex} style={{
+                  background: "#fff",
+                  borderRadius: "24px",
+                  padding: "30px",
+                  boxShadow: "0 2px 10px rgba(0,0,0,0.03)"
+                }}>
+                  <div
+                    onClick={() => toggle(setIndex)}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      cursor: "pointer",
+                      marginBottom: isExpanded(setIndex) ? "24px" : "0"
+                    }}
+                  >
+                    <div style={{
+                      background: "#ffcc00",
+                      width: "8px",
+                      height: "32px",
+                      borderRadius: "4px"
+                    }} />
+                    <h3 style={{
+                      fontSize: "1.5rem",
+                      color: "#444",
+                      fontWeight: "700",
+                      margin: 0
+                    }}>
+                      {isExpanded(setIndex) ? '▼' : '▶'} Goal Set {setIndex + 1}
+                    </h3>
+                  </div>
+
+                  {isExpanded(setIndex) && (
+                    <div style={{
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+                      gap: "20px"
+                    }}>
+                      {goalSet.map((goal: any, index: number) => {
+                        // Determine ID and Label
+                        // Goals usually have Type (numeric) which we need to resolve
+                        // Sometimes they might have CurrencyID
+                        const id = String(goal.CurrencyID || goal.Type);
+                        const tn = goal.EnchantTier || goal.PotionTier || goal.Tier;
+                        const itemData = resolveItem(id, tn);
+                        // Label can be tricky, resolveItem will give us data, but for fallback prompt we use ID
+                        return (
+                          <ItemCard
+                            key={`${id}-${tn}-${index}`}
+                            id={id}
+                            amount={goal.Amount}
+                            label={id}
+                            tn={tn}
+                            weight={goal.Weight}
+                            typeId={goal.Type}
+                            itemData={itemData}
+                            rarityColor={itemData?.rarity ? getRarityColor(itemData.rarity) : null}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              )) : (
+                <div>No goals structure found</div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
   );
 };
 
+// Helper Components
+const InfoItem = ({ label, value }: { label: string, value: any }) => (
+  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+    <span style={{ fontSize: "12px", color: "#999", textTransform: "uppercase", fontWeight: "700" }}>{label}</span>
+    <span style={{ fontSize: "18px", color: "#333", fontWeight: "800" }}>{typeof value === 'number' ? value.toLocaleString() : value}</span>
+  </div>
+);
+
+const SectionTitle = ({ title }: { title: string }) => (
+  <h2 style={{
+    fontSize: "2.2rem",
+    color: "#444",
+    marginBottom: "30px",
+    textAlign: "center",
+    position: "relative",
+    display: "inline-block",
+    left: "50%",
+    transform: "translateX(-50%)"
+  }}>
+    {title}
+    <div style={{
+      width: "60px",
+      height: "4px",
+      background: "#ffcc00",
+      borderRadius: "2px",
+      margin: "10px auto 0"
+    }} />
+  </h2>
+);
+
 export default RanksComponent;

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

@@ -1,24 +1,135 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const RarityComponent: React.FC<{
-  configData?: CollectionConfigData<"Rarity">;
+  configData: CollectionConfigData<"Rarity">;
 }> = ({ configData }) => {
+  // Use the rarity color for styling
+  const rarityColor = configData.Color || "#333";
+  const glowColor = rarityColor;
+
   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 style={{
+      padding: "40px",
+      fontFamily: "'Nunito', 'Segoe UI', sans-serif",
+      backgroundColor: "#f9f9f9",
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }}>
+
+      {/* Rarity Showcase Card */}
+      <div style={{
+        background: "#fff",
+        borderRadius: "24px",
+        padding: "40px",
+        boxShadow: `0 10px 40px ${glowColor}40`,
+        border: `3px solid ${rarityColor}`,
+        maxWidth: "600px",
+        width: "100%",
+        textAlign: "center",
+        marginBottom: "40px",
+        position: "relative",
+        overflow: "hidden",
+        transition: "transform 0.3s ease",
+        cursor: "default"
+      }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "scale(1.02)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "scale(1)";
+        }}
+      >
+        {/* Background Glow */}
+        <div style={{
+          position: "absolute",
+          top: "-50%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "150%",
+          height: "300px",
+          background: `radial-gradient(circle, ${rarityColor}33 0%, transparent 70%)`,
+          pointerEvents: "none",
+          zIndex: 0
+        }} />
+
+        <div style={{ position: "relative", zIndex: 1 }}>
+          <h1 style={{
+            fontSize: "3.5rem",
+            fontWeight: "900",
+            color: rarityColor,
+            margin: "0 0 10px 0",
+            textShadow: `0 2px 10px ${glowColor}60`
+          }}>
+            {configData.DisplayName}
+          </h1>
+          <div style={{
+            fontSize: "1.2rem",
+            color: "#888",
+            fontWeight: "700",
+            textTransform: "uppercase",
+            letterSpacing: "2px"
+          }}>
+            Rarity #{configData.RarityNumber}
+          </div>
         </div>
-      )}
-    />
+      </div>
+
+      {/* Exhaustive Data Grid */}
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+        gap: "20px",
+        maxWidth: "800px",
+        width: "100%"
+      }}>
+        {Object.entries(configData).map(([key, value]) => {
+          // Skip rendering complex objects if intended for simple display, or stringify them
+          if (typeof value === 'object' && value !== null) {
+            return (
+              <DataCard key={key} label={key} value={JSON.stringify(value)} color={rarityColor} />
+            );
+          }
+          return (
+            <DataCard key={key} label={key} value={String(value)} color={rarityColor} />
+          );
+        })}
+      </div>
+
+    </div>
   );
 };
 
+const DataCard = ({ label, value, color }: { label: string, value: string, color: string }) => (
+  <div style={{
+    background: "#fff",
+    padding: "20px",
+    borderRadius: "16px",
+    boxShadow: "0 4px 15px rgba(0,0,0,0.05)",
+    borderLeft: `4px solid ${color}`,
+    display: "flex",
+    flexDirection: "column",
+    wordBreak: "break-word"
+  }}>
+    <span style={{
+      fontSize: "12px",
+      color: "#aaa",
+      fontWeight: "700",
+      textTransform: "uppercase",
+      marginBottom: "8px"
+    }}>
+      {label}
+    </span>
+    <span style={{
+      fontSize: "16px",
+      color: "#333",
+      fontWeight: "600"
+    }}>
+      {value}
+    </span>
+  </div>
+);
+
 export default RarityComponent;

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

@@ -1,36 +1,47 @@
+
 import React from "react";
 import { CollectionConfigData, RebirthUnlock } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Zone Required:</strong> {configData.ZoneNumberRequired}</p>
+        <p><strong>Strength Boost:</strong> {configData.StrengthPowerBoost}%</p>
+        {configData.ResetZone && <p><strong>Reset Zone:</strong> {configData.ResetZone}</p>}
+        {configData.BoostDesc && <p style={{ gridColumn: '1 / -1' }}><strong>Boost:</strong> {configData.BoostDesc}</p>}
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.2em', marginBottom: '15px' }}>Unlocks</h3>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "15px" }}>
+          {configData.RebirthUnlocks.map(
+            (unlock: RebirthUnlock, index: number) => (
+              <div key={index}>
+                <ItemCard
+                  id={unlock.Title}
+                  amount={1}
+                  label={unlock.GuiTitle || unlock.Title}
+                  itemData={{
+                    icon: unlock.Icon,
+                    rarity: undefined,
+                    name: unlock.GuiTitle || unlock.Title
+                  }}
+                  rarityColor={null}
+                />
+                <div style={{ textAlign: 'center', fontSize: '0.8em', color: '#666', marginTop: '5px' }}>
+                  {unlock.Desc}
+                </div>
+              </div>
+            ),
+          )}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

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

@@ -1,22 +1,16 @@
 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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+        <p><strong>Instance ID:</strong> {configData.InstanceId}</p>
+        <p><strong>Required Zone:</strong> {configData.RequiredZone}</p>
+      </div>
+    </div>
   );
 };