publish: Visualize Dash blocks as Jackson Polluck style paintings

generated from commit 34dabd963c

assets/Dash-logo.svg

@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.987 26.988" height="102" width="102" opacity="0.2"><defs><clipPath id="b"><path d="M643.347 374.719h88.588v70.703h-88.588z"/></clipPath><clipPath id="a"><path d="M0 0h841.89v595.276H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.15724 0 0 -.15724 -94.698 77.973)" stroke="#fff" fill="#008ce3" fill-opacity="0" stroke-width="4.77"><path d="M688.066 329.303c44.607 0 80.768 36.16 80.768 80.768 0 44.607-36.16 80.769-80.768 80.769-44.607 0-80.768-36.162-80.768-80.77 0-44.607 36.161-80.767 80.768-80.767"/></g><g clip-path="url(#b)" transform="matrix(.15724 0 0 -.15724 -94.698 77.973)" fill="#fff"><path d="M700.375 445.422h-31.701l-2.627-14.683 28.607-.036c14.089.005 18.254-5.114 18.135-13.6-.061-4.35-1.947-11.703-2.761-14.088-2.172-6.353-6.63-13.603-23.353-13.577l-27.808.012-2.632-14.697h31.63c11.157 0 15.9 1.297 20.928 3.62 11.139 5.144 17.767 16.139 20.423 30.487 3.954 21.363-.971 36.562-28.841 36.562M888.046 374.72l5.32 30.223c.959 5.96-1.46 8.514-7.42 8.514h-8.474l-6.811-38.736h-17.24l12.472 70.7h17.24l-3.32-18.77h12.915c15.11 0 20.539-6.596 17.878-21.708l-5.32-30.222z"/><path d="M654.994 417.46c-8.304 0-9.494-5.41-10.28-8.681-1.029-4.281-1.367-6.016-1.367-6.016h32.46c8.304 0 9.494 5.41 10.28 8.682 1.03 4.282 1.367 6.016 1.367 6.016z"/></g></svg>
+<svg id="Layer_1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 226.777 226.777" xml:space="preserve" height="226.78px" viewBox="0 0 226.777 226.777" width="226.78px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path id="path3" fill="#fff" opacity="0.2" d="m113.39 0c-62.623 0-113.39 50.767-113.39 113.39 0 62.62 50.766 113.39 113.39 113.39 62.62 0 113.39-50.77 113.39-113.39 0-62.623-50.77-113.39-113.39-113.39zm0 6.9668a106.42 106.42 0 0 1 106.42 106.42 106.42 106.42 0 0 1 -106.42 106.42 106.42 106.42 0 0 1 -106.42 -106.42 106.42 106.42 0 0 1 106.42 -106.42zm-35.624 69.328l-5.723 18.541h75.787l-11.41 37.114h-76.397l-5.72 18.54h81.227c7.94 0 10.06-1.39 15.74-4.71 5.67-3.33 10.1-9.14 12.5-16.06s8.26-26.44 10.06-32.947c1.8-6.506 2.49-8.998 0-13.839-2.49-4.847-7.61-6.639-11.49-6.639h-84.574zm-21.204 28.505l-5.236 17.03h45.264l5.24-17.03h-45.268z"/></svg>

bundle.css

