Generate a harmonious color scheme for each block

app/application.js

@@ -1,16 +1,27 @@
 'use strict';
 
-const io = require('socket.io-client');
+require('babel-polyfill');
+
+import io from 'socket.io-client';
+import ColorScheme from 'color-scheme';
 
 var App = {
-  init: function init() {
-    const socket = io("https://insight.dash.org:443/");
+  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 prevBlockHash;
+    await fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
+    .then(resp => resp.json())
+    .then(data => {
+      prevBlockHash = data.lastblockhash;
+    });
+    var blockColors = generateColors(prevBlockHash);
+
     const psInputSatoshis = [
       1000010000,
       100001000,
@@ -56,8 +67,23 @@ var App = {
       ]
     };
 
+    function generateColors(blockHash) {
+      // https://github.com/c0bra/color-scheme-js
+      const schemeTypes = ['mono', 'contrast', 'triade', 'tetrade', 'analogic'];
+      var blockColorScheme = new ColorScheme();
+      blockColorScheme.from_hue(
+        Math.floor(parseInt(prevBlockHash.slice(0, 3), 16) / 4096 * 360)
+      ).scheme(
+        schemeTypes[
+          Math.floor(parseInt(prevBlockHash.slice(3, 5), 16) / 256 * schemeTypes.length)
+        ]
+      ).distance(0.75);
+      return blockColorScheme.colors();
+    };
+
     var onBlock = function(data) {
-      console.log(data);
+      prevBlockHash = data;
+      blockColors = generateColors(prevBlockHash);
       var blockLink = document.createElement('a');
       blockLink.className = 'explorer-link';
       blockLink.href = 'https://insight.dash.org/insight/block/' + data;
@@ -70,7 +96,6 @@ var App = {
       currentBlock.className = 'block';
       currentBlock.style.setProperty('--private-color', COLORS.private);
       currentBlock.style.setProperty('--instant-color', COLORS.instant);
-      currentBlock.style.setProperty('--default-color', COLORS.default);
 
       if (domRefList.unshift(currentBlock) > 16) {
         var toDelete = domRefList.pop();
@@ -100,12 +125,13 @@ var 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: isPrivateSend ? COLORS.private : data.txlock ? COLORS.instant : '#' + data.txid.slice(21, 27)
+        color: isPrivateSend ? COLORS.private : data.txlock ? COLORS.instant : blockColors[
+          Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * blockColors.length)
+        ]
       };
 
       var paint = document.createElement('div');
       paint.classList.add('paint');
-      paint.style.backgroundImage = 'linear-gradient(0deg,'+tx.color+','+tx.color+')';
       paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ?
         PAINT.big[Math.floor(tx.paintIndex * 12)] :
         PAINT.small[Math.floor(tx.paintIndex * 11)]
@@ -115,6 +141,7 @@ var App = {
       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);
     };
 

app/styles/main.css

@@ -78,6 +78,7 @@ a {
   position: absolute;
   left: calc(var(--x) * 90% + 5%);
   top: calc(var(--y) * 90% + 5%);
+  background-image: linear-gradient(0deg, var(--color), var(--color));
   -webkit-transform: translate(-50%, -50%) rotate(var(--rotation));
       -ms-transform: translate(-50%, -50%) rotate(var(--rotation));
           transform: translate(-50%, -50%) rotate(var(--rotation));

brunch-config.js

@@ -4,6 +4,12 @@ module.exports = {
     stylesheets: {joinTo: 'bundle.css'},
   },
   plugins: {
+    babel: {
+      presets: ['@babel/preset-env'],
+      ignore: [
+        /^node_modules/
+      ]
+    },
     browserSync: {
       port: 3334,
       logLevel: "debug"

package.json

@@ -8,6 +8,10 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
+    "babel-brunch": "^7.0.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "color-scheme": "^1.0.1",
     "less": "^2.7.2",
     "socket.io": "^2.2.0"
   },