jaml-ui 0.24.4 → 0.24.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState, useCallback, useMemo } from "react";
|
|
4
4
|
import { JimboSprite } from "../../ui/sprites.js";
|
|
5
5
|
import { JimboColorOption } from "../../ui/tokens.js";
|
|
6
|
-
import { JimboButton } from "../../ui/panel.js";
|
|
7
6
|
import { JimboText } from "../../ui/jimboText.js";
|
|
8
7
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
9
8
|
const C = JimboColorOption;
|
|
@@ -35,13 +34,6 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
|
|
|
35
34
|
clauseKey: config.clauseKey,
|
|
36
35
|
});
|
|
37
36
|
}, [onSelect, config]);
|
|
38
|
-
const handleAny = useCallback(() => {
|
|
39
|
-
onSelect({
|
|
40
|
-
category: config.category,
|
|
41
|
-
value: "Any",
|
|
42
|
-
clauseKey: config.clauseKey,
|
|
43
|
-
});
|
|
44
|
-
}, [onSelect, config]);
|
|
45
37
|
const renderItem = (item, isMuted = false) => (_jsxs("div", { className: "j-juice-hover", onClick: () => handleSelect(item), title: item.name, style: {
|
|
46
38
|
display: "flex",
|
|
47
39
|
flexDirection: "column",
|
|
@@ -52,7 +44,7 @@ export function CategoryPicker({ config, onSelect, onCancel }) {
|
|
|
52
44
|
cursor: "pointer",
|
|
53
45
|
opacity: isMuted ? 0.3 : 1,
|
|
54
46
|
}, children: [_jsx(JimboSprite, { name: item.name, sheet: config.sheet, width: 48 }), _jsx(JimboText, { size: "micro", tone: "white", style: { lineHeight: 1.1, whiteSpace: "normal", textAlign: "center" }, children: item.name })] }, item.name));
|
|
55
|
-
return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [
|
|
47
|
+
return (_jsxs("div", { style: { padding: 0, maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column" }, children: [_jsx("div", { className: "j-flex j-gap-sm", style: { padding: "8px 10px 4px" }, children: _jsx("input", { className: "j-seed-input__field", type: "text", placeholder: `Search ${config.title.toLowerCase()}...`, value: search, onChange: (e) => setSearch(e.target.value), style: { fontSize: 13, padding: "6px 10px", textTransform: "none", letterSpacing: "0.04em" } }) }), config.hint && (_jsx("div", { className: "j-inner-panel", style: { margin: "4px 10px 6px", padding: "6px 10px" }, children: _jsx(JimboText, { size: "xs", tone: "grey", children: config.hint }) })), _jsxs("div", { className: "hide-scrollbar", style: {
|
|
56
48
|
display: "flex",
|
|
57
49
|
flexWrap: "wrap",
|
|
58
50
|
gap: 6,
|
|
@@ -22,13 +22,13 @@ const CATEGORIES = [
|
|
|
22
22
|
];
|
|
23
23
|
const ZONE_TONE = {
|
|
24
24
|
must: "blue",
|
|
25
|
-
should: "
|
|
26
|
-
mustnot: "
|
|
25
|
+
should: "green",
|
|
26
|
+
mustnot: "red",
|
|
27
27
|
};
|
|
28
28
|
const ZONE_LABEL = {
|
|
29
|
-
must: "
|
|
30
|
-
should: "
|
|
31
|
-
mustnot: "
|
|
29
|
+
must: "Required",
|
|
30
|
+
should: "Bonus",
|
|
31
|
+
mustnot: "Avoid",
|
|
32
32
|
};
|
|
33
33
|
const CATEGORY_CONFIG_MAP = {
|
|
34
34
|
joker: VOUCHER_PICKER_CONFIG,
|
|
@@ -106,9 +106,9 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
|
|
|
106
106
|
}, []);
|
|
107
107
|
const renderSlot = (anteIndex, id, width, sheetType, forceCategory) => {
|
|
108
108
|
const sel = (antesState[anteIndex] || {})[id];
|
|
109
|
-
return (_jsx(MysterySlot, { zone: sel ? sel.zone :
|
|
109
|
+
return (_jsx(MysterySlot, { zone: sel ? sel.zone : "must", sheetType: sheetType, selection: sel, width: width, onTap: () => handleSlotTap(anteIndex, id, forceCategory), onClear: sel ? () => handleSlotClear(anteIndex, id) : undefined, style: { flexShrink: 0 } }, id));
|
|
110
110
|
};
|
|
111
|
-
return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [
|
|
111
|
+
return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("div", { ref: handleScrollAttach, className: "hide-scrollbar", style: {
|
|
112
112
|
flex: 1,
|
|
113
113
|
overflowY: "auto",
|
|
114
114
|
scrollSnapType: "y mandatory",
|
|
@@ -121,7 +121,7 @@ export function JamlMapEditor({ zone: initialZone = "must", onChange, }) {
|
|
|
121
121
|
flexDirection: "column",
|
|
122
122
|
gap: 24,
|
|
123
123
|
borderBottom: `2px solid ${C.DARK_GREY}`
|
|
124
|
-
}, children: [_jsxs(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 8 }, children: ["Ante ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Voucher" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Small" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Big" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Boss" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Shop Items" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Packs" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))) })] }));
|
|
124
|
+
}, children: [_jsxs(JimboText, { size: "md", tone: "white", style: { textAlign: "center", marginBottom: 8 }, children: ["Ante ", a] }), _jsxs("div", { className: "j-flex j-justify-between j-items-end", children: [_jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Voucher" }), renderSlot(a, `ante_${a}_voucher`, 42, "Vouchers", "voucher")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Small" }), renderSlot(a, `ante_${a}_tag_small`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Big" }), renderSlot(a, `ante_${a}_tag_big`, 42, "tags", "tag")] }), _jsxs("div", { className: "j-flex-col j-items-center j-gap-xs", children: [_jsx(JimboText, { size: "micro", tone: "grey", children: "Boss" }), renderSlot(a, `ante_${a}_boss`, 42, "BlindChips", "boss")] })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Shop Items" }), _jsx("div", { className: "j-flex hide-scrollbar j-gap-sm", style: { overflowX: "auto", paddingBottom: 8 }, children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => renderSlot(a, `ante_${a}_shop_${i}`, 52, "Jokers")) })] }), _jsxs("div", { className: "j-flex-col j-gap-xs", children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { letterSpacing: 1 }, children: "Packs" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: [1, 2, 3, 4, 5, 6].map(i => renderSlot(a, `ante_${a}_pack_${i}`, 64, "Boosters", "pack")) })] })] }, a))) }), _jsx(JimboModal, { open: activeSlot !== null, onClose: handlePickerCancel, title: pickerFlow === "category" ? "Select Category" : undefined, className: "j-picker-modal", children: activeSlot !== null && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsxs("div", { className: "j-inner-panel", style: { padding: "8px 10px", marginBottom: 2 }, children: [_jsx(JimboText, { size: "xs", tone: "grey", style: { display: "block", marginBottom: 6 }, children: "This pick will be added as" }), _jsx("div", { className: "j-flex j-gap-sm", style: { flexWrap: "wrap" }, children: ["must", "should", "mustnot"].map((z) => (_jsx(JimboButton, { tone: currentZone === z ? ZONE_TONE[z] : "grey", size: "xs", onClick: () => setCurrentZone(z), children: ZONE_LABEL[z] }, z))) })] }), pickerFlow === "category" ? (_jsx(CategoryMenu, { onSelect: handleCategorySelect })) : pickerFlow === "joker" ? (_jsx(JokerPicker, { onSelect: handleItemSelect, onCancel: handlePickerCancel })) : (_jsx(CategoryPicker, { config: CATEGORY_CONFIG_MAP[pickerFlow], onSelect: handleItemSelect, onCancel: handlePickerCancel }))] })) })] }));
|
|
125
125
|
}
|
|
126
126
|
// ─── Category Selection Menu ─────────────────────────────────────────────────
|
|
127
127
|
export function CategoryMenu({ onSelect, }) {
|
|
@@ -93,18 +93,6 @@ export function JokerPicker({ onSelect, onCancel }) {
|
|
|
93
93
|
rarity: selectedRarity ?? "common",
|
|
94
94
|
});
|
|
95
95
|
}, [onSelect, selectedRarity]);
|
|
96
|
-
const handleAnySelect = useCallback(() => {
|
|
97
|
-
const rarity = selectedRarity ?? "common";
|
|
98
|
-
onSelect({
|
|
99
|
-
category: "joker",
|
|
100
|
-
value: "Any",
|
|
101
|
-
clauseKey: rarity === "legendary" ? "legendaryJoker"
|
|
102
|
-
: rarity === "rare" ? "rareJoker"
|
|
103
|
-
: rarity === "uncommon" ? "uncommonJoker"
|
|
104
|
-
: "commonJoker",
|
|
105
|
-
rarity,
|
|
106
|
-
});
|
|
107
|
-
}, [onSelect, selectedRarity]);
|
|
108
96
|
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) => {
|
|
109
97
|
const meta = RARITY_META[rarity];
|
|
110
98
|
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));
|
|
@@ -112,7 +100,7 @@ export function JokerPicker({ onSelect, onCancel }) {
|
|
|
112
100
|
justifyContent: "space-between",
|
|
113
101
|
padding: "8px 10px",
|
|
114
102
|
borderBottom: `2px solid ${C.PANEL_EDGE}`,
|
|
115
|
-
}, children: [_jsx(JimboButton, { tone: "orange", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }),
|
|
103
|
+
}, children: [_jsx(JimboButton, { tone: "orange", size: "xs", onClick: () => setStep("rarity"), children: "\u2190 Back" }), _jsxs(JimboText, { size: "md", children: [RARITY_META[selectedRarity].label, " Jokers"] }), _jsx("div", { style: { width: 44 } })] }), _jsx("div", { className: "j-flex j-gap-sm", style: { padding: "8px 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: {
|
|
116
104
|
display: "grid",
|
|
117
105
|
gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
|
|
118
106
|
gap: 6,
|
package/dist/ui/panel.js
CHANGED
|
@@ -20,5 +20,5 @@ export function JimboBackButton({ onClick }) {
|
|
|
20
20
|
export function JimboModal({ children, open, onClose, title, className }) {
|
|
21
21
|
if (!open)
|
|
22
22
|
return null;
|
|
23
|
-
return (_jsx("div", { className: "j-modal-overlay", onClick: onClose, children: _jsxs(JimboPanel, {
|
|
23
|
+
return (_jsx("div", { className: "j-modal-overlay", onClick: onClose, children: _jsxs(JimboPanel, { onBack: onClose, className: `j-modal ${className ?? ''}`, onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", className: "j-modal__title", children: title }), children] }) }));
|
|
24
24
|
}
|