jaml-ui 0.24.20 → 0.25.2

package/dist/components/jamlMap/JamlMapEditorDemo.js

@@ -1,323 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { MysterySlot } from "./MysterySlot.js";
-import { JokerPicker } from "./JokerPicker.js";
-import { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";
-import { JimboColorOption, withAlpha } from "../../ui/tokens.js";
-// ─── Category menu items ─────────────────────────────────────────────────────
-const C = JimboColorOption;
-const CATEGORIES = [
-    { key: "joker", label: "Joker", icon: "🃏", color: C.BLUE, hint: "Shop, Buffoon Pack" },
-    { key: "voucher", label: "Voucher", icon: "🎫", color: C.GOLD, hint: "1 per Ante in shop" },
-    { key: "tarot", label: "Tarot Card", icon: "🔮", color: C.PURPLE, hint: "Arcana Pack, shop" },
-    { key: "planet", label: "Planet Card", icon: "🪐", color: C.BLUE, hint: "Celestial Pack, shop" },
-    { key: "spectral", label: "Spectral Card", icon: "👻", color: C.TEAL_GREY, hint: "Ghost Deck, Spectral Pack" },
-    { key: "tag", label: "Tag", icon: "🏷️", color: C.GREEN, hint: "Skip blind reward" },
-    { key: "boss", label: "Boss Blind", icon: "👁️", color: C.RED, hint: "End of each Ante" },
-    { key: "pack", label: "Booster Pack", icon: "📦", color: C.ORANGE, hint: "Arcana, Celestial, etc." },
-];
-// ─── Component ───────────────────────────────────────────────────────────────
-const INITIAL_SLOTS = 8;
-export function JamlMapEditorDemo({ zone: initialZone = "must", onChange, }) {
-    const [zone, setZone] = useState(initialZone);
-    const [slots, setSlots] = useState(Array(INITIAL_SLOTS).fill(null));
-    const [activeSlot, setActiveSlot] = useState(null);
-    const [pickerFlow, setPickerFlow] = useState("category");
-    const handleSlotTap = useCallback((index) => {
-        setActiveSlot(index);
-        setPickerFlow("category");
-    }, []);
-    const handleSlotClear = useCallback((index) => {
-        setSlots((prev) => {
-            const next = [...prev];
-            next[index] = null;
-            onChange?.(next);
-            return next;
-        });
-    }, [onChange]);
-    const handleCategorySelect = useCallback((cat) => {
-        if (cat === "joker") {
-            setPickerFlow("joker");
-        }
-        else {
-            setPickerFlow(cat);
-        }
-    }, []);
-    const handleItemSelect = useCallback((selection) => {
-        if (activeSlot === null)
-            return;
-        setSlots((prev) => {
-            const next = [...prev];
-            next[activeSlot] = selection;
-            onChange?.(next);
-            return next;
-        });
-        setActiveSlot(null);
-    }, [activeSlot, onChange]);
-    const handlePickerCancel = useCallback(() => {
-        if (pickerFlow !== "category") {
-            // Go back to category selection
-            setPickerFlow("category");
-        }
-        else {
-            setActiveSlot(null);
-        }
-    }, [pickerFlow]);
-    const handleOverlayClose = useCallback(() => {
-        setActiveSlot(null);
-    }, []);
-    const filledCount = slots.filter(Boolean).length;
-    // Build the JSON tree from slots
-    const jsonTree = useMemo(() => buildJsonTree(zone, slots), [zone, slots]);
-    return (_jsxs("div", { style: styles.wrapper, children: [_jsx("div", { style: styles.zoneBar, children: ["must", "should", "mustnot"].map((z) => (_jsx("button", { onClick: () => setZone(z), style: {
-                        ...styles.zoneBtn,
-                        borderColor: zone === z ? ZONE_COLORS[z] : C.TEAL_GREY,
-                        color: zone === z ? ZONE_COLORS[z] : C.GREY,
-                        background: zone === z ? withAlpha(ZONE_COLORS[z], 0.1) : "transparent",
-                    }, children: z.toUpperCase() }, z))) }), _jsxs("div", { style: styles.sectionLabel, children: [_jsx("span", { style: { color: ZONE_COLORS[zone] }, children: "Shop Items" }), _jsxs("span", { style: { color: C.GREY, fontSize: 11 }, children: [filledCount, "/", INITIAL_SLOTS, " defined"] })] }), _jsx("div", { style: styles.slotRow, children: slots.map((selection, i) => (_jsx(MysterySlot, { zone: zone, sheetType: "Jokers", selection: selection ?? undefined, width: 48, onTap: () => handleSlotTap(i), onClear: selection ? () => handleSlotClear(i) : undefined }, i))) }), _jsx("div", { style: styles.scrollHint, children: "\u25C0 swipe \u25B6" }), activeSlot !== null && (_jsxs("div", { style: styles.overlay, children: [_jsx("div", { style: styles.overlayBackdrop, onClick: handleOverlayClose }), _jsx("div", { style: styles.pickerWrapper, children: pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect, onCancel: handleOverlayClose })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel })) })] })), filledCount > 0 && (_jsxs("div", { style: styles.jsonPreview, children: [_jsxs("div", { style: styles.jsonHeader, children: [_jsx("span", { children: "Filter Preview" }), _jsx("span", { style: { fontSize: 10, opacity: 0.6 }, children: "JSON" })] }), _jsx("div", { style: styles.jsonBody, children: _jsx(JsonTreeNode, { data: jsonTree, indent: 0 }) })] }))] }));
-}
-// ─── Category Selection Menu ─────────────────────────────────────────────────
-function CategoryMenu({ onSelect, onCancel, }) {
-    return (_jsxs("div", { style: styles.catMenuContainer, children: [_jsxs("div", { style: styles.catMenuHeader, children: [_jsx("button", { onClick: onCancel, style: styles.backBtn, children: "\u2715" }), _jsx("span", { style: styles.catMenuTitle, children: "Select Category" }), _jsx("div", { style: { width: 44 } })] }), _jsx("div", { style: styles.catGrid, children: CATEGORIES.map((cat) => (_jsxs("button", { onClick: () => onSelect(cat.key), style: {
-                        ...styles.catBtn,
-                        borderColor: withAlpha(cat.color, 0.3),
-                    }, children: [_jsx("span", { style: styles.catIcon, children: cat.icon }), _jsxs("div", { style: styles.catText, children: [_jsx("span", { style: { ...styles.catLabel, color: cat.color }, children: cat.label }), _jsx("span", { style: styles.catHint, children: cat.hint })] })] }, cat.key))) })] }));
-}
-// ─── JSON tree renderer ──────────────────────────────────────────────────────
-function JsonTreeNode({ data, indent }) {
-    if (data === null || data === undefined) {
-        return _jsx("span", { style: { color: C.GREY }, children: "null" });
-    }
-    if (typeof data === "string") {
-        return _jsxs("span", { style: { color: C.GREEN_TEXT }, children: ["\"", data, "\""] });
-    }
-    if (typeof data === "number" || typeof data === "boolean") {
-        return _jsx("span", { style: { color: C.GOLD }, children: String(data) });
-    }
-    if (Array.isArray(data)) {
-        if (data.length === 0)
-            return _jsx("span", { style: { color: C.GREY }, children: "[]" });
-        return (_jsxs("span", { children: [_jsx("span", { style: { color: C.GREY }, children: "[" }), data.map((item, i) => (_jsxs("div", { style: { paddingLeft: (indent + 1) * 14 }, children: [_jsx(JsonTreeNode, { data: item, indent: indent + 1 }), i < data.length - 1 && _jsx("span", { style: { color: C.GREY }, children: "," })] }, i))), _jsx("div", { style: { paddingLeft: indent * 14 }, children: _jsx("span", { style: { color: C.GREY }, children: "]" }) })] }));
-    }
-    if (typeof data === "object") {
-        const entries = Object.entries(data);
-        if (entries.length === 0)
-            return _jsx("span", { style: { color: C.GREY }, children: "{}" });
-        return (_jsxs("span", { children: [_jsx("span", { style: { color: C.GREY }, children: "{" }), entries.map(([key, val], i) => (_jsxs("div", { style: { paddingLeft: (indent + 1) * 14 }, children: [_jsx("span", { style: { color: C.BLUE }, children: key }), _jsx("span", { style: { color: C.GREY }, children: ": " }), _jsx(JsonTreeNode, { data: val, indent: indent + 1 }), i < entries.length - 1 && _jsx("span", { style: { color: C.GREY }, children: "," })] }, key))), _jsx("div", { style: { paddingLeft: indent * 14 }, children: _jsx("span", { style: { color: C.GREY }, children: "}" }) })] }));
-    }
-    return _jsx("span", { children: String(data) });
-}
-// ─── Build JSON tree from slots ──────────────────────────────────────────────
-function buildJsonTree(zone, slots) {
-    const filled = slots.filter(Boolean);
-    if (filled.length === 0)
-        return {};
-    const jamlZone = zone === "mustnot" ? "mustNot" : zone;
-    // Group by clauseKey
-    const groups = new Map();
-    for (const s of filled) {
-        const existing = groups.get(s.clauseKey) ?? [];
-        existing.push(s.value);
-        groups.set(s.clauseKey, existing);
-    }
-    const clauses = [];
-    for (const [key, values] of groups) {
-        if (values.length === 1) {
-            clauses.push({ [key]: values[0] });
-        }
-        else {
-            clauses.push({ [key]: values });
-        }
-    }
-    return { [jamlZone]: clauses };
-}
-// ─── Category → picker config mapping ────────────────────────────────────────
-const CATEGORY_CONFIG_MAP = {
-    joker: VOUCHER_PICKER_CONFIG, // Not used — routed to JokerPicker
-    voucher: VOUCHER_PICKER_CONFIG,
-    tag: TAG_PICKER_CONFIG,
-    boss: BOSS_PICKER_CONFIG,
-    tarot: TAROT_PICKER_CONFIG,
-    planet: PLANET_PICKER_CONFIG,
-    spectral: SPECTRAL_PICKER_CONFIG,
-    pack: PACK_PICKER_CONFIG,
-};
-// ─── Zone colors ─────────────────────────────────────────────────────────────
-const ZONE_COLORS = {
-    must: C.BLUE,
-    should: C.RED,
-    mustnot: C.ORANGE,
-};
-// ─── Styles ──────────────────────────────────────────────────────────────────
-const styles = {
-    wrapper: {
-        position: "relative",
-        padding: 16,
-        background: C.DARKEST,
-        borderRadius: 8,
-        border: `1px solid ${C.TEAL_GREY}`,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-    },
-    zoneBar: {
-        display: "flex",
-        gap: 6,
-        marginBottom: 12,
-    },
-    zoneBtn: {
-        padding: "5px 12px",
-        border: "2px solid",
-        borderRadius: 4,
-        background: "none",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        fontSize: 12,
-        fontWeight: "bold",
-        cursor: "pointer",
-        transition: "all 150ms",
-        letterSpacing: 1,
-    },
-    sectionLabel: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: 8,
-        fontSize: 14,
-        fontWeight: "bold",
-    },
-    slotRow: {
-        display: "flex",
-        gap: 6,
-        overflowX: "auto",
-        paddingBottom: 8,
-        WebkitOverflowScrolling: "touch",
-    },
-    scrollHint: {
-        textAlign: "center",
-        fontSize: 10,
-        color: C.GREY,
-        opacity: 0.5,
-        marginTop: 2,
-        marginBottom: 8,
-    },
-    overlay: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    overlayBackdrop: {
-        position: "absolute",
-        inset: 0,
-        background: withAlpha(C.BLACK, 0.6),
-        backdropFilter: "blur(4px)",
-    },
-    pickerWrapper: {
-        position: "relative",
-        zIndex: 1,
-        width: "90%",
-        maxWidth: 420,
-    },
-    // Category menu
-    catMenuContainer: {
-        background: C.DARKEST,
-        border: `2px solid ${C.TEAL_GREY}`,
-        borderRadius: 8,
-        overflow: "hidden",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        boxShadow: `0 8px 32px ${withAlpha(C.BLACK, 0.6)}`,
-    },
-    catMenuHeader: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "10px 12px",
-        borderBottom: `1px solid ${C.TEAL_GREY}`,
-        background: withAlpha(C.DARK_GREY, 0.5),
-    },
-    catMenuTitle: {
-        color: C.WHITE,
-        fontSize: 16,
-        fontWeight: "bold",
-        letterSpacing: 0.5,
-    },
-    backBtn: {
-        background: "none",
-        border: "none",
-        color: C.GREY,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        fontSize: 14,
-        cursor: "pointer",
-        padding: "4px 8px",
-    },
-    catGrid: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: 6,
-        padding: 10,
-        maxHeight: "70vh",
-        overflowY: "auto",
-    },
-    catBtn: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "10px 10px",
-        border: "1px solid",
-        borderRadius: 6,
-        cursor: "pointer",
-        background: withAlpha(C.DARK_GREY, 0.3),
-        textAlign: "left",
-        transition: "background 150ms, transform 100ms",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-    },
-    catIcon: {
-        fontSize: 20,
-        flexShrink: 0,
-    },
-    catText: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 2,
-        minWidth: 0,
-    },
-    catLabel: {
-        fontSize: 13,
-        fontWeight: "bold",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-    },
-    catHint: {
-        fontSize: 9,
-        color: C.GREY,
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        lineHeight: "1.2",
-    },
-    // JSON preview
-    jsonPreview: {
-        marginTop: 12,
-        borderRadius: 4,
-        border: `1px solid ${C.TEAL_GREY}`,
-        overflow: "hidden",
-    },
-    jsonHeader: {
-        padding: "6px 10px",
-        fontSize: 11,
-        color: C.GREY,
-        background: withAlpha(C.DARK_GREY, 0.5),
-        borderBottom: `1px solid ${C.TEAL_GREY}`,
-        letterSpacing: 1,
-        textTransform: "uppercase",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    jsonBody: {
-        padding: "8px 10px",
-        fontSize: 12,
-        background: withAlpha(C.DARKEST, 0.8),
-        lineHeight: "1.6",
-        fontFamily: "m6x11plus, ui-monospace, monospace",
-        overflowX: "auto",
-    },
-};