@@ -4,14 +4,15 @@ body {
   box-sizing: border-box;
   font-family: sans-serif;
   font-size: 140%;
-  background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, #1e73be, #073a66);
+  background-image: url('assets/Dash-logo.svg');
   background-size: 50vmin auto, cover;
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
-  background-color: #1e73be;
-  color: white;
-  min-height: 100vh;
+  background-color: #bbb;
+  color: black;
+  height: 100vh;
+  overflow: hidden;
 }
 * {
   box-sizing: inherit;
@@ -20,24 +21,6 @@ a {
   color: inherit;
   text-decoration: none;
 }
-#transactionList {
-  padding: 1em 0 0;
-  mix-blend-mode: screen;
-  opacity: 0.75;
-  height: 100vh;
-  overflow: hidden;
-}
-#transactionList:after {
-  content: '';
-  position: fixed;
-  bottom: 0;
-  height: 8em;
-  left: 0;
-  right: 0;
-  background-image: linear-gradient(to top, #1e73be 0%, rgba(30, 115, 190, 0.987) 8.1%, rgba(30, 115, 190, 0.951) 15.5%, rgba(30, 115, 190, 0.896) 22.5%, rgba(30, 115, 190, 0.825) 29%, rgba(30, 115, 190, 0.741) 35.3%, rgba(30, 115, 190, 0.648) 41.2%, rgba(30, 115, 190, 0.55) 47.1%, rgba(30, 115, 190, 0.45) 52.9%, rgba(30, 115, 190, 0.352) 58.8%, rgba(30, 115, 190, 0.259) 64.7%, rgba(30, 115, 190, 0.175) 71%, rgba(30, 115, 190, 0.104) 77.5%, rgba(30, 115, 190, 0.049) 84.5%, rgba(30, 115, 190, 0.013) 91.9%, rgba(30, 115, 190, 0) 100%);
-  z-index: 2;
-  pointer-events: none;
-}
 #connectionStatus.is-connected ~ #transactionList:empty:before {
   content: 'Waiting for first transaction...';
   display: block;
@@ -45,59 +28,60 @@ a {
   font-size: 2em;
   opacity: 0.5;
 }
-.tx {
-  position: relative;
-  margin: 3px auto;
-  width: 20em;
-  min-width: 80%;
-  max-width: 100%;
-  z-index: 1;
+#blockList {
+  margin-left: 80vw;
+  padding-top: 2.5vw;
 }
-.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;
+.block:first-child {
   position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  left: 41.125%;
+  top: 50%;
+  width: 77.5vw;
+  height: 77.5vw;
+  transform: translate(-50%,-50%);
 }
-.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;
+@media (max-height: 77.5vw) {
+  .block:first-child {
+    width: calc(100vh - 5vw);
+    height: calc(100vh - 5vw);
+  }
+}
+.block {
+  width: 15vw;
+  height: 15vw;
+  box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
+  background-color: #eee;
+  margin: 0 auto 1em;
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
-.blockDivider:hover,
-.blockDivider:focus {
-  color: inherit;
+.explorer-link {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  font-size: 1.9vmin;
+  text-align: center;
+  background-color: hsla(0, 0%, 100%, 0.5);
+  color: transparent;
+  height: 100%;
+  width: 100%;
 }
-#muteToggle,
-#connectionStatus {
+.block:hover .explorer-link {
+  display: block;
+}
+.paint {
+  position: absolute;
+  left: calc(var(--x) * 90% + 5%);
+  top: calc(var(--y) * 90% + 5%);
+  transform: translate(-50%, -50%) rotate(var(--rotation));
+  height: calc(var(--size) * 20% + 20%);
+  width: calc(var(--size) * 20% + 20%);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+#muteToggle, #connectionStatus {
   position: fixed;
   top: 0;
   width: 8em;
@@ -110,26 +94,7 @@ a {
   text-align: center;
   color: black;
 }
-#muteToggle {
-  left: 0;
-  border-radius: 0 0 0.5em 0;
-  border-width: 0 0.1em 0.1em 0;
-  transition: opacity 0.5s;
-  transition-delay: 1s;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 100;
-}
-#muteToggle:hover {
-  opacity: 1;
-  transition-delay: 0s;
-}
-#muteToggle:before {
-  content: 'Mute';
-}
-#muteToggle.is-muted:before {
-  content: 'Un-mute';
-}
+
 #connectionStatus {
   right: 0;
   border-radius: 0 0 0 0.5em;

bundle.css.map

