ps99-api 1.2.0 → 2.0.0

package/example-web/react2/src/App.tsx

@@ -1,147 +1,32 @@
-import React, { useEffect, useState } from "react";
-import { PetSimulator99API } from "ps99-api";
-
-import AchievementsComponent from "./components/AchievementsComponent";
-import BoostsComponent from "./components/BoostsComponent";
-import BoothsComponent from "./components/BoothsComponent";
-import BoxesComponent from "./components/BoxesComponent";
-import BuffsComponent from "./components/BuffsComponent";
-import CharmsComponent from "./components/CharmsComponent";
-import CurrencyComponent from "./components/CurrencyComponent";
-import EggsComponent from "./components/EggsComponent";
-import EnchantsComponent from "./components/EnchantsComponent";
-import FishingRodsComponent from "./components/FishingRodsComponent";
-import FruitsComponent from "./components/FruitsComponent";
-import GuildBattlesComponent from "./components/GuildBattlesComponent";
-import HoverboardsComponent from "./components/HoverboardsComponent";
-import LootboxesComponent from "./components/LootboxesComponent";
-import MasteryComponent from "./components/MasteryComponent";
-import MerchantsComponent from "./components/MerchantsComponent";
-import MiscItemsComponent from "./components/MiscItemsComponent";
-import PetsComponent from "./components/PetsComponent";
-import PotionsComponent from "./components/PotionsComponent";
-import RandomEventsComponent from "./components/RandomEventsComponent";
-import RanksComponent from "./components/RanksComponent";
-import RarityComponent from "./components/RarityComponent";
-import RebirthsComponent from "./components/RebirthsComponent";
-import SecretRoomsComponent from "./components/SecretRoomsComponent";
-import SeedsComponent from "./components/SeedsComponent";
-import ShovelsComponent from "./components/ShovelsComponent";
-import SprinklersComponent from "./components/SprinklersComponent";
-import UltimatesComponent from "./components/UltimatesComponent";
-import UpgradesComponent from "./components/UpgradesComponent";
-import WateringCansComponent from "./components/WateringCansComponent";
-import WorldsComponent from "./components/WorldsComponent";
-import ZoneFlagsComponent from "./components/ZoneFlagsComponent";
-import ZonesComponent from "./components/ZonesComponent";
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
+import HomePage from "./components/HomePage";
+import Header from "./components/Header";
+import CollectionsIndex from "./components/CollectionsIndex";
+import CollectionConfigIndex from "./components/CollectionConfigIndex";
+import DynamicCollectionConfigData from "./components/DynamicCollectionConfigData";
 
 const App: React.FC = () => {
-  const [collections, setCollections] = useState([]);
-  const [selectedCollection, setSelectedCollection] = useState<string | null>(
-    null,
-  );
-
-  useEffect(() => {
-    const fetchCollections = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollections();
-      console.log("Fetched collections:", response); // Add this line
-      if (response.status === "ok") {
-        setCollections(response.data);
-      } else {
-        console.error("Failed to fetch collections", response); // Add this line
-      }
-    };
-    fetchCollections();
-  }, []);
-
-  const renderComponent = () => {
-    switch (selectedCollection) {
-      case "Achievements":
-        return <AchievementsComponent />;
-      case "Boosts":
-        return <BoostsComponent />;
-      case "Booths":
-        return <BoothsComponent />;
-      case "Boxes":
-        return <BoxesComponent />;
-      case "Buffs":
-        return <BuffsComponent />;
-      case "Charms":
-        return <CharmsComponent />;
-      case "Currency":
-        return <CurrencyComponent />;
-      case "Eggs":
-        return <EggsComponent />;
-      case "Enchants":
-        return <EnchantsComponent />;
-      case "FishingRods":
-        return <FishingRodsComponent />;
-      case "Fruits":
-        return <FruitsComponent />;
-      case "GuildBattles":
-        return <GuildBattlesComponent />;
-      case "Hoverboards":
-        return <HoverboardsComponent />;
-      case "Lootboxes":
-        return <LootboxesComponent />;
-      case "Mastery":
-        return <MasteryComponent />;
-      case "Merchants":
-        return <MerchantsComponent />;
-      case "MiscItems":
-        return <MiscItemsComponent />;
-      case "Pets":
-        return <PetsComponent />;
-      case "Potions":
-        return <PotionsComponent />;
-      case "RandomEvents":
-        return <RandomEventsComponent />;
-      case "Ranks":
-        return <RanksComponent />;
-      case "Rarity":
-        return <RarityComponent />;
-      case "Rebirths":
-        return <RebirthsComponent />;
-      case "SecretRooms":
-        return <SecretRoomsComponent />;
-      case "Seeds":
-        return <SeedsComponent />;
-      case "Shovels":
-        return <ShovelsComponent />;
-      case "Sprinklers":
-        return <SprinklersComponent />;
-      case "Ultimates":
-        return <UltimatesComponent />;
-      case "Upgrades":
-        return <UpgradesComponent />;
-      case "WateringCans":
-        return <WateringCansComponent />;
-      case "Worlds":
-        return <WorldsComponent />;
-      case "ZoneFlags":
-        return <ZoneFlagsComponent />;
-      case "Zones":
-        return <ZonesComponent />;
-      default:
-        return <div>Please select a collection</div>;
-    }
-  };
-
   return (
-    <div>
-      <h1>Pet Simulator 99 Collections</h1>
-      <nav>
-        <ul>
-          {collections.map((collection, index) => (
-            <li key={index} onClick={() => setSelectedCollection(collection)}>
-              {collection}
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div>{renderComponent()}</div>
-    </div>
+    <Router>
+      <Header />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/collections" element={<CollectionsIndex />} />
+        <Route
+          path="/collections/:collectionName"
+          element={<CollectionConfigIndex />}
+        />
+        <Route
+          path="/collections/:collectionName/:configName"
+          element={<DynamicCollectionConfigData />}
+        />
+      </Routes>
+    </Router>
   );
 };
 

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

@@ -1,36 +1,40 @@
-import React, { useEffect, useState } from "react";
-import { AchievementData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const AchievementsComponent: React.FC = () => {
-  const [achievements, setAchievements] = useState<AchievementData[]>([]);
-
-  useEffect(() => {
-    const fetchAchievements = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Achievements");
-      if (response.status === "ok") {
-        setAchievements(response.data);
-      }
-    };
-    fetchAchievements();
-  }, []);
-
+const AchievementsComponent: React.FC<{
+  configData?: CollectionConfigData<"Achievements">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Achievements</h2>
-      <ul>
-        {achievements.map((achievement, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={achievement.configData.Icon}
-              alt={achievement.configData.Name}
-            />
-            <span>{achievement.configData.Name}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Achievements">>
+      collectionName="Achievements"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.Name}</h2>
+          <ImageComponent src={data.Icon} alt={data.Name} />
+          <ul>
+            {data.Tiers.map((tier, index) => (
+              <li key={index}>
+                <h3>{tier.Title}</h3>
+                <p>{tier.Desc.replace("{amount}", tier.Amount.toString())}</p>
+                <p>Difficulty: {tier.Difficulty.Name}</p>
+                <p>Amount: {tier.Amount}</p>
+                <ul>
+                  {tier.Rewards.map((reward, rewardIndex) => (
+                    <li key={rewardIndex}>
+                      Reward ID: {reward.Reward._data.id} Amount:{" "}
+                      {reward.Reward._data._am}
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,37 +1,23 @@
-import React, { useEffect, useState } from "react";
-import { BoostData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const BoostsComponent: React.FC = () => {
-  const [boosts, setBoosts] = useState<BoostData[]>([]);
-
-  useEffect(() => {
-    const fetchBoosts = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Boosts");
-      if (response.status === "ok") {
-        setBoosts(response.data);
-      }
-    };
-    fetchBoosts();
-  }, []);
-
+const BoostsComponent: React.FC<{
+  configData?: CollectionConfigData<"Boosts">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Boosts</h2>
-      <ul>
-        {boosts.map((boost, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={boost.configData.Icon}
-              alt={boost.configData.DisplayName}
-            />
-            <span>{boost.configData.DisplayName}</span>
-            <span>{boost.configData.MaximumPercent}%</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Boosts">>
+      collectionName="Boosts"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <ImageComponent src={data.Icon} alt={data.DisplayName} />
+          <p>Maximum Percent: {data.MaximumPercent}%</p>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,37 +1,31 @@
-import React, { useEffect, useState } from "react";
-import { BoothData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const BoothsComponent: React.FC = () => {
-  const [booths, setBooths] = useState<BoothData[]>([]);
-
-  useEffect(() => {
-    const fetchBooths = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Booths");
-      if (response.status === "ok") {
-        setBooths(response.data);
-      }
-    };
-    fetchBooths();
-  }, []);
-
+const BoothsComponent: React.FC<{
+  configData?: CollectionConfigData<"Booths">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Booths</h2>
-      <ul>
-        {booths.map((booth, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={booth.configData.Icon}
-              alt={booth.configData.DisplayName}
-            />
-            <span>{booth.configData.DisplayName}</span>
-            <span>{booth.configData.Desc}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Booths">>
+      collectionName="Booths"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <ImageComponent src={data.Icon} alt={data.DisplayName} />
+          <p>Description: {data.Desc}</p>
+          <p>Rarity: {data.Rarity.DisplayName}</p>
+          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
+          {data.Hidden && <p>Hidden: Yes</p>}
+          {data.Tradable && <p>Tradable: Yes</p>}
+          {data.OffSale && <p>Off Sale: Yes</p>}
+          {data.ProductId && <p>Product ID: {data.ProductId}</p>}
+          {data.DiamondPrice && <p>Diamond Price: {data.DiamondPrice}</p>}
+          {data.Sittable && <p>Sittable: Yes</p>}
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,37 +1,34 @@
-import React, { useEffect, useState } from "react";
-import { BoxData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const BoxesComponent: React.FC = () => {
-  const [boxes, setBoxes] = useState<BoxData[]>([]);
-
-  useEffect(() => {
-    const fetchBoxes = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Boxes");
-      if (response.status === "ok") {
-        setBoxes(response.data);
-      }
-    };
-    fetchBoxes();
-  }, []);
-
+const BoxesComponent: React.FC<{
+  configData?: CollectionConfigData<"Boxes">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Boxes</h2>
-      <ul>
-        {boxes.map((box, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={box.configData.Icons[index].Icon}
-              alt={box.configData.DisplayName}
-            />
-            <span>{box.configData.DisplayName}</span>
-            <span>{box.configData.Desc}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Boxes">>
+      collectionName="Boxes"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <p>Description: {data.Desc}</p>
+          <p>Capacity: {data.Capacity}</p>
+          <p>Rarity: {data.Rarity.DisplayName}</p>
+          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
+          <h3>Icons:</h3>
+          <ul>
+            {data.Icons.map((icon, index) => (
+              <li key={index}>
+                <ImageComponent src={icon.Icon} alt={icon.Name} />
+                <span>{icon.Name}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,36 +1,24 @@
-import React, { useEffect, useState } from "react";
-import { BuffData, PetSimulator99API } from "ps99-api";
-
-const BuffsComponent: React.FC = () => {
-  const [buffs, setBuffs] = useState<BuffData[]>([]);
-
-  useEffect(() => {
-    const fetchBuffs = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Buffs");
-      if (response.status === "ok") {
-        setBuffs(response.data);
-      }
-    };
-    fetchBuffs();
-  }, []);
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
+const BuffsComponent: React.FC<{
+  configData?: CollectionConfigData<"Buffs">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Buffs</h2>
-      <ul>
-        {buffs.map((buff, index) => (
-          <li key={index}>
-            <span>{buff.configData.DisplayName}</span>
-            <span>Length: {buff.configData.Length}</span>
-            <span>
-              Associated Item Class: {buff.configData.AssociatedItemClass}
-            </span>
-            <span>Associated Item ID: {buff.configData.AssociatedItemID}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Buffs">>
+      collectionName="Buffs"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <p>Associated Item ID: {data.AssociatedItemID}</p>
+          <p>Associated Item Class: {data.AssociatedItemClass}</p>
+          <p>Length: {data.Length} seconds</p>
+          {data.IgnoreInstancePause && <p>Ignore Instance Pause: Yes</p>}
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,45 +1,40 @@
-import React, { useEffect, useState } from "react";
-import { CharmData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const CharmsComponent: React.FC = () => {
-  const [charms, setCharms] = useState<CharmData[]>([]);
-
-  useEffect(() => {
-    const fetchCharms = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Charms");
-      if (response.status === "ok") {
-        setCharms(response.data);
-      }
-    };
-    fetchCharms();
-  }, []);
-
+const CharmsComponent: React.FC<{
+  configData?: CollectionConfigData<"Charms">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Charms</h2>
-      <ul>
-        {charms.map((charm, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={charm.configData.Icon}
-              alt={`Charm ${index + 1}`}
-            />
-            <span>Base Tier: {charm.configData.BaseTier}</span>
-            <span>Max Tier: {charm.configData.MaxTier}</span>
-            {charm.configData.Tiers.map((tier, tierIndex) => (
-              <div key={tierIndex}>
-                <span>Tier {tierIndex + 1}:</span>
-                <span>{tier.DisplayName}</span>
-                <span>Power: {tier.Power}</span>
-                <span>Rarity: {tier.Rarity.DisplayName}</span>
-              </div>
+    <GenericFetchComponent<CollectionConfigData<"Charms">>
+      collectionName="Charms"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.Tiers[0].DisplayName}</h2>
+          <ImageComponent src={data.Icon} alt={data.Tiers[0].DisplayName} />
+          <p>Base Tier: {data.BaseTier}</p>
+          <p>Max Tier: {data.MaxTier}</p>
+          {data.DiminishPowerThreshold && (
+            <p>Diminish Power Threshold: {data.DiminishPowerThreshold}</p>
+          )}
+          {data.Unique && <p>Unique: Yes</p>}
+          <h3>Tiers:</h3>
+          <ul>
+            {data.Tiers.map((tier, index) => (
+              <li key={index}>
+                <p>{tier.DisplayName}</p>
+                <p>Description: {tier.Desc}</p>
+                <p>Power: {tier.Power}</p>
+                <p>Rarity: {tier.Rarity.DisplayName}</p>
+                <p>Rarity Number: {tier.Rarity.RarityNumber}</p>
+              </li>
             ))}
-          </li>
-        ))}
-      </ul>
-    </div>
+          </ul>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { PetSimulator99API, CollectionName } from "ps99-api";
+
+const CollectionConfigIndex: React.FC = () => {
+  const { collectionName } = useParams<{ collectionName: CollectionName }>();
+  const [configNames, setConfigNames] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchConfigNames = async () => {
+      if (!collectionName) return;
+
+      const api = new PetSimulator99API();
+      const response = await api.getCollection(collectionName);
+
+      if (response.status === "ok") {
+        const names = response.data.map((item) => item.configName);
+        setConfigNames(names);
+      } else {
+        setError(response.error.message);
+      }
+    };
+
+    fetchConfigNames();
+  }, [collectionName]);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <div>
+      <h2>{collectionName} Configurations</h2>
+      <ul>
+        <li>
+          <Link to={`/collections/${collectionName}/all`}>All</Link>
+        </li>
+        {configNames.map((configName, index) => (
+          <li key={index}>
+            <Link
+              to={`/collections/${collectionName}/${encodeURIComponent(configName)}`}
+            >
+              {configName}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default CollectionConfigIndex;

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { PetSimulator99API, CollectionName } from "ps99-api";
+
+const CollectionsIndex: React.FC = () => {
+  const [collections, setCollections] = useState<CollectionName[]>([]);
+
+  useEffect(() => {
+    const fetchCollections = async () => {
+      const api = new PetSimulator99API();
+      const response = await api.getCollections();
+      if (response.status === "ok") {
+        setCollections(response.data);
+      }
+    };
+    fetchCollections();
+  }, []);
+
+  return (
+    <div>
+      <h2>Collections</h2>
+      <ul>
+        {collections.map((collection, index) => (
+          <li key={index}>
+            <Link to={`/collections/${collection}`}>{collection}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default CollectionsIndex;