HW/HW010/Крутилка/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   = 'img/1@3x.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)
}



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

const audio = document.createElement("audio")
audio.src = "music/Мюслі UA - Вова, їбаш їх блять.mp3"
document.body.append(audio)
audio.setAttribute("controls", "")
audio.style.display = "block"
audio.style.marginLeft = "auto"
audio.style.marginRight = "auto"

function setRGB(){
console.log('setRGB')
    let redRGB = red.getValue()
    let greenRGB = green.getValue()
    let blueRGB = blue.getValue()
    let autoRGB = (colorDiv.style.background = `rgb(${redRGB}, ${greenRGB}, ${blueRGB})`)
    return console.log(setRGB)
//какой то блок, которому меняем цвет через rgba и значения крутилок
}

const colorDiv = document.createElement("div")
colorDiv.style.width = "500px"
colorDiv.style.height = "500px"
/* colorDiv.style.backgroundColor = "red" */
colorDiv.style.display = "block"
colorDiv.style.marginLeft = "auto"
colorDiv.style.marginRight = "auto"
document.body.append(colorDiv)

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

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

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