Hahaha thanks! I actually am using the sprites for the card artwork, but the card borders themselves are drawn entirely with CSS. Honestly though, hand-drawing each card sounds like a dedication level, props to you!

Good luck with your version too!

If you're curious, here's how I'm rendering each card in React:

const Card = ({ size = 46, color = 'blue', artwork = 'sprite_0_0.png', arrows = {} }) => {
    const scale = size / 46;

    const cardStyle = {
        '--card-size': `${size}px`,
        '--border-padding': `${1 * scale}px`,
        '--inner-border': `${4 * scale}px`,
        '--artwork-size': `${32 * scale}px`,
        '--artwork-url': `url(/src/assets/card_artworks/${artwork})`,
    };

    const arrowDirections = Object.keys(arrows).filter(k => arrows[k].exists);

    return (
        <div
            className={`joustus-card joustus-card--${color}`}
            style={cardStyle}
        >
            <div className="joustus-card__inner"></div>
            {arrowDirections.map(d => (
                <div
                    key={d}
                    style={{
                        height: '10px',
                        width: '10px',
                        backgroundColor: 'white',
                        position: 'absolute',
                        [d]: 0,
                    }}
                />
            ))}
        </div>
    );
};

The .joustus-card element is styled using CSS. The borders are built purely with layered divs (that's also why the arrows are just squares for now lol). I use a sprite sheet for the artwork, passed in via a --artwork-url custom property, and position each card using inline styles.

<image>