ryunp · March 15, 2022 12:20
diff --git a/typed-jslib-test.html b/typed-jslib-test.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cute Typer Test</title>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <style>
        body {
            background-color: #222;
            color: rgb(31, 189, 252);
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 2vw;
            text-shadow: 0 0 0.35vw rgb(31, 189, 252) ;
        }

        #app {
            display: inline-block;
        }
    </style>
 </head>

 <body>
    <div id="app"></div>

    <script>
        function limitedRandomSignOffsetIteratorFactory (centerValue, deviationLimit) {
            const minValue = centerValue - deviationLimit
            const maxValue = centerValue + deviationLimit
            var currentValue = centerValue
            console.log(`${centerValue}, ${minValue}-${maxValue}`)

            return function generateNextValue (step) {
                if (Math.random() < 0.5) { step *= -1 }
                currentValue = Math.min(Math.max(minValue, currentValue + step), maxValue)
                return currentValue
            }
        }

        function updateTextAnimationSpeed (typeObj, step, nextFn) {
            typeObj.typeSpeed = nextFn(step)
        }

        // Initial app state
        const typeSpeedMs = 100;
        const typeSpeedStepMs = 5
        const typeSpeedDeviationMs = 30
        const getNextValueFn = limitedRandomSignOffsetIteratorFactory(typeSpeedMs, typeSpeedDeviationMs)
        const textLineWriteDelayMs = 1500
        const textLinePrefixStr = '> '
        const textAnimationObj = new Typed('#app', {
            backSpeed: typeSpeedMs * 0.75,
            backDelay: 2000,
            loop: true,
            strings: [
                'Tired of lying in the sunshine, staying home to watch the rain',
                'You are young and life is long, and there is time to kill today',
                'And then one day you find ten years have got behind you',
                'No one told you when to run, you missed the starting gun'
            ].map(s => `${textLinePrefixStr}^${textLineWriteDelayMs}${s}`),
            typeSpeed: typeSpeedMs
        });

        // Kick off async events
        setInterval(updateTextAnimationSpeed.bind(null, textAnimationObj, typeSpeedStepMs, getNextValueFn), 1000)
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cute Typer Test</title>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<style>
	body {
	background-color: #222;
	color: rgb(31, 189, 252);
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	font-size: 2vw;
	text-shadow: 0 0 0.35vw rgb(31, 189, 252) ;
	}

	#app {
	display: inline-block;
	}
	</style>
	</head>

	<body>
	<div id="app"></div>

	<script>
	function limitedRandomSignOffsetIteratorFactory (centerValue, deviationLimit) {
	const minValue = centerValue - deviationLimit
	const maxValue = centerValue + deviationLimit
	var currentValue = centerValue
	console.log(`${centerValue}, ${minValue}-${maxValue}`)

	return function generateNextValue (step) {
	if (Math.random() < 0.5) { step *= -1 }
	currentValue = Math.min(Math.max(minValue, currentValue + step), maxValue)
	return currentValue
	}
	}

	function updateTextAnimationSpeed (typeObj, step, nextFn) {
	typeObj.typeSpeed = nextFn(step)
	}

	// Initial app state
	const typeSpeedMs = 100;
	const typeSpeedStepMs = 5
	const typeSpeedDeviationMs = 30
	const getNextValueFn = limitedRandomSignOffsetIteratorFactory(typeSpeedMs, typeSpeedDeviationMs)
	const textLineWriteDelayMs = 1500
	const textLinePrefixStr = '> '
	const textAnimationObj = new Typed('#app', {
	backSpeed: typeSpeedMs * 0.75,
	backDelay: 2000,
	loop: true,
	strings: [
	'Tired of lying in the sunshine, staying home to watch the rain',
	'You are young and life is long, and there is time to kill today',
	'And then one day you find ten years have got behind you',
	'No one told you when to run, you missed the starting gun'
	].map(s => `${textLinePrefixStr}^${textLineWriteDelayMs}${s}`),
	typeSpeed: typeSpeedMs
	});

	// Kick off async events
	setInterval(updateTextAnimationSpeed.bind(null, textAnimationObj, typeSpeedStepMs, getNextValueFn), 1000)
	</script>
	</body>

	</html>