package/dist/components/jamlMap/JokerPicker.js

@@ -1,113 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { JimboSprite } from "../../ui/sprites.js";
-import { JimboColorOption } from "../../ui/tokens.js";
-import { JimboButton } from "../../ui/panel.js";
-import { JimboText } from "../../ui/jimboText.js";
-import { JOKERS } from "../../sprites/spriteData.js";
-const LEGENDARY_JOKERS = new Set([
-    "Canio", "Triboulet", "Yorick", "Chicot", "Perkeo",
-]);
-const RARE_JOKERS = new Set([
-    "Blueprint", "Brainstorm", "Drivers License", "Burnt Joker",
-    "Cartomancer", "Astronomer", "Satellite", "Shoot the Moon",
-    "The Idol", "Seeing Double", "Matador", "Hit the Road",
-    "The Duo", "The Trio", "The Family", "The Order", "The Tribe",
-    "Stuntman", "Invisible Joker", "Showman", "Flower Pot",
-    "Glass Joker", "Wee Joker", "Merry Andy", "Oops! All 6s",
-    "Certificate", "Smeared Joker", "Throwback", "Hanging Chad",
-    "Rough Gem", "Bloodstone", "Arrowhead", "Onyx Agate",
-]);
-const UNCOMMON_JOKERS = new Set([
-    "Greedy Joker", "Lusty Joker", "Wrathful Joker", "Gluttonous Joker",
-    "Jolly Joker", "Zany Joker", "Mad Joker", "Crazy Joker", "Droll Joker",
-    "Sly Joker", "Wily Joker", "Clever Joker", "Devious Joker", "Crafty Joker",
-    "Joker Stencil", "Four Fingers", "Mime", "Credit Card",
-    "Ceremonial Dagger", "Banner", "Mystic Summit", "Marble Joker",
-    "Loyalty Card", "8 Ball", "Misprint", "Dusk", "Raised Fist",
-    "Fibonacci", "Steel Joker", "Scary Face", "Abstract Joker",
-    "Delayed Gratification", "Hack", "Pareidolia", "Gros Michel",
-    "Even Steven", "Odd Todd", "Scholar", "Business Card", "Supernova",
-    "Ride the Bus", "Space Joker", "Egg", "Burglar", "Blackboard",
-    "Runner", "Ice Cream", "DNA", "Splash", "Blue Joker",
-    "Sixth Sense", "Constellation", "Hiker", "Faceless Joker",
-    "Green Joker", "Superposition", "To Do List", "Cavendish",
-    "Card Sharp", "Red Card", "Madness", "Square Joker",
-    "Seance", "Riff-raff", "Vampire", "Shortcut",
-    "Hologram", "Vagabond", "Baron", "Cloud 9", "Rocket", "Obelisk",
-    "Midas Mask", "Luchador", "Photograph", "Gift Card", "Turtle Bean",
-    "Erosion", "Reserved Parking", "Mail In Rebate", "To the Moon", "Hallucination",
-    "Fortune Teller", "Golden Joker", "Lucky Cat", "Baseball Card", "Bull",
-    "Diet Cola", "Trading Card", "Flash Card", "Popcorn",
-    "Spare Trousers", "Ancient Joker", "Ramen", "Walkie Talkie",
-    "Seltzer", "Castle", "Smiley Face", "Campfire",
-    "Golden Ticket", "Mr. Bones", "Acrobat", "Sock and Buskin",
-    "Swashbuckler", "Troubadour", "Bootstraps",
-]);
-function getJokerRarity(name) {
-    if (LEGENDARY_JOKERS.has(name))
-        return "legendary";
-    if (RARE_JOKERS.has(name))
-        return "rare";
-    if (UNCOMMON_JOKERS.has(name))
-        return "uncommon";
-    return "common";
-}
-// ─── Rarity → JimboButton tones ──────────────────────────────────────────────
-const C = JimboColorOption;
-const RARITY_META = {
-    common: { label: "Common", tone: "blue", hint: "Found in shops and Buffoon Packs" },
-    uncommon: { label: "Uncommon", tone: "green", hint: "Found in shops and Buffoon Packs" },
-    rare: { label: "Rare", tone: "red", hint: "Found in shops and Buffoon Packs" },
-    legendary: { label: "Legendary", tone: "tarot", hint: "Spawns from The Soul only!" },
-};
-export function JokerPicker({ onSelect }) {
-    const [step, setStep] = useState("rarity");
-    const [selectedRarity, setSelectedRarity] = useState(null);
-    const [search, setSearch] = useState("");
-    const filteredJokers = useMemo(() => {
-        if (!selectedRarity)
-            return [];
-        return JOKERS.filter((j) => {
-            if (getJokerRarity(j.name) !== selectedRarity)
-                return false;
-            if (search && !j.name.toLowerCase().includes(search.toLowerCase()))
-                return false;
-            return true;
-        });
-    }, [selectedRarity, search]);
-    const handleRaritySelect = useCallback((rarity) => {
-        setSelectedRarity(rarity);
-        setStep("specific");
-        setSearch("");
-    }, []);
-    const handleJokerSelect = useCallback((joker) => {
-        onSelect({
-            category: "joker",
-            value: joker.name,
-            clauseKey: selectedRarity === "legendary" ? "legendaryJoker"
-                : selectedRarity === "rare" ? "rareJoker"
-                    : selectedRarity === "uncommon" ? "uncommonJoker"
-                        : "commonJoker",
-            rarity: selectedRarity ?? "common",
-        });
-    }, [onSelect, selectedRarity]);
-    return (_jsxs("div", { style: { padding: 0, display: "flex", flexDirection: "column" }, children: [step === "rarity" && (_jsx("div", { className: "j-flex-col j-gap-sm", style: { padding: 10 }, children: ["common", "uncommon", "rare", "legendary"].map((rarity) => {
-                    const meta = RARITY_META[rarity];
-                    return (_jsx(JimboButton, { tone: meta.tone, size: "md", fullWidth: true, onClick: () => handleRaritySelect(rarity), children: _jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 2, textAlign: "left", width: "100%" }, children: [_jsx("span", { children: meta.label }), _jsx("span", { style: { fontSize: 9, opacity: 0.7 }, children: meta.hint })] }) }, rarity));
-                }) })), step === "specific" && selectedRarity && (_jsxs(_Fragment, { children: [_jsx("div", { className: "j-flex j-items-center j-justify-center", style: { padding: "8px 10px 4px" }, children: _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }) }), _jsx("div", { className: "j-flex j-gap-sm", style: { padding: "4px 10px 4px" }, children: _jsx("input", { className: "j-seed-input__field", type: "text", placeholder: "Search jokers...", value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }) }), selectedRarity === "legendary" && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "purple", children: "Legendary jokers spawn from The Soul. Find it in Arcana Pack, Spectral Pack, Charm Tag, or Ethereal Tag only!" }) })), _jsxs("div", { style: {
-                            display: "grid",
-                            gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
-                            gap: 6,
-                            padding: "8px 10px 10px"
-                        }, children: [filteredJokers.map((joker) => (_jsxs("div", { onClick: () => handleJokerSelect(joker), title: joker.name, style: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    alignItems: "center",
-                                    gap: 3,
-                                    padding: 4,
-                                    borderRadius: 4,
-                                    cursor: "pointer",
-                                }, children: [_jsx(JimboSprite, { name: joker.name, sheet: "Jokers", width: 48 }), _jsx(JimboText, { size: "micro", tone: "grey", style: { maxWidth: 60, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: joker.name })] }, joker.name))), filteredJokers.length === 0 && (_jsx("div", { style: { gridColumn: "1 / -1", padding: 20, textAlign: "center" }, children: _jsxs(JimboText, { size: "sm", tone: "grey", children: ["No jokers match \"", search, "\""] }) }))] }), _jsx("div", { style: { padding: "4px 10px 10px" }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: () => setStep("rarity"), children: "Back" }) })] }))] }));
-}

