⚡ Add matter-js and get balls appearing per TX. still very messy

app/application.js

@@ -1,11 +1,12 @@
 'use strict';
 
 const io = require('socket.io-client');
+const Matter = require('matter-js');
 
 var App = {
   init: function init() {
     var socket = io("https://insight.dash.org:443/");
-    var transactionList = document.getElementById('transactionList');
+    var playground = document.getElementById('playground');
     var muteButton = document.getElementById('muteToggle');
     var muted = false;
     var audioContext;
@@ -71,6 +72,7 @@ var App = {
 
     var onTransaction = function(data) {
       console.log(data);
+/*
       if (!muted) {
         if (data.valueOut < 10) {
           playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1, 1.5));
@@ -109,11 +111,14 @@ var App = {
         var toDelete = domRefList.pop();
         toDelete.remove();
       }
-      transactionList.insertBefore(tx, transactionList.firstChild);
+      playground.insertBefore(tx, playground.firstChild);
+*/
+      World.add(engine.world, Bodies.circle(width / 2 + Math.random() * 10, -50, 50, { friction: 0.1 }));
     };
 
     var onBlock = function(data) {
       console.log(data);
+/*
       playSound('block', 1);
       var newBlock = document.createElement('a');
       newBlock.className = 'blockDivider';
@@ -125,7 +130,8 @@ var App = {
         var toDelete = domRefList.pop();
         toDelete.remove();
       }
-      transactionList.insertBefore(newBlock, transactionList.firstChild);
+      playground.insertBefore(newBlock, playground.firstChild);
+*/
     };
 
     if (localStorage) {
@@ -171,6 +177,44 @@ var App = {
       console.error('Couldn\'t load sounds.');
     }
 
+    // module aliases
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create an engine
+    var engine = Engine.create();
+
+    var width = playground.offsetWidth;
+    var height = playground.offsetHeight;
+
+    // create a renderer
+    var render = Render.create({
+        canvas: playground,
+        engine: engine,
+        options: {
+          width: width,
+          height: height
+        }
+    });
+
+    // create two boxes and a ground
+    var edges = [
+      Bodies.rectangle(-10, height / 2, 60, height + 10, { isStatic: true }),
+      Bodies.rectangle(width + 10, height / 2, 60, height + 10, { isStatic: true }),
+      Bodies.rectangle(width/2, height + 10, width + 10, 60, { isStatic: true })
+    ];
+
+    // add all of the bodies to the world
+    World.add(engine.world, edges);
+
+    // run the engine
+    Engine.run(engine);
+
+    // run the renderer
+    Render.run(render);
+
     socket.on('connect', function() {
       document.getElementById('connectionStatus').className = 'is-connected';
       // Join the room.

app/assets/index.html

@@ -9,7 +9,7 @@
     <div id="muteToggle"></div>
     <div id="connectionStatus" class="is-connecting"></div>
 
-    <div id="transactionList"></div>
+    <canvas id="playground" style=""></canvas>
 
     <script src="bundle.js"></script>
     <script>require('application').init();</script>

app/styles/main.less

@@ -20,81 +20,14 @@ a {
   color: inherit;
   text-decoration: none;
 }
-#transactionList {
+#playground {
-  padding: 1em 0 0;
+  position: absolute;
-  mix-blend-mode: screen;
+  top: 0;
-  opacity: 0.75;
+  left: 0;
+  width: 100vw;
   height: 100vh;
   overflow: hidden;
-}
+  background: none !important;
-#transactionList:after {
-  content: '';
-  position: fixed;
-  bottom: 0;
-  height: 8em;
-  left: 0;
-  right: 0;
-  background-image: linear-gradient(to top, black, transparent);
-  z-index: 2;
-  pointer-events: none;
-}
-#connectionStatus.is-connected ~ #transactionList:empty:before {
-  content: 'Waiting for first transaction...';
-  display: block;
-  text-align: center;
-  font-size: 2em;
-  opacity: 0.5;
-}
-.tx {
-  position: relative;
-  margin: 3px auto;
-  width: 20em;
-  min-width: 80%;
-  max-width: 100%;
-  z-index: 1;
-}
-.txValue {
-  display: none;
-  flex: 0 0 auto;
-  line-height: 1.25;
-}
-.txOutputs {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  align-content: stretch;
-}
-.txOut {
-  position: relative;
-  flex: 1 1 auto;
-  background-color: white;
-}
-.txOut:first {
-  border-left: 3px solid black;
-}
-.txOut:after {
-  content: '';
-  width: 3px;
-  background: black;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.blockDivider {
-  display: block;
-  margin: 1em -1em -1.5em;
-  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.125));
-  padding: 0.125em 1em 1.5em;
-  color: rgba(0,0,0,0);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.blockDivider:hover, .blockDivider:focus {
-  color: inherit;
 }
 
 #muteToggle, #connectionStatus {

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "autoprefixer": "^7.1.4",
     "less": "^2.7.2",
+    "matter-js": "^0.14.0",
     "socket.io": "^2.0.3"
   },
   "scripts": {

yarn.lock

@@ -1893,6 +1893,10 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+matter-js@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/matter-js/-/matter-js-0.14.0.tgz#413858ebb76613161579a0415cb9017ad4b5dcae"
+
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"