Pika
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>

    #container1 {
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }

</style>

<body>

    <div id="container1"></div>
    <script>
        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: -90 })
        volumeControl.onchange = (value) => {
            hit.volume = value / 100
            console.log('ON CHANGE', value)
        }

        const hit = document.createElement("audio");
        hit.setAttribute("controls", "");
        hit.src = "hit/kalush_-_stefanija_(z2.fm).mp3";
        hit.style.paddingLeft = "60px"
        document.body.append(hit);

        //на каждый setValue
        //console.log(volumeControl.getValue())
        //пришейте к нему тэг audio для громкости

        function setRGB() {
            let redBlock = red.getValue()
            let greenBlock = green.getValue()
            let blueBlock = blue.getValue()
            let rgbBlock = (block.style.background = `rgb(${redBlock},${greenBlock},${blueBlock})`)
            console.log('setRGB')
            //какой то блок, которому меняем цвет через rgba и значения крутилок
        }

        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 block = document.createElement("div");
        block.style.width = "700px";
        block.style.height = "300px";
        block.style.paddingLeft = "370px"
        document.body.append(block);

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


</body>


</html>