package/dist/components/jamlMap/MysterySlot.js

@@ -1,128 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { JimboSprite } from "../../ui/sprites.js";
-import { JimboColorOption, withAlpha, JIMBO_ANIMATIONS } from "../../ui/tokens.js";
-// ─── Zone colors ─────────────────────────────────────────────────────────────
-const C = JimboColorOption;
-const ZONE_BORDER = {
-    must: C.BLUE,
-    should: C.RED,
-    mustnot: C.ORANGE,
-};
-// ─── Sheet → "Any" wildcard mapping ─────────────────────────────────────────
-// ─── Component ───────────────────────────────────────────────────────────────
-export function MysterySlot({ zone, sheetType, selection, width = 56, onTap, onClear, style, }) {
-    const [hover, setHover] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const [tilt, setTilt] = useState({ rx: 0, ry: 0, tx: 0, ty: 0 });
-    const cardRef = React.useRef(null);
-    const borderColor = ZONE_BORDER[zone];
-    const isEmpty = !selection;
-    const cardH = Math.round((width * 95) / 71);
-    const spriteName = selection?.packName ?? selection?.value ?? "";
-    const spriteSheet = selection?.packName
-        ? "Boosters"
-        : selection
-            ? categoryToSheet(selection.category) ?? sheetType
-            : sheetType;
-    const scale = pressed
-        ? 0.95
-        : hover
-            ? JIMBO_ANIMATIONS.JUICE_UP_SCALE
-            : 1;
-    const handleMouseMove = (e) => {
-        if (!cardRef.current)
-            return;
-        const rect = cardRef.current.getBoundingClientRect();
-        // Normalize coordinates: -1 to 1
-        const nx = Math.max(-1, Math.min(1, ((e.clientX - rect.left) / rect.width - 0.5) * 2));
-        const ny = Math.max(-1, Math.min(1, ((e.clientY - rect.top) / rect.height - 0.5) * 2));
-        setTilt({
-            rx: ny * -8, // subtle max 8deg tilt
-            ry: nx * 8,
-            tx: nx * -2, // subtle shift
-            ty: ny * -2,
-        });
-    };
-    const handleMouseLeave = () => {
-        setHover(false);
-        setPressed(false);
-        setTilt({ rx: 0, ry: 0, tx: 0, ty: 0 });
-    };
-    return (_jsx("div", { ref: cardRef, onClick: onTap, onMouseEnter: () => setHover(true), onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), style: {
-            position: "relative",
-            width: width + 8,
-            height: cardH + 8,
-            cursor: onTap ? "pointer" : "default",
-            ...style,
-        }, children: _jsxs("div", { style: {
-                position: "absolute",
-                inset: 0,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: 6,
-                border: isEmpty
-                    ? `2px dashed ${withAlpha(borderColor, 0.4)}`
-                    : `3px solid ${borderColor}`,
-                background: isEmpty
-                    ? withAlpha(borderColor, 0.06)
-                    : withAlpha(C.DARKEST, 0.8),
-                transform: `perspective(600px) scale(${scale}) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translate(${tilt.tx}px, ${tilt.ty}px)`,
-                transformStyle: "preserve-3d",
-                transition: hover
-                    ? `border-color 200ms`
-                    : `transform 400ms ${JIMBO_ANIMATIONS.JUICE_EASING}, border-color 200ms`,
-                boxShadow: hover ? `0 8px 16px ${withAlpha(C.BLACK, 0.4)}` : `0 2px 4px ${withAlpha(C.BLACK, 0.2)}`,
-                zIndex: hover ? 10 : 1,
-                pointerEvents: "none",
-            }, children: [_jsx(JimboSprite, { name: spriteName, sheet: spriteSheet, width: width, style: {
-                        opacity: isEmpty ? 0.5 : 1,
-                        filter: isEmpty ? "saturate(0.3)" : "none",
-                        transition: "opacity 200ms, filter 200ms",
-                    } }), selection && onClear && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onClear(); }, style: {
-                        position: "absolute",
-                        top: -6,
-                        right: -6,
-                        width: 18,
-                        height: 18,
-                        borderRadius: "50%",
-                        background: C.RED,
-                        color: C.WHITE,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: 11,
-                        fontFamily: "m6x11plus, ui-monospace, monospace",
-                        cursor: "pointer",
-                        lineHeight: 1,
-                        boxShadow: `0 1px 4px ${withAlpha(C.BLACK, 0.5)}`,
-                        transform: "translateZ(10px)", // Pop out in 3D
-                    }, children: "\u00D7" })), isEmpty && hover && (_jsx("div", { style: {
-                        position: "absolute",
-                        bottom: -16,
-                        left: "50%",
-                        transform: "translateX(-50%) translateZ(10px)",
-                        fontFamily: "m6x11plus, ui-monospace, monospace",
-                        fontSize: 10,
-                        color: borderColor,
-                        whiteSpace: "nowrap",
-                        textTransform: "uppercase",
-                        letterSpacing: 1,
-                    }, children: "+ tap" }))] }) }));
-}
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-function categoryToSheet(cat) {
-    switch (cat) {
-        case "joker": return "Jokers";
-        case "voucher": return "Vouchers";
-        case "tag": return "tags";
-        case "boss": return "BlindChips";
-        case "tarot":
-        case "spectral":
-        case "planet": return "Tarots";
-        case "pack": return "Boosters";
-        default: return null;
-    }
-}

