jaml-ui 0.24.4 → 0.24.5
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,
|
|
@@ -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
|
}
|