From fe15cf0eceebb7b871901156374f058483825585 Mon Sep 17 00:00:00 2001
From: anyunderstanding
Date: Thu, 6 Jun 2024 14:51:03 +0200
Subject: the greates version ever
---
cooler/assets/flaggy_base.svg | 22 ++++
cooler/assets/flaggy_happy.svg | 22 ++++
cooler/assets/flaggy_sad.svg | 22 ++++
cooler/assets/rock.svg | 14 +++
cooler/index.html | 66 ++++++++++
cooler/script.js | 274 +++++++++++++++++++++++++++++++++++++++++
cooler/style.css | 152 +++++++++++++++++++++++
uncool/style.css | 77 ------------
8 files changed, 572 insertions(+), 77 deletions(-)
create mode 100644 cooler/assets/flaggy_base.svg
create mode 100644 cooler/assets/flaggy_happy.svg
create mode 100644 cooler/assets/flaggy_sad.svg
create mode 100644 cooler/assets/rock.svg
create mode 100644 cooler/index.html
create mode 100644 cooler/script.js
create mode 100644 cooler/style.css
delete mode 100644 uncool/style.css
diff --git a/cooler/assets/flaggy_base.svg b/cooler/assets/flaggy_base.svg
new file mode 100644
index 0000000..5d76e42
--- /dev/null
+++ b/cooler/assets/flaggy_base.svg
@@ -0,0 +1,22 @@
+
diff --git a/cooler/assets/flaggy_happy.svg b/cooler/assets/flaggy_happy.svg
new file mode 100644
index 0000000..ea11325
--- /dev/null
+++ b/cooler/assets/flaggy_happy.svg
@@ -0,0 +1,22 @@
+
diff --git a/cooler/assets/flaggy_sad.svg b/cooler/assets/flaggy_sad.svg
new file mode 100644
index 0000000..3b68a4f
--- /dev/null
+++ b/cooler/assets/flaggy_sad.svg
@@ -0,0 +1,22 @@
+
diff --git a/cooler/assets/rock.svg b/cooler/assets/rock.svg
new file mode 100644
index 0000000..9279f1b
--- /dev/null
+++ b/cooler/assets/rock.svg
@@ -0,0 +1,14 @@
+
diff --git a/cooler/index.html b/cooler/index.html
new file mode 100644
index 0000000..03f8cab
--- /dev/null
+++ b/cooler/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ LARS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Are you worthy of flaggy?
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/cooler/script.js b/cooler/script.js
new file mode 100644
index 0000000..3425b7f
--- /dev/null
+++ b/cooler/script.js
@@ -0,0 +1,274 @@
+gsap.registerPlugin(TextPlugin, EasePack);
+
+var tl = gsap.timeline({defaults: {duration: 2, ease: "none"}});
+
+
+
+
+
+
+const elts = {
+ text1: document.getElementById("text1"),
+ text2: document.getElementById("text2")
+};
+
+const texts = [
+ "L",
+ "A",
+ "R",
+ "S",
+];
+
+const morphTime = 1;
+const cooldownTime = 0.25;
+
+let textIndex = texts.length - 1;
+let time = new Date();
+let morph = 0;
+let cooldown = cooldownTime;
+
+elts.text1.textContent = texts[textIndex % texts.length];
+elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+
+function doMorph() {
+ morph -= cooldown;
+ cooldown = 0;
+
+ let fraction = morph / morphTime;
+
+ if (fraction > 1) {
+ cooldown = cooldownTime;
+ fraction = 1;
+ }
+
+ setMorph(fraction);
+}
+
+function setMorph(fraction) {
+ elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+ elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+
+ fraction = 1 - fraction;
+ elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+ elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+
+ elts.text1.textContent = texts[textIndex % texts.length];
+ elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+}
+
+function doCooldown() {
+ morph = 0;
+
+ elts.text2.style.filter = "";
+ elts.text2.style.opacity = "100%";
+
+ elts.text1.style.filter = "";
+ elts.text1.style.opacity = "0%";
+}
+
+function animate() {
+ requestAnimationFrame(animate);
+
+ let newTime = new Date();
+ let shouldIncrementIndex = cooldown > 0;
+ let dt = (newTime - time) / 1000;
+ time = newTime;
+
+ cooldown -= dt;
+
+ if (cooldown <= 0) {
+ if (shouldIncrementIndex) {
+ textIndex++;
+ }
+
+ doMorph();
+ } else {
+ doCooldown();
+ }
+}
+
+animate();
+
+flaggy_neutral = document.getElementById("flaggy_neutral");
+flaggy_happy = document.getElementById("flaggy_happy");
+flaggy_sad = document.getElementById("flaggy_sad");
+all_flaggies = [flaggy_sad, flaggy_happy, flaggy_neutral];
+// Make the DIV element draggable:
+
+for (let i = 0; i < all_flaggies.length; i++) {
+ dragElement(all_flaggies[i]);
+}
+
+
+let rotCount = 0;
+let check = null
+
+function dragElement(elmnt) {
+ var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+ if (document.getElementById(elmnt.id + "header")) {
+ // if present, the header is where you move the DIV from:
+ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+ } else {
+ // otherwise, move the DIV from anywhere inside the DIV:
+ elmnt.onmousedown = dragMouseDown;
+ }
+
+ function dragMouseDown(e) {
+ if (check === null) {
+ check = prompt("Is L.A.R.S. the best CTF team in the world?", "Yes")
+ }
+ if (check.toLowerCase() !== "yes") {
+ flaggy_neutral.style.display = "none";
+ flaggy_sad.style.display = "block";
+ flaggy_happy.style.display = "none";
+
+ alert("You are not allowed to pull out the flaggy until you admit that L.A.R.S. is the best CTF team in the world!")
+ check = null;
+ return;
+ }
+ flaggy_neutral.style.display = "none";
+ flaggy_sad.style.display = "none";
+ flaggy_happy.style.display = "block";
+
+
+ e = e || window.event;
+ e.preventDefault();
+ // get the mouse cursor position at startup:
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ // call a function whenever the cursor moves:
+ document.onmousemove = elementDrag;
+ }
+
+ function elementDrag(e) {
+
+ e = e || window.event;
+ e.preventDefault();
+ // calculate the new cursor position:
+
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ // set the element's new position:
+ let angle = Math.floor(Math.random() * 20) - 10;
+
+ for (let i = 0; i < all_flaggies.length; i++) {
+ let elmnt = all_flaggies[i];
+ elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+ elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+
+
+ if (rotCount % 10 === 0)
+ elmnt.style.transform = "rotate(" + angle + "deg)";
+ }
+
+
+ rotCount += 1;
+ }
+
+ elmnt.offsetTop - pos2
+
+ function closeDragElement() {
+ // stop moving when mouse button is released:
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
+}
+
+
+
+
+
+
+
+
+var container = $("#demo"),
+ _sentenceEndExp = /(\.|\?|!)$/g; //regular expression to sense punctuation that indicates the end of a sentence so that we can adjust timing accordingly
+
+//this function just takes a string of text and splits it into an array based on the maximum length that should be allowed to exist in each line, and when it encounters the end of a sentence (ending in ".", "?", or "!"), it will force a line break too.
+function buildChunks(text, maxLength) {
+ if (maxLength === undefined) {
+ return text.split(" ");
+ }
+ var words = text.split(" "),
+ wordCount = words.length,
+ chunk = [],
+ chunks = [], i;
+ for (i = 0; i < wordCount; i++){
+ chunk.push(words[i]);
+ if (_sentenceEndExp.test(words[i]) || i === wordCount - 1 || chunk.join(" ").length + words[i+1].length > maxLength) {
+ chunks.push(chunk.join(" "));
+ chunk = [];
+ }
+ }
+ return chunks;
+}
+
+
+/* taken from https://codepen.io/GreenSock/pen/DpRrWV */
+function machineGun(chunks, maxLength) {
+ //in case "chunks" isn't an array, we'll build chunks automatically
+ if (!(chunks instanceof Array)) {
+ chunks = buildChunks(chunks, maxLength);
+ }
+
+ var tl = new TimelineMax({delay:0.6, repeat:2, repeatDelay:4}),
+ time = 0,
+ chunk, element, duration, isSentenceEnd, i;
+
+ for (i = 0; i < chunks.length; i++) {
+ chunk = chunks[i];
+ isSentenceEnd = _sentenceEndExp.test(chunk) || (i === chunks.length - 1);
+ element = $("" + chunk + "
").appendTo(container);
+ duration = Math.max(0.5, chunk.length * 0.08); //longer words take longer to read, so adjust timing. Minimum of 0.5 seconds.
+ if (isSentenceEnd) {
+ duration += 0.5; //if it's the last word in a sentence, drag out the timing a bit for a dramatic pause.
+ }
+ //set opacity and scale to 0 initially. We set z to 0.01 just to kick in 3D rendering in the browser which makes things render a bit more smoothly.
+ TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01});
+ //the SlowMo ease is like an easeOutIn but it's configurable in terms of strength and how long the slope is linear. See https://www.greensock.com/v12/#slowmo and https://api.greensock.com/js/com/greensock/easing/SlowMo.html
+ tl.to(element, duration, {scale:1.2, ease:SlowMo.ease.config(0.25, 0.9)}, time)
+ //notice the 3rd parameter of the SlowMo config is true in the following tween - that causes it to yoyo, meaning opacity (autoAlpha) will go up to 1 during the tween, and then back down to 0 at the end.
+ .to(element, duration, {autoAlpha:1, ease:SlowMo.ease.config(0.25, 0.9, true)}, time);
+ time += duration - 0.05;
+ if (isSentenceEnd) {
+ time += 0.5; //at the end of a sentence, add a pause for dramatic effect.
+ }
+ }
+}
+
+machineGun("We are L.A.R.S. We win every CTF. We are the best in the World. No one can defeat us. We never lose. We always win. We take all flags and we don't give them back. You should be scared, because we also take your flag.", 12);
+
+
+const canvas = document.getElementById('flags')
+
+const jsConfetti = new JSConfetti({ canvas })
+
+function fire() {
+ jsConfetti.addConfetti({
+ emojis: ['đŗī¸âđ', 'đŠī¸', 'đŗī¸ââ§ī¸', 'đ´ââ ī¸', 'đŗī¸', 'đ´'],
+ })
+ setTimeout(fire, 700)
+}
+fire()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/cooler/style.css b/cooler/style.css
new file mode 100644
index 0000000..a0dae26
--- /dev/null
+++ b/cooler/style.css
@@ -0,0 +1,152 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');
+
+html, body {
+ background-color: #000;
+ color: #fff;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ font-size: 69px;
+ font-family: 'Courier New', Courier, monospace;
+ font-weight: bold;
+}
+
+section{
+ height: 100vh;
+}
+
+.center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.blink {
+ animation: blink .2s infinite;
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.bg {
+ z-index: 1;
+ width: 100%;
+ height: 200vh;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.page {
+ height: 100vh;
+ position: relative;
+}
+
+.note {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-size: 28px;
+}
+
+.colored {
+ background-color: pink;
+}
+
+ul, li, ol {
+ list-style: none;
+}
+
+a:link, a:visited {
+ color: #fff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .blink {
+ animation: none;
+ }
+
+ .bg {
+ display: none;
+ }
+}
+
+div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+
+
+#mcontainer {
+ /* Center the text in the viewport. */
+ position: absolute;
+ margin: auto;
+ height: 80pt;
+ top: 0;
+ bottom: 0;
+
+ filter: url(#threshold) blur(0.6px);
+}
+
+#text1, #text2 {
+ position: absolute;
+ width: 100%;
+ display: inline-block;
+
+ font-family: 'Raleway', sans-serif;
+ font-size: 80pt;
+
+ text-align: center;
+
+ user-select: none;
+}
+
+#flaggy_section img{
+ position: absolute;
+}
+
+#rock{
+ top: 150%;
+ left: 50%;
+ transform: translate(-50%, -0%);
+ width: 30%;
+}
+
+.flaggy {
+ top: 150%;
+ left: 50%;
+ transform: translate(-50%, -60%);
+ width: 10%;
+}
+
+
+#demo *{
+ position: absolute;
+ top: 250%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+}
+
+#flags{
+ position: absolute;
+ top: 350%;
+ left: 50%;
+ transform: translate(-50%, -40%);
+ width: 100%;
+ height: 100vh;
+}
\ No newline at end of file
diff --git a/uncool/style.css b/uncool/style.css
deleted file mode 100644
index 66c738e..0000000
--- a/uncool/style.css
+++ /dev/null
@@ -1,77 +0,0 @@
-html, body {
- background-color: #000;
- color: #fff;
- padding: 0;
- margin: 0;
- text-align: center;
- font-size: 69px;
- font-family: 'Courier New', Courier, monospace;
- font-weight: bold;
-}
-
-.center {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.blink {
- animation: blink .2s infinite;
-}
-
-@keyframes blink {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-.bg {
- z-index: 1;
- width: 100%;
- height: 200vh;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.page {
- height: 100vh;
- position: relative;
-}
-
-.note {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- font-size: 28px;
-}
-
-.colored {
- background-color: pink;
-}
-
-ul, li, ol {
- list-style: none;
-}
-
-a:link, a:visited {
- color: #fff;
-}
-
-@media (prefers-reduced-motion: reduce) {
- .blink {
- animation: none;
- }
-
- .bg {
- display: none;
- }
-}
--
cgit v1.2.3