UlisseMini/owo.html

## owo.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>owo</title>

    <style>
      html {
        background: #222;
        color: #fff;
        font-family: monospace;
      }

      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .bar {
        display: inline-block;
        background: #44f;
        margin-top: auto;
      }

      * { box-sizing: border-box; }

      .stocks {
        border: 1px solid white;
        display: flex;
        flex-direction: row;
      }
    </style>
  </head>
  <body>
    <h1>owo</h1>
    <p>Call the <code>owo()</code> function!1!!</p>
    <input type="text" />
    <div class="stocks"></div>
    <pre class="log"></pre>

    <script>
      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
      const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
      const width = Math.floor(vw * 0.9)
      const height = Math.floor(vh * 0.6)
      const stocks = document.querySelector(".stocks")
      stocks.style.width = `${width}px`
      stocks.style.height = `${height}px`

      document.querySelector('input').addEventListener('keyup', event => {
        if (event.key === 'Enter') {
          try {
            eval(document.querySelector('input').value)
          } catch (e) {
            log(`${e}`)
          }
        }
      })

      const logElement = document.querySelector('.log')
      const log = (msg) => {
        console.log(msg)
        logElement.innerText = msg
      }

      let stop
      const sleep = millis => {
        return new Promise(resolve => {
          stop = () => { resolve(true); log('stopped') }
          setTimeout(resolve, millis)
        })
      }

      const uwu = (w, h) => {
        if (!w)         throw `uwu how wide (w: ${w})`
        if (!h)         throw `uwu how tall (h: ${h})`
        if (w > width)  throw `uwu too wide (w: ${w} > width: ${width})`
        if (h > height) throw `uwu too tall (h: ${h} > height: ${height})`

        const e = document.createElement("div")
        e.className = "bar"
        e.style.width  = `${w}px`
        e.style.height = `${h}px`
        stocks.appendChild(e)

        log(`uwu(w: ${w}, h: ${h}) done`)
      }

      const reset = () => {
        stocks.innerHTML = ''
        log('reset to initial state')
      }

      const owo = async (n, w, delay, noise) => {
        if (stop) stop()
        reset()
        delay = delay || 10
        w = w || 10
        n = n || Math.floor(width / w)
        noise = noise || (() => Math.random() * 30 - 15)

        let prefix = `owo(n: ${n}, w: ${w}, delay: ${delay})`
        log(prefix)
        for (let h = 1; h <= n; h++) {
          log(`${prefix}: uwu ${h} (going to ${n})`)
          uwu(w, (h*2) + noise())
          if (await sleep(delay)) break
        }
      }

      log('messages from functions show up here')
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>owo</title>

	<style>
	html {
	background: #222;
	color: #fff;
	font-family: monospace;
	}

	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	}

	.bar {
	display: inline-block;
	background: #44f;
	margin-top: auto;
	}

	* { box-sizing: border-box; }

	.stocks {
	border: 1px solid white;
	display: flex;
	flex-direction: row;
	}
	</style>
	</head>
	<body>
	<h1>owo</h1>
	<p>Call the <code>owo()</code> function!1!!</p>
	<input type="text" />
	<div class="stocks"></div>
	<pre class="log"></pre>

	<script>
	const vw = Math.max(document.documentElement.clientWidth \|\| 0, window.innerWidth \|\| 0)
	const vh = Math.max(document.documentElement.clientHeight \|\| 0, window.innerHeight \|\| 0)
	const width = Math.floor(vw * 0.9)
	const height = Math.floor(vh * 0.6)
	const stocks = document.querySelector(".stocks")
	stocks.style.width = `${width}px`
	stocks.style.height = `${height}px`

	document.querySelector('input').addEventListener('keyup', event => {
	if (event.key === 'Enter') {
	try {
	eval(document.querySelector('input').value)
	} catch (e) {
	log(`${e}`)
	}
	}
	})

	const logElement = document.querySelector('.log')
	const log = (msg) => {
	console.log(msg)
	logElement.innerText = msg
	}

	let stop
	const sleep = millis => {
	return new Promise(resolve => {
	stop = () => { resolve(true); log('stopped') }
	setTimeout(resolve, millis)
	})
	}

	const uwu = (w, h) => {
	if (!w) throw `uwu how wide (w: ${w})`
	if (!h) throw `uwu how tall (h: ${h})`
	if (w > width) throw `uwu too wide (w: ${w} > width: ${width})`
	if (h > height) throw `uwu too tall (h: ${h} > height: ${height})`

	const e = document.createElement("div")
	e.className = "bar"
	e.style.width = `${w}px`
	e.style.height = `${h}px`
	stocks.appendChild(e)

	log(`uwu(w: ${w}, h: ${h}) done`)
	}

	const reset = () => {
	stocks.innerHTML = ''
	log('reset to initial state')
	}

	const owo = async (n, w, delay, noise) => {
	if (stop) stop()
	reset()
	delay = delay \|\| 10
	w = w \|\| 10
	n = n \|\| Math.floor(width / w)
	noise = noise \|\| (() => Math.random() * 30 - 15)

	let prefix = `owo(n: ${n}, w: ${w}, delay: ${delay})`
	log(prefix)
	for (let h = 1; h <= n; h++) {
	log(`${prefix}: uwu ${h} (going to ${n})`)
	uwu(w, (h*2) + noise())
	if (await sleep(delay)) break
	}
	}

	log('messages from functions show up here')
	</script>
	</body>
	</html>