Omikuji Button

omikuji-button.js

customElements.define(
  'omikuji-button',
  class extends HTMLElement {
    #isRunning = false
    #text
    constructor() {
      super()
      this.#text = document.createTextNode('-')

      const button = document.createElement('button')
      button.style.width = '9em'
      button.style.textAlign = 'left'
      button.textContent = 'Do Omikuji: '
      button.appendChild(this.#text)
      button.addEventListener('click', this.startstop.bind(this))
      this.appendChild(button)
    }
    startstop() {
      if (this.#isRunning) {
        this.#isRunning = false
        return
      }
      this.#isRunning = true
      const loop = () => {
        if (!this.#isRunning) {
          return
        }
        const list = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶']
        this.#text.textContent = list[Math.floor(Math.random() * list.length)]
        requestAnimationFrame(loop)
      }
      loop()
    }
  }
)