jaml-ui 0.14.4 → 0.17.0

package/dist/motelyDisplay.js

@@ -1,189 +1,50 @@
 import { Motely } from "motely-wasm";
-import { getItemDisplayName } from "./utils/itemUtils.js";
-const BOSS_ENTRIES = [
-    { key: "AmberAcorn", label: "Amber Acorn" },
-    { key: "CeruleanBell", label: "Cerulean Bell" },
-    { key: "CrimsonHeart", label: "Crimson Heart" },
-    { key: "VerdantLeaf", label: "Verdant Leaf" },
-    { key: "VioletVessel", label: "Violet Vessel" },
-    { key: "TheArm", label: "The Arm" },
-    { key: "TheClub", label: "The Club" },
-    { key: "TheEye", label: "The Eye" },
-    { key: "TheFish", label: "The Fish" },
-    { key: "TheFlint", label: "The Flint" },
-    { key: "TheGoad", label: "The Goad" },
-    { key: "TheHead", label: "The Head" },
-    { key: "TheHook", label: "The Hook" },
-    { key: "TheHouse", label: "The House" },
-    { key: "TheManacle", label: "The Manacle" },
-    { key: "TheMark", label: "The Mark" },
-    { key: "TheMouth", label: "The Mouth" },
-    { key: "TheNeedle", label: "The Needle" },
-    { key: "TheOx", label: "The Ox" },
-    { key: "ThePillar", label: "The Pillar" },
-    { key: "ThePlant", label: "The Plant" },
-    { key: "ThePsychic", label: "The Psychic" },
-    { key: "TheSerpent", label: "The Serpent" },
-    { key: "TheTooth", label: "The Tooth" },
-    { key: "TheWall", label: "The Wall" },
-    { key: "TheWater", label: "The Water" },
-    { key: "TheWheel", label: "The Wheel" },
-    { key: "TheWindow", label: "The Window" },
-];
-const VOUCHER_ENTRIES = [
-    { key: "Overstock", label: "Overstock" },
-    { key: "OverstockPlus", label: "Overstock Plus" },
-    { key: "ClearanceSale", label: "Clearance Sale" },
-    { key: "Liquidation", label: "Liquidation" },
-    { key: "Hone", label: "Hone" },
-    { key: "GlowUp", label: "Glow Up" },
-    { key: "RerollSurplus", label: "Reroll Surplus" },
-    { key: "RerollGlut", label: "Reroll Glut" },
-    { key: "CrystalBall", label: "Crystal Ball" },
-    { key: "OmenGlobe", label: "Omen Globe" },
-    { key: "Telescope", label: "Telescope" },
-    { key: "Observatory", label: "Observatory" },
-    { key: "Grabber", label: "Grabber" },
-    { key: "NachoTong", label: "Nacho Tong" },
-    { key: "Wasteful", label: "Wasteful" },
-    { key: "Recyclomancy", label: "Recyclomancy" },
-    { key: "TarotMerchant", label: "Tarot Merchant" },
-    { key: "TarotTycoon", label: "Tarot Tycoon" },
-    { key: "PlanetMerchant", label: "Planet Merchant" },
-    { key: "PlanetTycoon", label: "Planet Tycoon" },
-    { key: "SeedMoney", label: "Seed Money" },
-    { key: "MoneyTree", label: "Money Tree" },
-    { key: "Blank", label: "Blank" },
-    { key: "Antimatter", label: "Antimatter" },
-    { key: "MagicTrick", label: "Magic Trick" },
-    { key: "Illusion", label: "Illusion" },
-    { key: "Hieroglyph", label: "Hieroglyph" },
-    { key: "Petroglyph", label: "Petroglyph" },
-    { key: "DirectorsCut", label: "Director's Cut" },
-    { key: "Retcon", label: "Retcon" },
-    { key: "PaintBrush", label: "Paint Brush" },
-    { key: "Palette", label: "Palette" },
-];
-const TAG_ENTRIES = [
-    { key: "UncommonTag", label: "Uncommon Tag" },
-    { key: "RareTag", label: "Rare Tag" },
-    { key: "NegativeTag", label: "Negative Tag" },
-    { key: "FoilTag", label: "Foil Tag" },
-    { key: "HolographicTag", label: "Holographic Tag" },
-    { key: "PolychromeTag", label: "Polychrome Tag" },
-    { key: "InvestmentTag", label: "Investment Tag" },
-    { key: "VoucherTag", label: "Voucher Tag" },
-    { key: "BossTag", label: "Boss Tag" },
-    { key: "StandardTag", label: "Standard Tag" },
-    { key: "CharmTag", label: "Charm Tag" },
-    { key: "MeteorTag", label: "Meteor Tag" },
-    { key: "BuffoonTag", label: "Buffoon Tag" },
-    { key: "HandyTag", label: "Handy Tag" },
-    { key: "GarbageTag", label: "Garbage Tag" },
-    { key: "EtherealTag", label: "Ethereal Tag" },
-    { key: "CouponTag", label: "Coupon Tag" },
-    { key: "DoubleTag", label: "Double Tag" },
-    { key: "JuggleTag", label: "Juggle Tag" },
-    { key: "D6Tag", label: "D6 Tag" },
-    { key: "TopupTag", label: "Top-up Tag" },
-    { key: "SpeedTag", label: "Speed Tag" },
-    { key: "OrbitalTag", label: "Orbital Tag" },
-    { key: "EconomyTag", label: "Economy Tag" },
-];
-const BOOSTER_PACK_ENTRIES = [
-    { key: "Arcana", label: "Arcana Pack" },
-    { key: "JumboArcana", label: "Jumbo Arcana Pack" },
-    { key: "MegaArcana", label: "Mega Arcana Pack" },
-    { key: "Celestial", label: "Celestial Pack" },
-    { key: "JumboCelestial", label: "Jumbo Celestial Pack" },
-    { key: "MegaCelestial", label: "Mega Celestial Pack" },
-    { key: "Standard", label: "Standard Pack" },
-    { key: "JumboStandard", label: "Jumbo Standard Pack" },
-    { key: "MegaStandard", label: "Mega Standard Pack" },
-    { key: "Buffoon", label: "Buffoon Pack" },
-    { key: "JumboBuffoon", label: "Jumbo Buffoon Pack" },
-    { key: "MegaBuffoon", label: "Mega Buffoon Pack" },
-    { key: "Spectral", label: "Spectral Pack" },
-    { key: "JumboSpectral", label: "Jumbo Spectral Pack" },
-    { key: "MegaSpectral", label: "Mega Spectral Pack" },
-];
-const BOSS_VALUE_MASK = 0xff;
-const ITEM_VALUE_MASK = 0xffff;
-export const MOTELY_DISPLAY_SCHEMA = {
-    bosses: BOSS_ENTRIES,
-    vouchers: VOUCHER_ENTRIES,
-    tags: TAG_ENTRIES,
-    boosterPacks: BOOSTER_PACK_ENTRIES,
-};
-function createLabelLookup(entries) {
-    return {
-        keyToLabel: new Map(entries.map((entry) => [entry.key, entry.label])),
-        labelToKey: new Map(entries.map((entry) => [entry.label, entry.key])),
-    };
-}
-const bossLookup = createLabelLookup(BOSS_ENTRIES);
-const voucherLookup = createLabelLookup(VOUCHER_ENTRIES);
-const tagLookup = createLabelLookup(TAG_ENTRIES);
-const boosterPackLookup = createLabelLookup(BOOSTER_PACK_ENTRIES);
+/**
+ * Display-name utilities — thin wrappers over motely-wasm runtime enums.
+ * No hand-maintained lookup tables. The enum IS the source of truth.
+ */
 function spaceSplit(value) {
     return value.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
 }