package/dist/components/jamlMap/MysterySlot.stories.d.ts

@@ -1,7 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { MysterySlot } from './MysterySlot';
-declare const meta: Meta<typeof MysterySlot>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
-export declare const FilledJoker: Story;

package/dist/components/jamlMap/MysterySlot.stories.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MysterySlot } from './MysterySlot';
-const meta = {
-    title: 'JAML/MysterySlot',
-    component: MysterySlot,
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Empty = {
-    args: {
-        zone: 'must',
-        width: 64,
-    },
-    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
-};
-export const FilledJoker = {
-    args: {
-        zone: 'must',
-        width: 64,
-        selection: {
-            clauseKey: 'joker',
-            value: 'Joker',
-            displayLabel: 'Joker',
-            spriteName: 'Joker',
-            sheetType: 'Jokers',
-        },
-    },
-    render: (args) => (_jsx("div", { style: { background: '#1e2b2d', padding: 20 }, children: _jsx(MysterySlot, { ...args }) })),
-};

package/dist/components/jamlMap/index.js

@@ -1,4 +0,0 @@
-export { MysterySlot } from "./MysterySlot.js";
-export { JokerPicker } from "./JokerPicker.js";
-export { JamlMapEditor, CategoryMenu } from "./JamlMapEditor.js";
-export { CategoryPicker, VOUCHER_PICKER_CONFIG, TAG_PICKER_CONFIG, BOSS_PICKER_CONFIG, TAROT_PICKER_CONFIG, PLANET_PICKER_CONFIG, SPECTRAL_PICKER_CONFIG, PACK_PICKER_CONFIG, } from "./CategoryPicker.js";