index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>yard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="yard.css">
    <script src="yard.js"></script>
</head>
<body>

<script type="module">
    import "https://unpkg.com/preact";
    import "https://unpkg.com/prop-types/prop-types.min.js";
    import {html, Component, render} from "https://unpkg.com/htm/preact/standalone.module.js";

    // Меняем цвет выбранного шара или ВСЕХ шаров, если ничего не выбрано
    function setHue() {
        let R = Number(document.getElementById("colorR").value);
        let G = Number(document.getElementById("colorG").value);
        let B = Number(document.getElementById("colorB").value);
        console.log(currentId, ":", R, G, B);
        balls
            .filter(a => currentId == null || a.id === currentId)
            .map(a => [a.colorR, a.colorG, a.colorB] = [R, G, B]);
        document.getElementById("colorBox").style.background = "rgb(" + R + "," + G + "," + B + ")";
    }

    class App extends Component {
        open() {
            document.getElementById("colorR").value = currentId == null ? 128 : balls[currentId].colorR;
            document.getElementById("colorG").value = currentId == null ? 128 : balls[currentId].colorG;
            document.getElementById("colorB").value = currentId == null ? 128 : balls[currentId].colorB;
            document.querySelector("dialog").showModal();
            setHue();
        }

        close() {
            document.querySelector("dialog").close();
            isModal = false;
            currentId = null;
        }

        range() {
            setHue();
        }

        render({page}, {todos = []}, {id = currentId}) {
            return html`
                <button id="actionColor" onClick=${() => this.open()}>Изменить цвет</button>
                <dialog onCancel={preventDefault}>
                    <h2 id="colorBox">Выберите цвет</h2>
                    <label>R</label>
                    <input id="colorR" type="range" min="128" max="255" onChange=${() => this.range()}/>
                    <label>G</label>
                    <input id="colorG" type="range" min="128" max="255" onChange=${() => this.range()}/>
                    <label>B</label>
                    <input id="colorB" type="range" min="128" max="255" onChange=${() => this.range()}/>
                    <button type="button" onClick=${() => this.close()}>Закрыть</button>
                </dialog>
            `;
        }
    }

    render(html`
        <${App} page="All"/>
    `, document.body);
</script>

<button></button>
<button id="actionRandom">Случайный расклад</button>
<button id="actionStop">Обнулить скорости</button>
<button id="actionPause">Пауза</button>
<label>Итерация</label>
<input type="text" id="generation" disabled>
<label>Время итерации, мс</label>
<input type="text" id="time" disabled>
<canvas id="canvas"></canvas>

</body>
</html>