jaml-ui 0.10.0 → 0.11.0

package/dist/components/JamlMapPreview.js

@@ -1,117 +1,77 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { JamlBoss, JamlGameCard, JamlTag, JamlVoucher } from "./GameCard.js";
-import { extractVisualJamlItems } from "../utils/jamlMapPreview.js";
-const SECTION_ORDER = ["must", "should", "mustNot"];
-const SECTION_LABELS = {
-    must: "Must Requirements",
-    should: "Should Requirements",
-    mustNot: "Must Not Requirements",
+import { JimboSprite } from "../ui/sprites.js";
+import { JimboColorOption } from "../ui/tokens.js";
+import { extractVisualJamlItems, } from "../utils/jamlMapPreview.js";
+const C = JimboColorOption;
+const ZONES = {
+    must: { label: "MUST", color: C.BLUE },
+    should: { label: "SHOULD", color: C.RED },
+    mustNot: { label: "MUST NOT", color: C.ORANGE },
 };
-const SECTION_ACCENTS = {
-    must: { color: "#ff6b6b", border: "rgba(255,107,107,0.35)", panel: "rgba(255,107,107,0.08)" },
-    should: { color: "#f7b955", border: "rgba(247,185,85,0.35)", panel: "rgba(247,185,85,0.08)" },
-    mustNot: { color: "#8d7dff", border: "rgba(141,125,255,0.35)", panel: "rgba(141,125,255,0.08)" },
+const SECTION_ORDER = ["must", "should", "mustNot"];
+const SHEET_FOR_VISUAL = {
+    joker: "Jokers",
+    consumable: "Tarots",
+    voucher: "Vouchers",
+    tag: "tags",
+    boss: "BlindChips",
 };
-function renderPreviewItem(item, cardScale, tagScale, bossScale) {
-    switch (item.visualType) {
-        case "joker":
-            return _jsx(JamlGameCard, { card: { name: item.value, scale: cardScale }, type: "joker" });
-        case "consumable":
-            return _jsx(JamlGameCard, { card: { name: item.value, scale: cardScale }, type: "consumable" });
-        case "voucher":
-            return _jsx(JamlVoucher, { voucherName: item.value, scale: cardScale });
-        case "tag":
-            return _jsx(JamlTag, { tagName: item.value, scale: tagScale });
-        case "boss":
-            return _jsx(JamlBoss, { bossName: item.value, scale: bossScale });
-        default:
-            return null;
-    }
+function ClausePill({ item, color }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            background: C.DARK_GREY,
+            border: `2px solid ${color}`,
+            borderRadius: 6,
+            padding: "5px 8px 5px 4px",
+            boxShadow: `0 2px 0 ${C.BLACK}`,
+        }, title: `${item.clauseKey}: ${item.value}`, children: [_jsx("div", { style: { color: C.GREY, fontSize: 12, lineHeight: 1, padding: "0 2px" }, children: "\u22EE\u22EE" }), _jsx(JimboSprite, { name: item.value, sheet: SHEET_FOR_VISUAL[item.visualType], width: 26 }), _jsx("div", { style: {
+                    fontSize: 10,
+                    color: C.WHITE,
+                    letterSpacing: 1,
+                    textShadow: "1px 1px 0 rgba(0,0,0,.8)",
+                }, children: item.value })] }));
+}
+function ZoneRail({ zone, items }) {
+    const meta = ZONES[zone];
+    return (_jsxs("div", { style: {
+            border: `2px dashed ${meta.color}55`,
+            borderRadius: 6,
+            padding: 8,
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [_jsx("div", { style: {
+                            fontSize: 10,
+                            letterSpacing: 2,
+                            padding: "2px 8px",
+                            background: meta.color,
+                            color: C.WHITE,
+                            borderRadius: 3,
+                            textShadow: "1px 1px 0 rgba(0,0,0,.8)",
+                        }, children: meta.label }), _jsx("div", { style: { flex: 1, height: 1, background: `${meta.color}44` } }), _jsx("div", { style: { fontSize: 8, color: C.GREY }, children: items.length })] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: items.length === 0 ? (_jsx("div", { style: { fontSize: 10, color: C.GREY, padding: 10, fontStyle: "italic" }, children: "drop clauses here" })) : (items.map((item) => _jsx(ClausePill, { item: item, color: meta.color }, item.id))) })] }));
 }
