/** @type {number} */
const num = card.num;
/** @type {string} */
const suite = card.suite;

const images = {
    'spade': [
        '../images/spade3.png',
        '../images/spade5.png',
    ],
    'diamond': [
        '../images/diamond.png',
        '../images/diamond2.png'
    ],
    'club': [
        '../images/club.png',
        '../images/club2.png'
    ],
    'heart': [
        '../images/heart.png',
        '../images/heart2.png'
    ]
}

const colors = {
    'spade': '#ffffff',
    'club': '#ffffff',
    'diamond': '#ffc82f',
    'heart': '#ffc82f',
}
let { filter } = colorize(colors[suite]);
filter = "invert(100%) " + filter.substring(8);
filter = filter.substring(0, filter.length - 1);
console.log(filter);

document.documentElement.style.setProperty("--color", colors[suite]);
document.documentElement.style.setProperty("--color-mask-filters", filter);

function card_name(num) {
    if (num <= 10) return `${num}`;
    return ['V', 'C', 'D', 'R'][num - 11];
}

const name_ = card_name(num);
document.querySelector("h1").innerText = name_;

const img = document.getElementById('suite-icon').src = images[suite][0];

/** @type {HTMLImageElement} */
const elem = document.querySelector("#suite img");
elem.src = images[suite][1];
elem.parentElement.removeChild(elem);

const exceptions = [
    ['V', '../images/V.png'],
    ['C', '../images/C.png'],
    ['D', '../images/D.png'],
    ['R', '../images/R.png'],
];
for (const [n, path] of exceptions)
    if (name_ === n) { elem.src = path; elem.style.width = 250 + "px" }

const grid = document.querySelector("#suite div");
let i = num;
if (i > 10) i = 1;
while (i > 0) {
    if (i >= 3) {
        grid.children.item(0).append(elem.cloneNode(true));
        grid.children.item(1).append(elem.cloneNode(true));
        grid.children.item(2).append(elem.cloneNode(true));
        i -= 3;
    }
    if (i >= 2) {
        grid.children.item(0).append(elem.cloneNode(true));
        grid.children.item(2).append(elem.cloneNode(true));
        i -= 2;
    }
    if (i === 1) {
        grid.children.item(1).append(elem.cloneNode(true));
        i -= 1;
    }
}