Clean up playground code.

.github/workflows/gh-pages.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-haskell@v1
       with:
-        ghc-version: '8.8.2'
+        ghc-version: '8.8'
         cabal-version: '3.0'
     - uses: jorelali/setup-elm@v2
       with:

reanimate-playground/viewer-elm/dist/index.html

@@ -93,29 +93,7 @@
         <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">
@@ -143,59 +121,49 @@
 
     renderSnippets(document.querySelector('.snippet-container'), myCodeMirror);
 
+    const mediaButtons = document.querySelector('.media-buttons');
+
     document.getElementById('play').onclick = function () {
-      document.querySelector('.media-buttons').classList.toggle('paused');
+      mediaButtons.classList.toggle('paused');
       app.play();
     };
     document.getElementById('pause').onclick = function () {
-      document.querySelector('.media-buttons').classList.toggle('paused');
+      mediaButtons.classList.toggle('paused');
       app.pause();
     };
     document.getElementById('seek1').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek1();
     };
     document.getElementById('seek10').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek10();
     };
     document.getElementById('seek-1').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek_1();
     };
     document.getElementById('seek-10').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek_10();
     };
-    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').classList.remove('is-active');
-    };
-    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').classList.remove('is-active');
+    const helpIcon = document.getElementById('help');
+    const helpModal = document.querySelector('#help-modal');
+    helpIcon.onclick = function () {
+      openModal(helpModal);
     };
+    configureModal(helpModal);
 
-    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');
+    const examplesIcon = document.getElementById('examples')
+    const examplesModal = document.getElementById('examples-modal')
+    examplesIcon.onclick = function () {
+      openModal(examplesModal);
     };
+    configureModal(examplesModal)
 
   </script>
   <script>

reanimate-playground/viewer-elm/dist/playground.js

@@ -22,6 +22,7 @@ function playgroundInit(elt) {
         if( cmd === "frame_count" ) {
           frames = {};
         } else if ( cmd === "frame") {
+          // Prefetch image.
           const nth = parseInt(lines[1]);
           const url = lines[2];
           frames[nth] = new Image();
@@ -95,8 +96,28 @@ function renderSnippets(elt, myCodeMirror) {
     div.appendChild(img)
     div.onclick = function () {
       myCodeMirror.setValue(code);
-      document.querySelector('#examples-modal').classList.remove('is-active');
+      closeModal(document.querySelector('#examples-modal'));
     };
     elt.appendChild(div)
   }
 }
+
+function closeModal(modal) {
+  modal.classList.remove('is-active');
+}
+function openModal(modal) {
+  modal.classList.add('is-active');
+}
+
+// Add javascript handlers to modal for closing.
+function configureModal(modal) {
+  modal.querySelector('.modal-background').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+  modal.querySelector('.modal-close').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+  modal.querySelector('.delete').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+}

reanimate-playground/viewer-elm/dist/style.css

@@ -133,6 +133,9 @@ pre {
   margin: 1em;
   position: relative;
 }
+.snippet-container > div:hover {
+  cursor: pointer;
+}
 .snippet-container > div > span {
   position: absolute;
   display: block;