Changelog update, fix positioning of loading image (and hide stage while it loads)

SheepTester · SheepTester · commit 5b4a2255cc8f · 2020-06-01T21:22:24.000-07:00
diff --git a/index.html b/index.html
@@ -98,6 +98,16 @@ <h3><em>Convert a Scratch project to HTML</em></h3>
       <p id="note-4"><a href="#ref-4"><sup>4</sup></a>If a cloud variable with the name "☁ eval" is set, it'll run the variable value as JavaScript and store it in a cloud variable named "☁ eval output"; if there is an error, it'll be stored in "☁ eval error." If you're using a custom cloud server, then cloud variables whose names start with "☁ local storage" will store their values in localStorage instead of in the server.</p>
       <h2>Update history</h2>
       <p>See the code and previous versions on <a href="https://github.com/SheepTester/htmlifier/">Github</a>.</p>
+      <h3>2020-06-01</h3>
+      <ul>
+        <li>Option to remove clone/list length limits</li>
+        <li>Option to hide the cursor</li>
+        <li>Ability to distinguish between cloud variables for localStorage and the server (and run JavaScript using cloud variables)</li>
+        <li>Option for rudimentary pointer lock</li>
+        <li>Fixed mouse position and unresized lists not showing</li>
+        <li>Default project changed to one of <a href="https://scratch.mit.edu/users/ScratchCat/">ScratchCat</a>'s</li>
+        <li>Unfortunately, as part of these changes, I removed the option for a progress bar. If there's demand, I'll try to add it back.</li>
+      </ul>
       <h3>2020-05-01</h3>
       <ul>
         <li>Support for custom extensions from a URL</li>
diff --git a/template.html b/template.html
@@ -23,6 +23,9 @@
   position: relative;
   % no-cursor % cursor: none; % /no-cursor %
 }
+.loading #wrapper {
+  visibility: hidden;
+}
 #monitors {
   position: absolute;
   top: 0;
@@ -64,6 +67,11 @@
   position: fixed;
   max-width: 100%;
   max-height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
 }
 % /loading-image %
 % fullscreen %
@@ -204,7 +212,12 @@
 }
 </style>
 </head>
-<body>
+<body class="loading">
+<script type="text/javascript">
+if (true % loading-image % && false % /loading-image %) {
+  document.body.classList.remove('loading');
+}
+</script>
 <div id="wrapper">
 <canvas id="stage"></canvas>
 <div id="monitors"></div>
@@ -921,17 +934,6 @@
     .then(r => r.arrayBuffer())
     .then(b => vm.loadProject(b))
 
-  % loading-progress %
-  if (progress.parentNode) {
-    progress.parentNode.removeChild(progress);
-  }
-  % /loading-progress %
-  % loading-image %
-  if (loadingImage.parentNode) {
-    loadingImage.parentNode.removeChild(loadingImage);
-  }
-  % /loading-image %
-
   vm.setCloudProvider(cloudProvider);
   % cloud-localstorage %
   const stageVariables = vm.runtime.getTargetForStage().variables;
@@ -968,6 +970,18 @@
   openConnection();
   % /cloud-ws %
 
+  % loading-progress %
+  if (progress.parentNode) {
+  progress.parentNode.removeChild(progress);
+  }
+  % /loading-progress %
+  % loading-image %
+  if (loadingImage.parentNode) {
+  loadingImage.parentNode.removeChild(loadingImage);
+  }
+  document.body.classList.remove('loading');
+  % /loading-image %
+
   vm.greenFlag();
 };
 
