/* 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); }