@@ -1 +1 @@
-{"version":3,"sources":["app/styles/main.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  font-family: sans-serif;\n  font-size: 140%;\n  background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, #1e73be, #073a66);\n  background-size: 50vmin auto, cover;\n  background-position: center;\n  background-attachment: fixed;\n  background-repeat: no-repeat;\n  background-color: #1e73be;\n  color: white;\n  min-height: 100vh;\n}\n* {\n  box-sizing: inherit;\n}\na {\n  color: inherit;\n  text-decoration: none;\n}\n#transactionList {\n  padding: 1em 0 0;\n  mix-blend-mode: screen;\n  opacity: 0.75;\n  height: 100vh;\n  overflow: hidden;\n}\n#transactionList:after {\n  content: '';\n  position: fixed;\n  bottom: 0;\n  height: 8em;\n  left: 0;\n  right: 0;\n  background-image: linear-gradient(to top, #1e73be 0%, rgba(30, 115, 190, 0.987) 8.1%, rgba(30, 115, 190, 0.951) 15.5%, rgba(30, 115, 190, 0.896) 22.5%, rgba(30, 115, 190, 0.825) 29%, rgba(30, 115, 190, 0.741) 35.3%, rgba(30, 115, 190, 0.648) 41.2%, rgba(30, 115, 190, 0.55) 47.1%, rgba(30, 115, 190, 0.45) 52.9%, rgba(30, 115, 190, 0.352) 58.8%, rgba(30, 115, 190, 0.259) 64.7%, rgba(30, 115, 190, 0.175) 71%, rgba(30, 115, 190, 0.104) 77.5%, rgba(30, 115, 190, 0.049) 84.5%, rgba(30, 115, 190, 0.013) 91.9%, rgba(30, 115, 190, 0) 100%);\n  z-index: 2;\n  pointer-events: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n  content: 'Waiting for first transaction...';\n  display: block;\n  text-align: center;\n  font-size: 2em;\n  opacity: 0.5;\n}\n.tx {\n  position: relative;\n  margin: 3px auto;\n  width: 20em;\n  min-width: 80%;\n  max-width: 100%;\n  z-index: 1;\n}\n.txValue {\n  display: none;\n  flex: 0 0 auto;\n  line-height: 1.25;\n}\n.txOutputs {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  align-content: stretch;\n}\n.txOut {\n  position: relative;\n  flex: 1 1 auto;\n  background-color: white;\n}\n.txOut:first {\n  border-left: 3px solid black;\n}\n.txOut:after {\n  content: '';\n  width: 3px;\n  background: black;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.blockDivider {\n  display: block;\n  margin: 1em -1em -1.5em;\n  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.125));\n  padding: 0.125em 1em 1.5em;\n  color: rgba(0, 0, 0, 0);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.blockDivider:hover,\n.blockDivider:focus {\n  color: inherit;\n}\n#muteToggle,\n#connectionStatus {\n  position: fixed;\n  top: 0;\n  width: 8em;\n  background: white;\n  border: solid black;\n  padding: 0.5em;\n  font-size: 0.8em;\n  text-transform: uppercase;\n  font-weight: bold;\n  text-align: center;\n  color: black;\n}\n#muteToggle {\n  left: 0;\n  border-radius: 0 0 0.5em 0;\n  border-width: 0 0.1em 0.1em 0;\n  transition: opacity 0.5s;\n  transition-delay: 1s;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 100;\n}\n#muteToggle:hover {\n  opacity: 1;\n  transition-delay: 0s;\n}\n#muteToggle:before {\n  content: 'Mute';\n}\n#muteToggle.is-muted:before {\n  content: 'Un-mute';\n}\n#connectionStatus {\n  right: 0;\n  border-radius: 0 0 0 0.5em;\n  border-width: 0 0 0.1em 0.1em;\n  transition: transform 0.5s;\n  transform: none;\n}\n#connectionStatus.is-disconnected:before {\n  content: 'Disconnected';\n  color: red;\n}\n#connectionStatus.is-connecting:before {\n  content: 'Connecting...';\n  color: black;\n}\n#connectionStatus.is-connected:before {\n  content: 'Connected';\n  color: green;\n}\n#connectionStatus.is-connected {\n  transition: transform 0.5s;\n  transition-delay: 2s;\n  transform: translate3d(0, -100%, 0);\n}\n"]}
+{"version":3,"sources":["app/styles/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  font-family: sans-serif;\n  font-size: 140%;\n  background-image: url('assets/Dash-logo.svg');\n  background-size: 50vmin auto, cover;\n  background-position: center;\n  background-attachment: fixed;\n  background-repeat: no-repeat;\n  background-color: #bbb;\n  color: black;\n  height: 100vh;\n  overflow: hidden;\n}\n* {\n  box-sizing: inherit;\n}\na {\n  color: inherit;\n  text-decoration: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n  content: 'Waiting for first transaction...';\n  display: block;\n  text-align: center;\n  font-size: 2em;\n  opacity: 0.5;\n}\n#blockList {\n  margin-left: 80vw;\n  padding-top: 2.5vw;\n}\n.block:first-child {\n  position: absolute;\n  left: 41.125%;\n  top: 50%;\n  width: 77.5vw;\n  height: 77.5vw;\n  transform: translate(-50%,-50%);\n}\n@media (max-height: 77.5vw) {\n  .block:first-child {\n    width: calc(100vh - 5vw);\n    height: calc(100vh - 5vw);\n  }\n}\n.block {\n  width: 15vw;\n  height: 15vw;\n  box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);\n  background-color: #eee;\n  margin: 0 auto 1em;\n  position: relative;\n  overflow: hidden;\n}\n.explorer-link {\n  display: none;\n  position: absolute;\n  z-index: 1;\n  font-size: 1.9vmin;\n  text-align: center;\n  background-color: hsla(0, 0%, 100%, 0.5);\n  color: transparent;\n  height: 100%;\n  width: 100%;\n}\n.block:hover .explorer-link {\n  display: block;\n}\n.paint {\n  position: absolute;\n  left: calc(var(--x) * 90% + 5%);\n  top: calc(var(--y) * 90% + 5%);\n  transform: translate(-50%, -50%) rotate(var(--rotation));\n  height: calc(var(--size) * 20% + 20%);\n  width: calc(var(--size) * 20% + 20%);\n  mask-size: contain;\n  mask-repeat: no-repeat;\n  mask-position: center;\n}\n\n#muteToggle, #connectionStatus {\n  position: fixed;\n  top: 0;\n  width: 8em;\n  background: white;\n  border: solid black;\n  padding: 0.5em;\n  font-size: 0.8em;\n  text-transform: uppercase;\n  font-weight: bold;\n  text-align: center;\n  color: black;\n}\n\n#connectionStatus {\n  right: 0;\n  border-radius: 0 0 0 0.5em;\n  border-width: 0 0 0.1em 0.1em;\n  transition: transform 0.5s;\n  transform: none;\n}\n#connectionStatus.is-disconnected:before {\n  content: 'Disconnected';\n  color: red;\n}\n#connectionStatus.is-connecting:before {\n  content: 'Connecting...';\n  color: black;\n}\n#connectionStatus.is-connected:before {\n  content: 'Connected';\n  color: green;\n}\n#connectionStatus.is-connected {\n  transition: transform 0.5s;\n  transition-delay: 2s;\n  transform: translate3d(0, -100%, 0);\n}\n"]}

