jaml-ui 0.1.0 → 0.2.0

package/README.md

@@ -17,6 +17,8 @@ Balatro rendering components, sprite metadata, and optional Motely helpers for R
 npm install jaml-ui react react-dom
 ```
 
+**Latest published major features:** `0.2.x` adds `jaml-ui/r3f` (Three.js card meshes). If you need `0.2.0` from npm and hit Windows publish issues, see [PUBLISHING.md](./PUBLISHING.md) and use GitHub Actions or Linux to `npm publish`.
+
 If you want the Motely-specific helpers too:
 
 ```bash
@@ -88,9 +90,34 @@ const itemName = decodeMotelyItemName(0x5001);
 const enumKey = motelyItemTypeName(0x5001);
 ```
 
+## Three.js / R3F (optional)
+
+`jaml-ui/r3f` provides **magnetic-tilt** meshes for playing cards and jokers. Peer dependencies (install in your app):
+
+- `three`
+- `@react-three/fiber`
+- `@react-spring/three`
+
+```tsx
+"use client";
+
+import { BalatroPlayingCard3D, BalatroJokerPreview3D } from "jaml-ui/r3f";
+
+// In an existing <Canvas>: BalatroPlayingCard3D with card={{ suit, rank, ... }}
+// Standalone joker preview:
+export function Preview() {
+  return <BalatroJokerPreview3D displayName="Blueprint" />;
+}
+```
+
+Atlas URLs default to packaged sprites; override with `setJamlAssetBaseUrl("/your/public/images/")` or per-component `deckUrl` / `jokersImageUrl` props.
+
+Bundled data: `balatro-jokers.json` ships in `dist/data/` for joker grid lookup.
+
 ## Next.js notes
 
 - The root `jaml-ui` entry is client-oriented and preserves the `"use client"` boundary for component consumers.
+- Add `jaml-ui/r3f` to `transpilePackages` when you use the R3F entry.
 - Import pure helpers from `jaml-ui/core` when you want server-safe metadata and asset utilities.
 - If you are consuming `jaml-ui` from a local workspace package in a Next.js app, you may need:
 

package/dist/components/GameCard.d.ts

@@ -13,6 +13,7 @@ export interface JamlGameCardProps {
     };
     type: "joker" | "consumable" | "playing";
     className?: string;
+    hoverTilt?: boolean;
 }
 export type AnalyzerShopItem = {
     id: string;
@@ -31,22 +32,25 @@ export type AnalyzerResolvedItem = {
     label: string;
 };
 export declare function resolveAnalyzerShopItem(item: AnalyzerShopItem, scale?: number): AnalyzerResolvedItem;
-export declare function JamlGameCard({ card, type, className }: JamlGameCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlGameCard({ card, type, className, hoverTilt }: JamlGameCardProps): import("react/jsx-runtime").JSX.Element;
 export interface VoucherProps {
     voucherName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlVoucher({ voucherName, scale, className }: VoucherProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlVoucher({ voucherName, scale, className, hoverTilt }: VoucherProps): import("react/jsx-runtime").JSX.Element | null;
 export interface TagProps {
     tagName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlTag({ tagName, scale, className }: TagProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlTag({ tagName, scale, className, hoverTilt }: TagProps): import("react/jsx-runtime").JSX.Element | null;
 export interface BossProps {
     bossName: string;
     scale?: number;
     className?: string;
+    hoverTilt?: boolean;
 }
-export declare function JamlBoss({ bossName, scale, className }: BossProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function JamlBoss({ bossName, scale, className, hoverTilt }: BossProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/GameCard.js

@@ -198,7 +198,7 @@ export function resolveAnalyzerShopItem(item, scale = 1) {
     }
     return packedResolved ?? { kind: "unknown", label: displayName };
 }
-export function JamlGameCard({ card, type, className = "" }) {
+export function JamlGameCard({ card, type, className = "", hoverTilt = false }) {
     const { name, edition, isEternal, isPerishable, isRental, rank, suit, enhancements, seal, scale = 1 } = card;
     const layers = [];
     if (type === "joker") {
@@ -299,9 +299,9 @@ export function JamlGameCard({ card, type, className = "" }) {
         }
     }
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { invert: edition === "Negative", layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { invert: edition === "Negative", layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlVoucher({ voucherName, scale = 1, className = "" }) {
+export function JamlVoucher({ voucherName, scale = 1, className = "", hoverTilt = false }) {
     const voucherData = VOUCHERS.find((v) => v.name === voucherName);
     if (!voucherData)
         return null;
@@ -315,9 +315,9 @@ export function JamlVoucher({ voucherName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlTag({ tagName, scale = 1, className = "" }) {
+export function JamlTag({ tagName, scale = 1, className = "", hoverTilt = false }) {
     const tagData = TAGS.find((t) => t.name === tagName);
     if (!tagData)
         return null;
@@ -331,9 +331,9 @@ export function JamlTag({ tagName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }
-export function JamlBoss({ bossName, scale = 1, className = "" }) {
+export function JamlBoss({ bossName, scale = 1, className = "", hoverTilt = false }) {
     const bossData = BOSSES.find((b) => b.name === bossName);
     if (!bossData)
         return null;
@@ -347,5 +347,5 @@ export function JamlBoss({ bossName, scale = 1, className = "" }) {
         }),
     ];
     const wrapperStyle = { width: `${71 * scale}px` };
-    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers }) }));
+    return (_jsx("div", { style: wrapperStyle, className: className, children: _jsx(JamlCardRenderer, { layers: layers, hoverTilt: hoverTilt }) }));
 }