feat: improved animations

This commit is contained in:
Barrett Ruth 2024-06-08 23:14:10 -05:00
parent 68311bfa3b
commit 0a30d43137

View file

@ -18,6 +18,29 @@ const postMapping = new Map([
const TERMINAL_PROMPT = "barrett@ruth:~$ "; const TERMINAL_PROMPT = "barrett@ruth:~$ ";
let clearing = false; let clearing = false;
function clearPrompt(delay, callback) {
if (clearing) return;
clearing = true;
const terminalPrompt = document.querySelector(".prompt");
const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
let i = 0;
function removeChar() {
if (i++ < topicLength) {
console.log("clearing char");
terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
setTimeout(removeChar, delay / topicLength);
} else {
i = 0;
clearing = false;
callback && callback();
}
}
removeChar();
}
function refresh(e) { function refresh(e) {
e.preventDefault(); e.preventDefault();
@ -30,27 +53,7 @@ function refresh(e) {
document.getElementById("posts").innerHTML = ""; document.getElementById("posts").innerHTML = "";
const terminalPrompt = document.querySelector(".prompt"); clearPrompt(500);
const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
function clearPrompt() {
if (clearing) return;
clearing = true;
let i = 0;
function removeChar() {
if (i++ < topicLength) {
terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
setTimeout(removeChar, 500 / topicLength);
} else {
i = 0;
clearing = false;
}
}
removeChar();
}
clearPrompt();
} }
function renderPosts(topic) { function renderPosts(topic) {
@ -69,21 +72,24 @@ function typechars(e) {
e.preventDefault(); e.preventDefault();
const topic = e.target.textContent; const topic = e.target.textContent;
const terminalText = `${topic.toLowerCase()}/`; const terminalText = ` ${topic.toLowerCase()}/`;
const terminalPrompt = document.querySelector(".prompt"); const terminalPrompt = document.querySelector(".prompt");
terminalPrompt.innerHTML = TERMINAL_PROMPT; const delay =
terminalPrompt.innerHTML.length > TERMINAL_PROMPT.length ? 250 : 500;
let i = 0; clearPrompt(delay, () => {
function typechar() { let i = 0;
if (i < terminalText.length) { function typechar() {
terminalPrompt.innerHTML += terminalText.charAt(i++); if (i < terminalText.length) {
setTimeout(typechar, 500 / terminalText.length); terminalPrompt.innerHTML += terminalText.charAt(i++);
} else { setTimeout(typechar, delay / terminalText.length);
renderPosts(topic); } else {
renderPosts(topic);
}
} }
}
typechar(); typechar();
});
} }
window.addEventListener("beforeunload", () => { window.addEventListener("beforeunload", () => {