publish: ⚡ Change main live canvas to act like a mempool

generated from commit a69343066a57714e451b4ba65608b63ad38c0266

bundle.css

@@ -34,7 +34,17 @@ a {
   margin-left: 80vw;
   padding-top: 2.5vw;
 }
-.block:first-child {
+#hero, .block {
+  width: 15vw;
+  height: 15vw;
+  -webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
+          box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
+  background-color: #dad7b7;
+  margin: 0 auto 1em;
+  position: relative;
+  overflow: hidden;
+}
+#hero {
   position: absolute;
   left: 41.125%;
   top: 50%;
@@ -45,26 +55,16 @@ a {
           transform: translate(-50%,-50%);
 }
 @media (max-height: 82.5vw) {
-  .block:first-child {
+  #hero {
     width: calc(100vh - 5vw);
     height: calc(100vh - 5vw);
   }
 }
-.block.solo {
+#hero.solo {
   left: 50%;
   width: 95vmin;
   height: 95vmin;
 }
-.block {
-  width: 15vw;
-  height: 15vw;
-  -webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
-          box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
-  background-color: #dad7b7;
-  margin: 0 auto 1em;
-  position: relative;
-  overflow: hidden;
-}
 .explorer-link {
   display: none;
   position: absolute;

bundle.js

@@ -18863,6 +18863,13 @@ var App =
 function () {
   function App() {
     _classCallCheck(this, App);
+
+    this.blockRefs = [];
+    this.mempoolRefs = [];
+    this.blockList = document.getElementById('blockList');
+    this.connectionStatus = document.getElementById('connectionStatus');
+    this.hero = document.getElementById('hero');
+    this.blockColors = ['000000'];
   }
 
   _createClass(App, [{
@@ -18870,94 +18877,109 @@ function () {
     value: function () {
       var _init = _asyncToGenerator(
       /*#__PURE__*/
-      regeneratorRuntime.mark(function _callee() {
+      regeneratorRuntime.mark(function _callee2() {
         var _this = this;
 
-        var block, txs, pages, prevHash, i;
+        var block, txs, pages, prevHash;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                block = new URL(window.location).searchParams.get('block');
+
+                if (!(block != null)) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                return _context2.delegateYield(
+                /*#__PURE__*/
+                regeneratorRuntime.mark(function _callee() {
+                  var txListener, i;
                   return regeneratorRuntime.wrap(function _callee$(_context) {
                     while (1) {
                       switch (_context.prev = _context.next) {
                         case 0:
-                this.domRefList = [];
-                this.blockList = document.getElementById('blockList');
-                this.blockList.style.setProperty('--private-color', _constants.COLORS["private"]);
-                this.blockList.style.setProperty('--instant-color', _constants.COLORS.instant);
-                this.connectionStatus = document.getElementById('connectionStatus');
-                this.currentBlock = document.createElement('div');
-                this.currentBlock.className = 'block';
-                this.blockList.appendChild(this.currentBlock);
-                this.blockColors = ['000000'];
-                block = new URL(window.location).searchParams.get('block');
-
-                if (!(block != null)) {
-                  _context.next = 26;
-                  break;
-                }
-
                           // display one block
-                this.currentBlock.classList.add('solo');
+                          _this.hero.classList.add('solo');
-                this.connectionStatus.className = 'is-loading';
+
+                          _this.connectionStatus.className = 'is-loading';
                           txs = [];
                           pages = 1;
                           prevHash = null;
+                          txListener = _this.onTransactionBuilder(_this.hero, false);
                           i = 0;
 
-              case 17:
+                        case 7:
                           if (!(i < pages)) {
-                  _context.next = 23;
+                            _context.next = 13;
                             break;
                           }
 
-                _context.next = 20;
+                          _context.next = 10;
                           return fetch("https://insight.dash.org/insight-api/txs?block=".concat(block, "&pageNum=").concat(i)).then(function (resp) {
                             return resp.json();
                           }).then(function (thisBlockData) {
-                  // console.log({i, pages, prevHash, thisBlockData});
                             if (!prevHash && thisBlockData.txs.length > 0) {
                               return fetch('https://insight.dash.org/insight-api/block-index/' + (thisBlockData.txs[0].blockheight - 1)).then(function (resp) {
                                 return resp.json();
                               }).then(function (prevBlockData) {
                                 prevHash = prevBlockData.blockHash;
                                 _this.blockColors = App.generateColors(prevHash);
+
+                                _this.applyColors(_this.hero);
+
                                 pages = thisBlockData.pagesTotal;
 
                                 for (var j = 0; j < thisBlockData.txs.length; ++j) {
-                        _this.onTransaction(thisBlockData.txs[j]);
+                                  txListener(thisBlockData.txs[j]);
                                 }
                               });
                             } else {
                               for (var j = 0; j < thisBlockData.txs.length; ++j) {
-                      _this.onTransaction(thisBlockData.txs[j]);
+                                txListener(thisBlockData.txs[j]);
                               }
                             }
                           });
 
-              case 20:
+                        case 10:
                           ++i;
-                _context.next = 17;
+                          _context.next = 7;
                           break;
 
-              case 23:
+                        case 13:
-                this.connectionStatus.className = 'is-loaded';
+                          _this.connectionStatus.className = 'is-loaded';
-                _context.next = 34;
+
+                        case 14:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee);
+                })(), "t0", 3);
+
+              case 3:
+                _context2.next = 13;
                 break;
 
-              case 26:
+              case 5:
-                _context.next = 28;
+                _context2.next = 7;
                 return fetch('https://insight.dash.org/api/status?q=getLastBlockHash').then(function (resp) {
                   return resp.json();
                 }).then(function (data) {
                   _this.blockColors = App.generateColors(data.lastblockhash);
+
+                  _this.applyColors(_this.hero);
                 });
 
-              case 28:
+              case 7:
                 this.socket = _socket["default"].connect("https://insight.dash.org:443/");
                 this.socket.on('connect', function () {
                   _this.connectionStatus.className = 'is-connected'; // Join the room.
 
                   _this.socket.emit('subscribe', 'inv');
                 });
-                this.socket.on('tx', this.onTransaction.bind(this));
+                this.socket.on('tx', this.onTransactionBuilder(this.hero, true).bind(this));
                 this.socket.on('block', this.onBlock.bind(this));
                 this.socket.on('disconnect', function () {
                   _this.connectionStatus.className = 'is-disconnected';
@@ -18966,12 +18988,12 @@ function () {
                   _this.connectionStatus.className = 'is-connecting';
                 });
 
-              case 34:
+              case 13:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
 
       function init() {
@@ -18980,9 +19002,23 @@ function () {
 
       return init;
     }()
+  }, {
+    key: "applyColors",
+    value: function applyColors(target) {
+      for (var i in this.blockColors) {
+        var color = this.blockColors[i];
+        target.style.setProperty("--color-".concat(i), '#' + color);
+      }
+    }
   }, {
     key: "onBlock",
     value: function onBlock(data) {
+      var _this2 = this;
+
+      var completedBlock = document.createElement('div');
+      completedBlock.className = 'block';
+      completedBlock.id = data;
+      this.applyColors(completedBlock);
       this.blockColors = App.generateColors(data);
       var blockLink = document.createElement('a');
       blockLink.className = 'explorer-link';
@@ -18990,34 +19026,76 @@ function () {
       blockLink.target = '_blank';
       blockLink.setAttribute('rel', 'noopener');
       blockLink.appendChild(document.createTextNode('🗗'));
-      this.currentBlock.appendChild(blockLink);
+      fetch('https://insight.dash.org/insight-api/block/' + data).then(function (resp) {
-      this.currentBlock = document.createElement('div');
+        return resp.json();
-      this.currentBlock.className = 'block';
+      }).then(function (data) {
+        var mined = [];
+
+        for (var i in data.tx) {
+          var txid = data.tx[i];
+          var paint = document.getElementById(txid);
+
+          if (paint) {
+            mined.push(paint);
+            completedBlock.insertBefore(paint, completedBlock.firstChild);
+          }
+        }
+
+        _this2.mempoolRefs = _this2.mempoolRefs.filter(function (item) {
+          return !mined.includes(item);
+        });
+
+        _this2.mempoolRefs.forEach(function (item) {
+          item.classList.add('stale');
+          item.data_ignored = item.data_ignored ? item.data_ignored + 1 : 1;
+        });
+
+        _this2.mempoolRefs.filter(function (item) {
+          if (item.data_ignored > 4) {
+            _this2.hero.removeChild(item);
+
+            return false;
+          }
+
+          return true;
+        });
+
+        completedBlock.appendChild(blockLink);
+
+        if (_this2.blockRefs.unshift(_this2.completedBlock) > 8) {
+          var toDelete = _this2.blockRefs.pop();
 
-      if (this.domRefList.unshift(this.currentBlock) > 16) {
-        var toDelete = this.domRefList.pop();
           toDelete.remove();
         }
 
-      this.blockList.insertBefore(this.currentBlock, this.blockList.firstChild);
+        _this2.blockList.insertBefore(completedBlock, _this2.blockList.firstChild);
+      });
     }
   }, {
-    key: "onTransaction",
+    key: "onTransactionBuilder",
-    value: function onTransaction(data) {
+    value: function onTransactionBuilder(target) {
+      var _this3 = this;
+
+      var addToMempool = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      return function (data) {
         var isMixing = App.isPrivateSend(data.vout);
         var isInstant = data.txlock || data.vin && data.vin.length <= 4;
+        var isSimple = data.txlock || data.vin && data.vin.length <= 1;
         var tx = {
+          id: data.txid,
           mixing: isMixing,
           instant: isInstant,
+          simple: isSimple,
           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: isMixing ? _constants.COLORS["private"] : isInstant ? _constants.COLORS.instant : this.blockColors[Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length)]
+          color: isMixing ? _constants.COLORS.black : !isSimple ? _constants.COLORS.white : 'var(--color-' + Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * _this3.blockColors.length) + ')'
         };
-      console.log('tx: ' + tx.value + (tx.mixing ? ' mixing' : '') + (tx.instant ? ' instant' : ''));
+        console.log('tx: ' + tx.value + (tx.mixing ? ' mixing' : '') + (isInstant ? ' instant' : ''));
         var paint = document.createElement('div');
+        paint.id = tx.id;
         paint.classList.add('paint');
         paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ? _constants.PAINT.big[Math.floor(tx.paintIndex * 12)] : _constants.PAINT.small[Math.floor(tx.paintIndex * 11)]) + ')';
         paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
@@ -19025,21 +19103,24 @@ function () {
         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');
-      paint.style.setProperty('--color', '#' + tx.color);
+        paint.style.setProperty('--color', tx.color);
-      this.currentBlock.appendChild(paint, this.currentBlock.firstChild);
+
+        if (addToMempool && _this3.mempoolRefs.unshift(paint) > 200) {
+          var toDelete = _this3.mempoolRefs.pop();
+
+          toDelete.remove();
+        }
+
+        target.appendChild(paint);
+      };
     }
   }], [{
     key: "generateColors",
     value: function generateColors(blockHash) {
-      // https://github.com/c0bra/color-scheme-js
-      var schemeTypes = ['contrast', 'triade', 'triade', 'tetrade', 'tetrade', 'analogic', 'analogic', 'analogic', 'analogic'];
       var hue = Math.floor(parseInt(blockHash.slice(-3), 16) / 4096 * 360);
-      var schemeFraction = parseInt(blockHash.slice(-5, -3), 16) / 256;
-      var scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)];
       var blockColorScheme = new _colorScheme["default"]();
-      blockColorScheme.from_hue(hue).scheme(scheme).add_complement(true);
+      blockColorScheme.from_hue(hue).scheme('analogic').add_complement(true);
       var colors = blockColorScheme.colors();
-      console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#' + colors[0]);
       return colors;
     }
   }, {
@@ -19074,8 +19155,8 @@ exports.PAINT = exports.COLORS = exports.PSDENOMINATIONS = void 0;
 var PSDENOMINATIONS = [1000010000, 100001000, 10000100, 1000010, 100001];
 exports.PSDENOMINATIONS = PSDENOMINATIONS;
 var COLORS = {
-  "private": '000000',
+  black: '#000000',
-  instant: 'ffffff'
+  white: '#ffffff'
 };
 exports.COLORS = COLORS;
 var PAINT = {

index.html

@@ -8,6 +8,7 @@
   <body>
     <div id="connectionStatus" class="is-connecting"></div>
 
+    <div id="hero"></div>
     <div id="blockList"></div>
 
     <script src="bundle.js"></script>