Simple variation of the Getting Started Example

[stephenhandley]

Was just checking out the API and made basic variation on the Getting Started example and figured Id share in case that's of interest to anyone
https://jsfiddle.net/stephenhandley/gvtsmhp8/3/

Source code:

const {button, div, pre} = van.tags

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const total = 40

const Runners = {
  Snail: {
    emoji: "🐌",
    sleep: 1000
  },
  Turtle: {
    emoji: "🐢",
    sleep: 500
  },
  Human: {
    emoji: "🚶‍",
    sleep: 100
  },
  Rabbit: {
    emoji: "🐇",
    sleep: 50
  },
  Car: {
    emoji: "🏎️",
    sleep: 10
  },
  Rocket: {
    emoji: "🚀",
    sleep: 2
  }
}

const Run = (runner) => {
  const progress = van.state(0)

  const animate = async () => {
    while (progress.val < total) {
      await sleep(runner.sleep)
      ++progress.val
    }
  }
  animate()

  const helloText = van.bind(progress,
    (p) => {
      const spaces = " ".repeat(total - p)
      const trail = "_".repeat(p)
      return `${spaces}${runner.emoji}💨Hello VanJS!${trail}`
    }
  )
  return div(pre(helloText))
}

const Starter = (dom, runner) => {
  return button({
    onclick: () => {
      const node = Run(runner)
      dom.insertBefore(node, dom.firstChild)
    }
  }, `Hello ${runner.emoji}`)
}

const Hello = () => {
  const runners = div()
  return div(
    Starter(runners, Runners.Snail),
    Starter(runners, Runners.Turtle),
    Starter(runners, Runners.Human),
    Starter(runners, Runners.Rabbit),
    Starter(runners, Runners.Car),
    Starter(runners, Runners.Rocket),
    runners,
  )
}

van.add(document.body, Hello())

[artydev]

Nice, thank you Stephen :-)