Option for special behaviours for certain cloud variables (resolves #6)

Author: SheepTester

hacky-file-getter.js

@@ -104,6 +104,7 @@ function downloadAsHTML(projectSrc, {
   log = console.log,
   monitorColour = null,
   cloudServer = false,
+  specialCloud = false,
   projectId = null,
   noVM = false,
   width = 480,
@@ -230,8 +231,14 @@ function downloadAsHTML(projectSrc, {
     if (stretch) template = removePercentSection(template, 'fit');
     else template = removePercentSection(template, 'stretch');
     if (!noCursor) template = removePercentSection(template, 'no-cursor');
+    if (!specialCloud) {
+      template = removePercentSection(template, 'special-cloud');
+    }
     if (cloudServer) {
-      template = removePercentSection(template, 'cloud-localstorage')
+      if (!specialCloud) {
+        template = removePercentSection(template, 'cloud-localstorage');
+      }
+      template = removePercentSection(template, 'cloud-localstorage-provider')
         .replace(/\{CLOUD_HOST\}/g, () => JSON.stringify(cloudServer));
     } else {
       template = removePercentSection(template, 'cloud-ws');

index.html

@@ -78,6 +78,7 @@ <h3><em>Convert a Scratch project to HTML</em></h3>
           <legend>Cloud variable source</legend>
           <p><label><input type="radio" name="cloud-provider" value="localstorage" checked> Save cloud variables locally using localStorage</label><a id="ref-1" href="#note-1"><sup>1</sup></a></p>
           <p><label><input type="radio" name="cloud-provider" value="ws"> Use a <a href="https://github.com/SheepTester/primitive-cloud-server">custom server</a>: <input type="url" id="cloud-ws" placeholder="ws://localhost:3000/"></label></p>
+          <p><label><input type="checkbox" id="special-cloud"> Give certain cloud variables special behaviours depending on the name?</label><a id="ref-4" href="#note-4"><sup>4</sup></a></p>
         </fieldset>
         <fieldset>
           <legend><a href="https://sheeptester.github.io/scratch-gui/">E羊icques</a> (modded) options</legend>
@@ -94,6 +95,7 @@ <h3><em>Convert a Scratch project to HTML</em></h3>
       <p id="note-1"><a href="#ref-1"><sup>1</sup></a>You may have to deal with privacy laws around cookies outside of Scratch.</p>
       <p id="note-2"><a href="#ref-2"><sup>2</sup></a>Compatibility mode forces projects to run at 30 FPS, like in Scratch 2.0. Turning this off allows the project to run at a higher framerate (usually 60 FPS, depending on the computer screen's refresh rate).</p>
       <p id="note-3"><a href="#ref-3"><sup>3</sup></a>I think the implementation of this is poor. Maybe instead of setting mouse x/y, it can set a cloud variable with a certain name. You can leave feedback and suggestions on <a href="https://scratch.mit.edu/users/Sheep_maker/">my profile</a>.</p>
+      <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-05-01</h3>
@@ -188,6 +190,7 @@ <h3>2019-02-09</h3>
 const pointerLock = document.getElementById('pointer-lock');
 const stretch = document.getElementById('stretch');
 const noCursor = document.getElementById('no-cursor');
+const specialCloud = document.getElementById('special-cloud');
 let scroll = false
 function log(text, style) {
   const entry = document.createElement('div')
@@ -226,7 +229,8 @@ <h3>2019-02-09</h3>
     noLimits: noLimits.checked,
     pointerLock: pointerLock.checked,
     stretch: stretch.checked,
-    noCursor: noCursor.checked
+    noCursor: noCursor.checked,
+    specialCloud: specialCloud.checked
   })
     .then(html => {
       log('Attempting to download HTML file...', 'status')

template.html

@@ -450,6 +450,8 @@
 
 const Scratch = window.Scratch = window.Scratch || {};
 
+const CLOUD_PREFIX = '\u2601 ';
+
 const runBenchmark = async function () {
   const vm = new window.NotVirtualMachine(% custom-ratio % WIDTH, HEIGHT % /custom-ratio %);
   Scratch.vm = vm;
@@ -497,25 +499,6 @@
   vm.setVideoProvider(videoProvider);
 
   const noop = () => null;
-  let cloudProvider;
-
-  % cloud-localstorage %
-  cloudProvider = {
-    updateVariable(name, value) {
-      try {
-        localStorage.setItem('[s3] ' + name, value);
-      } catch (e) {
-        console.error('Cannot use localStorage?', e);
-      }
-    },
-    createVariable: noop,
-    renameVariable: noop,
-    deleteVariable: noop,
-    requestCloseConnection: noop
-  };
-  % /cloud-localstorage %
-
-  % cloud-ws %
   let ws;
   function openConnection() {
     try {
@@ -528,7 +511,6 @@
     ws.onopen = onOpen;
     ws.onclose = onClose;
   }
-  openConnection();
   function onMessage(e) {
     e.data.split('\n').forEach(message => {
       if (message) {
@@ -550,21 +532,61 @@
   function onClose() {
     setTimeout(openConnection, 500);
   }
-  cloudProvider = {
+  const cloudProvider = {
     updateVariable(name, value) {
-      sendData({method: 'set', name, value});
+      % special-cloud %
+      if (name === CLOUD_PREFIX + 'eval') {
+        try {
+          vm.postIOData('cloud', {
+            varUpdate: {
+              name: CLOUD_PREFIX + 'eval output',
+              value: eval(value)
+            }
+          });
+        } catch (err) {
+          vm.postIOData('cloud', {
+            varUpdate: {
+              name: CLOUD_PREFIX + 'eval error',
+              value: err.toString()
+            }
+          });
+        }
+      } else % cloud-ws % if (name.startsWith(CLOUD_PREFIX + 'local storage')) % /cloud-ws % {
+        % /special-cloud %
+        % cloud-localstorage %
+        try {
+          localStorage.setItem('[s3] ' + name, value);
+        } catch (e) {
+          console.error('Cannot use localStorage?', e);
+        }
+        % /cloud-localstorage %
+        % special-cloud %
+        % cloud-ws %
+      } else {
+        % /cloud-ws %
+        % /special-cloud %
+        % cloud-ws %
+        sendData({method: 'set', name, value});
+        % /cloud-ws %
+        % special-cloud %
+      }
+      % /special-cloud %
     },
     createVariable: noop,
     renameVariable: noop,
     deleteVariable: noop,
+    % cloud-ws %
     requestCloseConnection() {
       if (ws && ws.readyState !== WebSocket.CLOSING && ws.readyState !== WebSocket.CLOSED) {
         ws.onclose = noop;
         ws.close();
       }
     }
+    % /cloud-ws %
+    % cloud-localstorage-provider %
+    requestCloseConnection: noop
+    % /cloud-localstorage-provider %
   };
-  % /cloud-ws %
 
   vm.setCompatibilityMode(COMPAT);
   vm.setTurboMode(TURBO);
@@ -910,27 +932,41 @@
   }
   % /loading-image %
 
-  if (cloudProvider) vm.setCloudProvider(cloudProvider);
+  vm.setCloudProvider(cloudProvider);
   % cloud-localstorage %
   const stageVariables = vm.runtime.getTargetForStage().variables;
   for (const { name, isCloud } of Object.values(stageVariables)) {
     if (isCloud) {
+      % special-cloud %
+      % cloud-ws %
+      if (!name.startsWith(CLOUD_PREFIX + 'local storage')) continue;
+      % /cloud-ws %
+      % /special-cloud %
       const value = localStorage.getItem('[s3] ' + name);
       if (value === null) continue;
       vm.postIOData('cloud', { varUpdate: { name, value } });
     }
   }
   window.addEventListener('storage', e => {
     if (e.storageArea === localStorage && e.key.slice(0, 5) === '[s3] ') {
+      const name = e.key.slice(5);
+      % special-cloud %
+      % cloud-ws %
+      if (!name.startsWith(`[s3] ${CLOUD_PREFIX}local storage`)) return;
+      % /cloud-ws %
+      % /special-cloud %
       vm.postIOData('cloud', {
         varUpdate: {
-          name: e.key.slice(5),
+          name,
           value: e.newValue
         }
       });
     }
   });
   % /cloud-localstorage %
+  % cloud-ws %
+  openConnection();
+  % /cloud-ws %
 
   vm.greenFlag();
 };