Add ability to link to specific blocks as static paintings

app/App.js

@@ -8,35 +8,71 @@ import { PSDENOMINATIONS, COLORS, PAINT } from './constants';
 
 export default class App {
   constructor() {
-    this.socket = io.connect("https://insight.dash.org:443/");
+  }
+
+  async init() {
     this.domRefList = [];
     this.blockList = document.getElementById('blockList');
+    this.connectionStatus = document.getElementById('connectionStatus')
     this.currentBlock = document.createElement('div');
     this.currentBlock.className = 'block';
     this.blockList.appendChild(this.currentBlock);
     this.blockColors = ['000000'];
-    this.prevBlockHash = null;
 
-    fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
-    .then(resp => resp.json())
-    .then(data => {
-      this.prevBlockHash = data.lastblockhash;
-      this.blockColors = App.generateColors(data.lastblockhash);
-    });
+    const block = (new URL(window.location)).searchParams.get('block');
 
-    this.socket.on('connect', () => {
-      document.getElementById('connectionStatus').className = 'is-connected';
-      // Join the room.
-      this.socket.emit('subscribe', 'inv');
-    })
-    this.socket.on('tx', this.onTransaction.bind(this));
-    this.socket.on('block', this.onBlock.bind(this));
-    this.socket.on('disconnect', () => {
-      document.getElementById('connectionStatus').className = 'is-disconnected';
-    });
-    this.socket.on('reconnecting', () => {
-      document.getElementById('connectionStatus').className = 'is-connecting';
-    });
+    if (block != null) { // display one block
+      this.currentBlock.classList.add('solo');
+      this.connectionStatus.className = 'is-loading';
+      var txs = [];
+      var pages = 1;
+      var prevHash = null;
+      for (let i = 0; i < pages; ++i) {
+        await fetch(`https://insight.dash.org/insight-api/txs?block=${block}&pageNum=${i}`)
+        .then(resp => resp.json())
+        .then(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(resp => resp.json())
+            .then(prevBlockData => {
+              prevHash = prevBlockData.blockHash;
+              this.blockColors = App.generateColors(prevHash);
+              pages = thisBlockData.pagesTotal;
+              for (let j = 0; j < thisBlockData.txs.length; ++j) {
+                this.onTransaction(thisBlockData.txs[j]);
+              }
+            });
+          } else {
+              for (let j = 0; j < thisBlockData.txs.length; ++j) {
+                this.onTransaction(thisBlockData.txs[j]);
+              }
+          }
+        });
+      }
+      this.connectionStatus.className = 'is-loaded';
+    } else { // live display
+      this.socket = io.connect("https://insight.dash.org:443/");
+      fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
+      .then(resp => resp.json())
+      .then(data => {
+        this.blockColors = App.generateColors(data.lastblockhash);
+
+        this.socket.on('connect', () => {
+          this.connectionStatus.className = 'is-connected';
+          // Join the room.
+          this.socket.emit('subscribe', 'inv');
+        })
+        this.socket.on('tx', this.onTransaction.bind(this));
+        this.socket.on('block', this.onBlock.bind(this));
+        this.socket.on('disconnect', () => {
+          this.connectionStatus.className = 'is-disconnected';
+        });
+        this.socket.on('reconnecting', () => {
+          this.connectionStatus.className = 'is-connecting';
+        });
+      });
+    }
   }
 
   static generateColors(blockHash) {
@@ -60,19 +96,18 @@ export default class App {
     var blockColorScheme = new ColorScheme();
     blockColorScheme.from_hue(hue).scheme(scheme).add_complement(true);
     const colors = blockColorScheme.colors();
-    console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#'+colors[0]);
+    // console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#'+colors[0]);
     return colors;
   }
 
   onBlock(data) {
-    this.prevBlockHash = data;
-    this.blockColors = App.generateColors(this.prevBlockHash);
+    this.blockColors = App.generateColors(data);
     var blockLink = document.createElement('a');
     blockLink.className = 'explorer-link';
-    blockLink.href = 'https://insight.dash.org/insight/block/' + data;
+    blockLink.href = document.location + '?block=' + data;
     blockLink.target = '_blank';
     blockLink.setAttribute('rel', 'noopener');
-    blockLink.appendChild(document.createTextNode(data));
+    blockLink.appendChild(document.createTextNode('🗗'));
     this.currentBlock.appendChild(blockLink);
 
     this.currentBlock = document.createElement('div');
@@ -106,7 +141,7 @@ export default class App {
       ]
     };
 
-    console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':''));
+    // console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':''));
 
     var paint = document.createElement('div');
     paint.classList.add('paint');

app/main.js

@@ -1,5 +1,5 @@
 import App from './App';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new App();
-});
+  (new App()).init();
+});

app/styles/main.css

@@ -44,12 +44,17 @@ a {
       -ms-transform: translate(-50%,-50%);
           transform: translate(-50%,-50%);
 }
-@media (max-height: 77.5vw) {
+@media (max-height: 82.5vw) {
   .block:first-child {
     width: calc(100vh - 5vw);
     height: calc(100vh - 5vw);
   }
 }
+.block.solo {
+  left: 50%;
+  width: 95vmin;
+  height: 95vmin;
+}
 .block {
   width: 15vw;
   height: 15vw;
@@ -63,16 +68,20 @@ a {
 .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%;
+  z-index: 1;
+  font-size: 1.9vmin;
+  justify-content: center;
+  align-items: center;
+  background-color: hsla(0, 0%, 0%, 0.5);
+  color: white;
+  opacity: 0.5;
+  font-size: 6vw;
+  line-height: 0;
 }
 .block:hover .explorer-link {
-  display: block;
+  display: flex;
 }
 .paint {
   position: absolute;
@@ -107,6 +116,7 @@ a {
 }
 
 #connectionStatus {
+  z-index: 1;
   right: 0;
   border-radius: 0 0 0 0.5em;
   border-width: 0 0 0.1em 0.1em;
@@ -127,11 +137,19 @@ a {
   content: 'Connecting...';
   color: black;
 }
+#connectionStatus.is-loading:before {
+  content: 'Loading...';
+  color: black;
+}
 #connectionStatus.is-connected:before {
   content: 'Connected';
   color: green;
 }
-#connectionStatus.is-connected {
+#connectionStatus.is-loaded:before {
+  content: 'Loaded';
+  color: green;
+}
+#connectionStatus.is-connected, #connectionStatus.is-loaded {
   -webkit-transition: -webkit-transform 0.5s;
   transition: -webkit-transform 0.5s;
   -o-transition: transform 0.5s;