ps99-api 2.3.3 → 2.5.0

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

@@ -1,46 +1,34 @@
 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 HoverboardsComponent: React.FC<{
-  configData?: CollectionConfigData<"Hoverboards">;
+  configData: CollectionConfigData<"Hoverboards">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   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={{ 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>
   );
 };
 

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

@@ -1,62 +1,272 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { PetSimulator99API } from "ps99-api";
+import { get, set, del } from "idb-keyval";
 
 interface ImageProps {
-  src: string;
-  alt: string;
+    src: string;
+    alt: string;
+    style?: React.CSSProperties;
 }
 
+// Global Queue State
 const MAX_CONCURRENT_REQUESTS = 5;
-const requestQueue: Array<() => void> = [];
+const MIN_CONCURRENT_REQUESTS = 1;
+let currentConcurrencyLimit = MAX_CONCURRENT_REQUESTS;
+
+interface QueueItem {
+    src: string;
+    resolve: (blob: Blob) => void;
+    reject: (err: any) => void;
+    retries: number;
+}
+
+const requestQueue: QueueItem[] = [];
 let activeRequests = 0;
+let isPaused = false;
+let pauseTimeout: NodeJS.Timeout | null = null;
+let backoffDelay = 2000; // Start at 2s
+let consecutiveErrors = 0;
+
+// Map to dedupe requests: src -> Promise<Blob>
+const pendingRequests = new Map<string, Promise<Blob>>();
 
 const processQueue = () => {
-  if (activeRequests < MAX_CONCURRENT_REQUESTS && requestQueue.length > 0) {
-    const nextRequest = requestQueue.shift();
-    if (nextRequest) {
-      activeRequests++;
-      nextRequest();
+    if (isPaused || activeRequests >= currentConcurrencyLimit || requestQueue.length === 0) {
+        return;
     }
-  }
+
+    const request = requestQueue.shift();
+    if (!request) return;
+
+    activeRequests++;
+    const { src, resolve, reject, retries } = request;
+
+    // Use empty string as baseUrl to force relative paths (which hit the webpack proxy)
+    // This is the "shim" layer making it seamless for the component
+    const api = new PetSimulator99API({ baseUrl: "" });
+
+    api.getImage(src)
+        .then((data: any) => {
+            const blob = new Blob([data], { type: "image/png" });
+            resolve(blob);
+            set(`img-cache-${src}`, blob).catch(err => console.error("Cache set failed", err));
+
+            // Success: Reset backoff and slowly ramp up concurrency
+            consecutiveErrors = 0;
+            backoffDelay = 2000;
+            if (currentConcurrencyLimit < MAX_CONCURRENT_REQUESTS) {
+                currentConcurrencyLimit++;
+            }
+        })
+        .catch((error: any) => {
+            console.error(`[ImageComponent] Failed ${src}`, error);
+
+            // Check for 429 or other rate limit errors
+            const isRateLimit = error?.response?.status === 429 || error?.status === 429;
+
+            if (isRateLimit) {
+                consecutiveErrors++;
+                console.warn(`Rate limit hit (429). Backoff: ${backoffDelay}ms. Concurrency: ${currentConcurrencyLimit}`);
+
+                // Throttle concurrency
+                currentConcurrencyLimit = MIN_CONCURRENT_REQUESTS;
+
+                // Backoff logic
+                handleRateLimit();
+
+                // Retry if under limit
+                if (retries < 3) {
+                    requestQueue.unshift({ ...request, retries: retries + 1 });
+                    return;
+                }
+            }
+            // If not rate limit, or max retries exceeded, reject
+            reject(error);
+        })
+        .finally(() => {
+            activeRequests--;
+            processQueue();
+        });
 };
 
-const ImageComponent: React.FC<ImageProps> = ({ src, alt }) => {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+const handleRateLimit = () => {
+    if (isPaused) return;
+    isPaused = true;
 
-  useEffect(() => {
-    const fetchImage = async () => {
-      const api = new PetSimulator99API();
-      try {
-        const imageBlob = await api.getImage(src);
-        const url = URL.createObjectURL(
-          new Blob([imageBlob], { type: "image/png" }),
-        );
-        setImageUrl(url);
-      } catch (error) {
-        console.error("Error fetching image:", error);
-      } finally {
-        activeRequests--;
+    if (pauseTimeout) clearTimeout(pauseTimeout);
+
+    pauseTimeout = setTimeout(() => {
+        isPaused = false;
+        // Increase backoff for next time (Exponential)
+        backoffDelay = Math.min(backoffDelay * 2, 60000); // Cap at 60s
         processQueue();
-      }
-    };
-
-    const requestImage = () => {
-      fetchImage();
-    };
-
-    requestQueue.push(requestImage);
-    processQueue();
-
-    return () => {
-      if (imageUrl) {
-        URL.revokeObjectURL(imageUrl);
-      }
-    };
-  }, [src]);
-
-  return (
-    <div>{imageUrl ? <img src={imageUrl} alt={alt} /> : <p>Loading...</p>}</div>
-  );
+    }, backoffDelay);
+};
+
+
+// Helper to fetch blob with deduping
+const fetchImageBlob = (src: string): Promise<Blob> => {
+    if (pendingRequests.has(src)) {
+        return pendingRequests.get(src)!;
+    }
+
+    const promise = new Promise<Blob>((resolve, reject) => {
+        requestQueue.push({ src, resolve, reject, retries: 0 });
+        processQueue();
+    }).finally(() => {
+        pendingRequests.delete(src);
+    });
+
+    pendingRequests.set(src, promise);
+    return promise;
+};
+
+const ImageComponent: React.FC<ImageProps> = ({ src, alt, style }) => {
+    // console.log(`[ImageComponent] Mounting for ${src}`); // Commented out to reduce noise, enable if needed
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [hasError, setHasError] = useState<boolean>(false);
+    const mountedRef = useRef(true);
+
+    useEffect(() => {
+        mountedRef.current = true;
+        // Reset state on src change
+        setImageUrl(null);
+        setIsLoading(true);
+        setHasError(false);
+
+        // Check for local assets or full URLs (non-api)
+        if (src.startsWith("/") || src.startsWith("http")) {
+            setImageUrl(src);
+            setIsLoading(false);
+            return;
+        }
+
+        const load = async () => {
+            try {
+                // 1. Try Cache
+                try {
+                    const cached = await get<Blob>(`img-cache-${src}`);
+                    if (cached && cached instanceof Blob) {
+                        if (mountedRef.current) {
+                            const url = URL.createObjectURL(cached);
+                            setImageUrl(url);
+                            setIsLoading(false);
+                            return;
+                        }
+                    } else if (cached) {
+                        await del(`img-cache-${src}`);
+                    }
+                } catch (idbErr) {
+                    // console.error(`[ImageComponent] IDB Error for ${src}:`, idbErr);
+                }
+
+                if (!mountedRef.current) return;
+
+                // 2. Fetch Network
+                const blob = await fetchImageBlob(src);
+                if (mountedRef.current) {
+                    if (blob instanceof Blob) {
+                        const url = URL.createObjectURL(blob);
+                        setImageUrl(url);
+                        setIsLoading(false);
+                    } else {
+                        console.error("Fetched data is not a Blob:", blob);
+                        setHasError(true);
+                        setIsLoading(false);
+                    }
+                }
+            } catch (err: any) {
+                if (mountedRef.current) {
+                    // console.error(`[ImageComponent] Load failed for ${src}:`, err);
+                    setHasError(true);
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        load();
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [src]);
+
+    if (hasError) {
+        return (
+            <div style={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0,0,0,0.05)',
+                borderRadius: '8px',
+                color: '#aaa',
+                fontSize: '1.5rem',
+                fontWeight: 'bold',
+                ...style // Preserve layout styles
+            }}>
+                ?
+            </div>
+        );
+    }
+
+    if (imageUrl) {
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                animation: "fadeIn 0.3s ease-in-out", // Smooth fade-in
+            }}>
+                <style>{`
+                    @keyframes fadeIn {
+                        from { opacity: 0; transform: scale(0.95); }
+                        to { opacity: 1; transform: scale(1); }
+                    }
+                `}</style>
+                <img
+                    src={imageUrl}
+                    alt={alt}
+                    style={{
+                        maxWidth: "100%",
+                        maxHeight: "100%",
+                        objectFit: "contain",
+                        borderRadius: "8px",
+                        ...style
+                    }}
+                    onError={() => {
+                        setImageUrl(null);
+                        setHasError(true);
+                    }}
+                />
+            </div>
+        );
+    }
+
+    // Loading State (Skeleton)
+    return (
+        <div style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#eee',
+            borderRadius: '8px',
+            animation: 'pulse 1.5s infinite ease-in-out',
+            ...style
+        }}>
+            <style>{`
+                @keyframes pulse {
+                    0% { opacity: 0.6; }
+                    50% { opacity: 0.8; }
+                    100% { opacity: 0.6; }
+                }
+            `}</style>
+        </div>
+    );
 };
 
 export default ImageComponent;

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

