Playground (#134)

.github/workflows/gh-pages.yml

@@ -14,6 +14,9 @@ jobs:
       with:
         ghc-version: '8.8.2'
         cabal-version: '3.0'
+    - uses: jorelali/setup-elm@v2
+      with:
+        elm-version: 0.19.1
 
     - name: Cache
       uses: actions/cache@v1
@@ -65,7 +68,7 @@ jobs:
             \"color\": \"success\" \
           }" > hpc/hpc_badge.json
 
-    - name: Haddock  Badge
+    - name: Haddock Badge
       run: |
         cabal v2-haddock --enable-coverage | grep " in " | sort -hr > hpc/haddock.txt
         COVERAGE=$(awk '{good += $3; total += $5} END {printf "%.0f", good/total*100}' hpc/haddock.txt)
@@ -76,6 +79,15 @@ jobs:
             \"color\": \"success\" \
           }" > hpc/haddock_badge.json
 
+    - name: Playground
+      run: |
+        cd reanimate-playground/viewer-elm
+        npm install
+        npm run build
+        npm run minify
+        mkdir hpc/playground
+        cp dist/* hpc/playground/
+
     - name: Deploy 🚀
       uses: JamesIves/github-pages-deploy-action@3.5.9
       with:

Dockerfile.playground

@@ -43,5 +43,7 @@ RUN (cd reanimate-playground && \
     stack install --no-install-ghc --system-ghc) && \
     playground test
 
+EXPOSE 10161/tcp
+EXPOSE 10162/tcp
 
 ENTRYPOINT playground

discord-bot/docker-compose.yml

@@ -10,6 +10,7 @@ services:
     image: reanimate/playground
     ports:
       - "10161:10161"
+      - "10162:10162"
     volumes:
       - .cache:/root/.cache
   watch:

reanimate-playground/src/Main.hs

@@ -98,7 +98,7 @@ opts = defaultConnectionOptions
 serverMain :: Backend -> IO ()
 serverMain backend = do
   let options = ServerOptions
-        { serverHost = "127.0.0.1"
+        { serverHost = "0.0.0.0"
         , serverPort = 10161
         , serverConnectionOptions = opts
         , serverRequirePong = Nothing }

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

@@ -60,13 +60,31 @@
             <img id="seek1" src="skip_next-white-48dp.svg">
             <img id="seek10" src="forward_10-white-48dp.svg">
           </div>
-          <img src="help_outline-white-48dp.svg">
+          <img id="help" src="help_outline-white-48dp.svg">
         </div>
       </div>
       <div id="elm"></div>
     </div>
   </div>
 
+  <div id="help-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Reanimate Playground</p>
+        <button class="delete" aria-label="close"></button>
+      </header>
+      <section class="modal-card-body">
+        <ul>
+          <li>List</li>
+        </ul>
+      </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');
 
@@ -110,6 +128,18 @@
       app.ports.receiveControlMsg.send('pause');
       app.ports.receiveControlMsg.send('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');
+    };
 
   </script>
   <script>

reanimate-playground/viewer-elm/elm.json

@@ -0,0 +1,26 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "bburdette/websocket": "1.0.2",
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.4",
+            "elm/html": "1.0.0",
+            "elm/json": "1.1.3",
+            "elm/time": "1.0.0",
+            "ohanhi/keyboard": "2.0.0"
+        },
+        "indirect": {
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

reanimate-playground/viewer-elm/src/Main.elm

@@ -16,6 +16,9 @@ import Task
 import Time
 import WebSocket
 
+backend : String
+backend = "149.56.132.163"
+-- backend = "localhost"
 
 main : Program () Model Msg
 main =
@@ -131,7 +134,7 @@ connectCommand =
     WebSocket.send Ports.sendSocketCommand <|
         WebSocket.Connect
             { name = "TheSocket"
-            , address = "ws://localhost:10161"
+            , address = "ws://" ++ backend ++ ":10161"
             , protocol = ""
             }
 
@@ -403,7 +406,7 @@ frameView bestFrame frameIndex frameCount frames showingHelp frameDeltas isPause
         image =
             case bestFrame of
                 Just svgUrl ->
-                    Html.img [ src ("http://localhost:10162/" ++ svgUrl) ] []
+                    Html.img [ src ("http://" ++ backend ++ ":10162/" ++ svgUrl) ] []
 
                 Nothing ->
                     Html.text ""
@@ -481,11 +484,7 @@ problemView problem =
 
         ConnectionFailed ->
             Html.div []
-                [ Html.text "Failed to establish connection. Possible causes include: "
-                , Html.ul []
-                    [ Html.li [] [ Html.text "The reanimate script is not running" ]
-                    , Html.li [] [ Html.text "At most one viewer window can connect at time. Maybe there's another browser window/tab already connected?" ]
-                    ]
+                [ Html.text "Failed to establish connection to server. Sorry. :-/"
                 ]
 
         PortMessageDecodeFailure decodeError ->