-function displayNameFromKey(lookup, key, fallback) {
-    return lookup.keyToLabel.get(key) ?? fallback;
-}
-function keyFromDisplayName(lookup, label) {
-    return lookup.labelToKey.get(label) ?? null;
-}
 function runtimeEnumKey(enumObject, value) {
     if (!enumObject || typeof enumObject !== "object")
         return null;
     const key = enumObject[String(value)];
     return typeof key === "string" && key.length > 0 ? key : null;
 }
-export function motelyBossDisplayNameFromKey(key) {
-    return displayNameFromKey(bossLookup, key, spaceSplit(key));
-}
-export function motelyVoucherDisplayNameFromKey(key) {
-    return displayNameFromKey(voucherLookup, key, spaceSplit(key));
-}
-export function motelyTagDisplayNameFromKey(key) {
-    return displayNameFromKey(tagLookup, key, spaceSplit(key));
-}
-export function motelyBoosterPackDisplayNameFromKey(key) {
-    return displayNameFromKey(boosterPackLookup, key, `${spaceSplit(key)} Pack`);
-}
-export function motelyItemDisplayNameFromKey(key) {
-    return getItemDisplayName(key);
-}
+// ─── Public API (same signatures as before, zero hand-rolled tables) ────────
 export function motelyBossDisplayName(value) {
-    const key = runtimeEnumKey(Motely.MotelyBossBlind, value & BOSS_VALUE_MASK);
-    return key === null ? `boss#${value}` : motelyBossDisplayNameFromKey(key);
+    const key = runtimeEnumKey(Motely.MotelyBossBlind, value & 0xff);
+    return key === null ? `boss#${value}` : spaceSplit(key);
+}
+export function motelyBossDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyVoucherDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyVoucher, value);
-    return key === null ? `voucher#${value}` : motelyVoucherDisplayNameFromKey(key);
+    return key === null ? `voucher#${value}` : spaceSplit(key);
+}
+export function motelyVoucherDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyTagDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyTag, value);
-    return key === null ? `tag#${value}` : motelyTagDisplayNameFromKey(key);
+    return key === null ? `tag#${value}` : spaceSplit(key);
+}
+export function motelyTagDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
 export function motelyBoosterPackDisplayName(value) {
     const key = runtimeEnumKey(Motely.MotelyBoosterPack, value);
-    return key === null ? `pack#${value}` : motelyBoosterPackDisplayNameFromKey(key);
+    return key === null ? `pack#${value}` : spaceSplit(key);
 }
