{{- /* 
    artifactjsdos.tmpl ~ Artifact JS-DOS v6 emulator template.
*/ -}}
{{- define "artifactjsdos" -}}
{{- if eq (index . "jsdos6") true}}
{{- $download := index . "download"}}
{{- $filename := index . "filename"}}
{{- $lead := index . "lead"}}
{{- $runProgram := index . "jsdos6Run"}}
{{- $extract := index . "jsdos6Zip"}}
{{- $config := index . "jsdos6Config"}}
{{- $runJS := "startBinary(DosBoxConfig);"}}
{{- if eq $extract true}}{{ $runJS = "startZip(DosBoxConfig);" }}{{end}}
{{- $prog := toLower $runProgram}}
{{- $fname := toLower $filename}}
{{- /*  js-dos v6.22 ~ canvas and user interface. */}}
<div class="modal fade" id="jsDOSModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="jsDOSModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
              {{if ne $prog $fname}}{{toLower $prog}} - {{else}}{{end}}{{toLower $fname}}
            </div>
            <div class="modal-body">  
                <canvas id="jsdos6"></canvas>  
            </div>
            <div class="modal-footer">
                <button id="jsdosFullscreen" class="btn btn-dark">Fullscreen</button>
                <button id="jsdosScreenshot" class="btn btn-dark">Screenshot</button>
                <button id="jsdosStop" class="btn btn-danger">Stop</button>
                <button type="button" id="jsdosCloser" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script defer>
    const canvas = document.getElementById("jsdos6");
    const ctx = canvas.getContext("2d");
    ctx.font = "16px serif";
    ctx.fillText("Not working?", 10, 50);
    ctx.fillText("Try the browser Console for errors.", 10, 70);
    const stopButton = document.getElementById("jsdosStop");
    stopButton.addEventListener("click", () => {
      try {
        ci.exit();
        stopButton.disabled = true;
      } catch (error) {
        console.log("ci.exit() error: ", error);
      }
    });
    document.getElementById(`jsdosFullscreen`).addEventListener("click", () => {
      canvas.requestFullscreen();
    });
    document
      .getElementById(`jsdosScreenshot`)
      .addEventListener("click", screenshot);
    function screenshot() {
      console.log("screenshot: for canvas of {{$filename}}");
      let dataURL = canvas.toDataURL("image/png");
      let a = document.createElement("a");
      a.href = dataURL;
      a.download = "{{$filename}}.png";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    function startBinary(options) {
      Dos(canvas, options).ready((fs, main) => {
        // create a dosbox configuration file within the virtual file system.
        fs.createFile("dosbox.conf", "{{$config}}");
        // fetch the artifact file download.
        fetch("/d/{{$download}}")
          .then((response) => response.arrayBuffer())
          .then((arrayBuffer) => {
            // recreate the artifact file download within the virtual file system.
            fs.createFile("{{$filename}}", arrayBuffer);
            // start the dosbox with the configuration and the artifact file.
            main(["-conf", "dosbox.conf", "-c", "{{$runProgram}}"]).then((ci) => {
              window.ci = ci;
              console.log(
                `width: ${ci.dos.canvas.width}, height: ${ci.dos.canvas.width}`
              );
            });
          });
      });
    }
    function startZip(options) {
      Dos(canvas, options).ready((fs, main) => {
        // create a dosbox configuration file within the virtual file system.
        fs.createFile("dosbox.conf", "{{$config}}");
        console.log("{{$config}}");
        // fetch the artifact file download and if it is a zip file, extract it to the virtual file system.
        fs.extract("/d/{{$download}}").then(() => {
          // start the dosbox with the configuration and the extracted artifact file.
          main(["-conf", "dosbox.conf", "-c", "{{$runProgram}}"]).then((ci) => {
            window.ci = ci;
            console.log(
              `width: ${ci.dos.canvas.width}, height: ${ci.dos.canvas.width}`
            );
          });
        });
      });
    }
    const jsdos = document.getElementById("jsdosRunLink");
    jsdos.addEventListener("click", function () {
      this.style.pointerEvents = "none";
      this.textContent = "Running app";
      DosBoxConfig = {
        wdosboxUrl: "/js/wdosbox.js",
        cycles: "auto", // int value, "max" or "auto"
        autolock: false,
      };
      {
        {
          {{$runJS | safeJS}};
        }
      }
    });
    const jsQuit = document.getElementById("jsdosCloser");
    jsQuit.addEventListener("click", () => {
      location.reload();
    });    
</script>
{{- end}}{{ end }}