const
    h = 652,
    w = 412

const buttons = [
    { x: ((w - 75) / 2) + 80, y : 220, h: 50, w: 70, name: 'back' },

    { x: (w - 75) / 2, y : 220, h: 50, w: 75, name: 'up' },
    { x: ((w - 75) / 2) - 75, y : 280, h: 50, w: 75, name: 'left' },
    { x: ((w - 75) / 2) + 75, y : 280, h: 50, w: 75, name: 'right' },
    { x: (w - 75) / 2, y : 340, h: 50, w: 75, name: 'down' },

    { x: (w - 75) / 2, y : 350 + 60, h: 50, w: 75, name: 'a' },
    { x: (w - 75) / 2, y : 350 + 2*60, h: 50, w: 75, name: 'b' },
    { x: (w - 75) / 2, y : 350 + 3*60, h: 50, w: 75, name: 'c' },
]

const slider = [
    { x: (w - 300)/2, y: 150, h: 50, w: 300, name: 'slidi', rev: true},
    { x: 50, y: 350, h: 300, w: 100, name: 'ra', vert: true },
    { x: w-150, y: 350, h: 300, w: 100, name: 'ra', vert: true },
]


const body = document.getElementsByTagName('body')[0]
const textarea = document.getElementsByTagName('textarea')[0]

buttons.forEach(b => {
    const button = document.createElement('div')
    button.classList.add('button')

    button.style.height = b.h + 'px'
    button.style.width = b.w + 'px'
    button.style.top = b.y + 'px'
    button.style.left = b.x + 'px'

    button.innerText = b.name

    body.appendChild(button)

    button.addEventListener('click', ev => console.log(`${b.name}`))
})


slider.forEach(s => {
    const slider = document.createElement('div')
    slider.classList.add('slider')

    slider.style.height = s.h + 'px'
    slider.style.width = s.w + 'px'
    slider.style.top = s.y + 'px'
    slider.style.left = s.x + 'px'

    body.appendChild(slider)

    slider.addEventListener('touchmove', ev => {
        const touch = ev.touches[0][s.vert ? 'clientY' : 'clientX']

        let percent = (s.rev ? 0 : 1) - (Math.max(0, Math.min(s[s.vert ? 'h' : 'w'], touch - s[s.vert ? 'y' : 'x'])) / s[s.vert ? 'h' : 'w'])
        percent = Math.floor(Math.abs(percent) * 100)

        s.value = percent
        // console.log(`${s.name} - ${percent}`)

        render()
    })
})


render = () => {
    textarea.innerHTML =
        `     - Stick -
 
Choose:
Light ${slider[0].value | 0}%
Door ${slider[1].value | 0}%
Door ${slider[2].value | 0}%
`
}

render();