diff --git a/web/static/js/text.js b/web/static/js/text.js index bddcfc6..8c33eb4 100644 --- a/web/static/js/text.js +++ b/web/static/js/text.js @@ -8,73 +8,119 @@ // set a global var "run" to true before running this function "use strict"; async function flyingText(canvas) { - canvas.classList.remove("hidden"); + canvas.classList.remove("hidden"); - while (runTextAnimation) { - // wait till ele is rdy in dom + time between spawns - await shootText(canvas, 4); - } + while (runTextAnimation) { + // wait till ele is rdy in dom + time between spawns + await shootText(canvas, 4); + } } async function shootText(canvas, sec, sta) { - // TODO: move to argument, load from backend - let statements = sta || ["Keyboard-Nerd", "🖤", "Emacs", - "Lives in VI", "GNU/Linux", "Arch Linux", - "Computer Science", "Design", - "Javascript", "C/C++", "Go", "Bash", - "Java", "Python", "QMK", "Vector Graphics", - "Adobe Collection", "OP-1", "Synthesizer", - "6y Work Experience", "Network Security", - "CCNA", "Cisco", "Firewalling", "Project MGMT", - "IT Specialist", "Git", "FreeBSD", "Photography", - "Emacs-Lisp", "Sophos Firewall", - "Microsoft Server", "Appgate", "Palo Alto FW", - "Linux Server", "FreeNAS", "Hardware", - "Arduino", "Electronics", "Soldering", - "Full Stack Networking", "Hotline-Manager", - "Trainer for IT-Specialists", "Matlab/Octave", - "PHP", "CSS", "HTML", "Privacy Advocate", - "Winter is coming!", "😺 Person", "Blender", - "Prusa Slicer", "3D-Printing", "Bachelor of Science"]; + // TODO: move to argument, load from backend + let statements = sta || [ + "Keyboard-Nerd", + "🖤", + "Emacs", + "Lives in VI", + "GNU/Linux", + "Arch Linux", + "Computer Science", + "Design", + "Javascript", + "C/C++", + "Go", + "Bash", + "Java", + "Python", + "QMK", + "Vector Graphics", + "Adobe Collection", + "OP-1", + "Synthesizer", + "8y Work Experience", + "Network Security", + "CCNA", + "Cisco", + "Firewalling", + "Project MGMT", + "IT Specialist", + "Git", + "FreeBSD", + "Photography", + "Emacs-Lisp", + "Sophos Firewall", + "Microsoft Server", + "Appgate", + "Palo Alto FW", + "Linux Server", + "FreeNAS", + "Hardware", + "Arduino", + "Electronics", + "Soldering", + "Full Stack Networking", + "Hotline-Manager", + "Trainer for IT-Specialists", + "Matlab/Octave", + "PHP", + "CSS", + "HTML", + "Privacy Advocate", + "Winter is coming!", + "😺 Person", + "Blender", + "Prusa Slicer", + "3D-Printing", + "Bachelor of Science", + "NixOS", + "Rust", + "ReactJS", + "SolidJS", + "Teacher", + "Typescript", + "Snappy Keyboard", + "Shanty-Themes", + ]; - let stCount = statements.length; - let animationTime = sec; - let maxX , maxY, x, y; - // Browser resize - maxX = canvas.offsetWidth / 2; - maxY = canvas.offsetHeight / 2; + let stCount = statements.length; + let animationTime = sec; + let maxX, maxY, x, y; + // Browser resize + maxX = canvas.offsetWidth / 2; + maxY = canvas.offsetHeight / 2; - let curr = document.createElement("p"); - curr.innerHTML = statements[getRand(stCount)]; - curr.className = "flying-text"; - curr.style.transition = `${animationTime}s ease-in`; + let curr = document.createElement("p"); + curr.innerHTML = statements[getRand(stCount)]; + curr.className = "flying-text"; + curr.style.transition = `${animationTime}s ease-in`; - // Get random position + correction to not touch middle to much - x = getRand(maxX * 0.2, maxX); - y = getRand(maxY * 0.45, maxY); + // Get random position + correction to not touch middle to much + x = getRand(maxX * 0.2, maxX); + y = getRand(maxY * 0.45, maxY); - // Random direction and correction to not touch right border - x = (getRand(2) == 1) ? -1*x : 0.3 * x; - y = (getRand(2) == 1) ? -1*y : 0.8 * y; + // Random direction and correction to not touch right border + x = getRand(2) == 1 ? -1 * x : 0.3 * x; + y = getRand(2) == 1 ? -1 * y : 0.8 * y; - canvas.appendChild(curr); - await sleep(1000); + canvas.appendChild(curr); + await sleep(1000); - // add the stuff that should be animated (transition in class) - curr.style.transform = `translate(${x}px, ${y}px)`; - curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`; + // add the stuff that should be animated (transition in class) + curr.style.transform = `translate(${x}px, ${y}px)`; + curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`; - // wait to remove it (async) - setTimeout(() => { - curr.remove(); - }, animationTime * 1000 + 2000); + // wait to remove it (async) + setTimeout(() => { + curr.remove(); + }, animationTime * 1000 + 2000); } function getRand(max, min) { - min = min || 0; - return min + Math.floor(Math.random() * (max - min)); + min = min || 0; + return min + Math.floor(Math.random() * (max - min)); } function sleep(ms) { - return new Promise((nil) => setTimeout(nil, ms)); + return new Promise((nil) => setTimeout(nil, ms)); }