yyyyyyy

yyyyyyy/l/space/js/index.js

@@ -0,0 +1,59 @@
+const mist = new Howl({ src: ['mist.mp3'], autoplay: true, loop: true })
+const swish = new Howl({ src: ['sound1.mp3'] })
+
+const fadeTime = 1100
+
+async function getImage() {
+  let response = await fetch('/getimage')
+
+  try {
+    return response.json()
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function createImage(data) {
+  const leftPos = Math.floor(Math.random() * (window.innerWidth - 200 + 1)) + 'px'
+  const topPos = Math.floor(Math.random() * (window.innerHeight - 200 + 1)) + 'px'
+  const newDiv = document.createElement('div')
+
+  newDiv.setAttribute('class', 'image')
+  newDiv.style.top = topPos
+  newDiv.style.left = leftPos
+  newDiv.innerHTML = `<img src="https://files.yyyyyyy.info/images/${data.file}"  width="${data.width}" height="${data.height}">`
+  document.body.appendChild(newDiv)
+
+  setTimeout(() => {
+    newDiv.classList.add('visible')
+    swish.play()
+  }, 50)
+
+  return newDiv
+}
+
+function removeImage() {
+  const oldDiv = document.getElementsByClassName('image')[0]
+
+  oldDiv.classList.remove('visible')
+  setTimeout(() => {
+    oldDiv.parentNode.removeChild(oldDiv)
+  }, fadeTime)
+}
+
+async function cycleImage() {
+  const image = await getImage()
+  
+  createImage(image.image[0])
+  swish.play()
+}
+
+mist.play()
+cycleImage()
+
+setInterval(() => {
+  setTimeout(() => {
+    removeImage()
+  }, 100)
+  cycleImage()
+}, 6000)