ps99-api 2.5.0 → 2.6.0

package/example-web/react2/package-lock.json

@@ -41,22 +41,22 @@
       "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
-        "axios": "^1.7.2"
+        "axios": "^1.13.5"
       },
       "devDependencies": {
         "@jest/globals": "^29.7.0",
         "@semantic-release/git": "^10.0.1",
-        "@tsconfig/node20": "^20.1.4",
-        "@types/jest": "^29.5.12",
-        "@types/node": "^20.14.10",
+        "@tsconfig/node22": "^22.0.5",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^25.2.3",
         "cz-conventional-changelog": "^3.3.0",
-        "dets": "^0.16.0",
-        "esbuild": "0.21.5",
+        "dets": "^0.17.0",
+        "esbuild": "^0.27.3",
         "jest": "^29.7.0",
-        "prettier": "^3.3.2",
-        "semantic-release": "^24.0.0",
-        "ts-jest": "^29.1.5",
-        "typescript": "^5.5.3"
+        "prettier": "^3.8.1",
+        "semantic-release": "^25.0.3",
+        "ts-jest": "^29.4.6",
+        "typescript": "^5.9.3"
       }
     },
     "node_modules/@apideck/better-ajv-errors": {

package/example-web/react2/src/App.tsx

@@ -7,20 +7,23 @@ import CollectionConfigIndex from "./components/CollectionConfigIndex";
 import DynamicCollectionConfigData from "./components/DynamicCollectionConfigData";
 import CollectionsLayout from "./components/CollectionsLayout";
 import Footer from "./components/Footer";
+import { ScrollProvider } from "./context/ScrollContext";
 
 const App: React.FC = () => {
   return (
     <Router>
-      <Header />
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/collections" element={<CollectionsIndex />} />
-        <Route element={<CollectionsLayout />}>
-          <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
-          <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
-        </Route>
-      </Routes>
-      <Footer />
+      <ScrollProvider>
+        <Header />
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/collections" element={<CollectionsIndex />} />
+          <Route element={<CollectionsLayout />}>
+            <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
+            <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
+          </Route>
+        </Routes>
+        <Footer />
+      </ScrollProvider>
     </Router>
   );
 };

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

@@ -0,0 +1,49 @@
+import React, { useState, useLayoutEffect, useRef } from "react";
+
+export default function AutoSizer({
+    children,
+    className,
+    defaultHeight,
+    defaultWidth,
+    style,
+    renderProp,
+    ...rest
+}: any) {
+    const [size, setSize] = useState({ height: defaultHeight || 0, width: defaultWidth || 0 });
+    const ref = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const ResizeObserver = (window as any).ResizeObserver;
+        if (!ResizeObserver) return;
+
+        const observer = new ResizeObserver((entries: any) => {
+            for (const entry of entries) {
+                if (entry.contentRect) {
+                    const { width, height } = entry.contentRect;
+                    // Rounding for stability
+                    setSize({ width: Math.floor(width), height: Math.floor(height) });
+                }
+            }
+        });
+
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+
+    const childParams = size;
+
+    // Render prop takes precedence if provided (based on my usage in other files)
+    const content = renderProp
+        ? renderProp(childParams)
+        : (typeof children === 'function' ? children(childParams) : children);
+
+    return (
+        <div className={className} ref={ref} style={{ ...style, width: '100%', height: '100%', overflow: 'hidden' }}>
+            {/* Only render content if we have size, or if default provided to avoid jumpiness */}
+            {(size.width > 0 && size.height > 0) ? content : null}
+        </div>
+    );
+}

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

@@ -9,9 +9,46 @@ const CharmsComponent: React.FC<{
 }> = ({ configData }) => {
   const { getRarityColor } = useItemResolution();
 
+  const isSingleTier = configData.Tiers.length === 1;
+
+  if (isSingleTier) {
+    const tier = configData.Tiers[0];
+    const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+
+    return (
+      <div style={{ width: '100%', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '20px' }}>
+        <div style={{
+          width: '120px',
+          height: '120px',
+          borderRadius: '16px',
+          border: rarityColor ? `4px solid ${rarityColor}` : '4px solid #eee',
+          padding: '10px',
+          backgroundColor: '#fff',
+          boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '20px'
+        }}>
+          <ImageComponent src={configData.Icon} alt={tier.DisplayName} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+        </div>
+
+        <div style={{ textAlign: 'center', maxWidth: '400px' }}>
+          {configData.BaseTier !== 1 && <p><strong>Base Tier:</strong> {configData.BaseTier}</p>}
+          {configData.MaxTier !== 1 && <p><strong>Max Tier:</strong> {configData.MaxTier}</p>}
+          {configData.DiminishPowerThreshold && <p><strong>Diminish:</strong> {configData.DiminishPowerThreshold}</p>}
+          {configData.Unique && <span className="badge" style={{ display: 'inline-block', marginBottom: '10px' }}>Unique</span>}
+
+          <h3 style={{ margin: '10px 0', fontSize: '1.5em', color: '#333' }}>{tier.DisplayName}</h3>
+          <p style={{ color: '#666', fontSize: '1.1em', marginBottom: '15px' }}>{tier.Desc}</p>
+          <p style={{ fontWeight: '900', fontSize: '1.2em', color: '#333' }}>Power: {tier.Power}</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
-
       <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '20px' }}>
         <div style={{ width: '150px' }}>
           <ImageComponent src={configData.Icon} alt={configData.Tiers[0].DisplayName} />
@@ -26,7 +63,7 @@ const CharmsComponent: React.FC<{
 
       <div style={{ marginTop: '20px' }}>
         <h3 style={{ fontSize: '1.2em', borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tiers</h3>
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "15px", marginTop: '15px' }}>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "15px", marginTop: '15px' }}>
           {configData.Tiers.map((tier, index) => {
             const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
             return (