mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-26 01:06:12 +00:00
chore: jslint style fixes
This commit is contained in:
Joshua Seigler
parent
1f09e5d682
commit
e8f6b78fbe
1 changed files with 79 additions and 81 deletions
160
app/App.js
160
app/App.js
|
|
@ -1,67 +1,65 @@
|
|||
'use strict';
|
||||
|
||||
require('babel-polyfill');
|
||||
|
||||
import io from 'socket.io-client';
|
||||
import ColorScheme from 'color-scheme';
|
||||
import { PSDENOMINATIONS, COLORS, PAINT } from './constants';
|
||||
|
||||
require('babel-polyfill');
|
||||
|
||||
export default class App {
|
||||
constructor() {
|
||||
constructor () {
|
||||
this.blockList = document.getElementById('blockList');
|
||||
this.connectionStatus = document.getElementById('connectionStatus');
|
||||
this.hero = document.getElementById('hero');
|
||||
this.blockColors = ['000000'];
|
||||
}
|
||||
|
||||
async init() {
|
||||
async init () {
|
||||
const block = (new URL(window.location)).searchParams.get('block');
|
||||
|
||||
if (block != null) { // display one block
|
||||
this.hero.classList.add('solo');
|
||||
this.connectionStatus.className = 'is-loading';
|
||||
var txs = [];
|
||||
var pages = 1;
|
||||
var prevHash = null;
|
||||
const txListener = this.onTransactionBuilder(this.hero, false);
|
||||
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 => {
|
||||
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);
|
||||
this.applyColors(this.hero);
|
||||
pages = thisBlockData.pagesTotal;
|
||||
await window.fetch(`https://insight.dash.org/insight-api/txs?block=${block}&pageNum=${i}`)
|
||||
.then(resp => resp.json())
|
||||
.then(thisBlockData => {
|
||||
if (!prevHash && thisBlockData.txs.length > 0) {
|
||||
return window.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);
|
||||
this.applyColors(this.hero);
|
||||
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) {
|
||||
txListener(thisBlockData.txs[j]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
for (let j = 0; j < thisBlockData.txs.length; ++j) {
|
||||
txListener(thisBlockData.txs[j]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.connectionStatus.className = 'is-loaded';
|
||||
} else { // live display
|
||||
await fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.blockColors = App.generateColors(data.lastblockhash);
|
||||
this.applyColors(this.hero);
|
||||
});
|
||||
await window.fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
|
||||
.then(resp => resp.json())
|
||||
.then(data => {
|
||||
this.blockColors = App.generateColors(data.lastblockhash);
|
||||
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.connectionStatus.className = 'is-connected';
|
||||
// Join the room.
|
||||
this.socket.emit('subscribe', 'inv');
|
||||
})
|
||||
});
|
||||
this.socket.on('tx', this.onTransactionBuilder(this.hero, true).bind(this));
|
||||
this.socket.on('block', this.onBlock.bind(this));
|
||||
this.socket.on('disconnect', () => {
|
||||
|
|
@ -73,7 +71,7 @@ export default class App {
|
|||
}
|
||||
}
|
||||
|
||||
static generateColors(blockHash) {
|
||||
static generateColors (blockHash) {
|
||||
const hue = Math.floor(
|
||||
parseInt(blockHash.slice(-3), 16) / 4096 * 360
|
||||
);
|
||||
|
|
@ -83,14 +81,14 @@ export default class App {
|
|||
return colors;
|
||||
}
|
||||
|
||||
applyColors(target) {
|
||||
applyColors (target) {
|
||||
for (var i in this.blockColors) {
|
||||
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');
|
||||
completedBlock.className = 'block';
|
||||
completedBlock.id = data;
|
||||
|
|
@ -105,55 +103,55 @@ export default class App {
|
|||
blockLink.appendChild(document.createTextNode('🗗'));
|
||||
|
||||
setTimeout(() => { // to prevent 404 when WS is ahead of regular API
|
||||
fetch('https://insight.dash.org/insight-api/block/' + data)
|
||||
.then(resp => {
|
||||
if (resp.ok) {
|
||||
return resp.json();
|
||||
} else {
|
||||
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);
|
||||
}
|
||||
window.fetch('https://insight.dash.org/insight-api/block/' + data)
|
||||
.then(resp => {
|
||||
if (resp.ok) {
|
||||
return resp.json();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
Array.from(this.hero.children).forEach(item => {
|
||||
const age = 1 * item.style.getPropertyValue('--age'); // 1 * null = 0
|
||||
if (age > 10) {
|
||||
item.remove();
|
||||
} else {
|
||||
item.classList.add('stale');
|
||||
item.style.setProperty('--age',age + 1);
|
||||
})
|
||||
.then(data => {
|
||||
if (data) {
|
||||
for (var i in data.tx) {
|
||||
const txid = data.tx[i];
|
||||
const paint = document.getElementById(txid);
|
||||
if (paint) {
|
||||
completedBlock.insertBefore(paint, completedBlock.firstChild);
|
||||
}
|
||||
}
|
||||
});
|
||||
} 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();
|
||||
}
|
||||
});
|
||||
Array.from(this.hero.children).forEach(item => {
|
||||
const age = 1 * item.style.getPropertyValue('--age'); // 1 * null = 0
|
||||
if (age > 10) {
|
||||
item.remove();
|
||||
} else {
|
||||
item.classList.add('stale');
|
||||
item.style.setProperty('--age', age + 1);
|
||||
}
|
||||
});
|
||||
} 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);
|
||||
}
|
||||
|
||||
static isPrivateSend(components) {
|
||||
static isPrivateSend (components) {
|
||||
return components.every(i => {
|
||||
let value = Object.values(i)[0];
|
||||
if (typeof value == 'string') {
|
||||
if (typeof value === 'string') {
|
||||
value = 100000000 * value;
|
||||
}
|
||||
return PSDENOMINATIONS.includes(value);
|
||||
});
|
||||
}
|
||||
|
||||
onTransactionBuilder(target, addToMempool = false) {
|
||||
onTransactionBuilder (target, addToMempool = false) {
|
||||
return (data) => {
|
||||
const isMixing = App.isPrivateSend(data.vout);
|
||||
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,
|
||||
rotation: parseInt(data.txid.slice(16, 17), 16) / 16,
|
||||
paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536,
|
||||
color: isMixing ? COLORS.black : isComplex ? COLORS.white :
|
||||
'var(--color-'+
|
||||
Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length)+
|
||||
color: isMixing ? COLORS.black : isComplex ? COLORS.white
|
||||
: 'var(--color-' +
|
||||
Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length) +
|
||||
')'
|
||||
};
|
||||
|
||||
var paint = document.createElement('div');
|
||||
paint.id = tx.id;
|
||||
paint.classList.add('paint');
|
||||
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.maskImage = 'url(assets/paint/' + (tx.value > 10
|
||||
? PAINT.big[Math.floor(tx.paintIndex * 12)]
|
||||
: PAINT.small[Math.floor(tx.paintIndex * 11)]
|
||||
) + ')';
|
||||
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
|
||||
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('--size', Math.log(1 + tx.value) / Math.log(2));
|
||||
paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg');
|
||||
paint.style.setProperty('--color', tx.color);
|
||||
target.appendChild(paint);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue