From 6bfef497a0c5ec8f373f847bd023c626838e1416 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 7 Apr 2019 23:12:37 -0400 Subject: [PATCH] Add ability to link to specific blocks as static paintings --- app/App.js | 89 +++++++++++++++++++++++++++++++-------------- app/main.js | 4 +- app/styles/main.css | 34 +++++++++++++---- 3 files changed, 90 insertions(+), 37 deletions(-) diff --git a/app/App.js b/app/App.js index ac256a5..0aaab2b 100644 --- a/app/App.js +++ b/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'); diff --git a/app/main.js b/app/main.js index 4a02e4d..c51cf2d 100644 --- a/app/main.js +++ b/app/main.js @@ -1,5 +1,5 @@ import App from './App'; document.addEventListener('DOMContentLoaded', () => { - new App(); -}); \ No newline at end of file + (new App()).init(); +}); diff --git a/app/styles/main.css b/app/styles/main.css index 1e4a462..de5fba0 100644 --- a/app/styles/main.css +++ b/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;