<script lang="ts">
    import { dmxData } from "../store";

    export let address: number;

    let dimmer = 255,
        r = 0,
        g = 0,
        b = 0,
        w = 0,
        a = 0,
        uv = 0,
        strobe = 0;

    $: {
        $dmxData[address - 1 + 0] = dimmer;
        $dmxData[address - 1 + 1] = r;
        $dmxData[address - 1 + 2] = g;
        $dmxData[address - 1 + 3] = b;
        $dmxData[address - 1 + 4] = w;
        $dmxData[address - 1 + 5] = a;
        $dmxData[address - 1 + 6] = uv;
        $dmxData[address - 1 + 7] = strobe;

        $dmxData = $dmxData;
    }
</script>

<div>
    <h3>Par @ {address}</h3>
    <input bind:value={dimmer} type="range" min="0" max="255" />
    <input bind:value={r} type="range" min="0" max="255" />
    <input bind:value={g} type="range" min="0" max="255" />
    <input bind:value={b} type="range" min="0" max="255" />
    <input bind:value={w} type="range" min="0" max="255" />
    <input bind:value={a} type="range" min="0" max="255" />
    <input bind:value={uv} type="range" min="0" max="255" />
</div>
