diff --git a/app/App.js b/app/App.js index bf10933..958b3e8 100644 --- a/app/App.js +++ b/app/App.js @@ -8,7 +8,6 @@ import { PSDENOMINATIONS, COLORS, PAINT } from './constants'; export default class App { constructor() { - this.blockRefs = []; this.blockList = document.getElementById('blockList'); this.connectionStatus = document.getElementById('connectionStatus'); this.hero = document.getElementById('hero'); @@ -105,38 +104,34 @@ export default class App { blockLink.setAttribute('rel', 'noopener'); blockLink.appendChild(document.createTextNode('🗗')); - fetch('https://insight.dash.org/insight-api/block/' + data) - .then(resp => resp.json()) - .then(data => { - let leftovers = []; - 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 => { - if (item.data_ignored > 3) { - item.remove(); - } else { - if (item.data_ignored) { - item.data_ignored++; - } else { - item.classList.add('stale'); - item.data_ignored = 1; + setTimeout(() => { // to prevent 404 when WS is ahead of regular API + fetch('https://insight.dash.org/insight-api/block/' + data) + .then(resp => resp.json()) + .then(data => { + let leftovers = []; + for (var i in data.tx) { + const txid = data.tx[i]; + let paint = document.getElementById(txid); + if (paint) { + completedBlock.insertBefore(paint, completedBlock.firstChild); } } - }); - completedBlock.appendChild(blockLink); - if (this.blockRefs.unshift(this.completedBlock) > 8) { - var toDelete = this.blockRefs.pop(); - if (toDelete) { - toDelete.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); + } + }); + completedBlock.appendChild(blockLink); + this.blockList.insertBefore(completedBlock, this.blockList.firstChild); + if (this.blockList.children.length > 8) { + this.blockList.lastChild.remove(); } - } - this.blockList.insertBefore(completedBlock, this.blockList.firstChild); - }); + }); + }, 200); } static isPrivateSend(components) { diff --git a/app/assets/assets/bell.mp3 b/app/assets/assets/bell.mp3 deleted file mode 100644 index 9afb2cf..0000000 Binary files a/app/assets/assets/bell.mp3 and /dev/null differ diff --git a/app/assets/assets/creek.mp3 b/app/assets/assets/creek.mp3 deleted file mode 100644 index 204712d..0000000 Binary files a/app/assets/assets/creek.mp3 and /dev/null differ diff --git a/app/assets/assets/metallophone.mp3 b/app/assets/assets/metallophone.mp3 deleted file mode 100644 index 8ca64d9..0000000 Binary files a/app/assets/assets/metallophone.mp3 and /dev/null differ diff --git a/app/assets/assets/paint/paint11.svg b/app/assets/assets/paint/paint11.svg deleted file mode 100644 index 2f96ea2..0000000 --- a/app/assets/assets/paint/paint11.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/assets/splash-big.mp3 b/app/assets/assets/splash-big.mp3 deleted file mode 100644 index e3d91d5..0000000 Binary files a/app/assets/assets/splash-big.mp3 and /dev/null differ diff --git a/app/assets/assets/splash-medium.mp3 b/app/assets/assets/splash-medium.mp3 deleted file mode 100644 index 49653e7..0000000 Binary files a/app/assets/assets/splash-medium.mp3 and /dev/null differ diff --git a/app/assets/assets/splash-tiny.mp3 b/app/assets/assets/splash-tiny.mp3 deleted file mode 100644 index 438dd89..0000000 Binary files a/app/assets/assets/splash-tiny.mp3 and /dev/null differ diff --git a/app/assets/assets/whoosh.mp3 b/app/assets/assets/whoosh.mp3 deleted file mode 100644 index d3492c2..0000000 Binary files a/app/assets/assets/whoosh.mp3 and /dev/null differ diff --git a/app/assets/assets/wood-hit-glass.mp3 b/app/assets/assets/wood-hit-glass.mp3 deleted file mode 100644 index 1888ef4..0000000 Binary files a/app/assets/assets/wood-hit-glass.mp3 and /dev/null differ diff --git a/app/constants.js b/app/constants.js index 46bd483..9cdadea 100644 --- a/app/constants.js +++ b/app/constants.js @@ -24,7 +24,7 @@ export const PAINT = { 'paint-big09.svg', 'paint-big10.svg', 'paint-big11.svg', - 'paint-big12.svg' + 'paint-big12.svg', ], small: [ 'paint01.svg', @@ -37,6 +37,5 @@ export const PAINT = { 'paint08.svg', 'paint09.svg', 'paint10.svg', - 'paint11.svg', ] }; diff --git a/app/styles/main.css b/app/styles/main.css index cc44c4d..02e3d22 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -99,6 +99,10 @@ a { -webkit-mask-position: center; mask-position: center; } +#hero .paint.stale { + background-color: gray; + opacity: calc(1.1 - var(--age) / 10); +} #muteToggle, #connectionStatus { position: fixed;