BextJS Scroll Art Template

by asweigart

HTML

<!-- Scroll down to the "INSERT YOUR SCROLL ART PROGRAM CODE BELOW" part.
This is where you will enter your JavaScript code that calls print() and sleep(). -->

<textarea id="outputTextarea" readonly class="tatjsOutput"></textarea><br />
<button type="button" onclick="running = !running;">&#x23FB; Off</button>
<script>
"use strict";function _countNewlines(str){let count=0;for(let i=0;i<str.length;i+=1){if(str[i]==='\n'){count+=1}}return count}function _truncateForRowBuffer(outputElem,rowBufferSize){if(rowBufferSize===null){return;}let totalNewlines=_countNewlines(outputElem.value);if(totalNewlines>=rowBufferSize){let newlineCount=0;let cutAt=0;for(cutAt=0;cutAt<outputElem.value.length;cutAt+=1){if(outputElem.value[cutAt]==='\n'){if(newlineCount==totalNewlines-rowBufferSize){break}else{newlineCount+=1}}}outputElem.value=outputElem.value.substring(cutAt+1)}}function _processBackspaces(input){let stack=[];for(let char of input){if(char==='\b'){if(stack.length>0){stack.pop()}}else{stack.push(char)}}return stack.join('')}function sleep(delayInMilliseconds){return new Promise(resolve=>setTimeout(resolve,delayInMilliseconds))}class Tatjs{constructor(outputElem=null,inputElem=null,rowBufferSize=256){this.rowBufferSize=rowBufferSize;this.outputElem=outputElem;this.inputElem=inputElem;if(this.outputElem!==null){this.outputElem.readOnly=true}if(this.inputElem!==null){this.inputElem.readOnly=true}this.clear()}print(){if(this.outputElem===null){throw "print() has been called but this.outputElem does not exist."}let args=Array.prototype.slice.call(arguments);let newline="\n";if(args.length!==1&&args[args.length-1]==""){newline=""}this.outputElem.value=_processBackspaces(this.outputElem.value+args.join(""))+newline;_truncateForRowBuffer(this.outputElem,this.rowBufferSize);this.outputElem.scrollTop=this.outputElem.scrollHeight;}input(){if(this.inputElem===null){throw "input() has been called but this.inputElem does not...

CSS

.tatjsOutput {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: monospace;
    width: 100%;
}

.tatjsOutput {
    height: calc(100vh - 40px);
    vertical-align:top;
    white-space: pre;
}