JSFiddle - React, Tailwind, and code Playground

by LeroyRon

HTML

<textarea id="output"></textarea>
<div>
    <button id="thrust" title="Summing up data in Buffer (Piece by Piece until done)">Test Thrust</button>
    <lable for="skipVal">Skip</lable>
    <lable for="thrustVal">Thrust</lable>
    <input id="skipVal" type="number" value="1" step="1" />
    <input id="thrustVal" type="number" value="2" step="1" />
    <lable for="continuance" title="Thrust blocking option and allows no leaping.">Continuance</lable>
    <input id="continuance" type="checkbox" title="Thrust blocking option and allows no leaping." checked />
    <lable for="revert" title="Revert at end of data chunk for thrust and measure.">Revert</lable>
    <input id="revert" type="checkbox" title="Revert at end of data chunk for thrust and measure." checked />
    <button id="measure" title="Continue summing up data in Buffer (From Trusting)">Test Measure</button>
    <input id="measureVal" type="number" value="10" step="1" />
    <button id="leap" title="Jump over matching data value(random values) to the next node/property/chunk">Test Leap Value</button>
    <input id="leapVal" type="number" value="1" step="1" />
    <button id="all" title="Testing all options">Test All</button>
</div>

CSS

body {padding: 0px; margin: 0px;}
#output {
    bottom: 0;
    font-size: 12px;
    height: 100%;
    position: fixed;
    width: 100%;
}
div {position: fixed; right:18px; top: 0; width: 202px; z-index: 1;}
#thrust, #measure, #leap, #all, lable, input {
    font-size: 25px;
    height: 80px;
    width: 200px;
    opacity: 0.7;
}
lable {background: #fff; width: 100px; height: 40px; text-align: center; float:left;}
input#skipVal, input#thrustVal {font-size: 30px; margin: 0; padding: 0; width: 100px; float:left;}
input#continuance, input#revert {margin: 0px; float: left; height: 40px; width: 90px;}

JavaScript

var output = document.getElementById('output');
var nodes = 3;
var propset = 3;
var datalimit = 6;
var continuancePosVal_data0 = 1;//do not change tied to Data0 its default value to position at *Data1 and to reset all continuances at property level 
var perlimit = continuancePosVal_data0 + datalimit;
var nodePerBuffer = perlimit * propset + propset + 1;

var buffering = 
{
    stream: function (buffer, continuance, skip, tCount, revert, mCount, leap, reset) 
    {
        this.output('Buffer length: '+buffer.length);
        var checkInContinuance = function(continuance) {
            if (!continuance)
                return i;
            i += buffer[data0PosI];
            updateDataPosI(i);//Always update i after change
            buffering.output('\t\tContinuing from *Data' + dataPos + ' @ [' + dataPosI + '] ');
            return i;
        }
        var checkOutRevert = function(skip, revert) {
            if (!revert)
                return i;
            var reverancy = ((buffer[data0PosI]+skip)/datalimit) << 0;//RoundDown bitwise
            var revertPos = ((buffer[data0PosI]+skip)-(datalimit*reverancy)+continuancePosVal_data0);
            var revertPosI = data0PosI+revertPos;
            if (reverancy >= 1) {//Chunk count skipped over
                buffer[data0PosI] = revertPos;
                updateDataPosI(revertPosI);//Always update i after change
                buffering.output('\t\tSkip/Thrust goes Beyond '+reverancy+' chunk(s) reverting to *Data'+revertPos+' @ ['+revertPosI+ '] ');
                return revertPosI;
            } else {
                i += skip;
                updateDataPosI(i);//Always update i after change
                return i;
            }
        }
        var updateDataPosI = function(it) {
            dataPos = ((it - cursor) - (chunkStartI));
            dataPosI = it;
            data0PosI = it - dataPos;
            data0PosDataI = buffer[data0PosI]+data0PosI;
            leap0 = perlimit - dataPos;
       ...