-export function motelyItemDisplayNameFromValue(value) {
-    const key = runtimeEnumKey(Motely.MotelyItemType, value & ITEM_VALUE_MASK);
-    return key === null ? `item#${value}` : motelyItemDisplayNameFromKey(key);
-}
-export function motelyBossKeyFromDisplayName(label) {
-    return keyFromDisplayName(bossLookup, label);
-}
-export function motelyVoucherKeyFromDisplayName(label) {
-    return keyFromDisplayName(voucherLookup, label);
+export function motelyBoosterPackDisplayNameFromKey(key) {
+    return `${spaceSplit(key)} Pack`;
 }
-export function motelyTagKeyFromDisplayName(label) {
-    return keyFromDisplayName(tagLookup, label);
+export function motelyItemDisplayNameFromKey(key) {
+    return spaceSplit(key);
 }
-export function motelyBoosterPackKeyFromDisplayName(label) {
-    return keyFromDisplayName(boosterPackLookup, label);
+export function motelyItemDisplayNameFromValue(value) {
+    const key = runtimeEnumKey(Motely.MotelyItemType, value & 0xffff);
+    return key === null ? `item#${value}` : spaceSplit(key);
 }

package/dist/r3f/Card3D.d.ts

@@ -1,4 +1,4 @@
-import type { SpriteData } from '../sprites/spriteMapper.js';
+import type { MotelySpriteData } from '../decode/motelySprite.js';
 export declare const CARD_DIMENSIONS: {
     readonly WIDTH: 0.7;
     readonly HEIGHT: 0.95;
@@ -13,7 +13,7 @@ export declare const CARD_MAGNET: {
     readonly LERP_OUT: 10;
 };
 export interface Card3DProps {
-    sprite: SpriteData;
+    sprite: MotelySpriteData;
     position?: [number, number, number];
     rotation?: [number, number, number];
     selected?: boolean;

package/dist/r3f/Card3D.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo, useState, useEffect, memo } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useRef, useMemo, useState, memo } from 'react';
+import { useFrame, useLoader } from '@react-three/fiber';
 import { useSpring, animated } from '@react-spring/three';
 import * as THREE from 'three';
-import { SPRITE_SHEETS } from '../sprites/spriteData.js';
 export const CARD_DIMENSIONS = { WIDTH: 0.7, HEIGHT: 0.95, DEPTH: 0.02 };
 export const CARD_MAGNET = {
     MAX_TILT_X: 0.36,
@@ -14,50 +13,18 @@ export const CARD_MAGNET = {
     LERP_IN: 18,
     LERP_OUT: 10,
 };
-const SHEET_KEY_MAP = {
-    Jokers: 'jokers',
-    Tarots: 'tarots',
-    Vouchers: 'vouchers',
-    Boosters: 'boosters',
-    Enhancers: 'enhancers',
-    Editions: 'editions',
-    BlindChips: 'blinds',
-    tags: 'tags',
-};
-const _textureCache = new Map();
 function useSpriteTexture(sprite) {
-    const [texture, setTexture] = useState(null);
-    const serial = useRef(0);
-    useEffect(() => {
-        const id = ++serial.current;
-        const sheet = SPRITE_SHEETS[SHEET_KEY_MAP[sprite.type]];
-        const url = sheet.src;
-        const cols = sheet.columns;
-        const rows = sheet.rows;
-        const { x, y } = sprite.pos;
-        const applySlice = (base) => {
-            const t = base.clone();
-            t.repeat.set(1 / cols, 1 / rows);
-            t.offset.set(x / cols, (rows - y - 1) / rows);
-            t.needsUpdate = true;
-            return t;
-        };
-        if (_textureCache.has(url)) {
-            setTexture(applySlice(_textureCache.get(url)));
-            return;
-        }
-        const loader = new THREE.TextureLoader();
-        loader.load(url, (loaded) => {
-            if (id !== serial.current)
-                return;
-            loaded.colorSpace = THREE.SRGBColorSpace;
-            loaded.magFilter = THREE.NearestFilter;
-            loaded.minFilter = THREE.NearestFilter;
-            _textureCache.set(url, loaded);
-            setTexture(applySlice(loaded));
-        }, undefined, (err) => console.error('[Card3D] texture load failed:', url, err));
-    }, [sprite.type, sprite.pos.x, sprite.pos.y]);
-    return texture;
+    const texture = useLoader(THREE.TextureLoader, sprite.atlasPath);
+    return useMemo(() => {
+        const t = texture.clone();
+        t.colorSpace = THREE.SRGBColorSpace;
+        t.magFilter = THREE.NearestFilter;
+        t.minFilter = THREE.NearestFilter;
+        t.repeat.set(1 / sprite.gridCols, 1 / sprite.gridRows);
+        t.offset.set(sprite.gridCol / sprite.gridCols, 1 - ((sprite.gridRow + 1) / sprite.gridRows));
+        t.needsUpdate = true;
+        return t;
+    }, [texture, sprite.gridCol, sprite.gridRow, sprite.gridCols, sprite.gridRows]);
 }
 export const Card3D = memo(function Card3D({ sprite, position = [0, 0, 0], rotation = [0, 0, 0], selected = false, highlighted = false, onClick, onPointerEnter, onPointerLeave, }) {
     const tiltRef = useRef(null);

package/dist/r3f/JimboBillboard.d.ts

@@ -0,0 +1,10 @@
+import type { MotelySpriteData } from '../decode/motelySprite.js';
+export interface JimboBillboardProps {
+    sprite: MotelySpriteData | null;
+    label?: string;
+    width?: number;
+    height?: number;
+    yLockOnly?: boolean;
+    position?: [number, number, number];
+}
+export declare function JimboBillboard({ sprite, label, width, height, yLockOnly, position }: JimboBillboardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/r3f/JimboBillboard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Billboard } from '@react-three/drei';
+import { useLoader } from '@react-three/fiber';
+import * as THREE from 'three';
+export function JimboBillboard({ sprite, label, width = 3.4, height = 4.5, yLockOnly = false, position = [0, 0, 0] }) {
+    if (!sprite)
+        return null;
+    // Memoize texture to avoid per-render allocation
+    const texture = useLoader(THREE.TextureLoader, sprite.atlasPath);
+    const clonedTexture = useMemo(() => {
+        const tex = texture.clone();
+        tex.magFilter = THREE.NearestFilter;
+        tex.minFilter = THREE.NearestFilter;
+        // Set up sprite cropping
+        tex.repeat.set(1 / sprite.gridCols, 1 / sprite.gridRows);
+        tex.offset.set(sprite.gridCol / sprite.gridCols, 1 - ((sprite.gridRow + 1) / sprite.gridRows));
+        tex.needsUpdate = true;
+        return tex;
+    }, [texture, sprite.gridCol, sprite.gridRow, sprite.gridCols, sprite.gridRows]);
+    const material = useMemo(() => {
+        return new THREE.MeshBasicMaterial({
+            map: clonedTexture,
+            transparent: true,
+            alphaTest: 0.5
+        });
+    }, [clonedTexture]);
+    return (_jsx(Billboard, { lockY: yLockOnly, lockX: false, lockZ: false, position: position, children: _jsx("mesh", { material: material, children: _jsx("planeGeometry", { args: [width, height] }) }) }));
+}

package/dist/r3f/JimboText3D.d.ts

@@ -0,0 +1,9 @@
+export interface JimboText3DProps {
+    children: string;
+    color?: string;
+    outlineColor?: string;
+    outlineWidth?: number;
+    position?: [number, number, number];
+    fontSize?: number;
+}
+export declare function JimboText3D({ children, color, outlineColor, outlineWidth, position, fontSize }: JimboText3DProps): import("react/jsx-runtime").JSX.Element;

package/dist/r3f/JimboText3D.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@react-three/drei';
+import { resolveJamlAssetUrl } from '../assets.js';
+import { JimboColorOption } from '../ui/tokens.js';
+export function JimboText3D({ children, color = JimboColorOption.WHITE, outlineColor = JimboColorOption.BLACK, outlineWidth = 0.05, position = [0, 0, 0], fontSize = 1 }) {
+    // We use the m6x11plus font from assets if possible, or fallback
+    return (_jsx(Text, { position: position, fontSize: fontSize, color: color, outlineColor: outlineColor, outlineWidth: outlineWidth, font: resolveJamlAssetUrl('font'), anchorX: "center", anchorY: "middle", children: children }));
+}

package/dist/r3f.d.ts

@@ -1 +1,3 @@
 export * from './r3f/Card3D.js';
+export * from './r3f/JimboBillboard.js';
+export * from './r3f/JimboText3D.js';

package/dist/r3f.js

@@ -1 +1,3 @@
 export * from './r3f/Card3D.js';
+export * from './r3f/JimboBillboard.js';
+export * from './r3f/JimboText3D.js';

package/dist/render/CanvasRenderer.js

@@ -1,175 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { SPRITE_SHEETS } from "../sprites/spriteData.js";
-function loadImage(url) {
-    return new Promise((resolve) => {
-        const image = new window.Image();
-        image.addEventListener("load", () => {
-            resolve(image);
-        });
-        image.addEventListener("error", () => {
-            resolve(null);
-        });
-        image.src = url;
-    });
-}
-function renderImage(canvas, context, image, layer, timestamp) {
-    if (!image || !layer || !layer?.pos)
-        return 0;
-    const cardWidth = image.width / layer.columns;
-    const cardHeight = image.height / layer.rows;
-    const canvasStyle = canvas.style;
-    if (layer.order === 0) {
-        canvas.width = cardWidth;
-        canvas.height = cardHeight;
-        canvasStyle.width = `${cardWidth}px`;
-        canvasStyle.height = `${cardHeight}px`;
-    }
-    canvasStyle.imageRendering = "pixelated";
-    context.imageSmoothingEnabled = true;
-    context.save();
-    if (layer.animated && timestamp) {
-        const elapsed = timestamp;
-        const yOffset = Math.sin(elapsed / 1000) * 3;
-        const xOffset = Math.sin(elapsed / 1500) * 1.5;
-        context.globalAlpha = 0.65 + (Math.sin(elapsed / 2000) + 1) * 0.075;
-        context.translate(xOffset, yOffset);
-    }
-    context.drawImage(image, layer.pos.x * cardWidth, layer.pos.y * cardHeight, cardWidth, cardHeight, 0, 0, canvas.width, canvas.height);
-    context.restore();
-    return cardWidth / cardHeight;
-}
+import { useJamlCardRenderer } from "../ui/hooks.js";
 export function JamlCardRenderer({ layers, invert = false, className = "", hoverTilt = false }) {
-    const canvasRef = useRef(null);
-    const imageCacheRef = useRef(new Map());
-    const [ratio, setRatio] = useState(3 / 4);
-    const [, forceUpdate] = useState(0);
-    const animationFrameRef = useRef(null);
-    const [elapsed, setElapsed] = useState(0);
-    const [isHovered, setIsHovered] = useState(false);
-    const [transform, setTransform] = useState("none");
-    const hasAnimatedLayer = layers?.some((layer) => layer.animated);
-    useEffect(() => {
-        let cancelled = false;
-        const imageCache = imageCacheRef.current;
-        const preload = async () => {
-            const urls = Array.from(new Set(Object.values(SPRITE_SHEETS).map((sheet) => sheet.src)));
-            const images = await Promise.all(urls.map((url) => loadImage(url)));
-            if (cancelled)
-                return;
-            images.forEach((image, index) => {
-                if (image) {
-                    imageCache.set(urls[index], image);
-                }
-            });
-            forceUpdate((prev) => prev + 1);
-        };
-        preload().catch((err) => {
-            console.error("[JamlCardRenderer]", err);
-        });
-        return () => {
-            cancelled = true;
-            imageCache.clear();
-        };
-    }, []);
-    useEffect(() => {
-        if (!hasAnimatedLayer)
-            return;
-        let startTime;
-        const animate = (timestamp) => {
-            if (!startTime)
-                startTime = timestamp;
-            const now = timestamp - startTime;
-            if (!animationFrameRef.current || timestamp - 100 > animationFrameRef.current) {
-                animationFrameRef.current = timestamp;
-                setElapsed(now);
-            }
-            animationFrameRef.current = requestAnimationFrame(animate);
-        };
-        animationFrameRef.current = requestAnimationFrame(animate);
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [hasAnimatedLayer]);
-    useEffect(() => {
-        if (!canvasRef.current || !layers || layers.length === 0)
-            return;
-        const canvas = canvasRef.current;
-        const context = canvas.getContext("2d");
-        if (!context)
-            return;
-        let cancelled = false;
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        [...layers]
-            .sort((a, b) => a.order - b.order)
-            .forEach((layer) => {
-            if (imageCacheRef.current.has(layer.source)) {
-                const image = imageCacheRef.current.get(layer.source);
-                if (!image)
-                    return;
-                const imageRatio = renderImage(canvas, context, image, layer, hasAnimatedLayer ? elapsed : undefined);
-                if (layer.order === 0) {
-                    setRatio(imageRatio);
-                }
-                return;
-            }
-            loadImage(layer.source).then((img) => {
-                if (cancelled || !img)
-                    return;
-                const imageRatio = renderImage(canvas, context, img, layer, hasAnimatedLayer ? elapsed : undefined);
-                imageCacheRef.current.set(layer.source, img);
-                if (layer.order === 0) {
-                    setRatio(imageRatio);
-                }
-                forceUpdate((prev) => prev + 1);
-            });
-        });
-        if (invert) {
-            canvas.style.filter = "invert(0.94)";
-        }
-        else {
-            canvas.style.filter = "none";
-        }
-        return () => { cancelled = true; };
-    }, [layers, elapsed, invert, hasAnimatedLayer]);
-    const handlePointerEnter = (event) => {
-        if (!hoverTilt || event.pointerType === "touch")
-            return;
-        setIsHovered(true);
-    };
-    const handlePointerLeave = () => {
-        if (!hoverTilt)
-            return;
-        setIsHovered(false);
-        setTransform("none");
-    };
-    const handlePointerMove = (event) => {
-        if (!hoverTilt || event.pointerType === "touch")
-            return;
-        const rect = event.currentTarget.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const rotateY = (x / rect.width) * 12 - 6;
-        const rotateX = (y / rect.height) * -16 + 8;
-        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`);
-    };
-    const containerStyle = {
-        aspectRatio: String(ratio),
-        width: "100%",
-        display: "flex",
-        transition: hoverTilt && !isHovered ? "transform 0.4s ease" : undefined,
-        transform: hoverTilt ? (isHovered ? transform : "none") : undefined,
-        transformStyle: hoverTilt ? "preserve-3d" : undefined,
-        transformOrigin: hoverTilt ? "center center" : undefined,
-    };
-    const canvasStyle = {
-        borderRadius: "6px",
-        boxShadow: hoverTilt && isHovered ? "0 2px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.2)",
-        imageRendering: "pixelated",
-        transition: hoverTilt && !isHovered ? "box-shadow 0.4s ease-out" : undefined,
-    };
-    return (_jsx("div", { className: className, style: containerStyle, onPointerEnter: hoverTilt ? handlePointerEnter : undefined, onPointerLeave: hoverTilt ? handlePointerLeave : undefined, onPointerMove: hoverTilt ? handlePointerMove : undefined, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+    const { canvasRef, containerStyle, canvasStyle, handlers } = useJamlCardRenderer({
+        layers,
+        invert,
+        hoverTilt
+    });
+    return (_jsx("div", { className: className, style: containerStyle, ...handlers, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
 }

package/dist/sprites/spriteData.d.ts

@@ -32,6 +32,7 @@ export declare const SPRITE_SHEETS: {
     readonly vouchers: SpriteSheetInfo;
     readonly tags: SpriteSheetInfo;
     readonly boosters: SpriteSheetInfo;
+    readonly stakes: SpriteSheetInfo;
 };
 export declare const JOKERS: SpriteEntry[];
 export declare const JOKER_FACES: SpriteEntry[];

package/dist/sprites/spriteData.js

@@ -27,6 +27,7 @@ export const SPRITE_SHEETS = {
     vouchers: defineSpriteSheet("vouchers", 9, 4),
     tags: defineSpriteSheet("tags", 6, 5),
     boosters: defineSpriteSheet("boosters", 4, 9),
+    stakes: defineSpriteSheet("stakes", 5, 2),
 };
 export const JOKERS = [
     { name: "Joker", pos: { x: 0, y: 0 } }, { name: "Greedy Joker", pos: { x: 6, y: 1 } }, { name: "Lusty Joker", pos: { x: 7, y: 1 } }, { name: "Wrathful Joker", pos: { x: 8, y: 1 } }, { name: "Gluttonous Joker", pos: { x: 9, y: 1 } }, { name: "Jolly Joker", pos: { x: 2, y: 0 } }, { name: "Zany Joker", pos: { x: 3, y: 0 } }, { name: "Mad Joker", pos: { x: 4, y: 0 } }, { name: "Crazy Joker", pos: { x: 5, y: 0 } }, { name: "Droll Joker", pos: { x: 6, y: 0 } }, { name: "Sly Joker", pos: { x: 0, y: 14 } }, { name: "Wily Joker", pos: { x: 1, y: 14 } }, { name: "Clever Joker", pos: { x: 2, y: 14 } }, { name: "Devious Joker", pos: { x: 3, y: 14 } }, { name: "Crafty Joker", pos: { x: 4, y: 14 } }, { name: "Half Joker", pos: { x: 7, y: 0 } }, { name: "Joker Stencil", pos: { x: 2, y: 5 } }, { name: "Four Fingers", pos: { x: 6, y: 6 } }, { name: "Mime", pos: { x: 4, y: 1 } }, { name: "Credit Card", pos: { x: 5, y: 1 } }, { name: "Ceremonial Dagger", pos: { x: 5, y: 5 } }, { name: "Banner", pos: { x: 1, y: 2 } }, { name: "Mystic Summit", pos: { x: 2, y: 2 } }, { name: "Marble Joker", pos: { x: 3, y: 2 } }, { name: "Loyalty Card", pos: { x: 4, y: 2 } }, { name: "8 Ball", pos: { x: 0, y: 5 } }, { name: "Misprint", pos: { x: 6, y: 2 } }, { name: "Dusk", pos: { x: 4, y: 7 } }, { name: "Raised Fist", pos: { x: 8, y: 2 } }, { name: "Chaos the Clown", pos: { x: 1, y: 0 } }, { name: "Fibonacci", pos: { x: 1, y: 5 } }, { name: "Steel Joker", pos: { x: 7, y: 2 } }, { name: "Scary Face", pos: { x: 2, y: 3 } }, { name: "Abstract Joker", pos: { x: 3, y: 3 } }, { name: "Delayed Gratification", pos: { x: 4, y: 3 } }, { name: "Hack", pos: { x: 5, y: 2 } }, { name: "Pareidolia", pos: { x: 6, y: 3 } }, { name: "Gros Michel", pos: { x: 7, y: 6 } }, { name: "Even Steven", pos: { x: 8, y: 3 } }, { name: "Odd Todd", pos: { x: 9, y: 3 } }, { name: "Scholar", pos: { x: 3, y: 6 } }, { name: "Business Card", pos: { x: 1, y: 4 } }, { name: "Supernova", pos: { x: 2, y: 4 } }, { name: "Ride the Bus", pos: { x: 1, y: 6 } }, { name: "Space Joker", pos: { x: 3, y: 5 } }, { name: "Egg", pos: { x: 0, y: 10 } }, { name: "Burglar", pos: { x: 1, y: 10 } }, { name: "Blackboard", pos: { x: 2, y: 10 } }, { name: "Runner", pos: { x: 3, y: 10 } }, { name: "Ice Cream", pos: { x: 4, y: 10 } }, { name: "DNA", pos: { x: 5, y: 10 } }, { name: "Splash", pos: { x: 6, y: 10 } }, { name: "Blue Joker", pos: { x: 7, y: 10 } }, { name: "Sixth Sense", pos: { x: 8, y: 10 } }, { name: "Constellation", pos: { x: 9, y: 10 } }, { name: "Hiker", pos: { x: 0, y: 11 } }, { name: "Faceless Joker", pos: { x: 1, y: 11 } }, { name: "Green Joker", pos: { x: 2, y: 11 } }, { name: "Superposition", pos: { x: 3, y: 11 } }, { name: "To Do List", pos: { x: 4, y: 11 } }, { name: "Cavendish", pos: { x: 5, y: 11 } }, { name: "Card Sharp", pos: { x: 6, y: 11 } }, { name: "Red Card", pos: { x: 7, y: 11 } }, { name: "Madness", pos: { x: 8, y: 11 } }, { name: "Square Joker", pos: { x: 9, y: 11 } }, { name: "Seance", pos: { x: 0, y: 12 } }, { name: "Riff-raff", pos: { x: 1, y: 12 } }, { name: "Vampire", pos: { x: 2, y: 12 } }, { name: "Shortcut", pos: { x: 3, y: 12 } }, { name: "Hologram", pos: { x: 4, y: 12 } }, { name: "Vagabond", pos: { x: 5, y: 12 } }, { name: "Baron", pos: { x: 6, y: 12 } }, { name: "Cloud 9", pos: { x: 7, y: 12 } }, { name: "Rocket", pos: { x: 8, y: 12 } }, { name: "Obelisk", pos: { x: 9, y: 12 } }, { name: "Midas Mask", pos: { x: 0, y: 13 } }, { name: "Luchador", pos: { x: 1, y: 13 } }, { name: "Photograph", pos: { x: 2, y: 13 } }, { name: "Gift Card", pos: { x: 3, y: 13 } }, { name: "Turtle Bean", pos: { x: 4, y: 13 } }, { name: "Erosion", pos: { x: 5, y: 13 } }, { name: "Reserved Parking", pos: { x: 6, y: 13 } }, { name: "Mail In Rebate", pos: { x: 7, y: 13 } }, { name: "To the Moon", pos: { x: 8, y: 13 } }, { name: "Hallucination", pos: { x: 9, y: 13 } }, { name: "Fortune Teller", pos: { x: 7, y: 5 } }, { name: "Juggler", pos: { x: 0, y: 1 } }, { name: "Drunkard", pos: { x: 1, y: 1 } }, { name: "Stone Joker", pos: { x: 9, y: 0 } }, { name: "Golden Joker", pos: { x: 9, y: 2 } }, { name: "Lucky Cat", pos: { x: 5, y: 14 } }, { name: "Baseball Card", pos: { x: 6, y: 14 } }, { name: "Bull", pos: { x: 7, y: 14 } }, { name: "Diet Cola", pos: { x: 8, y: 14 } }, { name: "Trading Card", pos: { x: 9, y: 14 } }, { name: "Flash Card", pos: { x: 0, y: 15 } }, { name: "Popcorn", pos: { x: 1, y: 15 } }, { name: "Spare Trousers", pos: { x: 4, y: 15 } }, { name: "Ancient Joker", pos: { x: 7, y: 15 } }, { name: "Ramen", pos: { x: 2, y: 15 } }, { name: "Walkie Talkie", pos: { x: 8, y: 15 } }, { name: "Seltzer", pos: { x: 3, y: 15 } }, { name: "Castle", pos: { x: 9, y: 15 } }, { name: "Smiley Face", pos: { x: 6, y: 15 } }, { name: "Campfire", pos: { x: 5, y: 15 } }, { name: "Golden Ticket", pos: { x: 5, y: 3 } }, { name: "Mr. Bones", pos: { x: 3, y: 4 } }, { name: "Acrobat", pos: { x: 2, y: 1 } }, { name: "Sock and Buskin", pos: { x: 3, y: 1 } }, { name: "Swashbuckler", pos: { x: 9, y: 5 } }, { name: "Troubadour", pos: { x: 0, y: 2 } }, { name: "Certificate", pos: { x: 8, y: 8 } }, { name: "Smeared Joker", pos: { x: 4, y: 6 } }, { name: "Throwback", pos: { x: 5, y: 7 } }, { name: "Hanging Chad", pos: { x: 9, y: 6 } }, { name: "Rough Gem", pos: { x: 9, y: 7 } }, { name: "Bloodstone", pos: { x: 0, y: 8 } }, { name: "Arrowhead", pos: { x: 1, y: 8 } }, { name: "Onyx Agate", pos: { x: 2, y: 8 } }, { name: "Glass Joker", pos: { x: 1, y: 3 } }, { name: "Showman", pos: { x: 6, y: 5 } }, { name: "Flower Pot", pos: { x: 0, y: 6 } }, { name: "Blueprint", pos: { x: 0, y: 3 } }, { name: "Wee Joker", pos: { x: 0, y: 4 } }, { name: "Merry Andy", pos: { x: 8, y: 0 } }, { name: "Oops! All 6s", pos: { x: 5, y: 6 } }, { name: "The Idol", pos: { x: 6, y: 7 } }, { name: "Seeing Double", pos: { x: 4, y: 4 } }, { name: "Matador", pos: { x: 4, y: 5 } }, { name: "Hit the Road", pos: { x: 8, y: 5 } }, { name: "The Duo", pos: { x: 5, y: 4 } }, { name: "The Trio", pos: { x: 6, y: 4 } }, { name: "The Family", pos: { x: 7, y: 4 } }, { name: "The Order", pos: { x: 8, y: 4 } }, { name: "The Tribe", pos: { x: 9, y: 4 } }, { name: "Stuntman", pos: { x: 8, y: 6 } }, { name: "Invisible Joker", pos: { x: 1, y: 7 } }, { name: "Brainstorm", pos: { x: 7, y: 7 } }, { name: "Satellite", pos: { x: 8, y: 7 } }, { name: "Shoot the Moon", pos: { x: 2, y: 6 } }, { name: "Drivers License", pos: { x: 0, y: 7 } }, { name: "Cartomancer", pos: { x: 7, y: 3 } }, { name: "Astronomer", pos: { x: 2, y: 7 } }, { name: "Burnt Joker", pos: { x: 3, y: 7 } }, { name: "Bootstraps", pos: { x: 9, y: 8 } }, { name: "Canio", pos: { x: 3, y: 8 } }, { name: "Triboulet", pos: { x: 4, y: 8 } }, { name: "Yorick", pos: { x: 5, y: 8 } }, { name: "Chicot", pos: { x: 6, y: 8 } }, { name: "Perkeo", pos: { x: 7, y: 8 } },