@@ -0,0 +1,240 @@
+import React, { useState } from "react";
+import ImageComponent from "./ImageComponent";
+
+interface ItemCardProps {
+    id: string;
+    amount: string | number;
+    label: string;
+    itemData?: any; // Pass full item data for customization
+    rarityColor?: string;
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    // New props for visual variants
+    variant?: "Normal" | "Golden" | "Rainbow";
+    shiny?: boolean;
+    // Legacy/Other props
+    tn?: any;
+    weight?: any;
+    typeId?: any;
+}
+
+const ItemCard: React.FC<ItemCardProps> = ({
+    id,
+    amount,
+    label,
+    itemData,
+    rarityColor = "#e0e0e0", // Default gray
+    content,
+    children,
+    variant = "Normal",
+    shiny = false,
+    tn,      // Destructure but ignore
+    weight,  // Destructure but ignore
+    typeId   // Destructure but ignore
+}) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    // If custom content is provided, render that (for list view etc)
+    if (content || children) {
+        return <>{content || children}</>;
+    }
+
+    // Determine visual styles based on variant
+    // Determine visual styles based on variant
+    const filters: string[] = [];
+    if (isHovered) {
+        filters.push("drop-shadow(0 5px 10px rgba(0,0,0,0.2))");
+    }
+
+    let cardBorder = "2px solid #e0e0e0";
+    let bgStyle = "#ffffff";
+
+    if (variant === "Golden") {
+        filters.push("sepia(100%) saturate(300%) hue-rotate(10deg)");
+        cardBorder = "2px solid #FFD700";
+        bgStyle = "#FFFDF0";
+    } else if (variant === "Rainbow") {
+        // Rainbow effect usually implies vibrant changing colors or just a rainbow gradient border
+        // For item image, maybe a slight hue rotate or saturation boost?
+        // Actual PS99 rainbow pets are distinct, but a filter approximation:
+        filters.push("saturate(200%) hue-rotate(30deg) contrast(120%)");
+        cardBorder = "2px solid #a29bfe"; // Placeholder for rainbow, usually gradient
+    }
+
+    const imageFilter = filters.length > 0 ? filters.join(" ") : "none";
+
+    // Shiny Effect
+    // Shiny acts as an overlay or texture
+
+    // Clean White Square Style (Reference Match)
+    return (
+        <div
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "space-between",
+                // border handled below
+                borderRadius: "16px",
+                backgroundColor: bgStyle,
+                boxShadow: isHovered
+                    ? "0 8px 20px rgba(0,0,0,0.1)"
+                    : "0 2px 5px rgba(0,0,0,0.05)",
+                transition: "all 0.1s ease-out",
+                // transform: isHovered ? "translateY(-4px)" : "translateY(0)", // User requested no movement
+                cursor: "pointer",
+                width: "100%",
+                aspectRatio: "1 / 1",
+                position: "relative",
+                overflow: "hidden",
+                padding: "20px",
+                boxSizing: "border-box", // CRITICAL: Ensure padding is included in width to prevent overlap
+                // Rainbow Border Trick
+                background: variant === "Rainbow"
+                    ? "linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box"
+                    : undefined,
+                border: variant === "Rainbow" ? "3px solid transparent" : cardBorder,
+                zIndex: isHovered ? 100 : 1, // Ensure it pops over neighbors on hover
+            }}
+        >
+            {/* Shiny Sparkles Overlay */}
+            {shiny && (
+                <div style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    pointerEvents: "none",
+                    zIndex: 10,
+                    backgroundImage: "url('data:image/svg+xml;utf8,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M10 0L12 8L20 10L12 12L10 20L8 12L0 10L8 8L10 0Z\" fill=\"%23FFD700\" opacity=\"0.4\"/%3E%3C/svg%3E')",
+                    backgroundSize: "40px 40px",
+                    opacity: 0.5,
+                }} />
+            )}
+
+            {/* Rarity Indicator REMOVED based on user feedback */}
+
+            {/* Item Image */}
+            <div
+                style={{
+                    flex: 1,
+                    width: "90%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    position: "relative",
+                    marginTop: "10px",
+                }}
+            >
+                {(() => {
+                    // Use a simple local resolver if hook isn't available or just use the passed data
+                    // actually we can't easily use the hook inside a map or conditional without refactoring parent
+                    // BUT, we can just use the same logic here or expect the parent to pass a resolved/normalized object.
+                    // However, to be "Universal" and "Clean", let's replicate the safe check here or expect `itemData` to be rich.
+
+                    const iconSrc =
+                        itemData?.icon ||
+                        itemData?.Icon ||
+                        itemData?.thumbnail ||
+                        itemData?.image ||
+                        itemData?.texture ||
+                        itemData?.orbImage ||
+                        itemData?.titanicIcon ||
+                        itemData?.petIcon ||
+                        itemData?.eggIcon ||
+                        itemData?.enchantIcon ||
+                        itemData?.potionIcon ||
+                        itemData?.fruitIcon ||
+                        itemData?.toyIcon ||
+                        itemData?.charmIcon ||
+                        itemData?.boothIcon ||
+                        itemData?.flagIcon ||
+                        itemData?.keyIcon ||
+                        itemData?.seedIcon ||
+                        itemData?.bookIcon ||
+                        itemData?.giftIcon ||
+                        itemData?.currencyIcon ||
+                        itemData?.miscIcon;
+
+                    if (iconSrc) {
+                        return (
+                            <ImageComponent
+                                src={iconSrc}
+                                alt={label}
+                                style={{
+                                    width: "100%",
+                                    height: "100%",
+                                    objectFit: "contain",
+                                    filter: imageFilter,
+                                    transition: "filter 0.2s ease",
+                                    transform: isHovered ? "scale(1.1)" : "scale(1)",
+                                }}
+                            />
+                        );
+                    } else {
+                        return <span style={{ fontSize: "3.5rem", opacity: 0.3 }}>?</span>;
+                    }
+                })()}
+            </div>
+
+            {/* Quantity Badge (Top Right) */}
+            {amount && amount !== 1 && amount !== "1" && (
+                <div
+                    style={{
+                        position: "absolute",
+                        top: "12px",
+                        right: "12px",
+                        backgroundColor: "#333",
+                        color: "#fff",
+                        padding: "2px 8px",
+                        borderRadius: "8px",
+                        fontWeight: "800",
+                        fontSize: "0.8rem",
+                        zIndex: 5,
+                        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+                    }}
+                >
+                    x{amount.toLocaleString()}
+                </div>
+            )}
+
+            {/* Label (Hover Only Overlay) */}
+            <div
+                style={{
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "100%",
+                    padding: "8px 4px",
+                    backgroundColor: "rgba(255, 255, 255, 0.95)",
+                    textAlign: "center",
+                    opacity: isHovered ? 1 : 0,
+                    transform: isHovered ? "translateY(0)" : "translateY(100%)",
+                    transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                    zIndex: 20,
+                    borderTop: "2px solid rgba(0,0,0,0.05)",
+                }}
+            >
+                <span
+                    style={{
+                        fontSize: "0.85rem",
+                        fontWeight: "800",
+                        color: "#2d3436",
+                        lineHeight: "1.1",
+                        display: "-webkit-box",
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                    }}
+                >
+                    {label}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default ItemCard;

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

@@ -1,25 +1,33 @@
 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 LootboxesComponent: React.FC<{
-  configData?: CollectionConfigData<"Lootboxes">;
+  configData: CollectionConfigData<"Lootboxes">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = (configData as any).Rarity ? getRarityColor((configData as any).Rarity) : null;
+
   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 style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <ItemCard
+        id={configData.DisplayName}
+        amount={1}
+        label={configData.DisplayName}
+        itemData={{
+          icon: configData.Icon,
+          rarity: (configData as any).Rarity,
+          name: configData.DisplayName
+        }}
+        rarityColor={rarityColor}
+        typeId={(configData as any)._index}
+      />
+      {/* Additional details provided by ItemCard, but we can add more if needed below */}
+      <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+      </div>
+    </div>
   );
 };