ps99-api 2.4.0 → 2.6.0

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

@@ -0,0 +1,73 @@
+import React, { useRef, useEffect } from 'react';
+
+export const FixedSizeList = ({ children, itemCount, itemSize, height, width, onScroll, initialScrollOffset, itemData }: any) => {
+    const items = [];
+    for (let i = 0; i < itemCount; i++) {
+        items.push(
+            <div key={i} style={{ width: "100%" }}>
+                {children({ index: i, style: { height: itemSize, width: "100%" }, data: itemData })}
+            </div>
+        );
+    }
+
+    // Handle initial scroll
+    const ref = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        if (ref.current && (initialScrollOffset !== undefined && initialScrollOffset !== null)) {
+            ref.current.scrollTop = initialScrollOffset;
+        }
+    }, [initialScrollOffset]);
+
+    return (
+        <div
+            ref={ref}
+            style={{ height, width, overflow: "auto", position: 'relative' }}
+            onScroll={(e) => onScroll && onScroll({ scrollOffset: e.currentTarget.scrollTop })}
+        >
+            {items}
+        </div>
+    );
+};
+
+export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, rowHeight, height, width, onScroll, initialScrollOffset, itemData, style }: any) => {
+    const items = [];
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+            items.push(
+                <div key={`${rowIndex}-${columnIndex}`} style={{ position: 'absolute' }}>
+                    {children({
+                        columnIndex,
+                        rowIndex,
+                        style: {
+                            position: 'absolute',
+                            left: columnIndex * columnWidth,
+                            top: rowIndex * rowHeight,
+                            height: rowHeight,
+                            width: columnWidth
+                        },
+                        data: itemData
+                    })}
+                </div>
+            );
+        }
+    }
+    // Handle initial scroll
+    const ref = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        if (ref.current && initialScrollOffset) {
+            ref.current.scrollTop = initialScrollOffset;
+        }
+    }, [initialScrollOffset]);
+
+    return (
+        <div
+            ref={ref}
+            style={{ height, width, overflowY: "auto", overflowX: "hidden", position: 'relative', ...style }}
+            onScroll={(e) => onScroll && onScroll({ scrollTop: e.currentTarget.scrollTop })}
+        >
+            <div style={{ height: rowCount * rowHeight, width: columnWidth * columnCount }}>
+                {items}
+            </div>
+        </div>
+    );
+};

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

@@ -1,29 +1,46 @@
+
 import React from "react";
 import { CollectionConfigData, RebirthUnlock } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const RebirthComponent: React.FC<{
   configData: CollectionConfigData<"Rebirths">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Rebirth: {configData.DisplayName}</h2>
-      <p>Rebirth Number: {configData.RebirthNumber}</p>
-      <p>Zone Number Required: {configData.ZoneNumberRequired}</p>
-      <p>Strength Power Boost: {configData.StrengthPowerBoost}%</p>
-      <p>Boost Description: {configData.BoostDesc}</p>
-      {configData.ResetZone && <p>Reset Zone: {configData.ResetZone}</p>}
-      <h3>Unlocks:</h3>
-      <ul>
-        {configData.RebirthUnlocks.map(
-          (unlock: RebirthUnlock, index: number) => (
-            <li key={index}>
-              <ImageComponent src={unlock.Icon} alt={unlock.Title} />
-              <strong>{unlock.GuiTitle || unlock.Title}</strong>: {unlock.Desc}
-            </li>
-          ),
-        )}
-      </ul>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Zone Required:</strong> {configData.ZoneNumberRequired}</p>
+        <p><strong>Strength Boost:</strong> {configData.StrengthPowerBoost}%</p>
+        {configData.ResetZone && <p><strong>Reset Zone:</strong> {configData.ResetZone}</p>}
+        {configData.BoostDesc && <p style={{ gridColumn: '1 / -1' }}><strong>Boost:</strong> {configData.BoostDesc}</p>}
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.2em', marginBottom: '15px' }}>Unlocks</h3>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "15px" }}>
+          {configData.RebirthUnlocks.map(
+            (unlock: RebirthUnlock, index: number) => (
+              <div key={index}>
+                <ItemCard
+                  id={unlock.Title}
+                  amount={1}
+                  label={unlock.GuiTitle || unlock.Title}
+                  itemData={{
+                    icon: unlock.Icon,
+                    rarity: undefined,
+                    name: unlock.GuiTitle || unlock.Title
+                  }}
+                  rarityColor={null}
+                />
+                <div style={{ textAlign: 'center', fontSize: '0.8em', color: '#666', marginTop: '5px' }}>
+                  {unlock.Desc}
+                </div>
+              </div>
+            ),
+          )}
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -5,10 +5,11 @@ const SecretRoomComponent: React.FC<{
   configData: CollectionConfigData<"SecretRooms">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Secret Room: {configData.DisplayName}</h2>
-      <p>Instance ID: {configData.InstanceId}</p>
-      <p>Required Zone: {configData.RequiredZone}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+        <p><strong>Instance ID:</strong> {configData.InstanceId}</p>
+        <p><strong>Required Zone:</strong> {configData.RequiredZone}</p>
+      </div>
     </div>
   );
 };

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

