ps99-api 2.4.0 → 2.6.0

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

@@ -1,53 +1,60 @@
 import React from "react";
 import { CollectionConfigData, GuildBattlePlacementReward, GuildBattleRewardItem } from "ps99-api";
 import DynamicCollectionConfigData from "./DynamicCollectionConfigData";
-import PetsComponent from "./PetsComponent";
+import { useItemResolution } from "../hooks/useItemResolution";
+import ItemCard from "./ItemCard";
+import ImageComponent from "./ImageComponent";
+// @ts-ignore
+import placeholderIcon from "../assets/guild_placeholder.png";
 
 const rewardTypes = ["Clan Gift", "Booth", "Hoverboard", "Pet"];
 
 const GuildBattlesComponent: React.FC<{
   configData: CollectionConfigData<"GuildBattles">;
 }> = ({ configData }) => {
-  const renderRewardComponent = (reward: GuildBattlePlacementReward | GuildBattleRewardItem, index: number) => {
-    const rewardType = rewardTypes[index % rewardTypes.length];
+  const { resolveItem, getRarityColor, loading } = useItemResolution();
 
+  if (loading) return <div>Loading data...</div>;
+
+  const renderRewardItem = (reward: GuildBattlePlacementReward | GuildBattleRewardItem, index: number) => {
     let id: string;
+    let amount = 1; // Default amount
     let pt: number | undefined;
 
     if ("Item" in reward) { // GuildBattlePlacementReward
       id = reward.Item._data.id;
       pt = reward.Item._data.pt;
+      amount = (reward.Item._data as any)._am || 1;
     } else { // GuildBattleRewardItem
       id = reward._data.id;
+      amount = (reward._data as any)._am || 1;
     }
 
-    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} />;
-    }
+    // Try to resolve the item using the hook
+    const itemData = resolveItem(id, pt);
+    const rarityColor = itemData?.rarity ? getRarityColor(itemData.rarity) : null;
 
-    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 (
+      <ItemCard
+        key={index}
+        id={id}
+        amount={amount}
+        label={id}
+        tn={pt}
+        itemData={itemData}
+        rarityColor={rarityColor}
+      />
+    );
   };
 
   return (
     <div style={{ padding: "1em", border: "1px solid #ccc", borderRadius: "8px", marginBottom: "2em" }}>
-      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>{configData.Title}</h2>
+      <div style={{ display: "flex", alignItems: "center", gap: "1em", borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
+        <div style={{ width: "64px", height: "64px" }}>
+          <ImageComponent src={(configData as any).Icon || placeholderIcon} alt={configData.Title} />
+        </div>
+        <h2 style={{ margin: 0 }}>{configData.Title}</h2>
+      </div>
       <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>}
@@ -56,15 +63,15 @@ const GuildBattlesComponent: React.FC<{
       <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',
+            flex: '1 1 300px', // Allow flex but with base width
+            maxWidth: '350px',
+            margin: '0 auto'
           }}>
-            {renderRewardComponent(reward, index)}
-            <p><strong>Best:</strong> {reward.Best}</p>
-            <p><strong>Worst:</strong> {reward.Worst}</p>
+            {renderRewardItem(reward, index)}
+            <div style={{ textAlign: 'center', marginTop: '10px', fontSize: '0.9em', color: '#666' }}>
+              <p style={{ margin: '2px 0' }}><strong>Best:</strong> {reward.Best}</p>
+              <p style={{ margin: '2px 0' }}><strong>Worst:</strong> {reward.Worst}</p>
+            </div>
           </div>
         ))}
       </div>
@@ -83,7 +90,7 @@ const GuildBattlesComponent: React.FC<{
                   flex: '1 1 calc(33% - 1em)',
                   boxSizing: 'border-box',
                 }}>
-                  {renderRewardComponent(reward, index)}
+                  {renderRewardItem(reward, index)}
                 </div>
               ))}
             </div>

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