-export function JamlMapPreview({ jaml, className = "", title = "JAML Map Preview", emptyMessage = "No visual JAML clauses found yet.", cardScale = 0.8, tagScale = 1.1, bossScale = 1.1, }) {
+export function JamlMapPreview({ jaml, className = "", emptyMessage = "No visual JAML clauses found yet.", }) {
     const groups = useMemo(() => extractVisualJamlItems(jaml), [jaml]);
-    const totalItems = SECTION_ORDER.reduce((sum, section) => sum + groups[section].length, 0);
-    return (_jsxs("div", { className: className, style: {
+    const totalItems = SECTION_ORDER.reduce((sum, s) => sum + groups[s].length, 0);
+    if (totalItems === 0) {
+        return (_jsx("div", { className: className, style: {
+                background: C.DARKEST,
+                border: `2px solid ${C.PANEL_EDGE}`,
+                borderRadius: 6,
+                padding: 16,
+                color: C.GREY,
+                fontSize: 11,
+                fontStyle: "italic",
+                textAlign: "center",
+            }, children: emptyMessage }));
+    }
+    return (_jsx("div", { className: className, style: {
             display: "flex",
             flexDirection: "column",
-            gap: 16,
-            padding: 16,
-            color: "#f5f5f5",
-            borderRadius: 20,
-            border: "1px solid rgba(152,152,192,0.18)",
-            background: "linear-gradient(180deg, rgba(28,26,52,0.96) 0%, rgba(18,16,36,0.96) 100%)",
-            boxShadow: "0 14px 32px rgba(0,0,0,0.16)",
-        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, fontWeight: 700, marginBottom: 4 }, children: title }), _jsx("div", { style: { fontSize: 12, opacity: 0.74, maxWidth: 520 }, children: "Preview the visual targets described directly in your JAML without running a full search." })] }), _jsxs("div", { style: {
-                            display: "inline-flex",
-                            alignItems: "center",
-                            gap: 6,
-                            borderRadius: 999,
-                            border: "1px solid rgba(141,125,255,0.3)",
-                            background: "rgba(141,125,255,0.12)",
-                            padding: "6px 10px",
-                            fontSize: 11,
-                            fontWeight: 700,
-                            color: "#c8bcff",
-                            letterSpacing: "0.04em",
-                            textTransform: "uppercase",
-                        }, children: [_jsx("span", { children: totalItems }), _jsx("span", { children: totalItems === 1 ? "visual target" : "visual targets" })] })] }), totalItems === 0 ? (_jsx("div", { style: {
-                    border: "1px dashed rgba(152,152,192,0.28)",
-                    borderRadius: 16,
-                    padding: 16,
-                    fontSize: 12,
-                    opacity: 0.72,
-                    background: "rgba(255,255,255,0.035)",
-                }, children: emptyMessage })) : null, SECTION_ORDER.map((section) => {
-                const items = groups[section];
-                if (items.length === 0)
-                    return null;
-                const accent = SECTION_ACCENTS[section];
-                return (_jsxs("section", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 10,
-                        borderRadius: 18,
-                        border: `1px solid ${accent.border}`,
-                        background: `linear-gradient(180deg, ${accent.panel} 0%, rgba(255,255,255,0.02) 100%)`,
-                        padding: 12,
-                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("div", { style: {
-                                        width: 6,
-                                        height: 18,
-                                        borderRadius: 999,
-                                        background: accent.color,
-                                    } }), _jsx("div", { style: { fontSize: 12, fontWeight: 700, color: accent.color }, children: SECTION_LABELS[section] }), _jsx("div", { style: {
-                                        marginLeft: "auto",
-                                        borderRadius: 999,
-                                        padding: "3px 8px",
-                                        fontSize: 10,
-                                        fontWeight: 700,
-                                        color: accent.color,
-                                        background: "rgba(255,255,255,0.04)",
-                                    }, children: items.length })] }), _jsx("div", { style: {
-                                display: "flex",
-                                flexWrap: "wrap",
-                                gap: 12,
-                            }, children: items.map((item) => (_jsxs("div", { style: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    alignItems: "center",
-                                    gap: 8,
-                                    minWidth: 96,
-                                    padding: 12,
-                                    borderRadius: 16,
-                                    border: `1px solid ${accent.border}`,
-                                    background: "rgba(10,10,20,0.24)",
-                                    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
-                                }, title: `${item.clauseKey}: ${item.value}`, children: [_jsx("div", { style: { minHeight: 72, display: "flex", alignItems: "center", justifyContent: "center" }, children: renderPreviewItem(item, cardScale, tagScale, bossScale) }), _jsx("div", { style: { fontSize: 11, textAlign: "center", lineHeight: 1.35, fontWeight: 600 }, children: item.value }), _jsx("div", { style: { fontSize: 10, opacity: 0.62, textTransform: "uppercase", letterSpacing: "0.06em" }, children: item.clauseKey })] }, item.id))) })] }, section));
-            }), _jsx("div", { style: {
-                    borderRadius: 16,
-                    border: "1px dashed rgba(141,125,255,0.28)",
-                    background: "rgba(141,125,255,0.08)",
-                    padding: 14,
-                    fontSize: 11,
-                    lineHeight: 1.5,
-                    opacity: 0.84,
-                }, children: "This preview shows direct visual targets that can be read from the JAML text itself. Advanced scoring logic, positional constraints, nested groups, and runtime-only search behavior are not fully represented here yet." })] }));
+            gap: 10,
+            padding: 10,
+            background: C.DARKEST,
+            color: C.WHITE,
+        }, children: SECTION_ORDER.map((section) => (_jsx(ZoneRail, { zone: section, items: groups[section] }, section))) }));
 }

package/dist/components/PlayingCard.js

