Deploying to gh-pages from @ f1d945babb 🚀

playground/index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
   <link rel="stylesheet" href="style.css">
 
+  <script src="snippets.js"></script>
   <script src="playground.js"></script>
 </head>
 
@@ -41,10 +42,6 @@
 
   <div class="grid">
     <div class="edit-box">
-      <select class="column-header">
-        <option>Example 1</option>
-        <option>Example 2</option>
-      </select>
       <div id="editor"></div>
     </div>
     <div class="gutter-column-1"></div>
@@ -60,7 +57,10 @@
             <img id="seek1" src="skip_next-white-48dp.svg">
             <img id="seek10" src="forward_10-white-48dp.svg">
           </div>
-          <img id="help" src="help_outline-white-48dp.svg">
+          <div>
+            <img id="examples" src="collections-white-48dp.svg">
+            <img id="help" src="help_outline-white-48dp.svg">
+          </div>
         </div>
       </div>
       <div id="elm"></div>
@@ -85,6 +85,45 @@
     <button class="modal-close is-large" area-label="close"></button>
   </div>
 
+  <div id="examples-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Reanimate Examples</p>
+        <button class="delete" aria-label="close"></button>
+      </header>
+      <section class="modal-card-body">
+        <!-- 
+          Title
+          Url
+          Code
+        -->
+        <div class="snippet-container">
+          <!-- <div>
+            <span>drawBox</span>
+            <img src="https://reanimate.clozecards.com/EwyRzmx8zxM/30.svg">
+          </div>
+          <div>
+            <span>drawCircle</span>
+            <img src="https://reanimate.clozecards.com/EwyRzmx8zxM/50.svg">
+          </div>
+          <div>2</div>
+          <div>3</div>
+          <div>4</div>
+          <div>5</div>
+          <div>6</div>
+          <div>7</div>
+          <div>8</div>
+          <div>9</div>
+          <div>10</div> -->
+        </div>
+      </section>
+      <!-- <footer class="modal-card-foot">
+      </footer> -->
+    </div>
+    <button class="modal-close is-large" area-label="close"></button>
+  </div>
+
   <script type="text/javascript">
     var app = playgroundInit('elm');
 
@@ -95,54 +134,69 @@
       lineWrapping: true
     });
 
+    app.newCode(myCodeMirror.getValue());
 
     myCodeMirror.on('change', function () {
       document.querySelector('.media-buttons').classList.remove('paused');
-      app.play();
       app.newCode(myCodeMirror.getValue());
     });
 
