const svg = document.querySelector('svg')!

class Bubble {
  private static time = performance.now()
  private static age = 0
  private static count = 0
  private static readonly freq = 800 // bubbles/s
  private static readonly birth = performance.now()
  private static readonly trash = new Set<Bubble>()
  private static readonly actives = new Set<Bubble>()

  private birth = 0
  private readonly data = {
    age: 0,
    x: 0,
    r: 0,
    hue: 0,
    speed: 0,
    life: 0,
  }

  private readonly elm = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'circle'
  )

  private static create() {
    let bubble: Bubble
    if (Bubble.trash.size > 0) {
      ;[bubble] = Bubble.trash
      Bubble.trash.delete(bubble)
    } else {
      bubble = new Bubble()
    }
    return bubble.init()
  }

  private init() {
    Bubble.count++
    Bubble.actives.add(this)
    svg.append(this.elm)
    this.birth = Bubble.count / (Bubble.freq / 1000) + Bubble.birth
    this.data.age = 0
    this.data.x = rnd(window.innerWidth)
    this.data.r = rnd(10, 30)
    this.data.hue = Bubble.count
    this.data.speed = rnd(100, 300)
    this.elm.setAttribute('cx', this.data.x.toString())
    this.data.life = rnd(1, 3)
    this.draw()
    return this
  }

  private draw() {
    const life = this.data.age / this.data.life
    if (life >= 1) return this.delete()

    this.elm.setAttribute(
      'cy',
      String(window.innerHeight - this.data.age * this.data.speed)
    )
    this.elm.setAttribute('r', String(this.data.r * life * life))
    this.elm.setAttribute(
      'stroke',
      `hsl(${this.data.hue}, 100%, ${Math.floor(100 * (1 - life))}%)`
    )
    return this
  }

  private delete() {
    Bubble.actives.delete(this)
    Bubble.trash.add(this)
    this.elm.remove()
    return this
  }

  update() {
    this.data.age = (Bubble.time - this.birth) / 1000
    this.draw()
  }

  static update() {
    Bubble.time = performance.now()
    Bubble.age = Bubble.time - Bubble.birth
    while (Bubble.age * (Bubble.freq / 1000) > Bubble.count) {
      Bubble.create()
    }
    for (const b of Bubble.actives) b.update()
  }
}

function rnd(a = 1, b = 0) {
  return Math.random() * (b - a) + a
}

function loop() {
  Bubble.update()
  requestAnimationFrame(loop)
}

loop()