Stolon

title

d = document
b = d.body

let boxes = d.querySelectorAll(".box.clickable")

boxes.forEach(box => {
  box.onclick = function(e){
    let el = this
    let randSplit = Math.round(Math.random())
    if ( !el.getAttribute('data-hassplet') && randSplit) {
      // if split
      let randomAxis = Math.round(Math.random())
      if (this.querySelector('img')) {
        this.querySelector('img').remove()
      }
      let exBoxes = this.querySelectorAll('.box')
      exBoxes.forEach(exBox => {
        exBox.classList.remove('clickable')
      })
      let newParent = d.createElement('div')
      let newBox1 = d.createElement('div')
      let newBox2 = d.createElement('div')
      let newImg1 = d.createElement('img')
      let newImg2 = d.createElement('img')
      newParent.classList.add('box')
      newParent.classList.add('parent')
      newBox1.classList.add('box')
      newBox2.classList.add('box')
      newBox1.classList.add('clickable')
      newBox2.classList.add('clickable')      
      newBox1.appendChild(newImg1)
      newBox2.appendChild(newImg2)
      newParent.appendChild(newBox1)
      newParent.appendChild(newBox2)
      el.appendChild(newParent)
      el.setAttribute('data-hassplet', 1)
      if (randomAxis) { // if true, vertical
        newParent.classList.add('vertical')
      }
    }else{
      let randUnSplit = Math.round(Math.random())

// merge
      if (this.querySelector('.box') && randUnSplit) {
        this.querySelector('.box').remove()
        let newImg = d.createElement('img')
        this.appendChild(newImg)
        let rand = Math.round(Math.random() * 38) + 1
        newImg.setAttribute('src',"folder/"+rand+".jpg")
        el.removeAttribute('data-hassplet')

}
    }
    changeImg(el)
  }
});

function changeImg(el){
    let images = el.querySelectorAll('img')
    images.forEach(image =>{
      let rand = Math.round(Math.random() * 38) + 1
      image.setAttribute('src',"folder/"+rand+".jpg")
    })
}

snap save new fork

gallery