index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wave Function Collapse</title>
    <style>
        body {
            background-color: #555;
        }
    </style>
</head>

<body>
    <div style="height: 10vh">
        <button id="pauseButton">Pause</button>
        <button id="generateBtn">Generate</button>
        <form onsubmit="return false">
            Speed of generation (in ms)
            <input type="range" id="speedRange" min="0" max="10000" value="0" oninput="this.form.speedInput.value=this.value" />
            <input type="number" id="speedInput" min="0" max="10000" value="0" oninput="this.form.speedRange.value=this.value" />
        </form>
        <form onsubmit="return false">
            Dimension of board
            <input type="number" id="sizeSelector" min="0" value="10" />
        </form>
    </div>
    <div id="board_tileSelector" style="height: 85vh; display: flex; flex-direction: row">
        <div id="boardDiv" style="height: 100%"></div>
        <div>
            <p style="margin-top: 0;">Tiles used during generation</p>
            <div id="tileSelectorDiv" style="height: 75vh; overflow: auto"></div>
        </div>
    </div>
    <script type="module" src="main.js"></script>
</body>

</html>