ps99-api 2.3.3 → 2.5.0

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

@@ -1,42 +1,49 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const FishingRodsComponent: React.FC<{
-  configData?: CollectionConfigData<"FishingRods">;
+  configData: CollectionConfigData<"FishingRods">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"FishingRods">>
-      collectionName="FishingRods"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <p>Fishing Chance: {data.FishingChance}</p>
-          <p>Fishing Currency Multiplier: {data.FishingCurrencyMultiplier}</p>
-          <p>Minimum Fishing Time: {data.MinFishingTime} seconds</p>
-          <p>
-            Fishing Game Speed Multiplier: {data.FishingGameSpeedMultiplier}
-          </p>
-          <p>Bar Size: {data.BarSize}</p>
-          <p>Associated Item ID: {data.AssociatedItemID}</p>
-          {data.MerchantSalePrice && (
-            <p>Merchant Sale Price: {data.MerchantSalePrice}</p>
-          )}
-          <h3>Fishing Odds:</h3>
-          <ul>
-            {data.FishingOdds.map((odds, index) => (
-              <li key={index}>
-                {odds[0]}: {odds[1]}%
-              </li>
-            ))}
-          </ul>
+    <div className="game-card" style={{ maxWidth: '500px', margin: '0 auto' }}>
+      <h2>{configData.DisplayName}</h2>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: undefined,
+            name: configData.DisplayName
+          }}
+          rarityColor={null}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Chance:</strong> {configData.FishingChance}%</p>
+        <p><strong>Currency:</strong> {configData.FishingCurrencyMultiplier}x</p>
+        <p><strong>Speed:</strong> {configData.FishingGameSpeedMultiplier}x</p>
+        <p><strong>Bar Size:</strong> {configData.BarSize}</p>
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.1em', marginBottom: '10px' }}>Fishing Odds</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+          {configData.FishingOdds.map((odds, index) => (
+            <span key={index} className="badge" style={{ background: '#e3f2fd', color: '#1565c0', border: '1px solid #90caf9' }}>
+              {odds[0]}: {odds[1]}%
+            </span>
+          ))}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 
+
 export default FishingRodsComponent;

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

@@ -1,12 +1,49 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useOnlineStatus } from "../hooks/useOnlineStatus";
 
 const Footer: React.FC = () => {
+  const isOnline = useOnlineStatus();
+  const [lastUpdate, setLastUpdate] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const updateLastUpdate = () => {
+    setLastUpdate(new Date().toLocaleString());
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      // Simulate a fetch call to update lastUpdate time
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      updateLastUpdate();
+      setLoading(false);
+    };
+
+    fetchData();
+
+    window.addEventListener("online", updateLastUpdate);
+    window.addEventListener("offline", updateLastUpdate);
+
+    return () => {
+      window.removeEventListener("online", updateLastUpdate);
+      window.removeEventListener("offline", updateLastUpdate);
+    };
+  }, []);
+
   return (
-    <footer
-      style={{ textAlign: "center", padding: "1em", background: "#f8f9fa" }}
-    >
-      <div>
-        <a href="https://badge.fury.io/js/ps99-api">
+    <footer className="game-footer">
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: "1em",
+        }}
+      >
+        <a
+          href="https://badge.fury.io/js/ps99-api"
+          style={{ display: "flex", alignItems: "center" }}
+        >
           <img
             src="https://badge.fury.io/js/ps99-api.svg"
             alt="npm version"
@@ -14,25 +51,45 @@ const Footer: React.FC = () => {
           />
         </a>
         &nbsp;
-        <a href="https://github.com/joekiller/node-ps99-api">
+        <a
+          href="https://github.com/joekiller/node-ps99-api"
+          style={{ display: "flex", alignItems: "center" }}
+        >
           <img
             src="https://img.shields.io/badge/source-github-blue?logo=github"
             alt="GitHub source"
             height="18"
           />
         </a>
+        &nbsp;
+        <div style={{ display: "flex", alignItems: "center", height: "18px" }}>
+          {isOnline ? (
+            <span style={{ color: "green", lineHeight: "18px" }}>● Online</span>
+          ) : (
+            <span style={{ color: "red", lineHeight: "18px" }}>● Offline</span>
+          )}
+        </div>
+      </div>
+      <div style={{ marginBottom: "1em" }}>
+        {loading ? (
+          <span>♻️ Loading...</span>
+        ) : (
+          <span>Last update: {lastUpdate}</span>
+        )}
+      </div>
+      <div>
+        <p>
+          &copy; {new Date().getFullYear()} Joseph "
+          <a
+            href="https://joekiller.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            joekiller
+          </a>
+          " Lawson. All rights reserved.
+        </p>
       </div>
-      <p>
-        &copy; {new Date().getFullYear()} Joseph "
-        <a
-          href="https://joekiller.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          joekiller
-        </a>
-        " Lawson. All rights reserved.
-      </p>
     </footer>
   );
 };

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