-    document.getElementById('play').onclick = function() {
+    renderSnippets(document.querySelector('.snippet-container'), myCodeMirror);
+
+    document.getElementById('play').onclick = function () {
       document.querySelector('.media-buttons').classList.toggle('paused');
       app.play();
     };
-    document.getElementById('pause').onclick = function() {
+    document.getElementById('pause').onclick = function () {
       document.querySelector('.media-buttons').classList.toggle('paused');
       app.pause();
     };
-    document.getElementById('seek1').onclick = function() {
+    document.getElementById('seek1').onclick = function () {
       document.querySelector('.media-buttons').classList.add('paused');
       app.pause();
       app.seek1();
     };
-    document.getElementById('seek10').onclick = function() {
+    document.getElementById('seek10').onclick = function () {
       document.querySelector('.media-buttons').classList.add('paused');
       app.pause();
       app.seek10();
     };
-    document.getElementById('seek-1').onclick = function() {
+    document.getElementById('seek-1').onclick = function () {
       document.querySelector('.media-buttons').classList.add('paused');
       app.pause();
       app.seek_1();
     };
-    document.getElementById('seek-10').onclick = function() {
+    document.getElementById('seek-10').onclick = function () {
       document.querySelector('.media-buttons').classList.add('paused');
       app.pause();
       app.seek_10();
     };
-    document.getElementById('help').onclick = function() {
+    document.getElementById('help').onclick = function () {
       document.querySelector('#help-modal').classList.add('is-active');
     };
-    document.querySelector('#help-modal .modal-background').onclick = function() {
+    document.querySelector('#help-modal .modal-background').onclick = function () {
       document.querySelector('#help-modal').classList.remove('is-active');
     };
-    document.querySelector('#help-modal .modal-close').onclick = function() {
+    document.querySelector('#help-modal .modal-close').onclick = function () {
       document.querySelector('#help-modal').classList.remove('is-active');
     };
-    document.querySelector('#help-modal .delete').onclick = function() {
+    document.querySelector('#help-modal .delete').onclick = function () {
       document.querySelector('#help-modal').classList.remove('is-active');
     };
 
+    document.getElementById('examples').onclick = function () {
+      document.querySelector('#examples-modal').classList.add('is-active');
+    };
+    document.querySelector('#examples-modal .modal-background').onclick = function () {
+      document.querySelector('#examples-modal').classList.remove('is-active');
+    };
+    document.querySelector('#examples-modal .modal-close').onclick = function () {
+      document.querySelector('#examples-modal').classList.remove('is-active');
+    };
+    document.querySelector('#examples-modal .delete').onclick = function () {
+      document.querySelector('#examples-modal').classList.remove('is-active');
+    };
+
   </script>
   <script>
     Split({ // gutters specified in options

playground/playground.js

@@ -3,11 +3,13 @@ const backend = "149.56.132.163";
 function playgroundInit(elt) {
   var mySockets = {};
   var frames = {};
+  var lastScript = "";
 
   function sendSocketCommand(wat) {
     if (wat.cmd == "connect") {
       socket = new WebSocket(wat.address);
       socket.onopen = function (event) {
+        socket.send(lastScript);
         app.ports.receiveSocketMsg.send({
           name: wat.name,
           msg: "data",
@@ -42,7 +44,9 @@ function playgroundInit(elt) {
       socket.onclose = connectionFailedHandler;
       mySockets[wat.name] = socket;
     } else if (wat.cmd == "send") {
-      mySockets[wat.name].send(wat.content);
+      if( mySockets[wat.name].readyState === mySockets[wat.name].OPEN ) {
+        mySockets[wat.name].send(wat.content);
+      }
     } else if (wat.cmd == "close") {
       mySockets[wat.name].close();
       delete mySockets[wat.name];
@@ -73,7 +77,26 @@ function playgroundInit(elt) {
       app.ports.receiveControlMsg.send('seek-10');
     },
     newCode: function(code) {
+      lastScript = code;
       app.ports.receiveEditorMsg.send(code);
     }
   };
 }
+
+function renderSnippets(elt, myCodeMirror) {
+  for(var i=0;i<snippets.length;i++) {
+    const div = document.createElement("div");
+    const title = document.createElement("span");
+    const img = document.createElement("img");
+    const code = snippets[i].code;
+    title.innerHTML = snippets[i].title;
+    img.src = snippets[i].url;
+    div.appendChild(title)
+    div.appendChild(img)
+    div.onclick = function () {
+      myCodeMirror.setValue(code);
+      document.querySelector('#examples-modal').classList.remove('is-active');
+    };
+    elt.appendChild(div)
+  }
+}

playground/snippets.js

@@ -0,0 +1 @@
+const snippets = [{"title": "Composition","url": "https://reanimate.clozecards.com/ATcv1$xjG06/30.svg","code": "animation :: Animation\nanimation = docEnv $\n  drawBox `parA` drawCircle\n\n"},{"title": "Color Maps","url": "https://reanimate.clozecards.com/HPNi7PpImrc/15.svg","code": "animation :: Animation\nanimation = docEnv $ staticFrame 1 $\n  showColorMap parula\n"}];

playground/style.css

@@ -106,6 +106,7 @@ pre {
 }
 .edit-box #editor {
   flex: 1 1 auto;
+  max-height: 100vh;
 }
 .edit-box .app {
   flex: 1 1 auto;
@@ -121,6 +122,27 @@ pre {
   cursor: pointer;
 }
 
+.snippet-container {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.snippet-container > div {
+  width: 16em;
+  height: 9em;
+  margin: 1em;
+  position: relative;
+}
+.snippet-container > div > span {
+  position: absolute;
+  display: block;
+  background-color: rgba(255,255,255,0.3);
+  padding: 0.2em;
+}
+.snippet-container > div > img {
+  border: 1px solid black;
+}
+
 .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out
 }