homework/10/controller/index.js

function Control(el, { value = 0,
    min = 0,
    max = 100,
    minAngle = -90, //9 часов
    maxAngle = 90,  //3 часа
    wheelSpeed = 0.1,
    imgUrl = '1@3x.png',
    step = 5 } = {}) {

    const img = document.createElement('img')
    img.src = imgUrl
    el.append(img)

    //из value с учетом min max и minAngle maxAngle посчиитать угол
    const ratio = (maxAngle - minAngle) / (max - min)
    const getAngle = () => minAngle + ratio * value

    this.setValue = newValue => {
        if (newValue < min) {
            newValue = min
        }
        if (newValue > max) {
            newValue = max
        }
        if (typeof this.onchange === 'function' && newValue !== value) {
            this.onchange(newValue)
        }
        value = newValue
        img.style.transform = `rotate(${getAngle()}deg)`
    }

    img.onmousewheel = (event) => {
        const { deltaY } = event
        this.setValue(value + deltaY * wheelSpeed)
        event.preventDefault()
    }

    img.onclick = (event) => {
        const { layerX } = event
        this.setValue(value + (layerX < img.width / 2 ? -step : step))
    }

    this.getValue = () => value
    this.setValue(value)
}

const volumeControl = new Control(container1, { value: 100 })
volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
console.log(volumeControl.getValue())
//пришейте к нему тэг audio для громкости

let audio = document.querySelector('audio');

volumeControl.onchange = volume => {
    audio.volume = volume / 100;
    console.log(volume);
}

// -------------------------------------------------------------------------------

let box = document.getElementById('colorblock');

function setRGB(value, n){
    box.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
}


const red = new Control(container1, { min: 0, max: 255 })
red.onchange = setRGB
const green = new Control(container1, { min: 0, max: 255 })
green.onchange = setRGB
const blue = new Control(container1, { min: 0, max: 255 })
blue.onchange = setRGB

const colors = [red, green, blue]
for(let i = 0; i < colors.length; i++) {
    colors[i].onchange = value => setRGB(value, i)
}

//сделать три крутилки для RGB
//и обновлять цвет блока/фона блока при вращении любой из трех