joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-27 01:36:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: jslint style fixes

Browse source
This commit is contained in:
Joshua Seigler 2020-01-14 21:08:08 -05:00
parent 1f09e5d682
commit e8f6b78fbe
1 changed files with 79 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

160
app/App.js
View file

@ -1,67 +1,65 @@
'use strict'; 'use strict';
require('babel-polyfill');
import io from 'socket.io-client'; import io from 'socket.io-client';
import ColorScheme from 'color-scheme'; import ColorScheme from 'color-scheme';
import { PSDENOMINATIONS, COLORS, PAINT } from './constants'; import { PSDENOMINATIONS, COLORS, PAINT } from './constants';
require('babel-polyfill');
export default class App { export default class App {
constructor() { constructor () {
this.blockList = document.getElementById('blockList'); this.blockList = document.getElementById('blockList');
this.connectionStatus = document.getElementById('connectionStatus'); this.connectionStatus = document.getElementById('connectionStatus');
this.hero = document.getElementById('hero'); this.hero = document.getElementById('hero');
this.blockColors = ['000000']; this.blockColors = ['000000'];
} }
async init() { async init () {
const block = (new URL(window.location)).searchParams.get('block'); const block = (new URL(window.location)).searchParams.get('block');
if (block != null) { // display one block if (block != null) { // display one block
this.hero.classList.add('solo'); this.hero.classList.add('solo');
this.connectionStatus.className = 'is-loading'; this.connectionStatus.className = 'is-loading';
var txs = [];
var pages = 1; var pages = 1;
var prevHash = null; var prevHash = null;
const txListener = this.onTransactionBuilder(this.hero, false); const txListener = this.onTransactionBuilder(this.hero, false);
for (let i = 0; i < pages; ++i) { for (let i = 0; i < pages; ++i) {
await fetch(`https://insight.dash.org/insight-api/txs?block=${block}&pageNum=${i}`) await window.fetch(`https://insight.dash.org/insight-api/txs?block=${block}&pageNum=${i}`)
.then(resp => resp.json()) .then(resp => resp.json())
.then(thisBlockData => { .then(thisBlockData => {
if (!prevHash && thisBlockData.txs.length > 0) { if (!prevHash && thisBlockData.txs.length > 0) {
return fetch('https://insight.dash.org/insight-api/block-index/'+(thisBlockData.txs[0].blockheight - 1)) return window.fetch('https://insight.dash.org/insight-api/block-index/' + (thisBlockData.txs[0].blockheight - 1))
.then(resp => resp.json()) .then(resp => resp.json())
.then(prevBlockData => { .then(prevBlockData => {
prevHash = prevBlockData.blockHash; prevHash = prevBlockData.blockHash;
this.blockColors = App.generateColors(prevHash); this.blockColors = App.generateColors(prevHash);
this.applyColors(this.hero); this.applyColors(this.hero);
pages = thisBlockData.pagesTotal; pages = thisBlockData.pagesTotal;
for (let j = 0; j < thisBlockData.txs.length; ++j) {
txListener(thisBlockData.txs[j]);
}
});
} else {
for (let j = 0; j < thisBlockData.txs.length; ++j) { for (let j = 0; j < thisBlockData.txs.length; ++j) {
txListener(thisBlockData.txs[j]); txListener(thisBlockData.txs[j]);
} }
}); }
} else { });
for (let j = 0; j < thisBlockData.txs.length; ++j) {
txListener(thisBlockData.txs[j]);
}
}
});
} }
this.connectionStatus.className = 'is-loaded'; this.connectionStatus.className = 'is-loaded';
} else { // live display } else { // live display
await fetch('https://insight.dash.org/api/status?q=getLastBlockHash') await window.fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
.then(resp => resp.json()) .then(resp => resp.json())
.then(data => { .then(data => {
this.blockColors = App.generateColors(data.lastblockhash); this.blockColors = App.generateColors(data.lastblockhash);
this.applyColors(this.hero); this.applyColors(this.hero);
}); });
this.socket = io.connect("https://insight.dash.org:443/"); this.socket = io.connect('https://insight.dash.org:443/');
this.socket.on('connect', () => { this.socket.on('connect', () => {
this.connectionStatus.className = 'is-connected'; this.connectionStatus.className = 'is-connected';
// Join the room. // Join the room.
this.socket.emit('subscribe', 'inv'); this.socket.emit('subscribe', 'inv');
}) });
this.socket.on('tx', this.onTransactionBuilder(this.hero, true).bind(this)); this.socket.on('tx', this.onTransactionBuilder(this.hero, true).bind(this));
this.socket.on('block', this.onBlock.bind(this)); this.socket.on('block', this.onBlock.bind(this));
this.socket.on('disconnect', () => { this.socket.on('disconnect', () => {
@ -73,7 +71,7 @@ export default class App {
} }
} }
static generateColors(blockHash) { static generateColors (blockHash) {
const hue = Math.floor( const hue = Math.floor(
parseInt(blockHash.slice(-3), 16) / 4096 * 360 parseInt(blockHash.slice(-3), 16) / 4096 * 360
); );
@ -83,14 +81,14 @@ export default class App {
return colors; return colors;
} }
applyColors(target) { applyColors (target) {
for (var i in this.blockColors) { for (var i in this.blockColors) {
const color = this.blockColors[i]; const color = this.blockColors[i];
target.style.setProperty(`--color-${i}`, '#'+color); target.style.setProperty(`--color-${i}`, '#' + color);
} }
} }
onBlock(data) { onBlock (data) {
var completedBlock = document.createElement('div'); var completedBlock = document.createElement('div');
completedBlock.className = 'block'; completedBlock.className = 'block';
completedBlock.id = data; completedBlock.id = data;
@ -105,55 +103,55 @@ export default class App {
blockLink.appendChild(document.createTextNode('🗗')); blockLink.appendChild(document.createTextNode('🗗'));
setTimeout(() => { // to prevent 404 when WS is ahead of regular API setTimeout(() => { // to prevent 404 when WS is ahead of regular API
fetch('https://insight.dash.org/insight-api/block/' + data) window.fetch('https://insight.dash.org/insight-api/block/' + data)
.then(resp => { .then(resp => {
if (resp.ok) { if (resp.ok) {
return resp.json(); return resp.json();
} else { } else {
return null; return null;
}
})
.then(data => {
if (data) {
for (var i in data.tx) {
const txid = data.tx[i];
let paint = document.getElementById(txid);
if (paint) {
completedBlock.insertBefore(paint, completedBlock.firstChild);
}
} }
Array.from(this.hero.children).forEach(item => { })
const age = 1 * item.style.getPropertyValue('--age'); // 1 * null = 0 .then(data => {
if (age > 10) { if (data) {
item.remove(); for (var i in data.tx) {
} else { const txid = data.tx[i];
item.classList.add('stale'); const paint = document.getElementById(txid);
item.style.setProperty('--age',age + 1); if (paint) {
completedBlock.insertBefore(paint, completedBlock.firstChild);
}
} }
}); Array.from(this.hero.children).forEach(item => {
} else { const age = 1 * item.style.getPropertyValue('--age'); // 1 * null = 0
Array.from(this.hero.children).forEach(item => completedBlock.appendChild(item)); if (age > 10) {
} item.remove();
completedBlock.appendChild(blockLink); } else {
this.blockList.insertBefore(completedBlock, this.blockList.firstChild); item.classList.add('stale');
if (this.blockList.children.length > 8) { item.style.setProperty('--age', age + 1);
this.blockList.lastChild.remove(); }
} });
}); } else {
Array.from(this.hero.children).forEach(item => completedBlock.appendChild(item));
}
completedBlock.appendChild(blockLink);
this.blockList.insertBefore(completedBlock, this.blockList.firstChild);
if (this.blockList.children.length > 8) {
this.blockList.lastChild.remove();
}
});
}, 200); }, 200);
} }
static isPrivateSend(components) { static isPrivateSend (components) {
return components.every(i => { return components.every(i => {
let value = Object.values(i)[0]; let value = Object.values(i)[0];
if (typeof value == 'string') { if (typeof value === 'string') {
value = 100000000 * value; value = 100000000 * value;
} }
return PSDENOMINATIONS.includes(value); return PSDENOMINATIONS.includes(value);
}); });
} }
onTransactionBuilder(target, addToMempool = false) { onTransactionBuilder (target, addToMempool = false) {
return (data) => { return (data) => {
const isMixing = App.isPrivateSend(data.vout); const isMixing = App.isPrivateSend(data.vout);
const isComplex = data.vin && data.vin.length > 1; const isComplex = data.vin && data.vin.length > 1;
@ -166,26 +164,26 @@ export default class App {
y: parseInt(data.txid.slice(4, 8), 16) / 65536, y: parseInt(data.txid.slice(4, 8), 16) / 65536,
rotation: parseInt(data.txid.slice(16, 17), 16) / 16, rotation: parseInt(data.txid.slice(16, 17), 16) / 16,
paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536, paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536,
color: isMixing ? COLORS.black : isComplex ? COLORS.white : color: isMixing ? COLORS.black : isComplex ? COLORS.white
'var(--color-'+ : 'var(--color-' +
Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length)+ Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length) +
')' ')'
}; };
var paint = document.createElement('div'); var paint = document.createElement('div');
paint.id = tx.id; paint.id = tx.id;
paint.classList.add('paint'); paint.classList.add('paint');
paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ? paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10
PAINT.big[Math.floor(tx.paintIndex * 12)] : ? PAINT.big[Math.floor(tx.paintIndex * 12)]
PAINT.small[Math.floor(tx.paintIndex * 11)] : PAINT.small[Math.floor(tx.paintIndex * 11)]
) + ')'; ) + ')';
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage); paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
paint.style.setProperty('--x', tx.x); paint.style.setProperty('--x', tx.x);
paint.style.setProperty('--y', tx.y); paint.style.setProperty('--y', tx.y);
paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2)); paint.style.setProperty('--size', Math.log(1 + tx.value) / Math.log(2));
paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg'); paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg');
paint.style.setProperty('--color', tx.color); paint.style.setProperty('--color', tx.color);
target.appendChild(paint); target.appendChild(paint);
} };
} }
}; }