ps99-api 2.3.3 → 2.5.0

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

@@ -1,35 +1,38 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const WorldComponent: React.FC<{
-  configData?: CollectionConfigData<"Worlds">;
+  configData: CollectionConfigData<"Worlds">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Worlds">>
-      collectionName="Worlds"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>World</h2>
-          <h3>{data.MapName}</h3>
-          <p>Spawn ID: {data.SpawnId}</p>
-          <p>World Currency: {data.WorldCurrency}</p>
-          <p>Place ID: {data.PlaceId}</p>
-          <p>World Number: {data.WorldNumber}</p>
-          {data.AdditionalMusic && data.AdditionalMusic.length > 0 && (
-            <div>
-              <h4>Additional Music</h4>
-              <ul>
-                {data.AdditionalMusic.map((music, index) => (
-                  <li key={index}>{music}</li>
-                ))}
-              </ul>
-            </div>
-          )}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', width: '100%' }}>
+        <p><strong>World #:</strong> {configData.WorldNumber}</p>
+        <p><strong>Spawn ID:</strong> {configData.SpawnId}</p>
+        <p><strong>Currency:</strong> {configData.WorldCurrency}</p>
+        <p><strong>Place ID:</strong> {configData.PlaceId}</p>
+      </div>
+
+      {configData.AdditionalMusic && configData.AdditionalMusic.length > 0 && (
+        <div style={{ marginTop: '15px', width: '100%' }}>
+          <h4>Additional Music</h4>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+            {configData.AdditionalMusic.map((music, index) => (
+              <span key={index} style={{
+                background: '#e0f7fa',
+                color: '#006064',
+                padding: '5px 10px',
+                borderRadius: '15px',
+                fontSize: '0.9em',
+                fontWeight: 'bold'
+              }}>
+                {music}
+              </span>
+            ))}
+          </div>
         </div>
       )}
-    />
+    </div>
   );
 };
 

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

@@ -1,29 +1,39 @@
 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 XPPotionsComponent: React.FC<{
-  configData?: CollectionConfigData<"XPPotions">;
+  configData: CollectionConfigData<"XPPotions">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"XPPotions">>
-      collectionName="XPPotions"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <p>Amount: {data.Amount}</p>
-          <p>Description: {data.Desc}</p>
-          <p>Item ID: {data.ItemId}</p>
-          <h3>Rarity</h3>
-          <p>Display Name: {data.Rarity.DisplayName}</p>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          <p>Announce: {data.Rarity.Announce ? "Yes" : "No"}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p style={{ marginBottom: '10px' }}>{configData.Desc}</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <span className="badge">Amount: {configData.Amount}</span>
+          <span className="badge" style={{ background: '#eee', color: '#333' }}>ID: {configData.ItemId}</span>
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

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

@@ -1,32 +1,36 @@
 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 ZoneFlagComponent: React.FC<{
-  configData?: CollectionConfigData<"ZoneFlags">;
+  configData: CollectionConfigData<"ZoneFlags">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"ZoneFlags">>
-      collectionName="ZoneFlags"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Zone Flag</h2>
-          <h3>{data.Name}</h3>
-          <p>Description: {data.Desc}</p>
-          <p>Duration: {data.Duration} seconds</p>
-          <p>Color: {data.Color}</p>
-          <p>
-            Icon: <ImageComponent src={data.Icon} alt={data.Name} />
-          </p>
-          <h4>Rarity</h4>
-          <p>Rarity: {data.Rarity.DisplayName}</p>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          <p>Announce: {data.Rarity.Announce.toString()}</p>
-        </div>
-      )}
-    />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.Name}
+          amount={1}
+          label={configData.Name}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.Name
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        <p style={{ fontWeight: 'bold', marginTop: '5px' }}>Duration: {configData.Duration}s</p>
+      </div>
+    </div>
   );
 };
 

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