@@ -5,61 +5,48 @@ const Header: React.FC = () => {
   const location = useLocation();
   const pathnames = location.pathname.split("/").filter((x) => x);
 
+  const isCollectionsRoute = location.pathname.startsWith("/collections");
+  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
+
+  React.useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 768);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+
+
+  if (isMobile && isCollectionsRoute) {
+    return null;
+  }
+
   return (
-    <nav
-      style={{
-        padding: "1em",
-        background: "#f8f9fa",
-        borderBottom: "1px solid #e7e7e7",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <Link
-          to="/"
-          style={{
-            textDecoration: "none",
-            color: "#007bff",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <img
-            src="/node-ps99-api/icons/icon-192x192.png"
-            alt="Home"
-            style={{ width: "40px", height: "40px", marginRight: "0.5em" }}
-          />
-        </Link>
-        <ol
-          style={{ display: "flex", listStyle: "none", padding: 0, margin: 0 }}
-        >
-          <li style={{ margin: "0 0.5em" }}>
-            <Link to="/" style={{ textDecoration: "none", color: "#007bff" }}>
-              Home
+    <nav className="game-header" style={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+      <div style={{ display: "flex", alignItems: "center", width: '100%', justifyContent: 'space-between' }}>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <Link
+            to="/"
+            style={{
+              textDecoration: "none",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <img
+              src="/node-ps99-api/icons/icon-192x192.png"
+              alt="Home"
+              style={{ width: "40px", height: "40px", marginRight: "0.5em", border: "2px solid white", borderRadius: "50%" }}
+            />
+          </Link>
+          <h1 style={{ margin: 0, fontSize: '1.5rem', color: 'white', lineHeight: 1 }}>
+            <Link to="/">
+              Pet Simulator 99
             </Link>
-          </li>
-          {pathnames.map((value, index) => {
-            const to = `/${pathnames.slice(0, index + 1).join("/")}`;
-            return (
-              <li key={to} style={{ margin: "0 0.5em" }}>
-                <Link
-                  to={to}
-                  style={{ textDecoration: "none", color: "#007bff" }}
-                >
-                  {decodeURIComponent(value)}
-                </Link>
-              </li>
-            );
-          })}
-        </ol>
+          </h1>
+        </div>
+
+        {/* Placeholder for potential mobile menu burger if needed later */}
       </div>
-      <h1 style={{ margin: 0 }}>
-        <Link to="/" style={{ textDecoration: "none", color: "#007bff" }}>
-          Pet Simulator 99 API
-        </Link>
-      </h1>
     </nav>
   );
 };

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

@@ -3,24 +3,22 @@ import { Link } from "react-router-dom";
 
 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 configData.
+    <div style={{ textAlign: "center", padding: "4em", marginTop: "50px" }}>
+      <h1 style={{ fontSize: "3rem", marginBottom: "0.5em", color: "var(--primary-color)", textShadow: "4px 4px 0px var(--border-color)" }}>
+        Pet Simulator 99
+      </h1>
+      <p style={{ fontSize: "1.2rem", marginBottom: "2em" }}>
+        Explore the world of Pet Simulator 99! Check out all the items, pets, and collections.
       </p>
-      <p>Select a collection to get started:</p>
-      <Link
-        to="/collections"
-        style={{
-          padding: "0.5em 1em",
-          background: "#007bff",
-          color: "#fff",
-          textDecoration: "none",
-          borderRadius: "4px",
-        }}
-      >
-        View Collections
-      </Link>
+
+      <div style={{ display: "flex", justifyContent: "center", gap: "20px" }}>
+        <Link
+          to="/collections"
+          className="game-button"
+        >
+          Collections
+        </Link>
+      </div>
     </div>
   );
 };

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

@@ -1,109 +1,33 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const HoverboardsComponent: React.FC<{
   configData: CollectionConfigData<"Hoverboards">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <ItemCard
+        id={configData.DisplayName}
+        amount={1}
+        label={configData.DisplayName}
+        itemData={{
+          icon: configData.Icon,
+          rarity: configData.Rarity,
+          name: configData.DisplayName
+        }}
+        rarityColor={rarityColor}
+      />
+      <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        {configData.ProductId && <p>ID: {configData.ProductId}</p>}
+        {configData.HoverHeight && <p>Height: {configData.HoverHeight}</p>}
+        <p>Speed: {configData.DefaultJumpSpeedBoost || 'Normal'}</p>
+      </div>
     </div>
   );
 };