ps99-api 2.3.2 → 2.4.0

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

@@ -1,75 +1,96 @@
 import React from "react";
-import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
+import { CollectionConfigData, GuildBattlePlacementReward, GuildBattleRewardItem } from "ps99-api";
+import DynamicCollectionConfigData from "./DynamicCollectionConfigData";
+import PetsComponent from "./PetsComponent";
+
+const rewardTypes = ["Clan Gift", "Booth", "Hoverboard", "Pet"];
 
 const GuildBattlesComponent: React.FC<{
-  configData?: CollectionConfigData<"GuildBattles">;
+  configData: CollectionConfigData<"GuildBattles">;
 }> = ({ configData }) => {
+  const renderRewardComponent = (reward: GuildBattlePlacementReward | GuildBattleRewardItem, index: number) => {
+    const rewardType = rewardTypes[index % rewardTypes.length];
+
+    let id: string;
+    let pt: number | undefined;
+
+    if ("Item" in reward) { // GuildBattlePlacementReward
+      id = reward.Item._data.id;
+      pt = reward.Item._data.pt;
+    } else { // GuildBattleRewardItem
+      id = reward._data.id;
+    }
+
+    if (id.startsWith("Huge")) {
+      return (
+        <DynamicCollectionConfigData
+          collectionName="Pets"
+          configName={id}
+          render={(configData: CollectionConfigData<"Pets">) => <PetsComponent configData={configData} displayType="specific" pt={pt} />}
+        />
+      );
+    } else if (id.startsWith("Exclusive Egg")) {
+      return <DynamicCollectionConfigData collectionName="Eggs" configName={id} />;
+    }
+
+    switch (rewardType) {
+      case "Clan Gift":
+        return <DynamicCollectionConfigData collectionName="Lootboxes" configName="Clan Gift" />;
+      case "Booth":
+        return <DynamicCollectionConfigData collectionName="Booths" configName={`Booth | ${id}`} />;
+      case "Hoverboard":
+        return <DynamicCollectionConfigData collectionName="Hoverboards" configName={`Hoverboard | ${id}`} />;
+      default:
+        return <p><strong>Item ID:</strong> {id}</p>;
+    }
+  };
+
   return (
-    <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>
+    <div style={{ padding: "1em", border: "1px solid #ccc", borderRadius: "8px", marginBottom: "2em" }}>
+      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>{configData.Title}</h2>
+      <p><strong>Start Time:</strong> {new Date(configData.StartTime * 1000).toLocaleString()}</p>
+      <p><strong>Finish Time:</strong> {new Date(configData.FinishTime * 1000).toLocaleString()}</p>
+      {configData.HasGoals && <p><strong>Has Goals:</strong> Yes</p>}
+
+      <h3>Placement Rewards:</h3>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1em' }}>
+        {configData.PlacementRewards?.map((reward, index) => (
+          <div key={index} style={{
+            border: '1px solid #ccc',
+            borderRadius: '8px',
+            padding: '1em',
+            flex: '1 1 calc(33% - 1em)',
+            boxSizing: 'border-box',
+          }}>
+            {renderRewardComponent(reward, index)}
+            <p><strong>Best:</strong> {reward.Best}</p>
+            <p><strong>Worst:</strong> {reward.Worst}</p>
+          </div>
+        ))}
+      </div>
+
+      <h3>Rewards:</h3>
+      {["Gold", "Silver", "Bronze", "Good"].map(tier => (
+        configData.Rewards[tier]?.length > 0 && (
+          <div key={tier}>
+            <h4>{tier}</h4>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1em' }}>
+              {configData.Rewards[tier].map((reward, index) => (
+                <div key={index} style={{
+                  border: '1px solid #ccc',
+                  borderRadius: '8px',
+                  padding: '1em',
+                  flex: '1 1 calc(33% - 1em)',
+                  boxSizing: 'border-box',
+                }}>
+                  {renderRewardComponent(reward, index)}
+                </div>
               ))}
-            </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>
-        </div>
-      )}
-    />
+        )
+      ))}
+    </div>
   );
 };
 

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

