maryluis
/
homeworks_Second_modul


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Rgb</title>
        <style>
        </style>
    </head>
    <body>
        <script>

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

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

                const ratio = (maxAngle - minAngle) / (max - min)

                const value2Deg = () => ratio * (value - min) + minAngle

                const changeValue = (delta, fireEvent=false) => {
                    let newValue = value +delta
                    if (newValue >= max) newValue = max
                    if (newValue <= min) newValue = min

                    value = newValue

                    //console.log(value)

                    if (fireEvent && this.onChange && typeof this.onChange === 'function'){
                        this.onChange(value)
                    }

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

                const {top, left} = img.getBoundingClientRect()

                changeValue(0)

                console.log(img.width, top, left)

                img.onclick = e => {
                    changeValue(e.clientX - left > img.width/2 ? step : -step, true)
                }

                img.onmousewheel = e => {
                    changeValue(e.deltaY * step, true)
                    e.preventDefault()
                }

                let startDragAngle;

                const calcAngle = ({layerX, layerY}) => {
                    const deltaX = layerX - img.width/2
                    const deltaY = layerY - img.height/2
                    return (Math.atan2(deltaY, deltaX)/ Math.PI) * 180
                }
                
                img.onmousedown = e => {
                    startDragAngle = calcAngle(e)
                    e.preventDefault()
                }

                img.onmousemove = e => {
                    if (startDragAngle !== undefined){
                        const currentAngle = calcAngle(e)
                        const deltaAngle   = currentAngle - startDragAngle
                        changeValue(deltaAngle/ratio, true)
                        startDragAngle = currentAngle
                        e.preventDefault()
                    }
                }

                img.onmouseup = img.onmouseout = e => {
                    if (startDragAngle){
                        startDragAngle = undefined
                        e.preventDefault()
                    }
                }

                this.setValue = v => changeValue(v - value)
                this.changeValue = changeValue

                this.getValue = () => value
            }

            function rgbConst(parent){

                this.container = document.createElement("div");
                this.container.style = "display: flex;";
                parent.appendChild(container);

                this.fullColor = document.createElement("div");
                this.fullColor.setAttribute("style","background-color: rgb(64, 64, 64); width: 150px; height: 150px; margin: 5px");               
                container.appendChild(this.fullColor);


                this.r = new Control(container, {max:255, value: 64});
                this.r.onChange = () => this.changeColor()

                this.g = new Control(container, {max:255, value: 64});
                this.g.onChange = () => this.changeColor()

                this.b = new Control(container, {max:255, value: 64});
                this.b.onChange = () => this.changeColor()

                this.rgbImg = document.getElementsByTagName("img");

                for(let i = 0; i < this.rgbImg.length; i++) {
                    let colors = ["red", "green", "blue"];
                    this.rgbImg[i].style = `width: 130px; padding: 10px; background-color: ${colors[i]}; border-radius: 50%; margin: 5px; transform: rotate(90deg)`;

                }

                this.changeColor = function() {
                    let value1 = this.r.getValue();
                    let value2 = this.g.getValue();
                    let value3 = this.b.getValue();
                    this.fullColor.setAttribute("style",`background-color: rgb(${value1}, ${value2}, ${value3}); width: 150px; height: 150px`); 
                }
                this.changeColor()
            }

            function Audio(parent) {
                this.audioContainer = document.createElement("div");
                this.audioContainer.id = "volumeControl"
                parent.appendChild(audioContainer)

                this.audio = document.createElement("audio");
                this.audio.setAttribute("src", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-16.mp3")
                this.audio.setAttribute("controls", "controls")
                this.audio.style = "margin: 20px"
                this.audioContainer.appendChild(audio);

                this.audioVolume = new Control(audioContainer, {value: 1, max: 1, min: 0, step: 0.00000001});
                this.audioVolume.onChange = () => this.changeVolume(this.audioVolume.getValue())
                
                this.volumeControl = document.getElementById("volumeControl");
                this.img = volumeControl.getElementsByTagName("img");
                this.img[0].style = "width: 100px"

                this.valueDirection = document.createElement("span");
                this.valueDirection.innerText = `100`
                this.audioContainer.appendChild(this.valueDirection)


                this.changeVolume = function(value) {
                    this.audio.volume = `${value}`;
                    this.valueDirection.innerText = `${[Math.round(this.audioVolume.getValue() * 100)]}`
                }

                
            }
            rgbConst(document.body)
            Audio(document.body)


            // const volumeControl  = new Control(container1, {value: 50})

            // volumeControl.onChange = (value) => console.log('VOLUME', value)
            // const balanceControl = new Control(container2, {maxAngle: 90, minAngle: 0, min: -50, max: 50, value: 25})


            /*
            function registerForm(el){
                return new Promise((resolve, reject) => {
                    const loginInput = document.createElement('input')
                    const passwordInput = document.createElement('input')

                    const cancelButton = document.createElement('button')
                    const okButton = document.createElement('button')

                    el.append(loginInput)
                    el.append(passwordInput)

                    el.append(cancelButton)
                    okButton.innerText = 'ok'
                    el.append(okButton)
                    cancelButton.innerText = 'ne ok'

                    function clear(){
                        loginInput.remove()
                        passwordInput.remove()

                        okButton.remove()
                        cancelButton.remove()
                    }

                    okButton.onclick = () => {
                        clear()
                        resolve({login: loginInput.value, password: passwordInput.value});
                    }

                    cancelButton.onclick = () => {
                        clear(); 
                        reject(new Error('cancel'))
                    }
                })
            }

            async function RegAndLog(){
                try{
                    title.innerText = 'Register Please'
                    let regLogin, regPassword, a, b;
                    while(!regLogin || !regPassword)
                    {
                        [{login:regLogin, password: regPassword}]= [await registerForm(container)]
                    } 
//                    await ServerRegister({regLogin, regPassword})

                    title.innerText = 'Login Please'
                    const {login, password} = await registerForm(container)
                    console.log(login, password, regLogin, regPassword)
//                    await ServerLogin({login, password})
                    if (regLogin === login && regPassword === password){
                        title.innerText = 'Регистрация и Логин прошли ЗБС'
                    }
                    else {
                        title.innerText = 'Регистрация и Логин не прошли'
                    }
                }
                catch(e){
                    title.innerText = 'якийс негаразд: ' + e.message
                }
            }

            RegAndLog()
            let a=5,b=10;
            [{a,b}] = [{b,a}]
            console.log(a, b) */
        </script>
    </body>
</html>