@@ -1,52 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveJamlAssetUrl } from '../assets.js';
+import { RANK_MAP, SUIT_MAP, ENHANCER_MAP, SEAL_MAP, EDITION_MAP } from '../sprites/spriteData.js';
 function cn(...classes) { return classes.filter(Boolean).join(" "); }
 const CARD_WIDTH = 71;
 const CARD_HEIGHT = 95;
-// 8BitDeck.png is 13 columns (A,2,3,4,5,6,7,8,9,10,J,Q,K) x 4 rows (Spades, Hearts, Clubs, Diamonds)
-const RANK_TO_COL = {
-    'Ace': 0, 'A': 0,
-    '2': 1, '3': 2, '4': 3, '5': 4, '6': 5, '7': 6, '8': 7, '9': 8,
-    '10': 9,
-    'Jack': 10, 'J': 10,
-    'Queen': 11, 'Q': 11,
-    'King': 12, 'K': 12,
-};
-const SUIT_TO_ROW = {
-    'Spades': 0, 'spades': 0,
-    'Hearts': 1, 'hearts': 1,
-    'Clubs': 2, 'clubs': 2,
-    'Diamonds': 3, 'diamonds': 3,
-};
-// Enhancers.png is 7 columns x 5 rows
-// Row 0: Base, Bonus, Mult, Wild, Glass, Steel, Stone
-// Row 1: Gold, Lucky, (seals start)
-const ENHANCEMENT_TO_POS = {
-    'bonus': { x: 1, y: 0 },
-    'mult': { x: 2, y: 0 },
-    'wild': { x: 3, y: 0 },
-    'glass': { x: 4, y: 0 },
-    'steel': { x: 5, y: 0 },
-    'stone': { x: 6, y: 0 },
-    'gold': { x: 0, y: 1 },
-    'lucky': { x: 1, y: 1 },
-};
-const SEAL_TO_POS = {
-    'gold': { x: 2, y: 1 },
-    'red': { x: 3, y: 1 },
-    'blue': { x: 4, y: 1 },
-    'purple': { x: 5, y: 1 },
-};
-const EDITION_TO_POS = {
-    'Foil': { x: 0, y: 0 },
-    'Holographic': { x: 1, y: 0 },
-    'Polychrome': { x: 2, y: 0 },
-    'Negative': { x: 3, y: 0 },
-};
+const RANK_ALIAS = { A: 'Ace', K: 'King', Q: 'Queen', J: 'Jack' };
+const pascal = (s) => s[0].toUpperCase() + s.slice(1).toLowerCase();
 export function RealPlayingCard({ suit, rank, enhancement, seal, edition, className, size = 71, style }) {
-    const col = RANK_TO_COL[rank];
-    const row = SUIT_TO_ROW[suit];
+    const rankKey = RANK_ALIAS[rank] ?? rank;
+    const suitKey = pascal(suit);
+    const col = RANK_MAP[rankKey];
+    const row = SUIT_MAP[suitKey];
     if (col === undefined || row === undefined) {
         console.warn(`Invalid card: ${rank} of ${suit}`);
         return null;
@@ -56,18 +21,18 @@ export function RealPlayingCard({ suit, rank, enhancement, seal, edition, classN
     // Base card position
     const bgX = -col * CARD_WIDTH;
     const bgY = -row * CARD_HEIGHT;
-    // Enhancement background (if any)
-    const enhPos = enhancement ? ENHANCEMENT_TO_POS[enhancement] : { x: 0, y: 0 };
+    // Enhancement background (if any) — ENHANCER_MAP is PascalCase, prop is lowercase
+    const enhPos = enhancement ? ENHANCER_MAP[pascal(enhancement)] ?? { x: 0, y: 0 } : { x: 0, y: 0 };
     const enhBgX = -enhPos.x * CARD_WIDTH;
     const enhBgY = -enhPos.y * CARD_HEIGHT;
-    // Seal overlay
-    const sealPos = seal ? SEAL_TO_POS[seal] : null;
+    // Seal overlay — SEAL_MAP is keyed by "Gold"/"Red"/"Blue"/"Purple"
+    const sealPos = seal ? SEAL_MAP[pascal(seal)] ?? null : null;
     const sealBgX = sealPos ? -sealPos.x * CARD_WIDTH : 0;
     const sealBgY = sealPos ? -sealPos.y * CARD_HEIGHT : 0;
-    // Edition overlay
-    const editionPos = edition ? EDITION_TO_POS[edition] : null;
-    const editionBgX = editionPos ? -editionPos.x * CARD_WIDTH : 0;
-    const editionBgY = editionPos ? -editionPos.y * CARD_HEIGHT : 0;
+    // Edition overlay — EDITION_MAP gives column index on 5-wide editions sheet
+    const editionCol = edition ? EDITION_MAP[edition] : undefined;
+    const editionBgX = editionCol !== undefined ? -editionCol * CARD_WIDTH : 0;
+    const editionBgY = 0;
     const isNegative = edition === 'Negative';
     const baseFilter = isNegative ? 'invert(0.94)' : 'none';
     const enhancersUrl = resolveJamlAssetUrl('enhancers');