packager/index.html

<!--
Copyright (c) 2020 Thomas Weber

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html>

  <head>
    <style>
      body {
        font-family: sans-serif;
        padding: 2px;
        max-width: 480px;
        margin: auto;
      }
      @media (prefers-color-scheme: dark) {
        body {
          background: #111;
          color: #ddd;
        }
        a {
          color: #4af;
        }
      }
    </style>
  </head>

  <body>
    <h1>The new packager</h1>

    <p>This is the new packager for forkphorus & TurboWarp. If anyone has some ideas on how to make this site look pretty, send them on GitHub. p3 is a temporary name until something better can be thought of.</p>

    <section>
      <h2>Select project</h2>

      <div>
        <label>
          <input name="project.source" type="radio" value="id" checked>
          Project ID
        </label>
        <label>
          <input name="project.source" type="radio" value="file">
          Project File
        </label>
      </div>

      <div if="O.project.source === 'id'">
        <label>
          Project ID or URL:
          <input name="project.id" type="text">
        </label>
      </div>

      <div if="O.project.source === 'file'">
        <label>
          Project File:
          <input name="project.file" type="file" accept=".sb,.sb2,.sb3">
        </label>
      </div>

    </section>

    <section>
      <h2>Environment</h2>

      <div>
        <label>
          Runtime
          <select name="environment.runtime">
            <option value="turbowarp">TurboWarp</option>
            <option value="forkphorus">forkphorus</option>
          </select>
        </label>
      </div>

      <div>
        <label>
          Target Environment
          <select name="environment.target">
            <option value="html">Plain HTML (Standalone)</option>
            <option value="zip">Zip</option>
          </select>
        </label>
      </div>
    </section>

    <section if="O.environment.runtime === 'turbowarp'">
      <h2>TurboWarp options</h2>

      <p>TurboWarp currently does not support any options.</p>
    </section>

    <section if="O.environment.runtime === 'forkphorus'">
      <h2>forkphorus options</h2>

      <div>
        <label>
          Turbo Mode
          <input name="forkphorus.playerOptions.turbo" type="checkbox">
        </label>
      </div>
      <div>
        <label>
          Show Controls <!-- TODO fix -->
          <input name="forkphorus.showControls" type="checkbox" checked>
        </label>
      </div>
      <div>
        <label>
          Username
          <input name="forkphorus.playerOptions.username" type="text">
        </label>
      </div>
      <div>
        <label>
          Autoplay
          <select name="forkphorus.playerOptions.autoplayPolicy">
            <option value="always" selected>Always</option>
            <option value="never">Never</option>
            <option value="if-audio-playable">If audio can be played</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Framerate
          <input name="forkphorus.playerOptions.framerate" value="30" type="number">
        </label>
      </div>
      <div>
        <label>
          Loading Screen Text
          <input name="forkphorus.loadingScreenText" value="forkphorus">
        </label>
      </div>
      <div>
        <label>
          Cloud Variables
          <select name="forkphorus.playerOptions.cloudVariables">
            <option value="off">Off</option>
            <option value="ws" disabled>Connect to forkphorus clouddata server</option>
            <option value="localStorage" selected>Store locally</option>
          </select>
        </label>
      </div>
    </section>

    <section>
      <button id="package">Package</button>
    </section>

    <section id="downloads">

    </section>

    <script src="lib/jszip.min.js"></script>
    <script src="templater.js"></script>
    <script src="downloader.js"></script>
    <script src="parseoptions.js"></script>
    <script src="packager.js"></script>

    <script>
      O.onchange = () => {
        Templater.update();
      };
      Templater.update();

      const loadProject = async () => {
        if (O.project.source === 'file') {
          if (!O.project.file) {
            throw new Error('No file selected');
          }
          return new Blob([await SBDownloader.readAsArrayBuffer(O.project.file)]);
        } else if (O.project.source === 'id') {
          const match = O.project.id.match(/\d+/);
          if (!match) {
            throw new Error('Invalid project ID');
          }
          return new Blob([await new SBDownloader(match[0]).download()]);
        }
        throw new Error('unknown project source');
      };

      const getRuntime = () => {
        switch (O.environment.runtime) {
          case 'turbowarp': return new Packager.runtimes.TurboWarp();
          case 'forkphorus': return new Packager.runtimes.Forkphorus({
            playerOptions: O.forkphorus.playerOptions,
            controlsOptions: O.forkphorus.showControls ? { enableFullscreen: false } : null,
            loadingScreenText: O.forkphorus.loadingScreenText,
          });
        }
        throw new Error('unknown environment');
      };

      const getEnvironment = () => {
        switch (O.environment.target) {
          case 'html': return new Packager.environments.HTML();
          case 'zip': return new Packager.environments.Zip();
        }
        throw new Error('unknown environment');
      };

      const addDownloadLink = (blob, fileName) => {
        const link = document.createElement('a');
        const size = blob.size / 1024 / 1024;
        link.href = URL.createObjectURL(blob); // TODO: should we delete these after creating them?
        link.textContent = `Download ${fileName} (${size.toFixed(2)} MiB)`;
        link.download = fileName;
        document.querySelector('#downloads').appendChild(link);
        link.click();
      };

      const removeDownloadsLinks = () => {
        const el = document.querySelector('#downloads');
        while (el.firstChild) el.removeChild(el.firstChild);
      };

      document.getElementById('package').addEventListener('click', async function() {
        try {
          removeDownloadsLinks();
          const runtime = getRuntime();
          const environment = getEnvironment();
          const projectData = await loadProject();
          const result = await environment.package(runtime, projectData);
          addDownloadLink(new Blob([result.data]), result.filename);
        } catch (e) {
          alert(e);
        }
      });
    </script>

  </body>

</html>