2 x JS files added in src and docs
This commit is contained in:
Matt Pass
parent
b91002af40
commit
c58d5f6aaa
|
|
@ -0,0 +1,126 @@
|
|||
/* ----- CONFETTI.js ----- */
|
||||
|
||||
// Adapted from: https://codepen.io/linrock/pen/Amdhr
|
||||
(function() {
|
||||
var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
|
||||
|
||||
NUM_CONFETTI = 600;
|
||||
|
||||
COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
|
||||
|
||||
PI_2 = 2 * Math.PI;
|
||||
|
||||
canvas = document.getElementById("confetti");
|
||||
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
window.w = 0;
|
||||
|
||||
window.h = 0;
|
||||
|
||||
resizeWindow = function() {
|
||||
window.w = canvas.width = window.innerWidth;
|
||||
return window.h = canvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeWindow, false);
|
||||
|
||||
if (doConfettiResize) {
|
||||
doConfettiResize = false;
|
||||
setTimeout(resizeWindow, 0);
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
return setTimeout(resizeWindow, 0);
|
||||
};
|
||||
|
||||
range = function(a, b) {
|
||||
return (b - a) * Math.random() + a;
|
||||
};
|
||||
|
||||
drawCircle = function(x, y, r, style) {
|
||||
context.beginPath();
|
||||
context.arc(x, y, r, 0, PI_2, false);
|
||||
context.fillStyle = style;
|
||||
return context.fill();
|
||||
};
|
||||
|
||||
xpos = 0.5;
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
return xpos = e.pageX / w;
|
||||
};
|
||||
|
||||
window.requestAnimationFrame = (function() {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
|
||||
return window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
Confetti = (function() {
|
||||
function Confetti() {
|
||||
this.style = COLORS[~~range(0, 5)];
|
||||
this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
|
||||
this.r = ~~range(2, 6);
|
||||
this.r2 = 2 * this.r;
|
||||
this.replace();
|
||||
}
|
||||
|
||||
Confetti.prototype.replace = function() {
|
||||
this.opacity = 0;
|
||||
this.dop = 0.03 * range(1, 4);
|
||||
this.x = range(-this.r2, w - this.r2);
|
||||
this.y = range(-20, h - this.r2);
|
||||
this.xmax = w - this.r;
|
||||
this.ymax = h - this.r;
|
||||
this.vx = range(0, 2) + 8 * xpos - 5;
|
||||
return this.vy = 0.7 * this.r + range(-1, 1);
|
||||
};
|
||||
|
||||
Confetti.prototype.draw = function() {
|
||||
var ref;
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.opacity += this.dop;
|
||||
if (this.opacity > 1) {
|
||||
this.opacity = 1;
|
||||
this.dop *= -1;
|
||||
}
|
||||
if (this.opacity < 0 || this.y > this.ymax) {
|
||||
this.replace();
|
||||
}
|
||||
if (!((0 < (ref = this.x) && ref < this.xmax))) {
|
||||
this.x = (this.x + this.xmax) % this.xmax;
|
||||
}
|
||||
return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
|
||||
};
|
||||
|
||||
return Confetti;
|
||||
|
||||
})();
|
||||
|
||||
confetti = (function() {
|
||||
var j, ref, results;
|
||||
results = [];
|
||||
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
|
||||
results.push(new Confetti);
|
||||
}
|
||||
return results;
|
||||
})();
|
||||
|
||||
window.step = function() {
|
||||
var c, j, len, results;
|
||||
requestAnimationFrame(step);
|
||||
context.clearRect(0, 0, w, h);
|
||||
results = [];
|
||||
for (j = 0, len = confetti.length; j < len; j++) {
|
||||
c = confetti[j];
|
||||
results.push(c.draw());
|
||||
}
|
||||
return results;
|
||||
};
|
||||
|
||||
step();
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
var setArcs = false;
|
||||
var doConfettiResize = true;
|
||||
|
||||
// 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
|
||||
$.get("/local-data.json?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
timeNow = data.timestamp;
|
||||
// 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 (timeSnapshot > timeNow) {
|
||||
document.getElementById("countdownDisplay").style.display = "block";
|
||||
tickoverCountdown = setInterval(function() {
|
||||
countdownTime();
|
||||
establishUnitValues();
|
||||
if (timeSnapshot < timeNow) {
|
||||
showAwaitingBlock();
|
||||
clearInterval(tickoverCountdown);
|
||||
}
|
||||
},1000);
|
||||
} else {
|
||||
document.getElementById("regularDisplay").style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// Increment timer
|
||||
var countdownTime = function() {
|
||||
timeNow++;
|
||||
}
|
||||
|
||||
// Establish new unit values
|
||||
var establishUnitValues = function() {
|
||||
var timeRemaining = timeSnapshot-timeNow;
|
||||
daysLeft = parseInt(timeRemaining/60/60/24,10);
|
||||
hoursLeft = parseInt((timeRemaining-(daysLeft*60*60*24))/60/60,10);
|
||||
minsLeft = parseInt((timeRemaining-(daysLeft*60*60*24)-(hoursLeft*60*60))/60,10);
|
||||
secsLeft = parseInt(timeRemaining-(daysLeft*60*60*24)-(hoursLeft*60*60)-(minsLeft*60),10);
|
||||
// Set values in DOM elems
|
||||
$('#daysLeft').text(daysLeft);
|
||||
$('#hoursLeft').text(hoursLeft);
|
||||
$('#minsLeft').text(minsLeft);
|
||||
$('#secsLeft').text(secsLeft);
|
||||
$('#counterMobile').html(daysLeft+" days, "+hoursLeft+" hours<br>"+minsLeft+" mins, "+secsLeft+" secs");
|
||||
|
||||
// Set styles for DOM elems based on unit values
|
||||
setUnitStyles('days',5);
|
||||
setUnitStyles('hours',12);
|
||||
setUnitStyles('mins',30);
|
||||
setUnitStyles('secs',30);
|
||||
|
||||
// If we haven't set arcs around units yet, set animation delay offsets
|
||||
if (!setArcs) {
|
||||
setAnimationDelays('days',((daysLeft*60*60*24)-(10*60*60*24)+2)+"s");
|
||||
setAnimationDelays('hours',((hoursLeft*60*60)-(24*60*60)+2)+"s");
|
||||
setAnimationDelays('mins',((minsLeft*60)-(60*60)+2)+"s");
|
||||
setAnimationDelays('secs',(secsLeft-60+2)+"s");
|
||||
// Fade in counter box now
|
||||
fadeInCounterBox();
|
||||
// Set flag so we don't get here again
|
||||
setArcs = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Set unit styles for various DOM elems for it
|
||||
var setUnitStyles = function(unit,halfUnit) {
|
||||
document.getElementById(unit+'Counter').style.marginLeft = window[unit+'Left'] <= halfUnit ? "60px" : "0";
|
||||
document.getElementById(unit+'Counter').style.marginRight = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Wrapper').style.left = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Filler').style.opacity = window[unit+'Left'] <= halfUnit ? "0" : "1";
|
||||
document.getElementById(unit+'Left').style.marginLeft = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Text').style.marginLeft = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
}
|
||||
|
||||
// Set animation delays for 3 DOM elems for unit
|
||||
var setAnimationDelays = function(unit,delay) {
|
||||
document.getElementById(unit+'Spinner').style.animationDelay =
|
||||
document.getElementById(unit+'Filler').style.animationDelay =
|
||||
document.getElementById(unit+'Mask').style.animationDelay =
|
||||
delay;
|
||||
}
|
||||
|
||||
// Fade in the counter box
|
||||
var fadeInCounterBox = function() {
|
||||
$('#counterBox').css('opacity', 1);
|
||||
}
|
||||
|
||||
// Show the awaiting next block message
|
||||
var showAwaitingBlock = function() {
|
||||
document.getElementById('counterBox').style.display = 'none';
|
||||
document.getElementById('awaitingBlock').style.display = 'block';
|
||||
document.getElementById('confetti').style.display = 'none';
|
||||
document.getElementById('snapshotBox').style.display = 'none';
|
||||
// Get the current block height
|
||||
$.get("https://zcl-explorer.com/api/status?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
// Set it and display awaiting next block message containing the block height we're waiting for
|
||||
initialBlock = data.info.blocks;
|
||||
document.getElementById('awaitingBlock').innerHTML = "Awaiting discovery<br>of next block ("+(initialBlock+1)+")...";
|
||||
});
|
||||
// Poll every 10 secs to check if we've discovered that next block height yet
|
||||
var getZCLDataPolling = setInterval(function() {
|
||||
$.get("https://zcl-explorer.com/api/status?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
if (data.info.blocks != initialBlock) {
|
||||
clearInterval(getZCLDataPolling);
|
||||
showConfetti();
|
||||
}
|
||||
});
|
||||
},10000);
|
||||
}
|
||||
|
||||
// Show confetti and snapshot message
|
||||
var showConfetti = function() {
|
||||
document.getElementById('counterBox').style.display = 'none';
|
||||
document.getElementById('awaitingBlock').style.display = 'none';
|
||||
document.getElementById('confetti').style.display = 'block';
|
||||
document.getElementById('snapshotBox').style.display = 'block';
|
||||
}
|
||||
|
||||
// Testing snapshot
|
||||
// timeNow = timeSnapshot;
|
||||
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/* ----- CONFETTI.js ----- */
|
||||
|
||||
// Adapted from: https://codepen.io/linrock/pen/Amdhr
|
||||
(function() {
|
||||
var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
|
||||
|
||||
NUM_CONFETTI = 600;
|
||||
|
||||
COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
|
||||
|
||||
PI_2 = 2 * Math.PI;
|
||||
|
||||
canvas = document.getElementById("confetti");
|
||||
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
window.w = 0;
|
||||
|
||||
window.h = 0;
|
||||
|
||||
resizeWindow = function() {
|
||||
window.w = canvas.width = window.innerWidth;
|
||||
return window.h = canvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeWindow, false);
|
||||
|
||||
if (doConfettiResize) {
|
||||
doConfettiResize = false;
|
||||
setTimeout(resizeWindow, 0);
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
return setTimeout(resizeWindow, 0);
|
||||
};
|
||||
|
||||
range = function(a, b) {
|
||||
return (b - a) * Math.random() + a;
|
||||
};
|
||||
|
||||
drawCircle = function(x, y, r, style) {
|
||||
context.beginPath();
|
||||
context.arc(x, y, r, 0, PI_2, false);
|
||||
context.fillStyle = style;
|
||||
return context.fill();
|
||||
};
|
||||
|
||||
xpos = 0.5;
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
return xpos = e.pageX / w;
|
||||
};
|
||||
|
||||
window.requestAnimationFrame = (function() {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
|
||||
return window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
Confetti = (function() {
|
||||
function Confetti() {
|
||||
this.style = COLORS[~~range(0, 5)];
|
||||
this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
|
||||
this.r = ~~range(2, 6);
|
||||
this.r2 = 2 * this.r;
|
||||
this.replace();
|
||||
}
|
||||
|
||||
Confetti.prototype.replace = function() {
|
||||
this.opacity = 0;
|
||||
this.dop = 0.03 * range(1, 4);
|
||||
this.x = range(-this.r2, w - this.r2);
|
||||
this.y = range(-20, h - this.r2);
|
||||
this.xmax = w - this.r;
|
||||
this.ymax = h - this.r;
|
||||
this.vx = range(0, 2) + 8 * xpos - 5;
|
||||
return this.vy = 0.7 * this.r + range(-1, 1);
|
||||
};
|
||||
|
||||
Confetti.prototype.draw = function() {
|
||||
var ref;
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.opacity += this.dop;
|
||||
if (this.opacity > 1) {
|
||||
this.opacity = 1;
|
||||
this.dop *= -1;
|
||||
}
|
||||
if (this.opacity < 0 || this.y > this.ymax) {
|
||||
this.replace();
|
||||
}
|
||||
if (!((0 < (ref = this.x) && ref < this.xmax))) {
|
||||
this.x = (this.x + this.xmax) % this.xmax;
|
||||
}
|
||||
return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
|
||||
};
|
||||
|
||||
return Confetti;
|
||||
|
||||
})();
|
||||
|
||||
confetti = (function() {
|
||||
var j, ref, results;
|
||||
results = [];
|
||||
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
|
||||
results.push(new Confetti);
|
||||
}
|
||||
return results;
|
||||
})();
|
||||
|
||||
window.step = function() {
|
||||
var c, j, len, results;
|
||||
requestAnimationFrame(step);
|
||||
context.clearRect(0, 0, w, h);
|
||||
results = [];
|
||||
for (j = 0, len = confetti.length; j < len; j++) {
|
||||
c = confetti[j];
|
||||
results.push(c.draw());
|
||||
}
|
||||
return results;
|
||||
};
|
||||
|
||||
step();
|
||||
|
||||
}).call(this);
|
||||
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
var setArcs = false;
|
||||
var doConfettiResize = true;
|
||||
|
||||
// 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
|
||||
$.get("/local-data.json?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
timeNow = data.timestamp;
|
||||
// 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 (timeSnapshot > timeNow) {
|
||||
document.getElementById("countdownDisplay").style.display = "block";
|
||||
tickoverCountdown = setInterval(function() {
|
||||
countdownTime();
|
||||
establishUnitValues();
|
||||
if (timeSnapshot < timeNow) {
|
||||
showAwaitingBlock();
|
||||
clearInterval(tickoverCountdown);
|
||||
}
|
||||
},1000);
|
||||
} else {
|
||||
document.getElementById("regularDisplay").style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// Increment timer
|
||||
var countdownTime = function() {
|
||||
timeNow++;
|
||||
}
|
||||
|
||||
// Establish new unit values
|
||||
var establishUnitValues = function() {
|
||||
var timeRemaining = timeSnapshot-timeNow;
|
||||
daysLeft = parseInt(timeRemaining/60/60/24,10);
|
||||
hoursLeft = parseInt((timeRemaining-(daysLeft*60*60*24))/60/60,10);
|
||||
minsLeft = parseInt((timeRemaining-(daysLeft*60*60*24)-(hoursLeft*60*60))/60,10);
|
||||
secsLeft = parseInt(timeRemaining-(daysLeft*60*60*24)-(hoursLeft*60*60)-(minsLeft*60),10);
|
||||
// Set values in DOM elems
|
||||
$('#daysLeft').text(daysLeft);
|
||||
$('#hoursLeft').text(hoursLeft);
|
||||
$('#minsLeft').text(minsLeft);
|
||||
$('#secsLeft').text(secsLeft);
|
||||
$('#counterMobile').html(daysLeft+" days, "+hoursLeft+" hours<br>"+minsLeft+" mins, "+secsLeft+" secs");
|
||||
|
||||
// Set styles for DOM elems based on unit values
|
||||
setUnitStyles('days',5);
|
||||
setUnitStyles('hours',12);
|
||||
setUnitStyles('mins',30);
|
||||
setUnitStyles('secs',30);
|
||||
|
||||
// If we haven't set arcs around units yet, set animation delay offsets
|
||||
if (!setArcs) {
|
||||
setAnimationDelays('days',((daysLeft*60*60*24)-(10*60*60*24)+2)+"s");
|
||||
setAnimationDelays('hours',((hoursLeft*60*60)-(24*60*60)+2)+"s");
|
||||
setAnimationDelays('mins',((minsLeft*60)-(60*60)+2)+"s");
|
||||
setAnimationDelays('secs',(secsLeft-60+2)+"s");
|
||||
// Fade in counter box now
|
||||
fadeInCounterBox();
|
||||
// Set flag so we don't get here again
|
||||
setArcs = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Set unit styles for various DOM elems for it
|
||||
var setUnitStyles = function(unit,halfUnit) {
|
||||
document.getElementById(unit+'Counter').style.marginLeft = window[unit+'Left'] <= halfUnit ? "60px" : "0";
|
||||
document.getElementById(unit+'Counter').style.marginRight = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Wrapper').style.left = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Filler').style.opacity = window[unit+'Left'] <= halfUnit ? "0" : "1";
|
||||
document.getElementById(unit+'Left').style.marginLeft = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
document.getElementById(unit+'Text').style.marginLeft = window[unit+'Left'] <= halfUnit ? "-60px" : "0";
|
||||
}
|
||||
|
||||
// Set animation delays for 3 DOM elems for unit
|
||||
var setAnimationDelays = function(unit,delay) {
|
||||
document.getElementById(unit+'Spinner').style.animationDelay =
|
||||
document.getElementById(unit+'Filler').style.animationDelay =
|
||||
document.getElementById(unit+'Mask').style.animationDelay =
|
||||
delay;
|
||||
}
|
||||
|
||||
// Fade in the counter box
|
||||
var fadeInCounterBox = function() {
|
||||
$('#counterBox').css('opacity', 1);
|
||||
}
|
||||
|
||||
// Show the awaiting next block message
|
||||
var showAwaitingBlock = function() {
|
||||
document.getElementById('counterBox').style.display = 'none';
|
||||
document.getElementById('awaitingBlock').style.display = 'block';
|
||||
document.getElementById('confetti').style.display = 'none';
|
||||
document.getElementById('snapshotBox').style.display = 'none';
|
||||
// Get the current block height
|
||||
$.get("https://zcl-explorer.com/api/status?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
// Set it and display awaiting next block message containing the block height we're waiting for
|
||||
initialBlock = data.info.blocks;
|
||||
document.getElementById('awaitingBlock').innerHTML = "Awaiting discovery<br>of next block ("+(initialBlock+1)+")...";
|
||||
});
|
||||
// Poll every 10 secs to check if we've discovered that next block height yet
|
||||
var getZCLDataPolling = setInterval(function() {
|
||||
$.get("https://zcl-explorer.com/api/status?q=getInfo×tamp="+Date.now(), function(data) {
|
||||
if (data.info.blocks != initialBlock) {
|
||||
clearInterval(getZCLDataPolling);
|
||||
showConfetti();
|
||||
}
|
||||
});
|
||||
},10000);
|
||||
}
|
||||
|
||||
// Show confetti and snapshot message
|
||||
var showConfetti = function() {
|
||||
document.getElementById('counterBox').style.display = 'none';
|
||||
document.getElementById('awaitingBlock').style.display = 'none';
|
||||
document.getElementById('confetti').style.display = 'block';
|
||||
document.getElementById('snapshotBox').style.display = 'block';
|
||||
}
|
||||
|
||||
// Testing snapshot
|
||||
// timeNow = timeSnapshot;
|
||||
|
||||
Loading…
Reference in New Issue