@@ -1,88 +1,71 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 
 const ZoneComponent: React.FC<{
-  configData?: CollectionConfigData<"Zones">;
+  configData: CollectionConfigData<"Zones">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Zones">>
-      collectionName="Zones"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Zone</h2>
-          <h3>{data.ZoneName}</h3>
-          <p>Zone Number: {data.ZoneNumber}</p>
-          <p>World Number: {data.WorldNumber}</p>
-          <p>Currency: {data.Currency}</p>
-          <p>Maximum Available Egg: {data.MaximumAvailableEgg}</p>
-          {data.Price && <p>Price: {data.Price}</p>}
-          {data.GateHealth && <p>Gate Health: {data.GateHealth}</p>}
-          {data.TeleportToZoneOnFall && (
-            <p>
-              Teleport to Zone on Fall: {data.TeleportToZoneOnFall.toString()}
-            </p>
-          )}
-          {data.Ambience && <p>Ambience Sound ID: {data.Ambience.SoundId}</p>}
-          {data.QuestsRequired && data.QuestsRequired.length > 0 && (
-            <div>
-              <h4>Quests Required</h4>
-              <ul>
-                {data.QuestsRequired.map((quest, index) => (
-                  <li key={index}>
-                    Type: {quest.Type}, Amount: {quest.Amount}
-                  </li>
-                ))}
-              </ul>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', width: '100%', textAlign: 'left' }}>
+        <p><strong>Zone #:</strong> {configData.ZoneNumber}</p>
+        <p><strong>World #:</strong> {configData.WorldNumber}</p>
+        <p><strong>Currency:</strong> {configData.Currency}</p>
+        <p><strong>Max Egg:</strong> {configData.MaximumAvailableEgg}</p>
+        {configData.Price && <p><strong>Price:</strong> {configData.Price}</p>}
+        {configData.GateHealth && <p><strong>Gate Health:</strong> {configData.GateHealth}</p>}
+        {configData.TeleportToZoneOnFall && (
+          <p><strong>Teleport on Fall:</strong> Yes</p>
+        )}
+        {configData.Ambience && (
+          <p><strong>Ambience ID:</strong> {configData.Ambience.SoundId}</p>
+        )}
+      </div>
+
+      {configData.QuestsRequired && configData.QuestsRequired.length > 0 && (
+        <div style={{ width: '100%', marginTop: '20px' }}>
+          <h4>Quests Required</h4>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', justifyContent: 'center' }}>
+            {configData.QuestsRequired.map((quest, index) => (
+              <div key={index} style={{
+                background: '#f0f0f0',
+                padding: '10px',
+                borderRadius: '8px',
+                border: '1px solid #ddd'
+              }}>
+                <strong>{quest.Type}</strong>: {quest.Amount}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {configData.Lighting && (
+        <div style={{ width: '100%', marginTop: '20px', textAlign: 'left', background: '#f9f9f9', padding: '15px', borderRadius: '8px' }}>
+          <h4 style={{ textAlign: 'center' }}>Lighting Settings</h4>
+          <p>Brightness: {configData.Lighting.Brightness}</p>
+          <p>Clock Time: {configData.Lighting.ClockTime}</p>
+
+          {configData.Lighting.Bloom && (
+            <div style={{ marginTop: '10px' }}>
+              <strong>Bloom:</strong>
+              <span style={{ fontSize: '0.9em', marginLeft: '10px' }}>
+                Enabled: {configData.Lighting.Bloom.Enabled.toString()},
+                Intensity: {configData.Lighting.Bloom.Intensity}
+              </span>
             </div>
           )}
-          {data.Lighting && (
-            <div>
-              <h4>Lighting</h4>
-              <p>Brightness: {data.Lighting.Brightness}</p>
-              <p>Clock Time: {data.Lighting.ClockTime}</p>
-              {data.Lighting.Bloom && (
-                <div>
-                  <h5>Bloom</h5>
-                  <p>Enabled: {data.Lighting.Bloom.Enabled.toString()}</p>
-                  <p>Intensity: {data.Lighting.Bloom.Intensity}</p>
-                  <p>Size: {data.Lighting.Bloom.Size}</p>
-                  <p>Threshold: {data.Lighting.Bloom.Threshold}</p>
-                </div>
-              )}
-              {data.Lighting.ColorCorrection && (
-                <div>
-                  <h5>Color Correction</h5>
-                  <p>
-                    Enabled: {data.Lighting.ColorCorrection.Enabled.toString()}
-                  </p>
-                  <p>Saturation: {data.Lighting.ColorCorrection.Saturation}</p>
-                  <p>Contrast: {data.Lighting.ColorCorrection.Contrast}</p>
-                  <p>Brightness: {data.Lighting.ColorCorrection.Brightness}</p>
-                </div>
-              )}
-              {data.Lighting.Sky && (
-                <div>
-                  <h5>Sky</h5>
-                  <p>Star Count: {data.Lighting.Sky.StarCount}</p>
-                  <p>
-                    Celestial Bodies Shown:{" "}
-                    {data.Lighting.Sky.CelestialBodiesShown.toString()}
-                  </p>
-                  <p>Skybox Up: {data.Lighting.Sky.SkyboxUp}</p>
-                  <p>Skybox Bk: {data.Lighting.Sky.SkyboxBk}</p>
-                  <p>Skybox Dn: {data.Lighting.Sky.SkyboxDn}</p>
-                  <p>Skybox Lf: {data.Lighting.Sky.SkyboxLf}</p>
-                  <p>Skybox Rt: {data.Lighting.Sky.SkyboxRt}</p>
-                  <p>Skybox Ft: {data.Lighting.Sky.SkyboxFt}</p>
-                </div>
-              )}
+
+          {configData.Lighting.Sky && (
+            <div style={{ marginTop: '10px' }}>
+              <strong>Sky:</strong>
+              <span style={{ fontSize: '0.9em', marginLeft: '10px' }}>
+                Stars: {configData.Lighting.Sky.StarCount}
+              </span>
             </div>
           )}
         </div>
       )}
-    />
+    </div>
   );
 };
 

package/example-web/react2/src/constants/collectionIcons.ts

@@ -0,0 +1,29 @@
+export const COLLECTION_ICONS: Record<string, string> = {
+    Pets: "🐱",
+    Eggs: "🥚",
+    Enchants: "📘",
+    Potions: "🧪",
+    Items: "🎒",
+    Hoverboards: "🛹",
+    Booths: "🏪",
+    Ultimates: "🌀",
+    MiscItems: "📦",
+    Keys: "🗝️",
+    Tickets: "🎟️",
+    Charms: "🧿",
+    Fruits: "🍎",
+    Seeds: "🌱",
+    Flags: "🚩",
+    Glitch: "👾",
+    Achievements: "🏆",
+    Boosts: "🚀",
+    Upgrades: "⬆️",
+    Relics: "🗿",
+    Ranks: "📈",
+    RandomEvents: "🎲",
+    SecretRooms: "🔒",
+    Zones: "uq",
+    World: "🌍",
+    Clan: "🛡️",
+    Mastery: "🎓",
+};

package/example-web/react2/src/context/CollectionDataContext.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { PetSimulator99API, Collections, CollectionName } from "ps99-api";
+
+const api = new PetSimulator99API();
+
+type CollectionDataCache = Partial<Record<string, Collections[]>>;
+
+interface CollectionDataContextType {
+    data: CollectionDataCache;
+    fetchCollection: (collectionName: CollectionName) => Promise<void>;
+    isLoading: (collectionName: string) => boolean;
+}
+
+const CollectionDataContext = createContext<CollectionDataContextType | undefined>(undefined);
+
+export const CollectionDataProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [data, setData] = useState<CollectionDataCache>({});
+    const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
+
+    const fetchCollection = useCallback(async (collectionName: CollectionName) => {
+        // If data already exists, don't fetch again unless force refresh is needed (not implemented yet)
+        if (data[collectionName]) {
+            return;
+        }
+
+        if (loadingStates[collectionName]) return; // Already loading
+
+        setLoadingStates(prev => ({ ...prev, [collectionName]: true }));
+
+        try {
+            console.log(`[CollectionDataContext] Fetching ${collectionName}...`);
+            const result = await api.getCollection(collectionName);
+            if (result.status === "ok") {
+                setData(prev => ({ ...prev, [collectionName]: result.data as Collections[] }));
+            } else {
+                console.error(`Status error fetching ${collectionName}:`, result);
+            }
+        } catch (error) {
+            console.error(`Failed to fetch collection ${collectionName}`, error);
+        } finally {
+            setLoadingStates(prev => ({ ...prev, [collectionName]: false }));
+        }
+    }, [data, loadingStates]);
+
+    const isLoading = useCallback((collectionName: string) => {
+        return !!loadingStates[collectionName];
+    }, [loadingStates]);
+
+    return (
+        <CollectionDataContext.Provider value={{ data, fetchCollection, isLoading }}>
+            {children}
+        </CollectionDataContext.Provider>
+    );
+};
+
+export const useCollectionData = () => {
+    const context = useContext(CollectionDataContext);
+    if (!context) {
+        throw new Error('useCollectionData must be used within a CollectionDataProvider');
+    }
+    return context;
+};

package/example-web/react2/src/hooks/useExpandableList.ts

@@ -0,0 +1,38 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export const useExpandableList = (totalItems: number, initialExpanded: boolean = false) => {
+    const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+
+    // Initialize state when totalItems changes or on mount
+    useEffect(() => {
+        if (initialExpanded) {
+            setExpandedIndices(new Set(Array.from({ length: totalItems }, (_, i) => i)));
+        } else {
+            setExpandedIndices(new Set());
+        }
+    }, [totalItems, initialExpanded]);
+
+    const toggle = useCallback((index: number) => {
+        setExpandedIndices(prev => {
+            const next = new Set(prev);
+            if (next.has(index)) {
+                next.delete(index);
+            } else {
+                next.add(index);
+            }
+            return next;
+        });
+    }, []);
+
+    const expandAll = useCallback(() => {
+        setExpandedIndices(new Set(Array.from({ length: totalItems }, (_, i) => i)));
+    }, [totalItems]);
+
+    const collapseAll = useCallback(() => {
+        setExpandedIndices(new Set());
+    }, []);
+
+    const isExpanded = useCallback((index: number) => expandedIndices.has(index), [expandedIndices]);
+
+    return { expandedIndices, toggle, expandAll, collapseAll, isExpanded };
+};