Deploying to gh-pages from @ a634e4ad87 🚀

playground/playground.js

@@ -1,5 +1,22 @@
 const backend = "149.56.132.163";
 
+var lastConnect;
+
+function scheduleConnect(cb) {
+  let minDelay = 2000;
+  if( lastConnect === undefined ) {
+    console.log('Connecting immediately');
+    lastConnect = new Date().getTime();
+    cb();
+  } else {
+    let now = new Date().getTime();
+    let target = Math.max(now, lastConnect + minDelay);
+    console.log('Connecting in', target-now);
+    lastConnect = target;
+    setTimeout(cb, target-now);
+  }
+}
+
 function playgroundInit(elt) {
   var mySockets = {};
   var frames = {};
@@ -7,45 +24,57 @@ function playgroundInit(elt) {
 
   function sendSocketCommand(wat) {
     if (wat.cmd == "connect") {
-      socket = new WebSocket(wat.address);
+      scheduleConnect(function () {
-      socket.onopen = function (event) {
+        socket = new WebSocket(wat.address);
-        socket.send(lastScript);
+        socket.onopen = function (event) {
-        app.ports.receiveSocketMsg.send({
+          if( socket.readyState !== 1 ) {
-          name: wat.name,
+            app.ports.receiveSocketMsg.send({
-          msg: "data",
+              name: wat.name,
-          data: "connection established"
+              msg: "data",
-        });
+              data: "connection failed"
-      }
+            });
-      socket.onmessage = function (event) {
+            return;
-        const lines = event.data.split('\n');
+          }
-        const cmd = lines[0];
+          console.log('onopen', socket, mySockets);
-        if( cmd === "frame_count" ) {
+          socket.send(lastScript);
-          frames = {};
+          app.ports.receiveSocketMsg.send({
-        } else if ( cmd === "frame") {
+            name: wat.name,
-          // Prefetch image.
+            msg: "data",
-          const nth = parseInt(lines[1]);
+            data: "connection established"
-          const url = lines[2];
+          });
-          frames[nth] = new Image();
-          frames[nth].src = "https://reanimate.clozecards.com/"+url;
         }
-        app.ports.receiveSocketMsg.send({
+        socket.onmessage = function (event) {
-          name: wat.name,
+          const lines = event.data.split('\n');
-          msg: "data",
+          const cmd = lines[0];
-          data: event.data
+          if( cmd === "frame_count" ) {
-        });
+            frames = {};
-      }
+          } else if ( cmd === "frame") {
-      connectionFailedHandler = function (event) {
+            // Prefetch image.
-        app.ports.receiveSocketMsg.send({
+            const nth = parseInt(lines[1]);
-          name: wat.name,
+            const url = lines[2];
-          msg: "data",
+            frames[nth] = new Image();
-          data: "connection failed"
+            frames[nth].src = "https://reanimate.clozecards.com/"+url;
-        });
+          }
-      }
+          app.ports.receiveSocketMsg.send({
-      socket.onerror = connectionFailedHandler;
+            name: wat.name,
-      socket.onclose = connectionFailedHandler;
+            msg: "data",
-      mySockets[wat.name] = socket;
+            data: event.data
+          });
+        }
+        connectionFailedHandler = function (event) {
+          app.ports.receiveSocketMsg.send({
+            name: wat.name,
+            msg: "data",
+            data: "connection failed"
+          });
+        }
+        socket.onerror = connectionFailedHandler;
+        socket.onclose = connectionFailedHandler;
+        mySockets[wat.name] = socket;
+        console.log('mySockets set');
+      });
     } else if (wat.cmd == "send") {
-      if( mySockets[wat.name].readyState === mySockets[wat.name].OPEN ) {
+      if( mySockets[wat.name] && mySockets[wat.name].readyState === mySockets[wat.name].OPEN ) {
         mySockets[wat.name].send(wat.content);
       }
     } else if (wat.cmd == "close") {

playground/snippets.js

@@ -9,4 +9,4 @@ const snippets = [{"title": "Hello World","url": "https://reanimate.clozecards.c
   ,{"title": "Object Positions","url": "https://reanimate.clozecards.com/LRZe4V6frOI/195.svg","code": "env =\n  addStatic (mkBackground \"white\") .\n  mapA (withStrokeColor \"black\")\n\nanimation :: Animation\nanimation = env $\n  scene $ do\n    -- Configure objects\n    txt <- newText \"Center\"\n    top <- newText \"Top\"\n    oModifyS top $ \n      oTopY .= screenTop\n    topR <- newText \"Top right\"\n    oModifyS topR $ do\n      oTopY .= screenTop\n      oRightX .= screenRight\n    botR <- newText \"Bottom right\"\n    oModifyS botR $ do\n      oTranslateY .= screenBottom+0.5\n      oRightX .= screenRight\n    botL <- newText \"Bottom left\"\n    oModifyS botL $ do\n      oTranslateY .= screenBottom+0.5\n      oLeftX .= screenLeft\n    topL <- newText \"Top left\"\n    oModifyS topL $ do\n      oTopY .= screenTop\n      oLeftX .= screenLeft\n    -- Show objects\n    oShow txt\n    wait 1\n    switchTo txt top\n    switchTo top topR\n    switchTo topR botR\n    switchTo botR botL\n    switchTo botL topL\n    switchTo topL txt\n\nswitchTo src dst = do\n  fork $ oHideWith src oFadeOut\n  oShowWith dst oFadeIn\n  wait 1\n\nnewText txt =\n  newObject $ scale 1.5 $ centerX $ latex txt\n"}
   ,{"title": "Camera","url": "https://reanimate.clozecards.com/JlWlOpJvDds/150.svg","code": "animation :: Animation\nanimation = docEnv $ mapA (withFillOpacity 1) $ scene $ do\n  cam <- newObject Camera\n\n  txt <- newObject $ center $ latex \"Fixed (non-cam)\"\n  oModifyS txt $ do\n    oTopY   .= screenTop \n    oZIndex .= 2\n\n  circle <- newObject $ withFillColor \"blue\" $ mkCircle 1\n  cameraAttach cam circle\n  circleRight <- oRead circle oRightX\n\n  box <- newObject $ withFillColor \"green\" $ mkRect 2 2\n  cameraAttach cam box\n  oModify box $ oLeftX .~ circleRight\n  boxCenter <- oRead box oCenterXY\n\n  small <- newObject $ center $ latex \"This text is very small\"\n  cameraAttach cam small\n  oModifyS small $ do\n    oCenterXY .= boxCenter\n    oScale    .= 0.1\n  \n  oShow txt\n  oShow small\n  oShow circle\n  oShow box\n\n  wait 1\n\n  cameraFocus cam boxCenter\n  waitOn $ do\n    fork $ cameraPan cam 3 boxCenter\n    fork $ cameraZoom cam 3 15\n  \n  wait 2\n  cameraZoom cam 3 1\n  cameraPan cam 1 (V2 0 0)\n"}
   ];
-const playgroundVersion = "2020-09-19 (217c5)";
+const playgroundVersion = "2020-09-20 (a634e)";