ps99-api 2.3.3 → 2.5.0

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

@@ -1,65 +1,74 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const CurrencyComponent: React.FC<{
-  configData?: CollectionConfigData<"Currency">;
+  configData: CollectionConfigData<"Currency">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Currency">>
-      collectionName="Currency"
-      configData={configData}
-      render={(data) => (
+
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+        <p style={{ fontStyle: 'italic', marginBottom: '10px' }}>{configData.Desc}</p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+          <span className="badge">Max: {configData.MaxAmount}</span>
+          {configData.Rarity && <span className="badge" style={{ borderColor: (configData.Rarity.Color as string) }}>Rarity: {configData.Rarity.DisplayName}</span>}
+          {configData.Tradable && <span className="badge">Tradable</span>}
+          {configData.IsWorldCurrency && <span className="badge">World Currency</span>}
+          {configData.PermitAutoLootScaling && <span className="badge">Auto Loot</span>}
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h3 style={{ fontSize: '1.2em', borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tiers</h3>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '15px' }}>
+          {configData.Tiers.map((tier, index) => (
+            <div key={index}>
+              <ItemCard
+                id={tier.tierName}
+                amount={tier.value}
+                label={tier.tierName}
+                itemData={{
+                  icon: tier.orbImage,
+                  rarity: configData.Rarity,
+                  name: tier.tierName
+                }}
+                rarityColor={(configData.Rarity?.Color as string) || null}
+              />
+              <div style={{ textAlign: 'center', fontSize: '0.8em', color: '#666', marginTop: '4px' }}>
+                Order: {tier.Order}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {configData.BagTiers && (
         <div>
-          <h2>{data.DisplayName}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Max Amount: {data.MaxAmount}</p>
-          <p>Rarity: {data.Rarity.DisplayName}</p>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          {data.Tradable && <p>Tradable: Yes</p>}
-          {data.IsWorldCurrency && <p>World Currency: Yes</p>}
-          {data.PermitAutoLootScaling && <p>Permit Auto Loot Scaling: Yes</p>}
-          <h3>Tiers:</h3>
-          <ul>
-            {data.Tiers.map((tier, index) => (
-              <li key={index}>
-                <ImageComponent src={tier.orbImage} alt={tier.tierName} />
-                <p>Tier Name: {tier.tierName}</p>
-                <p>Order: {tier.Order}</p>
-                <p>Value: {tier.value}</p>
-                <ImageComponent
-                  src={tier.imageOutline}
-                  alt={`${tier.tierName} outline`}
-                />
-                {tier.isBottom && <p>Is Bottom: Yes</p>}
-                <ImageComponent
-                  src={tier.tinyImage}
-                  alt={`${tier.tierName} tiny`}
+          <h3 style={{ fontSize: '1.2em', borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Bag Tiers</h3>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '15px' }}>
+            {configData.BagTiers.map((bagTier, index) => (
+              <div key={index}>
+                <ItemCard
+                  id={`bag-tier-${index}`}
+                  amount={bagTier.value}
+                  label={`Bag Tier ${index + 1}`}
+                  itemData={{
+                    icon: bagTier.image,
+                    rarity: configData.Rarity,
+                    name: `Bag Tier ${index + 1}`
+                  }}
+                  rarityColor={(configData.Rarity?.Color as string) || null}
                 />
-              </li>
+              </div>
             ))}
-          </ul>
-          {data.BagTiers && (
-            <div>
-              <h3>Bag Tiers:</h3>
-              <ul>
-                {data.BagTiers.map((bagTier, index) => (
-                  <li key={index}>
-                    <ImageComponent
-                      src={bagTier.image}
-                      alt={`Bag tier ${index + 1}`}
-                    />
-                    <p>Value: {bagTier.value}</p>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
+          </div>
         </div>
       )}
-    />
+    </div>
   );
 };
 
+
 export default CurrencyComponent;

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

@@ -1,23 +1,190 @@
-import React, { lazy, Suspense } from "react";
-import { useParams } from "react-router-dom";
-import { CollectionName } from "ps99-api";
+import React, { lazy, Suspense, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { CollectionName, CollectionConfigData } from "ps99-api";
+import { GenericFetchComponent } from "./GenericFetchComponent";
 
-const DynamicCollectionConfigData: React.FC = () => {
-  const { collectionName, configName } = useParams<{
+interface DynamicCollectionConfigDataProps {
+  collectionName?: CollectionName;
+  configName?: string;
+  render?: (configData: CollectionConfigData<any>) => React.ReactNode; // Add render prop
+  additionalProps?: any; // Add additional props to pass to the rendered component
+}
+
+const DynamicCollectionConfigData: React.FC<
+  DynamicCollectionConfigDataProps
+> = (props) => {
+  const params = useParams<{
     collectionName: CollectionName;
     configName: string;
   }>();
 
-  if (!collectionName || !configName) {
+  const navigate = useNavigate();
+  const collectionName = props.collectionName || params.collectionName;
+  const configName = props.configName || params.configName;
+
+  const [viewMode, setViewMode] = useState<'render' | 'schema'>('render');
+
+  /*
+   * We need to use useMemo here to prevent the component from being re-created
+   * on every render. This usage of useMemo is safe because the import path
+   * depends only on collectionName, and we want to re-create the component
+   * only when collectionName changes.
+   */
+  const Component = React.useMemo(() => {
+    if (!collectionName) return null;
+    return lazy(() => import(`./${collectionName}Component`));
+  }, [collectionName]);
+
+  if (!collectionName || !configName || !Component) {
     return <div>Invalid collection or config name</div>;
   }
 
-  const Component = lazy(() => import(`./${collectionName}Component`));
-
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Component configName={configName} />
-    </Suspense>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "100%" }}>
+      {/* Header with Close Button */}
+      <div style={{
+        padding: "15px 20px",
+        borderBottom: "4px solid #333",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        backgroundColor: "#fff",
+        flexShrink: 0,
+      }}>
+        <div
+          style={{ display: "flex", alignItems: "center", gap: "10px", cursor: "pointer" }}
+          onClick={() => {
+            navigator.clipboard.writeText(window.location.href);
+            // visual feedback could be added here, e.g. a small alert or changing the icon color briefly
+            const icon = document.getElementById('link-icon-path');
+            if (icon) icon.style.fill = '#4caf50';
+            setTimeout(() => { if (icon) icon.style.fill = '#ccc'; }, 1000);
+          }}
+          title="Click to copy link to this item"
+          onMouseEnter={(e) => {
+            const icon = e.currentTarget.querySelector('.link-icon');
+            if (icon) (icon as HTMLElement).style.opacity = '1';
+          }}
+          onMouseLeave={(e) => {
+            const icon = e.currentTarget.querySelector('.link-icon');
+            if (icon) (icon as HTMLElement).style.opacity = '0';
+          }}
+        >
+          <h2 style={{
+            margin: 0,
+            fontSize: "2rem",
+            fontWeight: "900",
+            color: "#333",
+            textShadow: "2px 2px 0px #eee",
+            fontFamily: "'Fredoka One', cursive, sans-serif",
+            textTransform: "capitalize",
+          }}>
+            {configName}
+          </h2>
+          <svg
+            className="link-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#ccc"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ opacity: 0, transition: 'opacity 0.2s' }}
+          >
+            <path id="link-icon-path" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+          </svg>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            onClick={() => setViewMode(prev => prev === 'render' ? 'schema' : 'render')}
+            style={{
+              width: "48px",
+              height: "48px",
+              borderRadius: "12px",
+              backgroundColor: viewMode === 'render' ? "#2196f3" : "#4caf50",
+              color: "white",
+              border: `4px solid ${viewMode === 'render' ? "#1565c0" : "#2e7d32"}`,
+              fontSize: "20px",
+              fontWeight: "900",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              boxShadow: `inset 0 4px 4px rgba(255,255,255,0.4), 0 4px 0 ${viewMode === 'render' ? "#0d47a1" : "#1b5e20"}`,
+              fontFamily: "monospace"
+            }}
+            title={viewMode === 'render' ? "View Raw Schema" : "View Rendered Item"}
+          >
+            {viewMode === 'render' ? "{}" : "👁️"}
+          </button>
+
+          <button
+            onClick={() => navigate(`/collections/${collectionName}`)}
+            style={{
+              width: "48px",
+              height: "48px",
+              borderRadius: "12px",
+              backgroundColor: "#ff0055",
+              color: "white",
+              border: "4px solid #900",
+              fontSize: "24px",
+              fontWeight: "900",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              boxShadow: "inset 0 4px 4px rgba(255,255,255,0.4), 0 4px 0 #500",
+            }}
+          >
+            X
+          </button>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: "20px" }}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <GenericFetchComponent
+            // We use the key prop to force a re-mount of the component when the
+            // collectionName or configName changes. This ensures that the internal
+            // state of the GenericFetchComponent is reset and the new data is
+            // fetched correctly, preventing stale data from being passed to the
+            // child component.
+            key={`${collectionName}-${configName}`}
+            collectionName={collectionName}
+            configName={configName}
+            render={
+              (configData: CollectionConfigData<any>) => {
+                if (viewMode === 'schema') {
+                  return (
+                    <div style={{
+                      padding: '20px',
+                      background: '#1e1e1e',
+                      color: '#d4d4d4',
+                      borderRadius: '12px',
+                      overflow: 'auto',
+                      height: '100%',
+                      fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+                      fontSize: '0.9rem',
+                      textAlign: 'left',
+                      boxShadow: 'inset 0 0 20px rgba(0,0,0,0.5)',
+                      border: '2px solid #333'
+                    }}>
+                      <pre style={{ margin: 0 }}>{JSON.stringify(configData, null, 2)}</pre>
+                    </div>
+                  );
+                }
+                return props.render ? props.render(configData) : <Component configData={configData} {...props.additionalProps} />;
+              }
+            } // Use render prop if provided
+          />
+        </Suspense>
+      </div>
+    </div>
   );
 };
 

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

@@ -1,61 +1,94 @@
 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 EggsComponent: React.FC<{
-  configData?: CollectionConfigData<"Eggs">;
+  configData: CollectionConfigData<"Eggs">;
 }> = ({ configData }) => {
+  const { getRarityColor, resolveItem } = useItemResolution();
+  const rarityColor = configData.rarity ? getRarityColor(configData.rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Eggs">>
-      collectionName="Eggs"
-      configData={configData}
-      render={(data) => (
+    <div style={{ width: "100%", height: "100%", boxSizing: "border-box" }}>
+      <div style={{ width: '300px', margin: '0 auto 20px auto' }}>
+        <ItemCard
+          id={configData.name}
+          amount={1}
+          label={configData.name}
+          itemData={{
+            icon: configData.icon,
+            rarity: configData.rarity,
+            name: configData.name
+          }}
+          rarityColor={rarityColor}
+          typeId={(configData as any)._index}
+        />
+      </div>
+      <p>Currency: {configData.currency}</p>
+      <p>Override Cost: {configData.overrideCost}</p>
+      {configData.isCustomEgg && <p>Custom Egg: Yes</p>}
+      {configData.bestEgg && <p>Best Egg: Yes</p>}
+      {configData.disableGold && <p>Disable Gold: Yes</p>}
+      {configData.disableRainbow && <p>Disable Rainbow: Yes</p>}
+      {configData.disableShiny && <p>Disable Shiny: Yes</p>}
+      {configData.disableModifiers && <p>Disable Modifiers: Yes</p>}
+      {configData.goldChance && <p>Gold Chance: {configData.goldChance}</p>}
+      {configData.rainbowChance && (
+        <p>Rainbow Chance: {configData.rainbowChance}</p>
+      )}
+      {configData.shinyChance && <p>Shiny Chance: {configData.shinyChance}</p>}
+      {configData.rarity && (
+        <div>
+          <p>Rarity: {configData.rarity.DisplayName}</p>
+          <p>Rarity Number: {configData.rarity.RarityNumber}</p>
+        </div>
+      )}
+      <h3>Pets:</h3>
+      <div style={{ marginTop: '15px' }}>
+        <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Pets</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '16px' }}>
+          {configData.pets.map((pet, index) => {
+            const petName = pet[0];
+            const chance = pet[1];
+            // The 3rd element appears to be the tier (tn), based on existing code usage
+            const tn = pet[2];
+            const resolvedItem = resolveItem(petName, tn);
+            const rarityColor = resolvedItem?.rarity ? getRarityColor(resolvedItem.rarity) : null;
+
+            return (
+              <div key={index} style={{
+                // Auto-sizing handled by grid
+              }}>
+                <ItemCard
+                  id={petName}
+                  // Formatting chance as string to include %
+                  amount={`${chance}%`}
+                  label={resolvedItem?.name || petName}
+                  itemData={resolvedItem}
+                  rarityColor={rarityColor}
+                  tn={tn}
+                // weight or typeId not strictly needed here unless we want debug info
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      {configData.productIds && (
         <div>
-          <h2>{data.name}</h2>
-          <ImageComponent src={data.icon} alt={data.name} />
-          <p>Currency: {data.currency}</p>
-          <p>Override Cost: {data.overrideCost}</p>
-          {data.isCustomEgg && <p>Custom Egg: Yes</p>}
-          {data.bestEgg && <p>Best Egg: Yes</p>}
-          {data.disableGold && <p>Disable Gold: Yes</p>}
-          {data.disableRainbow && <p>Disable Rainbow: Yes</p>}
-          {data.disableShiny && <p>Disable Shiny: Yes</p>}
-          {data.disableModifiers && <p>Disable Modifiers: Yes</p>}
-          {data.goldChance && <p>Gold Chance: {data.goldChance}</p>}
-          {data.rainbowChance && <p>Rainbow Chance: {data.rainbowChance}</p>}
-          {data.shinyChance && <p>Shiny Chance: {data.shinyChance}</p>}
-          {data.rarity && (
-            <div>
-              <p>Rarity: {data.rarity.DisplayName}</p>
-              <p>Rarity Number: {data.rarity.RarityNumber}</p>
-            </div>
-          )}
-          <h3>Pets:</h3>
+          <h3>Product IDs:</h3>
           <ul>
-            {data.pets.map((pet, index) => (
-              <li key={index}>
-                <p>Name: {pet[0]}</p>
-                <p>Chance: {pet[1]}</p>
-                {pet[2] && <p>Tier: {pet[2]}</p>}
+            {Object.entries(configData.productIds).map(([key, value]) => (
+              <li key={key}>
+                {key}: {value}
               </li>
             ))}
           </ul>
-          {data.productIds && (
-            <div>
-              <h3>Product IDs:</h3>
-              <ul>
-                {Object.entries(data.productIds).map(([key, value]) => (
-                  <li key={key}>
-                    {key}: {value}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
         </div>
       )}
-    />
+    </div>
   );
 };
 

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

@@ -1,45 +1,95 @@
 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 EnchantsComponent: React.FC<{
-  configData?: CollectionConfigData<"Enchants">;
+  configData: CollectionConfigData<"Enchants">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Enchants">>
-      collectionName="Enchants"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Enchantment</h2>
-          {data.PageIcon && (
-            <ImageComponent src={data.PageIcon} alt="Page Icon" />
-          )}
-          <p>Base Tier: {data.BaseTier}</p>
-          <p>Max Tier: {data.MaxTier}</p>
-          <p>Max Page: {data.MaxPage}</p>
-          {data.DiminishPowerThreshold && (
-            <p>Diminish Power Threshold: {data.DiminishPowerThreshold}</p>
-          )}
-          {data.EmpoweredBoost && <p>Empowered Boost: {data.EmpoweredBoost}</p>}
-          {data.ProductId && <p>Product ID: {data.ProductId}</p>}
-          <h3>Tiers:</h3>
-          <ul>
-            {data.Tiers.map((tier, index) => (
-              <li key={index}>
-                <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
-                <p>Display Name: {tier.DisplayName}</p>
-                <p>Description: {tier.Desc}</p>
+
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', marginBottom: '20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
+        <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
+        <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
+        <p><strong>Max Page:</strong> {configData.MaxPage}</p>
+        {configData.DiminishPowerThreshold && (
+          <p><strong>Diminish Threshold:</strong> {configData.DiminishPowerThreshold}</p>
+        )}
+        {configData.EmpoweredBoost && (
+          <p><strong>Empowered Boost:</strong> {configData.EmpoweredBoost}</p>
+        )}
+        {configData.ProductId && <p><strong>Product ID:</strong> {configData.ProductId}</p>}
+      </div>
+      <h3>Tiers:</h3>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "1em" }}>
+        {configData.Tiers.map((tier, index) => {
+          const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+          return (
+            <div
+              key={index}
+              style={{
+                flex: "1 1 300px",
+                maxWidth: "350px",
+                margin: "0 auto"
+              }}
+            >
+              <ItemCard
+                id={tier.DisplayName}
+                amount={1}
+                label={tier.DisplayName}
+                tn={index + 1}
+                itemData={{
+                  icon: tier.Icon,
+                  rarity: tier.Rarity,
+                  name: tier.DisplayName
+                }}
+                rarityColor={rarityColor}
+              />
+              <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+                <p>{tier.Desc}</p>
                 <p>Power: {tier.Power}</p>
-                <p>Rarity: {tier.Rarity.DisplayName}</p>
-                <p>Rarity Number: {tier.Rarity.RarityNumber}</p>
-              </li>
-            ))}
-          </ul>
+              </div>
+            </div>
+          );
+        })}
+        <h3>Tiers</h3>
+        <div style={{ display: "grid", gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: "15px" }}>
+          {configData.Tiers.map((tier, index) => {
+            const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+            return (
+              <div
+                key={index}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: '100%'
+                }}
+              >
+                <ItemCard
+                  id={tier.DisplayName}
+                  amount={1}
+                  label={tier.DisplayName}
+                  tn={index + 1}
+                  itemData={{
+                    icon: tier.Icon,
+                    rarity: tier.Rarity,
+                    name: tier.DisplayName
+                  }}
+                  rarityColor={rarityColor}
+                />
+                <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+                  <p>{tier.Desc}</p>
+                  <p style={{ fontWeight: 'bold', color: '#333' }}>Power: {tier.Power}</p>
+                </div>
+              </div>
+            );
+          })}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };