👽🕋 Checkpoint

./confetti.js:7435365/2847 ./script.js:7435365/4233 ./index.html:7435365/336 ./style.css:7435365/767
2019-10-06 19:14:50 +00:00 · 2019-10-06 19:14:50 +00:00 · e78507a7cc
parent e44cd7b3ad
commit e78507a7cc
4 changed files with 58 additions and 31 deletions
--- a/confetti.js
+++ b/confetti.js
@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ConfettiGenerator=t()}(this,function(){"use strict";return function(e){var i={target:"confetti-holder",max:80,size:1,animate:!0,props:["circle","square","triangle","line"],colors:[[165,104,246],[230,61,135],[0,199,228],[253,214,126]],clock:25,interval:null,rotate:!1,width:window.innerWidth,height:window.innerHeight};e&&(e.target&&(i.target=e.target),e.max&&(i.max=e.max),e.size&&(i.size=e.size),null!=e.animate&&(i.animate=e.animate),e.props&&(i.props=e.props),e.colors&&(i.colors=e.colors),e.clock&&(i.clock=e.clock),e.width&&(i.width=e.width),e.height&&(i.height=e.height),null!=e.rotate&&(i.rotate=e.rotate));var t=document.getElementById(i.target),a=t.getContext("2d"),r=[];function o(e,t){e||(e=1);var r=Math.random()*e;return t?Math.floor(r):r}var n=i.props.reduce(function(e,t){return e+(t.weight||1)},0);function s(){var e=i.props[function(){for(var e=Math.random()*n,t=0;t<i.props.length;++t){var r=i.props[t].weight||1;if(e<r)return t;e-=r}}()];return{prop:e.type?e.type:e,x:o(i.width),y:o(i.height),src:e.src,radius:o(4)+1,size:e.size,rotate:i.rotate,line:Math.floor(o(65)-30),angles:[o(10,!0)+2,o(10,!0)+2,o(10,!0)+2,o(10,!0)+2],color:i.colors[o(i.colors.length,!0)],rotation:o(360,!0)*Math.PI/180,speed:o(i.clock/7)+i.clock/30}}function l(e){switch(a.fillStyle=a.strokeStyle="rgba("+e.color+", "+(3<e.radius?.8:.4)+")",a.beginPath(),e.prop){case"circle":a.moveTo(e.x,e.y),a.arc(e.x,e.y,e.radius*i.size,0,2*Math.PI,!0),a.fill();break;case"triangle":a.moveTo(e.x,e.y),a.lineTo(e.x+e.angles[0]*i.size,e.y+e.angles[1]*i.size),a.lineTo(e.x+e.angles[2]*i.size,e.y+e.angles[3]*i.size),a.closePath(),a.fill();break;case"line":a.moveTo(e.x,e.y),a.lineTo(e.x+e.line*i.size,e.y+5*e.radius),a.lineWidth=2*i.size,a.stroke();break;case"square":a.save(),a.translate(e.x+15,e.y+5),a.rotate(e.rotation),a.fillRect(-15*i.size,-5*i.size,15*i.size,5*i.size),a.restore();break;case"svg":a.save();var t=new Image;t.src=e.src;var r=e.size||15;a.translate(e.x+r/2,e.y+r/2),e.rotate&&a.rotate(e.rotation),a.drawImage(t,-r/2*i.size,-r/2*i.size,r*i.size,r*i.size),a.restore()}}return{render:function(){t.width=i.width,t.height=i.height,r=[];for(var e=0;e<i.max;e++)r.push(s());return requestAnimationFrame(function e(){for(var t in a.clearRect(0,0,i.width,i.height),r)l(r[t]);!function(){for(var e=0;e<i.max;e++){var t=r[e];i.animate&&(t.y+=t.speed),t.rotate&&(t.rotation+=t.speed/35),(0<=t.speed&&i.height<t.y||t.speed<0&&t.y<0)&&(r[e]=t,r[e].x=o(i.width,!0),r[e].y=t.speed<0?parseFloat(i.height):-10)}}(),i.animate&&requestAnimationFrame(e)})},clear:function(){i.animate=!1,clearInterval(i.interval),requestAnimationFrame(function(){a.clearRect(0,0,t.width,t.height);var e=t.width;t.width=1,t.width=e})}}}});
--- a/index.html
+++ b/index.html
@ -21,7 +21,9 @@
      <p id="isit"></p>
    </div>

-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
+    <div class="glitchButton" style="position:fixed; top:1vw; right:1vw;"></div>
    <script src="https://button.glitch.me/button.js"></script>
+    
+    <a id="pilink" href="#">&pi;</a>
  </body>
 </html>
--- a/script.js
+++ b/script.js
@ -1,48 +1,49 @@
 var birthday = {
  now: null,
  day: 25,
-  month: 6,   // June
+  month: 6, // June
  match: false,
  check: function() {
    this.now = new Date();
-    if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month) this.activate()
-    else this.deactivate()
+    if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month)
+      this.activate();
+    else this.deactivate();
  },
  activate: function() {
-    document.getElementById('isit').innerHTML = "Yes!"
-    elementClass.remove(document.getElementById('isit'), 'nope')
-    elementClass.add(document.getElementById('isit'), 'yep')
+    document.getElementById("isit").innerHTML = "Yes!";
+    elementClass.remove(document.getElementById("isit"), "nope");
+    elementClass.add(document.getElementById("isit"), "yep");
    confetti.render();
  },
  deactivate: function() {
-    document.getElementById('isit').innerHTML = "No"
-    elementClass.remove(document.getElementById('isit'), 'yep')
-    elementClass.add(document.getElementById('isit'), 'nope')
+    document.getElementById("isit").innerHTML = "No";
+    elementClass.remove(document.getElementById("isit"), "yep");
+    elementClass.add(document.getElementById("isit"), "nope");

    confetti.clear();
  }
-}
+};

 var confetti = {
  displayed: false,
  confetti: null,
-  target: 'confetti-holder',
+  target: "confetti-holder",
  max: null,
  size: 1,
  animate: true,
-  props: ['circle', 'square', 'triangle', 'line'],
-  colors: [[165,104,246], [230,61,135], [0,199,228], [253,214,126]],
+  props: ["circle", "square", "triangle", "line"],
+  colors: [[165, 104, 246], [230, 61, 135], [0, 199, 228], [253, 214, 126]],
  clock: 25,
  rotate: true,
  width: null,
  height: null,
  render: function() {
-    this.width = window.innerWidth
-    this.height = window.innerHeight
-    this.max = Math.floor(this.width * this.height / 1799.04)
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+    this.max = Math.floor((this.width * this.height) / 1799.04);
    if (this.confetti) this.confetti.clear();

-    this.confetti = new ConfettiGenerator(this)
+    this.confetti = new ConfettiGenerator(this);
    this.confetti.render();
    this.displayed = true;
  },
@ -52,31 +53,37 @@ var confetti = {
    this.confetti.clear();
    this.displayed = false;
  }
-}
+};

 var elementClass = {
  has: function(e, c) {
-    return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)'));
+    return !!e.className.match(new RegExp("(\\s|^)" + c + "(\\s|$)"));
  },
  add: function(e, c) {
-    if (!this.has(e,c)) e.className += " " + c;
+    if (!this.has(e, c)) e.className += " " + c;
  },
  remove: function(e, c) {
-    if (this.has(e,c)) {
-      var r = new RegExp('(\\s|^)' + c + '(\\s|$)');
-      e.className=e.className.replace(r, ' ');
+    if (this.has(e, c)) {
+      var r = new RegExp("(\\s|^)" + c + "(\\s|$)");
+      e.className = e.className.replace(r, " ");
    }
-  },
-}
+  }
+};

 window.onload = function() {
  birthday.check();
+  
+  document.getElementById('pilink')
 };

-window.addEventListener('resize', function() {
-  if (confetti.displayed) confetti.render();
-}, false);
+window.addEventListener(
+  "resize",
+  function() {
+    if (confetti.displayed) confetti.render();
+  },
+  false
+);

-window.setInterval(function(){
+window.setInterval(function() {
  birthday.check();
-}, 5000);
+}, 5000);
--- a/style.css
+++ b/style.css
@ -31,6 +31,23 @@ body {
  font-size: 16vw;
 }

