js_homeworks/functional_OOP/main.js

function Control(el, {value=0, 
                    min=0, 
                    max=100, 
                    minAngle=0,
                    maxAngle=360, 
                    wheelSpeed=0.1,
                    step=1}={}){

    const img = document.createElement('img')
    img.src   = '1@3x.png'
    el.append(img)

    const ratio = (maxAngle - minAngle) / (max-min);
    const getAngle = () => (value - min) * ratio + minAngle;

    this.setValue = newValue => {
        if(newValue > max) {
            newValue = max
        }
        if(newValue < min) {
            newValue = min
        }
        if (newValue !== value && typeof this.onchange === "function")
            this.onchange(newValue);
        
        value = newValue;
        img.style.transform = `rotate(${getAngle()}deg)`;
    }
    this.setValue(value);
    this.getValue = () => value;
    img.onmousewheel = event => {
        const {deltaY} = event
        event.preventDefault()
        this.setValue(value + deltaY * wheelSpeed);
    }
    
    const rad2deg = rad => (rad * 360) / (2 * Math.PI)
    const event2Angle = event => {
        const {layerX,layerY} = event
        const rad2deg = rad => (rad * 360) / (2 * Math.PI)
        const x = layerX - img.width/2
        const y = -(layerY - img.height/2)

        /* console.log(x,y, rad2deg(Math.atan2(y,x))); */
        return rad2deg(Math.atan2(y,x));
    }
    
    img.onclick = event => {
        const {layerX,layerY} = event
        /* console.log(event); */
        if(layerX < img.width/2){
            this.setValue(value - step)
        } else {
            this.setValue(value + step)
        }

    }

    let startAngle = null;
    img.onmousedown = event => {
        startAngle = event2Angle(event)
        event.preventDefault();
    }
    img.onmousemove = event => {
        if(startAngle === null) return
        
        const newAngle = event2Angle(event)
        const angleDiff = newAngle - startAngle;
        const valueDiff = angleDiff/ratio;
        this.setValue(value-valueDiff);
        startAngle = newAngle
        event.preventDefault()
    }
    img.onmouseup = event => {
        startAngle = null;
        event.preventDefault();
    }
}
/* let container1 = document.getElementById('container1'); */
const volumeControl = new Control(container1, {value:25,min:0,max:100,minAngle: -90, maxAngle:90});

//пришейте к нему тэг audio для громкости
let audio = document.getElementById('audio1');
const volumeControl1 = new Control(container1,{min:0, max:1, wheelSpeed:0.001});
function setVolume(){
    audio.volume = `${volumeControl1.getValue()}`;
}
volumeControl1.onchange = setVolume
function setRGB(){
    document.body.style.backgroundColor = `rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
    //какой то блок, которому меняем цвет через rgba и цвета крутилок
}
const red = new Control(color, {min: 0, max: 255})
red.onchange = setRGB
const blue = new Control(color, {min: 0, max: 255})
blue.onchange = setRGB
const green = new Control(color, {min:0, max: 255})
green.onchange = setRGB
//const red  = new Control(container1, {min: 0, max: 255})
//volumeControl.onchange = setRGB
//const green  = new Control(container1, {min: 0, max: 255})
//volumeControl.onchange = setRGB
//const blue  = new Control(container1, {min: 0, max: 255})
//volumeControl.onchange = setRGB

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

//setTimeout(() => volumeControl.setValue(80), 2000)