@@ -6,7 +6,8 @@ import {
   RawStackKey,
   LootTableData,
 } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
   try {
@@ -20,21 +21,25 @@ const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
 const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
   const lootTableArray = Array.isArray(lootTable) ? lootTable : [lootTable];
   return lootTableArray.map((table, index) => (
-    <div key={index}>
+    <div key={index} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '10px' }}>
       {table.entries.map((entry: LootTableEntry, entryIndex: number) => {
         const parsedStackKey = entry.Value._stackKey
           ? parseRawStackKey(entry.Value._stackKey)
           : null;
         return (
-          <div key={entryIndex}>
-            <h4>Loot Entry {entryIndex + 1}</h4>
-            <p>Weight: {entry.Weight}</p>
+          <div key={entryIndex} style={{ padding: '10px', border: '1px solid #eee', borderRadius: '8px', background: '#f9f9f9', textAlign: 'left' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
+              <span style={{ fontWeight: 'bold', fontSize: '0.9em' }}>Entry {entryIndex + 1}</span>
+              <span className="badge">Weight: {entry.Weight}</span>
+            </div>
             {parsedStackKey && (
-              <>
-                <p>Item ID: {parsedStackKey.id}</p>
-                {parsedStackKey.tn && <p>Item TN: {parsedStackKey.tn}</p>}
-                {parsedStackKey._am && <p>Amount: {parsedStackKey._am}</p>}
-              </>
+              <div style={{ fontSize: '0.85em', color: '#555' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                  <span>ID: <strong>{parsedStackKey.id}</strong></span>
+                </div>
+                {parsedStackKey.tn && <div>Tier/TN: {parsedStackKey.tn}</div>}
+                {parsedStackKey._am && <div>Amount: {parsedStackKey._am}</div>}
+              </div>
             )}
           </div>
         );
@@ -46,18 +51,33 @@ const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
 const SeedComponent: React.FC<{
   configData: CollectionConfigData<"Seeds">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>Seed: {configData.DisplayName}</h2>
-      <p>Description: {configData.Desc}</p>
-      <p>Grow Time: {configData.GrowTime} seconds</p>
-      <p>
-        Rarity: {configData.Rarity.DisplayName} (Rarity Number:{" "}
-        {configData.Rarity.RarityNumber})
-      </p>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      <div>
-        <h3>Loot Table</h3>
+    <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={{ marginBottom: '20px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        <p style={{ fontWeight: 'bold', marginTop: '5px' }}>Grow Time: {configData.GrowTime}s</p>
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ textAlign: 'center', fontSize: '1.2em', marginBottom: '15px' }}>Loot Table</h3>
         {renderLootTable(configData.LootTable)}
       </div>
     </div>

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

@@ -1,19 +1,31 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const ShovelComponent: React.FC<{
   configData: CollectionConfigData<"Shovels">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Shovel: {configData.DisplayName}</h2>
-      <p>Description: {configData.Desc}</p>
-      <p>Associated Item ID: {configData.AssociatedItemID}</p>
-      {configData.MerchantSalePrice && (
-        <p>Merchant Sale Price: {configData.MerchantSalePrice}</p>
-      )}
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+    <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: undefined,
+            name: configData.DisplayName
+          }}
+          rarityColor={null}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        {configData.MerchantSalePrice && <p style={{ marginTop: '10px' }}><strong>Sale Price:</strong> {configData.MerchantSalePrice}</p>}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { PetSimulator99API, CollectionName } from "ps99-api";
+
+import { COLLECTION_ICONS } from "../constants/collectionIcons";
+
+
+interface SidebarProps {
+    currentCollection?: string;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ currentCollection }) => {
+    const [collections, setCollections] = useState<CollectionName[]>([]);
+
+    useEffect(() => {
+        const fetchCollections = async () => {
+            const api = new PetSimulator99API();
+            const response = await api.getCollections();
+            if (response.status === "ok") {
+                // Filter out collections that might not have icons or just to keep it clean if needed
+                setCollections(response.data);
+            }
+        };
+        fetchCollections();
+    }, []);
+
+    return (
+        <div style={{
+            width: "260px",
+            backgroundColor: "#fff",
+            borderRight: "4px solid #333",
+            display: "flex",
+            flexDirection: "column",
+            padding: "15px",
+            gap: "10px",
+            flexShrink: 0,
+            overflowY: "auto",
+            maxHeight: "100%",
+        }}>
+            <h3 style={{
+                textAlign: "center",
+                marginBottom: "15px",
+                color: "#333",
+                fontSize: "1.5rem",
+                fontWeight: "900",
+                textShadow: "2px 2px 0px #eee",
+                fontFamily: "'Fredoka One', cursive, sans-serif", // Assuming font availability or fallback
+            }}>
+                Terminal!
+            </h3>
+
+            <div style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "10px",
+            }}>
+                {collections.map((collection) => {
+                    const isActive = currentCollection === collection;
+                    const icon = COLLECTION_ICONS[collection] || "📦";
+
+                    return (
+                        <Link
+                            key={collection}
+                            to={`/collections/${collection}`}
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                aspectRatio: "1/1",
+                                backgroundColor: isActive ? "#00b894" : "#dfe6e9",
+                                borderRadius: "16px",
+                                textDecoration: "none",
+                                color: isActive ? "#fff" : "#2d3436",
+                                border: "3px solid #333",
+                                boxShadow: isActive ? "inset 0 -4px 0 rgba(0,0,0,0.2)" : "0 4px 0 #b2bec3",
+                                transition: "all 0.1s ease",
+                                transform: isActive ? "translateY(2px)" : "translateY(0)",
+                            }}
+                        >
+                            <span style={{
+                                fontSize: "2rem",
+                                marginBottom: "4px",
+                                filter: isActive ? "drop-shadow(0 2px 0 rgba(0,0,0,0.2))" : "none"
+                            }}>
+                                {icon}
+                            </span>
+                            <span style={{
+                                fontSize: "0.8rem",
+                                fontWeight: "800",
+                                textAlign: "center",
+                                lineHeight: "1.1",
+                                textShadow: isActive ? "1px 1px 0 rgba(0,0,0,0.2)" : "none"
+                            }}>
+                                {collection}
+                            </span>
+                        </Link>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;

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

@@ -1,20 +1,35 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const SprinklerComponent: React.FC<{
   configData: CollectionConfigData<"Sprinklers">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>Sprinkler: {configData.Name}</h2>
-      <p>Description: {configData.Desc}</p>
-      <p>Color: {configData.Color}</p>
-      <p>Duration: {configData.Duration} seconds</p>
-      <h3>Rarity</h3>
-      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
-      <p>Display Name: {configData.Rarity.DisplayName}</p>
-      <ImageComponent src={configData.Icon} alt={configData.Name} />
+    <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/Tooltip.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
+    const [active, setActive] = useState(false);
+
+    const showTip = () => {
+        setActive(true);
+    };
+
+    const hideTip = () => {
+        setActive(false);
+    };
+
+    return (
+        <div
+            className="tooltip-wrapper"
+            onMouseEnter={showTip}
+            onMouseLeave={hideTip}
+            style={{ position: 'relative', display: 'inline-block' }}
+        >
+            {children}
+            {active && (
+                <div className="tooltip-popover">
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Tooltip;

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

@@ -1,26 +1,38 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const UltimateComponent: React.FC<{
   configData: CollectionConfigData<"Ultimates">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>Ultimate: {configData.DisplayName}</h2>
-      <p>Description: {configData.Desc}</p>
-      <p>Max Tier: {configData.MaxTier}</p>
-      <p>FFlag Name: {configData.FFlagName}</p>
-      {configData.Tradable && <p>Tradable</p>}
-      {configData.ProductId && <p>Product ID: {configData.ProductId}</p>}
-      {configData.NotAllowedInInstances && <p>Not Allowed in Instances</p>}
-      <h3>Rarity</h3>
-      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
-      <p>Display Name: {configData.Rarity.DisplayName}</p>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      <h3>Tiers</h3>
-      <p>Tier to Level Mapping: {configData.TierToLevel.join(", ")}</p>
-      <p>Level to Tier Mapping: {configData.LevelToTier.join(", ")}</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">Max Tier: {configData.MaxTier}</span>
+          {configData.Tradable && <span className="badge">Tradable</span>}
+        </div>
+      </div>
     </div>
   );
 };