bitcoinprivate-prefork-website/docs/javascript/Countdown.js

171 lines
4.9 KiB
JavaScript

/* Test command for console
Snapshot: timeNow = timeSnapshot
Confetti: showConfetti()
*/
var canShowCountdown = true;
var setArcs = false;
var doConfettiResize = true;
var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
// Set the date and time after which the snapshot will occur (next discovered block)
var timeSnapshot = 1519837200; // 28th Feb 2018 @ 17:00:00 UTC
// Get current timestamp and set as timeNow via response header of a tiny file at endpoint
var timeNow;
fetch('/favicons/manifest.json?rand='+Math.floor((Math.random()*10000000)+1)).then(function(response) {
var headerDate = response.headers.get('Date')
Date.prototype.getUnixTime = function() { return this.getTime()/1000|0 };
timeNow = new Date(headerDate).getUnixTime();
// Every 1 sec, count down the timer, establish unit values
// and if we've passed the snapshot date & time, switch to that message display
if (canShowCountdown && timeSnapshot > timeNow) {
$("#countdownRoot").css('display',' block');
tickoverCountdown = setInterval(function() {
countdownTime();
establishCountdownValues();
if (timeSnapshot < timeNow) {
showAwaitingBlock();
clearInterval(tickoverCountdown);
}
},1000);
} else {
$("#splashRoot").css('display','block');
}
});
// Increment timer
var countdownTime = function() {
timeNow++;
}
// Establish new unit values
var establishCountdownValues = function() {
var timeRemaining = timeSnapshot-timeNow;
daysRemaining = parseInt(timeRemaining/60/60/24,10);
hoursRemaining = parseInt((timeRemaining-(daysRemaining*60*60*24))/60/60,10);
minsRemaining = parseInt((timeRemaining-(daysRemaining*60*60*24)-(hoursRemaining*60*60))/60,10);
secsRemaining = parseInt(timeRemaining-(daysRemaining*60*60*24)-(hoursRemaining*60*60)-(minsRemaining*60),10);
setUnitPosition('Days', 7, daysRemaining);
setUnitPosition('Hours', 24, hoursRemaining);
setUnitPosition('Mins',60, minsRemaining);
setUnitPosition('Secs',60, secsRemaining);
// If we haven't set arcs around units yet, set animation delay offsets
if (!setArcs) {
// Fade in counter container now
fadeInCountdownContainer();
// Set flag so we don't get here again
setArcs = true;
}
}
// Fade in the counter container
var fadeInCountdownContainer = function() {
$('#countdownContainer').css('opacity', 1);
}
var foundBlocks = {
zcl: false,
btc: false,
}
// Show the awaiting next block message
var showAwaitingBlock = function() {
$('#countdownContainer').css('display','none');
$('#awaitingContainer').css('display','block');
$('#blockDetails').css('display','block');
$('#confetti').css('display','none');
$('#snapshotContainer').css('display','none');
// First Try fetching blocks
fetchBlocks();
// Then poll for blocks every 5 secs
var getBlocksPolling = setInterval(function() {
// Fetch and update blocks
fetchBlocks();
updateBlocks(foundBlocks.zcl, foundBlocks.btc);
// If we have block heights on both ZCL and BTC, show confetti
if (foundBlocks.zcl !== false && foundBlocks.btc !== false) {
clearInterval(getBlocksPolling);
showConfetti();
}
},5000);
}
// Fetch new data from blocks
var fetchBlocks = function() {
// Get block height data from JSON file
fetch('/javascript/blocks.json?rand='+Math.floor((Math.random()*10000000)+1))
// Return the data
.then(function(response) {
return response.json();
// Process the data
}).then(function(jsonData) {
foundBlocks = jsonData;
// Set ZCL block height or placeholder text
$('#awaitingContainerZclassic').html(
foundBlocks.zcl !== false
? foundBlocks.zcl
: "Awaiting..."
);
// Set BTC block height or placeholder text
$('#awaitingContainerBitcoin').html(
foundBlocks.btc !== false
? foundBlocks.btc
: "Awaiting..."
);
// Output error message to console
}).catch(function(err) {
console.log("getBlocksPolling - failed!", err);
})
}
// Update ZCL & BTC block
var updateBlocks = function(zcl, btc) {
if (zcl !== false) {
$('#awaitingContainerZclassic').html(zcl);
}
if (btc !== false) {
$('#awaitingContainerBitcoin').html(btc);
}
}
// Show confetti and snapshot message
var showConfetti = function() {
$('#countdownContainer').css('display','none');
$('#awaitingContainer').css('display','none');
$('#confetti').css('display','block');
$('#snapshotContainer').css('display','block');
$('#blockDetails').css('display','block');
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/javascript/Confetti.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Countdown initial style
var setUnitPosition = function(unit, size, remaining) {
// Set values in DOM elems
$('.counter__'+unit.toLowerCase() + '_progress').attr("stroke-dasharray", CIRCUMFERENCE);
$('#countdown'+unit).text(remaining);
$('#countdown'+unit).attr("data-size", size);
var current = CIRCUMFERENCE - ((CIRCUMFERENCE / size) * remaining)
$('.counter__'+unit.toLowerCase() + '_progress').attr("stroke-dashoffset", current);
}