let code = document.getElementById('code')
let raw = []
let els = []

const SOURCES = [
  'https://cdn.jsdelivr.net/gh/quantum9innovation/the-jankiest/index.min.js',
  'https://cdn.jsdelivr.net/gh/quantum9innovation/hulet/dist/hulet.min.js',
  'https://cdn.jsdelivr.net/gh/quantum9innovation/sost/dist/sost.min.js',
  'https://code.jquery.com/jquery-3.6.3.min.js',
  'https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js',
]

hljs.configure({
  languages: ['javascript'],
  ignoreUnescapedHTML: true
})

let highlight = () => {
  document.querySelectorAll('pre').forEach(el => {
    hljs.highlightElement(el)
  })
}

let spawn = () => {
  els.forEach(el => {
    if (Math.random() < 0.3) el.remove()
  })

  let spawned = document.createElement('pre')
  let source = raw[Math.floor(Math.random() * raw.length)]
  let start = Math.floor(Math.random() * source.length)
  let length = 250
  let end = start + length
  let text = source.substring(start, end)
  spawned.innerText = text
  code.appendChild(spawned)

  let x = Math.random() * (window.innerWidth - 500)
  let y = Math.random() * (window.innerHeight - 400)
  spawned.style.left = x + 'px'
  spawned.style.top = (y + 300) + 'px'
  spawned.style.width = '500px'
  spawned.style.height = '100px'
  spawned.style.textWrap = 'wrap'
  spawned.style.opacity = 0.5
  spawned.style.background = 'black'
  spawned.style.position = 'absolute'
  spawned.style.overflow = 'hidden'

  highlight()
  els.push(spawned)
  setTimeout(spawn, 100)
}

let init = async () => {
  for (let source of SOURCES) {
    let res1 = await fetch(source);
    let text1 = await res1.text();
    let formatted = text1.replace(/\n/g, "");
    raw.push(formatted);
  }
}

init().then(spawn)