import DiceBox from "/vendor/dice-box/dice-box-threejs.es.js";

let diceBox

const Themes = {
    cloudy: {
        name: "Clouds (Transparent)"
    },
    cloudy_2: {
        name: "Clouds"
    },
    fire: {
        name: "Fire"
    },
    marble: {
        name: "Marble"
    },
    water: {
        name: "Water"
    },
    ice: {
        name: "Ice"
    },
    paper: {
        name: "Paper"
    },
    speckles: {
        name: "Speckles"
    },
    glitter: {
        name: "Glitter"
    },
    glitter_2: {
        name: "Glitter (Transparent)"
    },
    stars: {
        name: "Stars"
    },
    stainedglass: {
        name: "Stained Glass"
    },
    wood: {
        name: "Wood"
    },
    metal: {
        name: "Stainless Steel"
    },
    skulls: {
        name: "Skulls"
    },
    leopard: {
        name: "Leopard"
    },
    tiger: {
        name: "Tiger"
    },
    cheetah: {
        name: "Cheetah"
    },
    dragon: {
        name: "Dragon"
    },
    lizard: {
        name: "Lizard"
    },
    bird: {
        name: "Bird"
    },
    astral: {
        name: "Astral Sea"
    },
    bronze01: {
        name: "Bronze 1"
    },
    bronze02: {
        name: "Bronze 2"
    },
    bronze03: {
        name: "Bronze 3"
    },
    bronze03a: {
        name: "Bronze 3a"
    },
    bronze03b: {
        name: "Bronze 3b"
    },
    bronze04: {
        name: "Bronze 4"
    },
    none: {
        name: "none"
    }
}

document.addEventListener("DOMContentLoaded", async () => {
    const themeSelector = document.getElementById('theme');
    for (const theme in Themes) {
        let option = document.createElement('option');
        option.value = theme;
        option.innerText = Themes[theme].name;
        themeSelector.appendChild(option);
    }
    themeSelector.value = 'none';

    document.getElementById('preview').onclick = async () => {
        document.getElementById('app').replaceChildren(...[])
        diceBox = new DiceBox("#app", {
            assetPath: "/vendor/dice-box/",
            light_intensity: 2,
            gravity_multiplier: 600,
            baseScale: 120,
            strength: Math.floor(Math.random() * 4),
        });
        await diceBox.initialize();
        diceBox.clearDice();
        await diceBox.updateConfig({
            theme_customColorset: {
                background: document.getElementById('faceColor').value,
                foreground: document.getElementById('numberColor').value,
                texture: document.getElementById('theme').value
            }
        });
        await diceBox.roll('1d2 & 1d4 & 1d6 & 1d8 & 1d10 & 1d12 & 1d20 & 1d100');
    }
})