+#pilink {
+  position: fixed;
+  bottom: 1vw;
+  right: 1vw;
+  font-family: 'Times New Roman', serif;
+  font-size: 1.2vw;
+}
+
+#pilink a {
+  text-decoration: none;
+  color: #6e7f80;
+}
+
+#pilink a:hover {
+  color: #FF0000;
+}
+
 p.nope {
  color: #888888;
 }
				`@ -0,0 +1 @@`
				!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e\|\|self).ConfettiGenerator=t()}(this,function(){"use strict";return function(e){var i={target:"confetti-holder",max:80,size:1,animate:!0,props:["circle","square","triangle","line"],colors:[[165,104,246],[230,61,135],[0,199,228],[253,214,126]],clock:25,interval:null,rotate:!1,width:window.innerWidth,height:window.innerHeight};e&&(e.target&&(i.target=e.target),e.max&&(i.max=e.max),e.size&&(i.size=e.size),null!=e.animate&&(i.animate=e.animate),e.props&&(i.props=e.props),e.colors&&(i.colors=e.colors),e.clock&&(i.clock=e.clock),e.width&&(i.width=e.width),e.height&&(i.height=e.height),null!=e.rotate&&(i.rotate=e.rotate));var t=document.getElementById(i.target),a=t.getContext("2d"),r=[];function o(e,t){e\|\|(e=1);var r=Math.random()e;return t?Math.floor(r):r}var n=i.props.reduce(function(e,t){return e+(t.weight\|\|1)},0);function s(){var e=i.props[function(){for(var e=Math.random()n,t=0;t<i.props.length;++t){var r=i.props[t].weight\|\|1;if(e<r)return t;e-=r}}()];return{prop:e.type?e.type:e,x:o(i.width),y:o(i.height),src:e.src,radius:o(4)+1,size:e.size,rotate:i.rotate,line:Math.floor(o(65)-30),angles:[o(10,!0)+2,o(10,!0)+2,o(10,!0)+2,o(10,!0)+2],color:i.colors[o(i.colors.length,!0)],rotation:o(360,!0)Math.PI/180,speed:o(i.clock/7)+i.clock/30}}function l(e){switch(a.fillStyle=a.strokeStyle="rgba("+e.color+", "+(3<e.radius?.8:.4)+")",a.beginPath(),e.prop){case"circle":a.moveTo(e.x,e.y),a.arc(e.x,e.y,e.radiusi.size,0,2Math.PI,!0),a.fill();break;case"triangle":a.moveTo(e.x,e.y),a.lineTo(e.x+e.angles[0]i.size,e.y+e.angles[1]i.size),a.lineTo(e.x+e.angles[2]i.size,e.y+e.angles[3]i.size),a.closePath(),a.fill();break;case"line":a.moveTo(e.x,e.y),a.lineTo(e.x+e.linei.size,e.y+5e.radius),a.lineWidth=2i.size,a.stroke();break;case"square":a.save(),a.translate(e.x+15,e.y+5),a.rotate(e.rotation),a.fillRect(-15i.size,-5i.size,15i.size,5i.size),a.restore();break;case"svg":a.save();var t=new Image;t.src=e.src;var r=e.size\|\|15;a.translate(e.x+r/2,e.y+r/2),e.rotate&&a.rotate(e.rotation),a.drawImage(t,-r/2i.size,-r/2i.size,ri.size,ri.size),a.restore()}}return{render:function(){t.width=i.width,t.height=i.height,r=[];for(var e=0;e<i.max;e++)r.push(s());return requestAnimationFrame(function e(){for(var t in a.clearRect(0,0,i.width,i.height),r)l(r[t]);!function(){for(var e=0;e<i.max;e++){var t=r[e];i.animate&&(t.y+=t.speed),t.rotate&&(t.rotation+=t.speed/35),(0<=t.speed&&i.height<t.y\|\|t.speed<0&&t.y<0)&&(r[e]=t,r[e].x=o(i.width,!0),r[e].y=t.speed<0?parseFloat(i.height):-10)}}(),i.animate&&requestAnimationFrame(e)})},clear:function(){i.animate=!1,clearInterval(i.interval),requestAnimationFrame(function(){a.clearRect(0,0,t.width,t.height);var e=t.width;t.width=1,t.width=e})}}}});