@@ -1,35 +1,51 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const FruitsComponent: React.FC<{
-  configData?: CollectionConfigData<"Fruits">;
+  configData: CollectionConfigData<"Fruits">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Fruits">>
-      collectionName="Fruits"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <p>Duration: {data.Duration} seconds</p>
-          <p>Rarity: {data.Rarity.DisplayName}</p>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          {data.Desc && <p>Description: {data.Desc}</p>}
-          {data.IgnoreFruitMachine && <p>Ignore Fruit Machine: Yes</p>}
-          <h3>Boosts:</h3>
-          <ul>
-            {data.Boost.map((boost, index) => (
-              <li key={index}>
-                {boost.Type}: {boost.Amount}
-              </li>
-            ))}
-          </ul>
+    <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>Duration: {configData.Duration}s</p>
+        {configData.Desc && <p>{configData.Desc}</p>}
+        {configData.IgnoreFruitMachine && <p>Ignore Fruit Machine</p>}
+      </div>
+      <div style={{ marginTop: '15px' }}>
+        <h3 style={{ textAlign: 'center', fontSize: '1.1em' }}>Boosts</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+          {configData.Boost.map((boost, index) => (
+            <span key={index} style={{
+              background: '#e8f5e9',
+              color: '#2e7d32',
+              padding: '5px 10px',
+              borderRadius: '12px',
+              fontSize: '0.9em',
+              fontWeight: 'bold',
+              border: '1px solid #a5d6a7'
+            }}>
+              {boost.Type}: {boost.Amount}
+            </span>
+          ))}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

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

@@ -1,45 +1,55 @@
 import React, { useEffect, useState, ReactNode } from "react";
-import { useParams } from "react-router-dom";
 import { PetSimulator99API, ApiResponseBody, CollectionName } from "ps99-api";
 
 interface GenericFetchComponentProps<T> {
   collectionName: CollectionName;
+  configName: string;
   render: (data: T) => ReactNode;
-  configData?: T;
 }
 
 export const GenericFetchComponent = <T,>({
   collectionName,
+  configName,
   render,
-  configData,
 }: GenericFetchComponentProps<T>) => {
-  const { configName } = useParams<{ configName: string }>();
-  const [data, setData] = useState<T | null>(configData || null);
+  const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (configData) return;
+    let isMounted = true;
 
     const fetchData = async () => {
-      if (!configName) return;
-      const api = new PetSimulator99API();
-      const response: ApiResponseBody<any[]> =
-        await api.getCollection(collectionName);
-      if (response.status === "ok") {
-        const item = response.data.find(
-          (item) => item.configName === configName,
-        );
-        if (item) {
-          setData(item.configData);
-        } else {
-          setError("Configuration not found");
+      try {
+        const api = new PetSimulator99API();
+        const response: ApiResponseBody<any[]> =
+          await api.getCollection(collectionName);
+        if (isMounted) {
+          if (response.status === "ok") {
+            const item = response.data.find(
+              (item) => item.configName === configName,
+            );
+            if (item) {
+              setData(item.configData);
+            } else {
+              setError("Configuration not found");
+            }
+          } else {
+            setError(response.error.message);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message);
         }
-      } else {
-        setError(response.error.message);
       }
     };
+
     fetchData();
-  }, [collectionName, configName, configData]);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [collectionName, configName]);
 
   if (error) {
     return <div>Error: {error}</div>;
@@ -49,5 +59,13 @@ export const GenericFetchComponent = <T,>({
     return <div>Loading...</div>;
   }
 
-  return <div>{render(data)}</div>;
+  return (
+    <div style={{
+      width: '100%',
+      padding: '20px',
+      boxSizing: 'border-box'
+    }}>
+      {render(data)}
+    </div>
+  );
 };

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

@@ -1,75 +1,103 @@
 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 { 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: CollectionConfigData<"GuildBattles">;
 }> = ({ configData }) => {
+  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;
+    }
+
+    // Try to resolve the item using the hook
+    const itemData = resolveItem(id, pt);
+    const rarityColor = itemData?.rarity ? getRarityColor(itemData.rarity) : null;
+
+    return (
+      <ItemCard
+        key={index}
+        id={id}
+        amount={amount}
+        label={id}
+        tn={pt}
+        itemData={itemData}
+        rarityColor={rarityColor}
+      />
+    );
+  };
+
   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" }}>
+      <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>}
+
+      <h3>Placement Rewards:</h3>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1em' }}>
+        {configData.PlacementRewards?.map((reward, index) => (
+          <div key={index} style={{
+            flex: '1 1 300px', // Allow flex but with base width
+            maxWidth: '350px',
+            margin: '0 auto'
+          }}>
+            {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>
+
+      <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',
+                }}>
+                  {renderRewardItem(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/Header.tsx

@@ -6,22 +6,12 @@ const Header: React.FC = () => {
   const pathnames = location.pathname.split("/").filter((x) => x);
 
   return (
-    <nav
-      style={{
-        padding: "1em",
-        background: "#f8f9fa",
-        borderBottom: "1px solid #e7e7e7",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-      }}
-    >
+    <nav className="game-header">
       <div style={{ display: "flex", alignItems: "center" }}>
         <Link
           to="/"
           style={{
             textDecoration: "none",
-            color: "#007bff",
             display: "flex",
             alignItems: "center",
           }}
@@ -29,35 +19,13 @@ const Header: React.FC = () => {
           <img
             src="/node-ps99-api/icons/icon-192x192.png"
             alt="Home"
-            style={{ width: "40px", height: "40px", marginRight: "0.5em" }}
+            style={{ width: "40px", height: "40px", marginRight: "0.5em", border: "2px solid white", borderRadius: "50%" }}
           />
         </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
-            </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>
       </div>
-      <h1 style={{ margin: 0 }}>
-        <Link to="/" style={{ textDecoration: "none", color: "#007bff" }}>
-          Pet Simulator 99 API
+      <h1 style={{ margin: 0, fontSize: '1.5rem', color: 'white' }}>
+        <Link to="/">
+          Pet Simulator 99
         </Link>
       </h1>
     </nav>

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

@@ -3,22 +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 data.</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={{ 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>
+
+      <div style={{ display: "flex", justifyContent: "center", gap: "20px" }}>
+        <Link
+          to="/collections"
+          className="game-button"
+        >
+          Collections
+        </Link>
+      </div>
     </div>
   );
 };