homeworks/tuner/index.js

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

    const img = document.createElement('img')
    img.src   = '13x.png'
    el.append(img)

    const ratio    = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
    const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу


    this.setValue = (newValue) => {
        if (newValue < min){
            newValue = min
        }

        if (newValue > max){
            newValue = max
        }

        value = newValue

        if (typeof this.onchange === 'function'){
            this.onchange(value)
        }

        img.style.transform = `rotate(${getAngle()}deg)`
    }

    this.getValue = () => value

    img.onmousewheel = (e) => {
        const {deltaY} = e
        //console.log(deltaY)
        e.preventDefault()

        this.setValue(value + deltaY*wheelSpeed)
    }

    img.onclick = (e) => {
        const {layerX} = e
        console.log(e, layerX)
        if (layerX > img.width/2)
            this.setValue(value +step)
        else
            this.setValue(value -step)
    }

    this.setValue(value)
}
let $song = document.querySelector('.mySong')
const volumeControl  = new Control(container1, {value: 75, minAngle: -180})
volumeControl.onchange = (value => {
    $song.volume = value / 100
})

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

function setRGB(value, n){
    let arr = ['rgb', '(', red.getValue(), ', ', green.getValue(), ', ', blue.getValue(), ')']
            arr[n + n + 2] = value
    colorBox.style.backgroundColor = arr.join('')
}

const red  = new Control(container2, {min: 0, max: 255})
red.onchange = (value) => setRGB(value,0)
const green  = new Control(container2, {min: 0, max: 255})
green.onchange = (value) => setRGB(value,1)
const blue  = new Control(container2, {min: 0, max: 255})
blue.onchange = (value) => setRGB(value,2)