react-mana-symbols/dist/index.esm.js

React component library for rendering Magic: The Gathering mana symbols

import React from 'react';

var parseManaSymbols = function (cost) {
    var regex = /{([^}]+)}/g;
    var symbols = [];
    var match;
    while ((match = regex.exec(cost)) !== null) {
        var symbol = match[1];
        symbols.push(symbol);
    }
    return symbols;
};
var validateManaSymbol = function (symbol) {
    var validSymbols = new Set([
        'W',
        'U',
        'B',
        'R',
        'G',
        'C',
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        'X',
        '2/W',
        '2/U',
        '2/B',
        '2/R',
        '2/G',
        'W/U',
        'W/B',
        'U/B',
        'U/R',
        'B/R',
        'B/G',
        'R/G',
        'R/W',
        'G/W',
        'G/U',
        'W/P',
        'U/P',
        'B/P',
        'R/P',
        'G/P',
        'S',
        'T',
        'Q',
        'E',
    ]);
    return validSymbols.has(symbol);
};

var DEFAULT_SIZE$1 = 24;
var ManaSymbol = function (_a) {
    var symbol = _a.symbol, _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE$1 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
    if (!validateManaSymbol(symbol)) {
        console.warn("Invalid mana symbol: ".concat(symbol));
        return null;
    }
    var symbolKey = symbol.toLowerCase().replace('/', '');
    try {
        // Dynamic import for the SVG component
        var SvgComponent = require("../assets/mana/".concat(symbolKey, ".svg")).default;
        return (React.createElement(SvgComponent, { width: size, height: size, className: className, style: {
                display: 'inline-block',
                verticalAlign: 'middle',
                margin: '0 1px',
            }, "aria-label": "{".concat(symbol, "}") }));
    }
    catch (error) {
        console.warn("Failed to load mana symbol: ".concat(symbol), error);
        return null;
    }
};

var DEFAULT_SIZE = 24;
var ManaCost = function (_a) {
    var cost = _a.cost, _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
    var symbols = parseManaSymbols(cost);
    return (React.createElement("span", { className: className }, symbols.map(function (symbol, index) { return (React.createElement(ManaSymbol, { key: "".concat(symbol, "-").concat(index), symbol: symbol, size: size, className: className })); })));
};

export { ManaCost, ManaSymbol };
//# sourceMappingURL=index.esm.js.map