function randInt(max) {
    return Math.floor(Math.random() * max);
}

class App {
    constructor() {
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", this.init);
        } else {
            this.init();
        }
    }

    async init() {
        this.config = await (await fetch("/config.json")).json();

        const gridConfig = this.config["grid"] ?? {};
        const grid = document.getElementById("grid");

        const width = parseInt(gridConfig["width"] ?? 5);
        if (width !== 5) {
            grid.style.gridTemplateColumns = `repeat(${width}, 1fr)`;
        }

        const height = parseInt(gridConfig["height"] ?? 5);
        if (height !== 5) {
            grid.style.gridTemplateRows = `repeat(${height}, 1fr)`;
        }

        const phrases = this.config["phrases"] ?? [];
        const probability = Math.min(phrases.length / Math.max(width * height - 1, 1), 1);

        const freeTile = this.config["freeTile"] ?? false;
        for (let y = 0; y < height; ++y) {
            for (let x = 0; x < width; ++x) {
                const tile = document.createElement("div");
                tile.classList.add("tile");

                if (x === 0) tile.classList.add("row-start");
                if (y === 0) tile.classList.add("col-start");

                if (
                    freeTile && freeTile.length
                    && x === Math.floor(width / 2)
                    && y === Math.floor(height / 2)
                ) {
                    tile.innerText = freeTile[randInt(freeTile.length)];
                } else if (phrases && phrases.length && Math.random() < probability) {
                    const phrase = randInt(phrases.length);
                    tile.innerText = phrases[phrase];
                    phrases.splice(phrase, 1);
                }

                grid.append(tile);
            }
        }
    }
}

const app = new App();