@@ -5,7 +5,9 @@ const HomePage: React.FC = () => {
   return (
     <div style={{ textAlign: "center", padding: "2em" }}>
       <h1>Welcome to Pet Simulator 99 API</h1>
-      <p>Your one-stop solution for accessing all Pet Simulator 99 data.</p>
+      <p>
+        Your one-stop solution for accessing all Pet Simulator 99 configData.
+      </p>
       <p>Select a collection to get started:</p>
       <Link
         to="/collections"

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

@@ -1,46 +1,110 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const HoverboardsComponent: React.FC<{
-  configData?: CollectionConfigData<"Hoverboards">;
+  configData: CollectionConfigData<"Hoverboards">;
 }> = ({ configData }) => {
   return (
-    <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>
-      )}
-    />
+    <div
+      style={{
+        padding: "1em",
+        border: "1px solid #ccc",
+        borderRadius: "8px",
+        backgroundColor: "#f9f9f9",
+      }}
+    >
+      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
+        {configData.DisplayName}
+      </h2>
+      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+      <p>
+        <strong>Description:</strong> {configData.Desc}
+      </p>
+      <p>
+        <strong>Rarity:</strong> {configData.Rarity.DisplayName}
+      </p>
+      <p>
+        <strong>Rarity Number:</strong> {configData.Rarity.RarityNumber}
+      </p>
+      {configData.Tradable && (
+        <p>
+          <strong>Tradable:</strong> Yes
+        </p>
+      )}
+      {configData.CanBeShiny && (
+        <p>
+          <strong>Can Be Shiny:</strong> Yes
+        </p>
+      )}
+      {configData.HoverHeight && (
+        <p>
+          <strong>Hover Height:</strong> {configData.HoverHeight}
+        </p>
+      )}
+      {configData.RotationLimit && (
+        <p>
+          <strong>Rotation Limit:</strong> {configData.RotationLimit}
+        </p>
+      )}
+      {configData.ProductId && (
+        <p>
+          <strong>Product ID:</strong> {configData.ProductId}
+        </p>
+      )}
+      {configData.Animation && (
+        <p>
+          <strong>Animation:</strong> {configData.Animation}
+        </p>
+      )}
+      {configData.BobRate && (
+        <p>
+          <strong>Bob Rate:</strong> {configData.BobRate}
+        </p>
+      )}
+      {configData.PitchScale && (
+        <p>
+          <strong>Pitch Scale:</strong> {configData.PitchScale}
+        </p>
+      )}
+      {configData.MaxRoll && (
+        <p>
+          <strong>Max Roll:</strong> {configData.MaxRoll}
+        </p>
+      )}
+      {configData.DefaultJumpSpeedBoost && (
+        <p>
+          <strong>Default Jump Speed Boost:</strong>{" "}
+          {configData.DefaultJumpSpeedBoost}
+        </p>
+      )}
+      {configData.IdleVolumeSpeedScale && (
+        <p>
+          <strong>Idle Volume Speed Scale:</strong>{" "}
+          {configData.IdleVolumeSpeedScale}
+        </p>
+      )}
+      {configData.IdlePitchScale && (
+        <p>
+          <strong>Idle Pitch Scale:</strong> {configData.IdlePitchScale}
+        </p>
+      )}
+      {configData.BlockcastScale && (
+        <p>
+          <strong>Blockcast Scale:</strong> {configData.BlockcastScale}
+        </p>
+      )}
+      {configData.SkateMode && (
+        <p>
+          <strong>Skate Mode:</strong> Yes
+        </p>
+      )}
+      {configData.IdleVolume && (
+        <p>
+          <strong>Idle Volume:</strong> {configData.IdleVolume}
+        </p>
+      )}
+    </div>
   );
 };
 

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

@@ -1,25 +1,18 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const LootboxesComponent: React.FC<{
-  configData?: CollectionConfigData<"Lootboxes">;
+  configData: CollectionConfigData<"Lootboxes">;
 }> = ({ configData }) => {
   return (
-    <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>
-      )}
-    />
+    <div>
+      <h2>{configData.DisplayName}</h2>
+      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+      <p>Description: {configData.Desc}</p>
+      <p>Rarity: {configData.Rarity.DisplayName}</p>
+      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
+    </div>
   );
 };
 

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

@@ -1,10 +1,9 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const MasteryComponent: React.FC<{
-  configData?: CollectionConfigData<"Mastery">;
+  configData: CollectionConfigData<"Mastery">;
 }> = ({ configData }) => {
   const renderPerks = (perks: any) => {
     return Object.entries(perks).map(
@@ -25,31 +24,25 @@ const MasteryComponent: React.FC<{
   };
 
   return (
-    <GenericFetchComponent<CollectionConfigData<"Mastery">>
-      collectionName="Mastery"
-      configData={configData}
-      render={(data) => (
+    <div>
+      <h2>{configData.Name}</h2>
+      <ImageComponent src={configData.Icon} alt={configData.Name} />
+      <p>Description: {configData.Desc}</p>
+      {configData.ToggleablePerks && (
         <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>
+          <h3>Toggleable Perks</h3>
+          {Object.entries(configData.ToggleablePerks).map(([perk, value]) => (
+            <p key={perk}>
+              {perk}: {value ? "Enabled" : "Disabled"}
+            </p>
+          ))}
         </div>
       )}
-    />
+      <div>
+        <h3>Perks</h3>
+        {renderPerks(configData.Perks)}
+      </div>
+    </div>
   );
 };
 

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

@@ -1,9 +1,8 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
-const MerchantComponent: React.FC<{
-  configData?: CollectionConfigData<"Merchants">;
+const MerchantsComponent: React.FC<{
+  configData: CollectionConfigData<"Merchants">;
 }> = ({ configData }) => {
   const renderStockRange = (stockRange: number[][] | undefined) => {
     if (!stockRange) return null;
@@ -17,29 +16,23 @@ const MerchantComponent: React.FC<{
   };
 
   return (
-    <GenericFetchComponent<CollectionConfigData<"Merchants">>
-      collectionName="Merchants"
-      configData={configData}
-      render={(data) => (
+    <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)}
+      {configData.SlotRespectLevels && (
         <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>
-          )}
+          <h3>Slot Respect Levels</h3>
+          <p>{configData.SlotRespectLevels.join(", ")}</p>
         </div>
       )}
-    />
+    </div>
   );
 };
 
-export default MerchantComponent;
+export default MerchantsComponent;

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

@@ -1,36 +1,43 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const MiscItemsComponent: React.FC<{
-  configData?: CollectionConfigData<"MiscItems">;
+  configData: CollectionConfigData<"MiscItems">;
 }> = ({ configData }) => {
   return (
-    <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={data.AltIcon}
-              alt={`${data.DisplayName} (Alternate)`}
-            />
-          )}
-          <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>
+    <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)`}
+        />
       )}
-    />
+      <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>
   );
 };