<style type="text/css">

    body {

      color: white;

      background: black;

    }

    input[type=text] {

      width: 5%;

    }

</style>

<pre id="screen">

</pre>

<script type="text/javascript">

    const uriParams = new URLSearchParams(window.location.search);

    const filePath = uriParams.get("file") ? uriParams.get("file") : "midnightfalls";

    const sceneTimeout = uriParams.get("delay") ? parseInt(uriParams.get("delay")) : 500;

    const sceneRows = uriParams.get("rows") ? parseInt(uriParams.get("rows")) : 8;

    const skipScenes = uriParams.get("skip") ? parseInt(uriParams.get("skip")) : 0;

    const seekScenes = uriParams.get("seek") ? parseInt(uriParams.get("seek")) : 0;

    const preContainer = document.getElementById('screen');

    function loadFile() {

      var result = null;

      var xht = new XMLHttpRequest();

      xht.open("GET", filePath, false);

      xht.send();

      if (xht.status==200) {

        result = xht.responseText;

      }

      return result;

    }

    var file = loadFile();

    window.onload = function(){

            const lines = file.replace(/\r\n/g,'\n').split('\n');

            var currentLine = skipScenes * sceneRows;

            const total = lines.length / sceneRows - (skipScenes + seekScenes);

            for (var i=0;i<total;i++) {

               (function(ind) {

                    setTimeout(function(){

                      preContainer.innerHTML = lines[currentLine++];

                      for (var j = 1; j < sceneRows; j++) {

                        preContainer.innerHTML = preContainer.innerHTML + '\n' + lines[currentLine++];

                      }

                    }, sceneTimeout * ind);

               })(i);

            }

            window.setTimeout(window.location.reload.bind(window.location), sceneTimeout * total);

    };

</script>