ps99-api 1.2.0 → 2.0.0

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

@@ -1,42 +1,61 @@
-import React, { useEffect, useState } from "react";
-import { PetData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const PetsComponent: React.FC = () => {
-  const [pets, setPets] = useState<PetData[]>([]);
-
-  useEffect(() => {
-    const fetchPets = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Pets");
-      if (response.status === "ok") {
-        setPets(response.data);
-      }
-    };
-    fetchPets();
-  }, []);
-
+const PetsComponent: React.FC<{
+  configData?: CollectionConfigData<"Pets">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Pets</h2>
-      <ul>
-        {pets.map((pet, index) => (
-          <li key={index}>
+    <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={pet.configData.thumbnail}
-              alt={pet.configData.name}
+              src={data.goldenThumbnail}
+              alt={`${data.name} (Golden)`}
             />
-            <span>{pet.configData.name}</span>
-            {pet.configData.goldenThumbnail && (
-              <ImageComponent
-                src={pet.configData.goldenThumbnail}
-                alt={`Golden ${pet.configData.name}`}
-              />
-            )}
-          </li>
-        ))}
-      </ul>
-    </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>
+          )}
+          {data.animations && (
+            <div>
+              <h3>Animations:</h3>
+              <ul>
+                {Object.entries(data.animations).map(([key, value], index) => (
+                  <li key={index}>
+                    {key}: {JSON.stringify(value)}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {data.indexDesc && <p>Description: {data.indexDesc}</p>}
+          {data.exclusiveLevel && <p>Exclusive Level: {data.exclusiveLevel}</p>}
+          {data.power && <p>Power: {data.power}</p>}
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,43 +1,48 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, PotionData } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const PotionsComponent: React.FC = () => {
-  const [potions, setPotions] = useState<PotionData[]>([]);
-
-  useEffect(() => {
-    const fetchPotions = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Potions");
-      if (response.status === "ok") {
-        setPotions(response.data);
-      }
-    };
-    fetchPotions();
-  }, []);
-
+const PotionsComponent: React.FC<{
+  configData?: CollectionConfigData<"Potions">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Potions</h2>
-      <ul>
-        {potions.map((potion, index) => (
-          <li key={index}>
-            <span>Base Tier: {potion.configData.BaseTier}</span>
-            <span>Max Tier: {potion.configData.MaxTier}</span>
-            {potion.configData.Tiers.map((tier, tierIndex) => (
-              <div key={tierIndex}>
-                <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
-                <span>Tier {tierIndex + 1}:</span>
-                <span>{tier.DisplayName}</span>
-                <span>Power: {tier.Power}</span>
-                <span>Time: {tier.Time}</span>
-                <span>Rarity: {tier.Rarity.DisplayName}</span>
-              </div>
-            ))}
-          </li>
-        ))}
-      </ul>
-    </div>
+    <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>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,38 +1,45 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, RandomEventData } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const RandomEventsComponent: React.FC = () => {
-  const [randomEvents, setRandomEvents] = useState<RandomEventData[]>([]);
-
-  useEffect(() => {
-    const fetchRandomEvents = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("RandomEvents");
-      if (response.status === "ok") {
-        setRandomEvents(response.data);
-      }
-    };
-    fetchRandomEvents();
-  }, []);
-
+const RandomEventsComponent: React.FC<{
+  configData?: CollectionConfigData<"RandomEvents">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Random Events</h2>
-      <ul>
-        {randomEvents.map((event, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={event.configData.Icon}
-              alt={event.configData.Name}
-            />
-            <span>{event.configData.Name}</span>
-            <span>Duration: {event.configData.Duration}</span>
-            <span>Chance: {event.configData.Chance}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <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>
+      )}
+    />
   );
 };
 

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

@@ -1,35 +1,86 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, RankData } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
-const RanksComponent: React.FC = () => {
-  const [ranks, setRanks] = useState<RankData[]>([]);
+const RanksComponent: React.FC<{
+  configData?: CollectionConfigData<"Ranks">;
+}> = ({ configData }) => {
+  return (
+    <GenericFetchComponent<CollectionConfigData<"Ranks">>
+      collectionName="Ranks"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>Rank: {data.Title}</h2>
+          <p>Rank Number: {data.RankNumber}</p>
+          <p>Max Enchants Equipped: {data.MaxEnchantsEquipped}</p>
+          <p>Maximum Active Goals: {data.MaximumActiveGoals}</p>
+          <p>Unlockable Egg Slots: {data.UnlockableEggSlots}</p>
+          <p>Unlockable Pet Slots: {data.UnlockablePetSlots}</p>
+          {data.RequiredRebirth && (
+            <p>Required Rebirth: {data.RequiredRebirth}</p>
+          )}
+          {data.RequiredZone && <p>Required Zone: {data.RequiredZone}</p>}
 
-  useEffect(() => {
-    const fetchRanks = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Ranks");
-      if (response.status === "ok") {
-        setRanks(response.data);
-      }
-    };
-    fetchRanks();
-  }, []);
+          <div>
+            <h3>Goals:</h3>
+            {data.Goals.map((goalSet, index) => (
+              <div key={index}>
+                <h4>Goal Set {index + 1}</h4>
+                <ul>
+                  {goalSet.map((goal, goalIndex) => (
+                    <li key={goalIndex}>
+                      <p>Type: {goal.Type}</p>
+                      <p>Amount: {goal.Amount}</p>
+                      <p>Weight: {goal.Weight}</p>
+                      {goal.CurrencyID && <p>Currency ID: {goal.CurrencyID}</p>}
+                      {goal.BreakableType && (
+                        <p>Breakable Type: {goal.BreakableType}</p>
+                      )}
+                      {goal.PotionTier && <p>Potion Tier: {goal.PotionTier}</p>}
+                      {goal.EnchantTier && (
+                        <p>Enchant Tier: {goal.EnchantTier}</p>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
 
-  return (
-    <div>
-      <h2>Ranks</h2>
-      <ul>
-        {ranks.map((rank, index) => (
-          <li key={index}>
-            <span>{rank.configData.Title}</span>
-            <span>Rank Number: {rank.configData.RankNumber}</span>
-            <span>
-              Max Enchants Equipped: {rank.configData.MaxEnchantsEquipped}
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
+          <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>
+
+          {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>
+          )}
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,32 +1,23 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, RarityData } from "ps99-api";
-
-const RarityComponent: React.FC = () => {
-  const [rarityItems, setRarityItems] = useState<RarityData[]>([]);
-
-  useEffect(() => {
-    const fetchRarityItems = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Rarity");
-      if (response.status === "ok") {
-        setRarityItems(response.data);
-      }
-    };
-    fetchRarityItems();
-  }, []);
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
+const RarityComponent: React.FC<{
+  configData?: CollectionConfigData<"Rarity">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Rarity</h2>
-      <ul>
-        {rarityItems.map((item, index) => (
-          <li key={index}>
-            <span>{item.configData.DisplayName}</span>
-            <span>Rarity Number: {item.configData.RarityNumber}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <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>
+      )}
+    />
   );
 };
 

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

@@ -1,34 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, RebirthData } from "ps99-api";
-
-const RebirthsComponent: React.FC = () => {
-  const [rebirths, setRebirths] = useState<RebirthData[]>([]);
-
-  useEffect(() => {
-    const fetchRebirths = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Rebirths");
-      if (response.status === "ok") {
-        setRebirths(response.data);
-      }
-    };
-    fetchRebirths();
-  }, []);
+import React from "react";
+import { CollectionConfigData, RebirthUnlock } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
+import ImageComponent from "./ImageComponent";
 
+const RebirthComponent: React.FC<{
+  configData?: CollectionConfigData<"Rebirths">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Rebirths</h2>
-      <ul>
-        {rebirths.map((rebirth, index) => (
-          <li key={index}>
-            <span>{rebirth.configData.DisplayName}</span>
-            <span>Boost Description: {rebirth.configData.BoostDesc}</span>
-            <span>Rebirth Number: {rebirth.configData.RebirthNumber}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <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>
+      )}
+    />
   );
 };
 
-export default RebirthsComponent;
+export default RebirthComponent;

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

@@ -1,33 +1,23 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, SecretRoomData } from "ps99-api";
-
-const SecretRoomsComponent: React.FC = () => {
-  const [secretRooms, setSecretRooms] = useState<SecretRoomData[]>([]);
-
-  useEffect(() => {
-    const fetchSecretRooms = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("SecretRooms");
-      if (response.status === "ok") {
-        setSecretRooms(response.data);
-      }
-    };
-    fetchSecretRooms();
-  }, []);
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
+const SecretRoomComponent: React.FC<{
+  configData?: CollectionConfigData<"SecretRooms">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Secret Rooms</h2>
-      <ul>
-        {secretRooms.map((room, index) => (
-          <li key={index}>
-            <span>{room.configData.DisplayName}</span>
-            <span>Required Zone: {room.configData.RequiredZone}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <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>
+      )}
+    />
   );
 };
 
-export default SecretRoomsComponent;
+export default SecretRoomComponent;

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

@@ -1,39 +1,74 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API, SeedData } from "ps99-api";
+import React from "react";
+import {
+  CollectionConfigData,
+  LootTableRoot,
+  LootTableEntry,
+  RawStackKey,
+  LootTableData,
+} from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const SeedsComponent: React.FC = () => {
-  const [seeds, setSeeds] = useState<SeedData[]>([]);
+const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
+  try {
+    return JSON.parse(rawStackKey);
+  } catch (error) {
+    console.error("Failed to parse RawStackKey:", rawStackKey, error);
+    return {} as LootTableData;
+  }
+};
 
-  useEffect(() => {
-    const fetchSeeds = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Seeds");
-      if (response.status === "ok") {
-        setSeeds(response.data);
-      }
-    };
-    fetchSeeds();
-  }, []);
+const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
+  const lootTableArray = Array.isArray(lootTable) ? lootTable : [lootTable];
+  return lootTableArray.map((table, index) => (
+    <div key={index}>
+      {table.entries.map((entry: LootTableEntry, entryIndex: number) => {
+        const parsedStackKey = entry.Value._stackKey
+          ? parseRawStackKey(entry.Value._stackKey)
+          : null;
+        return (
+          <div key={entryIndex}>
+            <h4>Loot Entry {entryIndex + 1}</h4>
+            <p>Weight: {entry.Weight}</p>
+            {parsedStackKey && (
+              <>
+                <p>Item ID: {parsedStackKey.id}</p>
+                {parsedStackKey.tn && <p>Item TN: {parsedStackKey.tn}</p>}
+                {parsedStackKey._am && <p>Amount: {parsedStackKey._am}</p>}
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  ));
+};
 
+const SeedComponent: React.FC<{
+  configData?: CollectionConfigData<"Seeds">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Seeds</h2>
-      <ul>
-        {seeds.map((seed, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={seed.configData.Icon}
-              alt={seed.configData.DisplayName}
-            />
-            <span>{seed.configData.DisplayName}</span>
-            <span>{seed.configData.Desc}</span>
-            <span>Grow Time: {seed.configData.GrowTime}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Seeds">>
+      collectionName="Seeds"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>Seed: {data.DisplayName}</h2>
+          <p>Description: {data.Desc}</p>
+          <p>Grow Time: {data.GrowTime} seconds</p>
+          <p>
+            Rarity: {data.Rarity.DisplayName} (Rarity Number:{" "}
+            {data.Rarity.RarityNumber})
+          </p>
+          <ImageComponent src={data.Icon} alt={data.DisplayName} />
+          <div>
+            <h3>Loot Table</h3>
+            {renderLootTable(data.LootTable)}
+          </div>
+        </div>
+      )}
+    />
   );
 };
 
-export default SeedsComponent;
+export default SeedComponent;