ps99-api 1.2.0 → 2.0.0

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

@@ -1,45 +1,75 @@
-import React, { useEffect, useState } from "react";
-import { GuildBattleData, PetSimulator99API } from "ps99-api";
-
-const GuildBattlesComponent: React.FC = () => {
-  const [guildBattles, setGuildBattles] = useState<GuildBattleData[]>([]);
-
-  useEffect(() => {
-    const fetchGuildBattles = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("GuildBattles");
-      if (response.status === "ok") {
-        setGuildBattles(response.data);
-      }
-    };
-    fetchGuildBattles();
-  }, []);
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
+const GuildBattlesComponent: React.FC<{
+  configData?: CollectionConfigData<"GuildBattles">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Guild Battles</h2>
-      <ul>
-        {guildBattles.map((battle, index) => (
-          <li key={index}>
-            <span>Title: {battle.configData.Title}</span>
-            <span>
-              Start Time:{" "}
-              {new Date(battle.configData.StartTime).toLocaleString()}
-            </span>
-            <span>
-              Finish Time:{" "}
-              {new Date(battle.configData.FinishTime).toLocaleString()}
-            </span>
-            <span>
-              Rewards:{" "}
-              {battle.configData.Rewards.Gold.map(
-                (reward) => reward._data.id,
-              ).join(", ")}
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"GuildBattles">>
+      collectionName="GuildBattles"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.Title}</h2>
+          <p>Start Time: {new Date(data.StartTime * 1000).toLocaleString()}</p>
+          <p>
+            Finish Time: {new Date(data.FinishTime * 1000).toLocaleString()}
+          </p>
+          {data.HasGoals && <p>Has Goals: Yes</p>}
+          <h3>Placement Rewards:</h3>
+          <ul>
+            {data.PlacementRewards?.map((reward, index) => (
+              <li key={index}>
+                <p>Item ID: {reward.Item._data.id}</p>
+                {reward.Item._data.pt && <p>Points: {reward.Item._data.pt}</p>}
+                <p>Best: {reward.Best}</p>
+                <p>Worst: {reward.Worst}</p>
+              </li>
+            ))}
+          </ul>
+          <h3>Rewards:</h3>
+          <div>
+            <h4>Gold:</h4>
+            <ul>
+              {data.Rewards.Gold.map((reward, index) => (
+                <li key={index}>
+                  <p>Item ID: {reward._data.id}</p>
+                </li>
+              ))}
+            </ul>
+            <h4>Silver:</h4>
+            <ul>
+              {data.Rewards.Silver.map((reward, index) => (
+                <li key={index}>
+                  <p>Item ID: {reward._data.id}</p>
+                </li>
+              ))}
+            </ul>
+            <h4>Bronze:</h4>
+            <ul>
+              {data.Rewards.Bronze.map((reward, index) => (
+                <li key={index}>
+                  <p>Item ID: {reward._data.id}</p>
+                </li>
+              ))}
+            </ul>
+            {data.Rewards.Good && (
+              <div>
+                <h4>Good:</h4>
+                <ul>
+                  {data.Rewards.Good.map((reward, index) => (
+                    <li key={index}>
+                      <p>Item ID: {reward._data.id}</p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { useLocation, Link } from "react-router-dom";
+
+const Header: React.FC = () => {
+  const location = useLocation();
+  const pathnames = location.pathname.split("/").filter((x) => x);
+
+  return (
+    <nav>
+      <ol>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        {pathnames.map((value, index) => {
+          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+          return (
+            <li key={to}>
+              <Link to={to}>{decodeURIComponent(value)}</Link>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const HomePage: React.FC = () => {
+  return (
+    <div>
+      <h1>Welcome to Pet Simulator 99 API</h1>
+      <p>Select a collection to get started:</p>
+      <Link to="/collections">View Collections</Link>
+    </div>
+  );
+};
+
+export default HomePage;

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

@@ -1,37 +1,46 @@
-import React, { useEffect, useState } from "react";
-import { HoverboardData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const HoverboardsComponent: React.FC = () => {
-  const [hoverboards, setHoverboards] = useState<HoverboardData[]>([]);
-
-  useEffect(() => {
-    const fetchHoverboards = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Hoverboards");
-      if (response.status === "ok") {
-        setHoverboards(response.data);
-      }
-    };
-    fetchHoverboards();
-  }, []);
-
+const HoverboardsComponent: React.FC<{
+  configData?: CollectionConfigData<"Hoverboards">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Hoverboards</h2>
-      <ul>
-        {hoverboards.map((hoverboard, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={hoverboard.configData.Icon}
-              alt={hoverboard.configData.DisplayName}
-            />
-            <span>{hoverboard.configData.DisplayName}</span>
-            <span>{hoverboard.configData.Desc}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Hoverboards">>
+      collectionName="Hoverboards"
+      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.Tradable && <p>Tradable: Yes</p>}
+          {data.CanBeShiny && <p>Can Be Shiny: Yes</p>}
+          {data.HoverHeight && <p>Hover Height: {data.HoverHeight}</p>}
+          {data.RotationLimit && <p>Rotation Limit: {data.RotationLimit}</p>}
+          {data.ProductId && <p>Product ID: {data.ProductId}</p>}
+          {data.Animation && <p>Animation: {data.Animation}</p>}
+          {data.BobRate && <p>Bob Rate: {data.BobRate}</p>}
+          {data.PitchScale && <p>Pitch Scale: {data.PitchScale}</p>}
+          {data.MaxRoll && <p>Max Roll: {data.MaxRoll}</p>}
+          {data.DefaultJumpSpeedBoost && (
+            <p>Default Jump Speed Boost: {data.DefaultJumpSpeedBoost}</p>
+          )}
+          {data.IdleVolumeSpeedScale && (
+            <p>Idle Volume Speed Scale: {data.IdleVolumeSpeedScale}</p>
+          )}
+          {data.IdlePitchScale && (
+            <p>Idle Pitch Scale: {data.IdlePitchScale}</p>
+          )}
+          {data.BlockcastScale && <p>Blockcast Scale: {data.BlockcastScale}</p>}
+          {data.SkateMode && <p>Skate Mode: Yes</p>}
+          {data.IdleVolume && <p>Idle Volume: {data.IdleVolume}</p>}
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -6,41 +6,59 @@ interface ImageProps {
   alt: string;
 }
 
-const imageCache = new Map<string, string>();
+const MAX_CONCURRENT_REQUESTS = 5;
+let currentRequests = 0;
+const queue: (() => void)[] = [];
+
+const processQueue = () => {
+  if (queue.length > 0 && currentRequests < MAX_CONCURRENT_REQUESTS) {
+    const nextRequest = queue.shift();
+    if (nextRequest) {
+      currentRequests++;
+      nextRequest();
+    }
+  }
+};
 
 const ImageComponent: React.FC<ImageProps> = ({ src, alt }) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchImage = async () => {
-      if (imageCache.has(src)) {
-        setImageUrl(imageCache.get(src)!);
-      } else {
-        try {
-          const api = new PetSimulator99API();
-          const response = await api.getImage(src);
-          const imageBlob = new Blob([response], { type: "image/png" });
-          const imageUrl = URL.createObjectURL(imageBlob);
-          imageCache.set(src, imageUrl);
-          setImageUrl(imageUrl);
-        } catch (error) {
-          console.error("Error fetching image:", error);
-        }
+      try {
+        const api = new PetSimulator99API();
+        const imageBlob = await api.getImage(src);
+        const imageUrl = URL.createObjectURL(new Blob([imageBlob], { type: "image/png" }));
+        setImageUrl(imageUrl);
+      } catch (error) {
+        setError("Error fetching image");
+        console.error("Error fetching image:", error);
+      } finally {
+        currentRequests--;
+        processQueue();
       }
     };
 
-    fetchImage();
+    const load = () => {
+      fetchImage();
+    };
+
+    queue.push(load);
+    processQueue();
 
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
       }
     };
-  }, [src]);
+  }, [src, imageUrl]);
+
+  if (error) {
+    return <div>{error}</div>;
+  }
 
-  return (
-    <div>{imageUrl ? <img src={imageUrl} alt={alt} /> : <p>Loading...</p>}</div>
-  );
+  return <div>{imageUrl ? <img src={imageUrl} alt={alt} /> : <p>Loading...</p>}</div>;
 };
 
 export default ImageComponent;

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

@@ -1,37 +1,25 @@
-import React, { useEffect, useState } from "react";
-import { LootboxData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const LootboxesComponent: React.FC = () => {
-  const [lootboxes, setLootboxes] = useState<LootboxData[]>([]);
-
-  useEffect(() => {
-    const fetchLootboxes = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Lootboxes");
-      if (response.status === "ok") {
-        setLootboxes(response.data);
-      }
-    };
-    fetchLootboxes();
-  }, []);
-
+const LootboxesComponent: React.FC<{
+  configData?: CollectionConfigData<"Lootboxes">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Lootboxes</h2>
-      <ul>
-        {lootboxes.map((lootbox, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={lootbox.configData.Icon}
-              alt={lootbox.configData.DisplayName}
-            />
-            <span>{lootbox.configData.DisplayName}</span>
-            <span>{lootbox.configData.Desc}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Lootboxes">>
+      collectionName="Lootboxes"
+      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>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,37 +1,55 @@
-import React, { useEffect, useState } from "react";
-import { MasteryData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const MasteryComponent: React.FC = () => {
-  const [mastery, setMastery] = useState<MasteryData[]>([]);
-
-  useEffect(() => {
-    const fetchMastery = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Mastery");
-      if (response.status === "ok") {
-        setMastery(response.data);
-      }
-    };
-    fetchMastery();
-  }, []);
+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>}
+            </div>
+          ))}
+        </div>
+      ),
+    );
+  };
 
   return (
-    <div>
-      <h2>Mastery</h2>
-      <ul>
-        {mastery.map((item, index) => (
-          <li key={index}>
-            <ImageComponent
-              src={item.configData.Icon}
-              alt={item.configData.Name}
-            />
-            <span>{item.configData.Name}</span>
-            <span>{item.configData.Desc}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Mastery">>
+      collectionName="Mastery"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.Name}</h2>
+          <ImageComponent src={data.Icon} alt={data.Name} />
+          <p>Description: {data.Desc}</p>
+          {data.ToggleablePerks && (
+            <div>
+              <h3>Toggleable Perks</h3>
+              {Object.entries(data.ToggleablePerks).map(([perk, value]) => (
+                <p key={perk}>
+                  {perk}: {value ? "Enabled" : "Disabled"}
+                </p>
+              ))}
+            </div>
+          )}
+          <div>
+            <h3>Perks</h3>
+            {renderPerks(data.Perks)}
+          </div>
+        </div>
+      )}
+    />
   );
 };
 

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

@@ -1,34 +1,45 @@
-import React, { useEffect, useState } from "react";
-import { MerchantData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
-const MerchantsComponent: React.FC = () => {
-  const [merchants, setMerchants] = useState<MerchantData[]>([]);
-
-  useEffect(() => {
-    const fetchMerchants = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("Merchants");
-      if (response.status === "ok") {
-        setMerchants(response.data);
-      }
-    };
-    fetchMerchants();
-  }, []);
+const MerchantComponent: React.FC<{
+  configData?: CollectionConfigData<"Merchants">;
+}> = ({ configData }) => {
+  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>
+    ));
+  };
 
   return (
-    <div>
-      <h2>Merchants</h2>
-      <ul>
-        {merchants.map((merchant, index) => (
-          <li key={index}>
-            <span>{merchant.configData.DisplayName}</span>
-            <span>Price Multiplier: {merchant.configData.PriceMult}</span>
-            <span>Refresh Rate: {merchant.configData.RefreshRate}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <GenericFetchComponent<CollectionConfigData<"Merchants">>
+      collectionName="Merchants"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <p>Price Multiplier: {data.PriceMult}</p>
+          <p>Machine Name: {data.MachineName}</p>
+          <p>Refresh Rate: {data.RefreshRate} seconds</p>
+          {data.HideNotification && <p>Notification: Hidden</p>}
+          {data.HideRespect && <p>Respect: Hidden</p>}
+          {data.IsStatic && <p>Static Merchant</p>}
+          {renderStockRange(data.StockRangeByRespectLevel)}
+          {data.SlotRespectLevels && (
+            <div>
+              <h3>Slot Respect Levels</h3>
+              <p>{data.SlotRespectLevels.join(", ")}</p>
+            </div>
+          )}
+        </div>
+      )}
+    />
   );
 };
 
-export default MerchantsComponent;
+export default MerchantComponent;

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

@@ -1,54 +1,36 @@
-import React, { useEffect, useState } from "react";
-import { MiscItemData, PetSimulator99API } from "ps99-api";
+import React from "react";
+import { CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
-import ErrorComponent from "./ErrorComponent";
-
-const MiscItemsComponent: React.FC = () => {
-  const [miscItems, setMiscItems] = useState<MiscItemData[]>([]);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchMiscItems = async () => {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection("MiscItems");
-      if (response.status === "ok") {
-        setMiscItems(response.data);
-      } else {
-        setError(response.error.message);
-      }
-    };
-    fetchMiscItems();
-  }, []);
-
-  if (error) {
-    return <ErrorComponent message={error} />;
-  }
 
+const MiscItemsComponent: React.FC<{
+  configData?: CollectionConfigData<"MiscItems">;
+}> = ({ configData }) => {
   return (
-    <div>
-      <h2>Miscellaneous Items</h2>
-      <ul>
-        {miscItems.map((item, index) => (
-          <li key={index}>
+    <GenericFetchComponent<CollectionConfigData<"MiscItems">>
+      collectionName="MiscItems"
+      configData={configData}
+      render={(data) => (
+        <div>
+          <h2>{data.DisplayName}</h2>
+          <p>Category: {data.Category}</p>
+          <ImageComponent src={data.Icon} alt={data.DisplayName} />
+          {data.AltIcon && (
             <ImageComponent
-              src={item.configData.Icon}
-              alt={item.configData.DisplayName}
+              src={data.AltIcon}
+              alt={`${data.DisplayName} (Alternate)`}
             />
-            <span>{item.configData.DisplayName}</span>
-            <span>Category: {item.configData.Category}</span>
-            <span>Description: {item.configData.Desc}</span>
-            <span>Rarity: {item.configData.Rarity.DisplayName}</span>
-            {item.configData.Tradable && <span>Tradable</span>}
-            {item.configData.AltIcon && (
-              <ImageComponent
-                src={item.configData.AltIcon}
-                alt={`${item.configData.DisplayName} Alternate Icon`}
-              />
-            )}
-          </li>
-        ))}
-      </ul>
-    </div>
+          )}
+          <p>Description: {data.Desc}</p>
+          <p>
+            Rarity: {data.Rarity.DisplayName} (Rarity Number:{" "}
+            {data.Rarity.RarityNumber})
+          </p>
+          {data.Tradable && <p>Tradable: Yes</p>}
+          {!data.Tradable && <p>Tradable: No</p>}
+        </div>
+      )}
+    />
   );
 };