bundle.js

@@ -6707,172 +6707,118 @@ const io = require('socket.io-client');
 
 var App = {
   init: function init() {
-    var socket = io("https://insight.dash.org:443/");
-    var transactionList = document.getElementById('transactionList');
-    var muteButton = document.getElementById('muteToggle');
-    var muted = false;
-    var audioContext;
-    var audioGainNode;
-    var backgroundSound;
-    var soundBuffers = {
-      'tx': null,
-      'block': null
-    };
+    const socket = io("https://insight.dash.org:443/");
+    const blockList = document.getElementById('blockList');
     var domRefList = [];
+    var currentBlock = document.createElement('div');
+    currentBlock.className = 'block';
+    blockList.appendChild(currentBlock);
 
-    function loadSound(url, bufferName, callback) {
-      var request = new XMLHttpRequest();
-      request.open('GET', url, true);
-      request.responseType = 'arraybuffer';
+    const psInputSatoshis = [
+      1000010000,
+      100001000,
+      10000100,
+      1000010,
+      100001
+    ];
 
-      // Decode asynchronously
-      request.onload = function() {
-        audioContext.decodeAudioData(request.response, function(buffer) {
-          soundBuffers[bufferName] = buffer;
-          if (callback) {
-            callback();
-          }
-        });
-        console.log('Loaded ' + url + ' as "' + bufferName + '"');
-      }
-      request.send();
-    }
+    const COLORS = {
+      private: 'black',
+      instant: 'white'
+    };
 
-    function playSound(bufferName, playbackRate) {
-      if (muted === true) {
-        return;
-      }
-      var source = audioContext.createBufferSource();
-      source.buffer = soundBuffers[bufferName];
-      source.connect(audioGainNode);
-      source.playbackRate.value = playbackRate;
-      source.start();
-    }
-
-    function playbackRate(value, vMin, vMax, oMin, oMax) {
-      return Math.min(Math.max(oMin,
-        (Math.log(value) - Math.log(vMin)) / (Math.log(vMax) - Math.log(vMin)) * (oMin - oMax) + oMax
-      ), oMax);
-    }
-
-    var toggleMute = function() {
-      muted = !muted;
-      if (localStorage) {
-        localStorage.setItem('muted', muted);
-      }
-      muteButton.className = (muted === true ? 'is-muted' : '');
-      if (muted) {
-        backgroundSound.stop();
-      } else {
-        backgroundSound = audioContext.createBufferSource();
-        backgroundSound.buffer = soundBuffers['background'];
-        backgroundSound.connect(audioGainNode);
-        backgroundSound.loop = true;
-        backgroundSound.start();
-      }
-    }
-
-    var onTransaction = function(data) {
-      console.log(data);
-      if (!muted) {
-        if (data.valueOut < 1) {
-          playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1.5, 6));
-        } else if (data.valueOut < 1000) {
-          playSound('tx-md', playbackRate(data.valueOut, 1, 1000, 0.5, 2));
-        } else if (data.valueOut >= 1000) {
-          playSound('tx-lg', playbackRate(data.valueOut, 6000, 1000, 0.5, 1.5));
-        }
-      }
-      var tx = document.createElement('div');
-      tx.className = 'tx';
-      var txValue = document.createElement('a');
-      txValue.className = 'txValue';
-      txValue.href = 'https://blockchain.masternode.io/tx/' + data.txid;
-      txValue.target = '_blank';
-      txValue.setAttribute('rel', 'noopener');
-      var txOutputs = document.createElement('div');
-      txOutputs.className = 'txOutputs';
-      txOutputs.style.height = (data.valueOut / 10 + 0.1) + 'em'
-      txValue.appendChild(document.createTextNode(data.valueOut));
-      tx.appendChild(txValue);
-      tx.appendChild(txOutputs);
-      var transactions = data.vout;
-    //    var transactions = data.vout.sort(function(a, b) { // sort descending by tx value
-    //      return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
-    //    });
-      transactions.forEach(function(value, index, array) {
-        var txOut = document.createElement('div');
-        var outputSatoshis = value[Object.keys(value)[0]];
-        txOut.className = 'txOut';
-        txOut.style.width = (outputSatoshis * 0.00001).toFixed(4) + 'px';
-        txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
-        txOutputs.appendChild(txOut);
-      });
-      if (domRefList.unshift(tx) > 300) {
-        var toDelete = domRefList.pop();
-        toDelete.remove();
-      }
-      transactionList.insertBefore(tx, transactionList.firstChild);
+    const PAINT = {
+      big: [
+        'paint-big01.svg',
+        'paint-big02.svg',
+        'paint-big03.svg',
+        'paint-big04.svg',
+        'paint-big05.svg',
+        'paint-big06.svg',
+        'paint-big07.svg',
+        'paint-big08.svg',
+        'paint-big09.svg',
+        'paint-big00.svg',
+        'paint-big01.svg',
+        'paint-big11.svg',
+        'paint-big12.svg'
+      ],
+      small: [
+        'paint01.svg',
+        'paint02.svg',
+        'paint03.svg',
+        'paint04.svg',
+        'paint05.svg',
+        'paint06.svg',
+        'paint07.svg',
+        'paint08.svg',
+        'paint09.svg',
+        'paint00.svg',
+        'paint01.svg',
+        'paint11.svg'
+      ]
     };
 
     var onBlock = function(data) {
       console.log(data);
-      playSound('block', 1);
-      var newBlock = document.createElement('a');
-      newBlock.className = 'blockDivider';
-      newBlock.href = 'https://insight.dash.org/insight/block/' + data;
-      newBlock.target = '_blank';
-      newBlock.setAttribute('rel', 'noopener');
-      newBlock.appendChild(document.createTextNode(data));
-      if (domRefList.unshift(newBlock) > 300) {
+      var blockLink = document.createElement('a');
+      blockLink.className = 'explorer-link';
+      blockLink.href = 'https://insight.dash.org/insight/block/' + data;
+      blockLink.target = '_blank';
+      blockLink.setAttribute('rel', 'noopener');
+      blockLink.appendChild(document.createTextNode(data));
+      currentBlock.appendChild(blockLink);
+
+      currentBlock = document.createElement('div');
+      currentBlock.className = 'block';
+      currentBlock.style.setProperty('--private-color', COLORS.private);
+      currentBlock.style.setProperty('--instant-color', COLORS.instant);
+      currentBlock.style.setProperty('--default-color', COLORS.default);
+
+      if (domRefList.unshift(currentBlock) > 16) {
         var toDelete = domRefList.pop();
         toDelete.remove();
       }
-      transactionList.insertBefore(newBlock, transactionList.firstChild);
+      blockList.insertBefore(currentBlock, blockList.firstChild);
     };
 
-    if (localStorage) {
-      muted = localStorage.getItem('muted');
-      if (muted === null) {
-        muted = false;
-        localStorage.setItem('muted', muted);
-      } else {
-        muted = (muted == 'true'); // localStorage stores strings not objects?
+    const onTransaction = function(data) {
+      var transactions = data.vout;
+
+      var isPrivateSend = true;
+      for (let i = 0; i < transactions.length; i++) {
+        const tx = transactions[i];
+        const outputSatoshis = tx[Object.keys(tx)[0]];
+        if (!psInputSatoshis.includes(outputSatoshis)) {
+          isPrivateSend = false;
+          break;
         }
-      muteButton.className = (muted === true ? 'is-muted' : '');
       }
 
-    muteButton.onclick = toggleMute;
+      const tx = {
+        private: isPrivateSend,
+        instant: data.txlock,
+        value: data.valueOut,
+        x: parseInt(data.txid.slice(0, 4), 16) / 65536,
+        y: parseInt(data.txid.slice(4, 8), 16) / 65536,
+        rotation: parseInt(data.txid.slice(16, 17), 16) / 16,
+        paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536,
+        color: isPrivateSend ? COLORS.private : data.txlock ? COLORS.instant : '#' + data.txid.slice(21, 27)
+      };
 
-    try {
-      window.AudioContext = window.AudioContext||window.webkitAudioContext;
-      audioContext = new AudioContext();
-      audioGainNode = audioContext.createGain();
-      audioGainNode.connect(audioContext.destination);
-      audioGainNode.gain.value = 0.6;
-    }
-    catch(e) {
-      console.error('Unable to use Web Audio API');
-      document.getElementById('muteToggle').remove();
-    }
-    try {
-      loadSound('assets/whoosh.mp3', 'block');
-      loadSound('assets/bell.mp3', 'tx-sm');
-      loadSound('assets/wood-hit-glass.mp3', 'tx-md');
-      loadSound('assets/metallophone.mp3', 'tx-lg');
-      loadSound('assets/creek.mp3', 'background', function() {
-        backgroundSound = audioContext.createBufferSource();
-        backgroundSound.buffer = soundBuffers['background'];
-        backgroundSound.connect(audioGainNode);
-        backgroundSound.loop = true;
-        if (!muted) {
-          backgroundSound.start();
-        }
-      });
-    }
-    catch(e) {
-      console.error('Couldn\'t load sounds.');
-    }
+      var paint = document.createElement('div');
+      paint.classList.add('paint');
+      paint.style.backgroundImage = 'linear-gradient(0deg,'+tx.color+','+tx.color+')';
+      paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ?
+        PAINT.big[Math.floor(tx.paintIndex * 12)] :
+        PAINT.small[Math.floor(tx.paintIndex * 11)]
+      ) + ')';
+      paint.style.setProperty('--x', tx.x);
+      paint.style.setProperty('--y', tx.y);
+      paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));
+      paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg');
+      currentBlock.appendChild(paint, currentBlock.firstChild);
+    };
 
     socket.on('connect', function() {
       document.getElementById('connectionStatus').className = 'is-connected';

index.html

@@ -6,10 +6,9 @@
     <link rel="stylesheet" href="bundle.css">
    </head>
   <body>
-    <div id="muteToggle"></div>
     <div id="connectionStatus" class="is-connecting"></div>
 
-    <div id="transactionList"></div>
+    <div id="blockList"></div>
 
     <script src="bundle.js"></script>
     <script>require('application').init();</script>