From c09369a7dc27341350180d004f2f92353ef66bb2 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Fri, 5 Apr 2019 22:05:42 -0400 Subject: [PATCH] Convert to object oriented ES6 syntax --- app/App.js | 125 +++++++++++++++++++++++++++++ app/application.js | 178 ------------------------------------------ app/assets/index.html | 2 +- app/constants.js | 44 +++++++++++ app/main.js | 5 ++ 5 files changed, 175 insertions(+), 179 deletions(-) create mode 100644 app/App.js delete mode 100644 app/application.js create mode 100644 app/constants.js create mode 100644 app/main.js diff --git a/app/App.js b/app/App.js new file mode 100644 index 0000000..ac256a5 --- /dev/null +++ b/app/App.js @@ -0,0 +1,125 @@ +'use strict'; + +require('babel-polyfill'); + +import io from 'socket.io-client'; +import ColorScheme from 'color-scheme'; +import { PSDENOMINATIONS, COLORS, PAINT } from './constants'; + +export default class App { + constructor() { + this.socket = io.connect("https://insight.dash.org:443/"); + this.domRefList = []; + this.blockList = document.getElementById('blockList'); + 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); + }); + + 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'; + }); + } + + static generateColors(blockHash) { + // https://github.com/c0bra/color-scheme-js + const schemeTypes = [ + 'contrast', + 'triade', + 'triade', + 'tetrade', + 'tetrade', + 'analogic', + 'analogic', + 'analogic', + 'analogic', + ]; + const hue = Math.floor( + parseInt(blockHash.slice(-3), 16) / 4096 * 360 + ); + const schemeFraction = parseInt(blockHash.slice(-5, -3), 16) / 256; + const scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)]; + 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]); + return colors; + } + + onBlock(data) { + this.prevBlockHash = data; + this.blockColors = App.generateColors(this.prevBlockHash); + var blockLink = document.createElement('a'); + blockLink.className = 'explorer-link'; + blockLink.href = 'https://insight.dash.org/insight/block/' + data; + blockLink.target = '_blank'; + blockLink.setAttribute('rel', 'noopener'); + blockLink.appendChild(document.createTextNode(data)); + this.currentBlock.appendChild(blockLink); + + this.currentBlock = document.createElement('div'); + this.currentBlock.className = 'block'; + this.currentBlock.style.setProperty('--private-color', COLORS.private); + this.currentBlock.style.setProperty('--instant-color', COLORS.instant); + + if (this.domRefList.unshift(this.currentBlock) > 16) { + var toDelete = this.domRefList.pop(); + toDelete.remove(); + } + this.blockList.insertBefore(this.currentBlock, this.blockList.firstChild); + } + + static isPrivateSend(components) { + return components.every(i => PSDENOMINATIONS.includes(Object.values(i)[0])); + } + + onTransaction(data) { + const isMixing = App.isPrivateSend(data.vout); + const tx = { + mixing: isMixing, + instant: data.txlock, + 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 ? COLORS.private : data.txlock ? COLORS.instant : this.blockColors[ + Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length) + ] + }; + + console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':'')); + + var paint = document.createElement('div'); + 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.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('--rotation', tx.rotation * 360 + 'deg'); + paint.style.setProperty('--color', '#'+tx.color); + this.currentBlock.appendChild(paint, this.currentBlock.firstChild); + } +}; diff --git a/app/application.js b/app/application.js deleted file mode 100644 index eba7f2c..0000000 --- a/app/application.js +++ /dev/null @@ -1,178 +0,0 @@ -'use strict'; - -require('babel-polyfill'); - -import io from 'socket.io-client'; -import ColorScheme from 'color-scheme'; - -var App = { - init: async function init() { - const socket = io.connect("https://insight.dash.org:443/"); - const blockList = document.getElementById('blockList'); - var domRefList = []; - var currentBlock = document.createElement('div'); - currentBlock.className = 'block'; - blockList.appendChild(currentBlock); - var blockColors = ['000000']; - var prevBlockHash; - - fetch('https://insight.dash.org/api/status?q=getLastBlockHash') - .then(resp => resp.json()) - .then(data => { - prevBlockHash = data.lastblockhash; - blockColors = generateColors(prevBlockHash); - }); - - const psInputSatoshis = [ - 1000010000, - 100001000, - 10000100, - 1000010, - 100001 - ]; - - const COLORS = { - private: '000000', - instant: 'ffffff' - }; - - const PAINT = { - big: [ - 'paint-big01.svg', - 'paint-big02.svg', - 'paint-big03.svg', - 'paint-big04.svg', - 'paint-big05.svg', - 'paint-big06.svg', - 'paint-big07.svg', - 'paint-big08.svg', - 'paint-big09.svg', - 'paint-big00.svg', - 'paint-big01.svg', - 'paint-big11.svg', - 'paint-big12.svg' - ], - small: [ - 'paint01.svg', - 'paint02.svg', - 'paint03.svg', - 'paint04.svg', - 'paint05.svg', - 'paint06.svg', - 'paint07.svg', - 'paint08.svg', - 'paint09.svg', - 'paint00.svg', - 'paint01.svg', - 'paint11.svg' - ] - }; - - function generateColors(blockHash) { - // https://github.com/c0bra/color-scheme-js - const schemeTypes = [ - 'contrast', - 'triade', - 'triade', - 'tetrade', - 'tetrade', - 'analogic', - 'analogic', - 'analogic', - 'analogic', - ]; - const hue = Math.floor( - parseInt(prevBlockHash.slice(-3), 16) / 4096 * 360 - ); - const schemeFraction = parseInt(prevBlockHash.slice(-5, -3), 16) / 256; - const scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)]; - 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]); - return colors; - }; - - var onBlock = function(data) { - prevBlockHash = data; - blockColors = generateColors(prevBlockHash); - var blockLink = document.createElement('a'); - blockLink.className = 'explorer-link'; - blockLink.href = 'https://insight.dash.org/insight/block/' + data; - blockLink.target = '_blank'; - blockLink.setAttribute('rel', 'noopener'); - blockLink.appendChild(document.createTextNode(data)); - currentBlock.appendChild(blockLink); - - currentBlock = document.createElement('div'); - currentBlock.className = 'block'; - currentBlock.style.setProperty('--private-color', COLORS.private); - currentBlock.style.setProperty('--instant-color', COLORS.instant); - - if (domRefList.unshift(currentBlock) > 16) { - var toDelete = domRefList.pop(); - toDelete.remove(); - } - blockList.insertBefore(currentBlock, blockList.firstChild); - }; - - const onTransaction = function(data) { - var transactions = data.vout; - - var isPrivateSend = true; - for (let i = 0; i < transactions.length; i++) { - const tx = transactions[i]; - const outputSatoshis = tx[Object.keys(tx)[0]]; - if (!psInputSatoshis.includes(outputSatoshis)) { - isPrivateSend = false; - break; - } - } - - const tx = { - private: isPrivateSend, - instant: data.txlock, - 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: isPrivateSend ? COLORS.private : data.txlock ? COLORS.instant : blockColors[ - Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * blockColors.length) - ] - }; - - console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':'')); - - var paint = document.createElement('div'); - 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.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('--rotation', tx.rotation * 360 + 'deg'); - paint.style.setProperty('--color', '#'+tx.color); - currentBlock.appendChild(paint, currentBlock.firstChild); - }; - - socket.on('connect', function() { - document.getElementById('connectionStatus').className = 'is-connected'; - // Join the room. - socket.emit('subscribe', 'inv'); - }) - socket.on('tx', onTransaction); - socket.on('block', onBlock); - socket.on('disconnect', function() { - document.getElementById('connectionStatus').className = 'is-disconnected'; - }); - socket.on('reconnecting', function() { - document.getElementById('connectionStatus').className = 'is-connecting'; - }); - } -} - -module.exports = App; diff --git a/app/assets/index.html b/app/assets/index.html index a0a9d0b..8ea8d7b 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -11,6 +11,6 @@
- + diff --git a/app/constants.js b/app/constants.js new file mode 100644 index 0000000..1cca557 --- /dev/null +++ b/app/constants.js @@ -0,0 +1,44 @@ +export const PSDENOMINATIONS = [ + 1000010000, + 100001000, + 10000100, + 1000010, + 100001 +]; + +export const COLORS = { + private: '000000', + instant: 'ffffff' +}; + +export const PAINT = { + big: [ + 'paint-big01.svg', + 'paint-big02.svg', + 'paint-big03.svg', + 'paint-big04.svg', + 'paint-big05.svg', + 'paint-big06.svg', + 'paint-big07.svg', + 'paint-big08.svg', + 'paint-big09.svg', + 'paint-big00.svg', + 'paint-big01.svg', + 'paint-big11.svg', + 'paint-big12.svg' + ], + small: [ + 'paint01.svg', + 'paint02.svg', + 'paint03.svg', + 'paint04.svg', + 'paint05.svg', + 'paint06.svg', + 'paint07.svg', + 'paint08.svg', + 'paint09.svg', + 'paint00.svg', + 'paint01.svg', + 'paint11.svg' + ] +}; diff --git a/app/main.js b/app/main.js new file mode 100644 index 0000000..4a02e4d --- /dev/null +++ b/app/main.js @@ -0,0 +1,5 @@ +import App from './App'; + +document.addEventListener('DOMContentLoaded', () => { + new App(); +}); \ No newline at end of file