const movers = document.querySelectorAll("[data-mover]");

Array.from(movers).forEach(mover=>{
    mover.addEventListener('mouseenter', (e) => move(e))
})

function move(e) {
    let amount = parseInt(e.target.dataset.mover)                        // data attribute mover set the amount of movement
    
    let offsetCheck = /translate\(-50%, -50%\)/
    let offsetMatch = e.target.style.transform.match(offsetCheck)
    
    
    let transformCheck = /translate\((\d+\.*\d*)vw, (\d+\.*\d*)vh\)/     // check for pattern like translate(12vw, 34vh)
    const match = e.target.style.transform.match(transformCheck)
    
    if (match) {
        e.target.style.transform = 
            `translate(
            ${parseInt(match[1]) + Math.random() * amount - amount / 2 }vw, 
            ${parseInt(match[2]) + Math.random() * amount - amount / 2}vh)`
    } else {
         e.target.style.transform = 
             `translate(
             ${Math.random() * amount - amount / 2 }vw, 
             ${Math.random() * amount - amount / 2}vh)`
    }
    
    
    if(offsetMatch){
        e.target.style.transform += ' translate(-50%, -50%)'
    }
}