From 6224d3d83ed0735e3b465e40e29af41927980eb9 Mon Sep 17 00:00:00 2001 From: Karson Kalt Date: Sun, 23 Jun 2024 23:36:00 -0400 Subject: [PATCH] fix animations --- _sass/custom-styles.scss | 54 +++++++++++++++++++------- assets/js/terminal.js | 2 +- assets/ts/terminal/AutoTypeManager.ts | 8 +++- assets/ts/terminal/UserInputManager.ts | 13 +------ assets/ts/terminal/autoTypeOptions.ts | 2 +- assets/ts/terminal/commands.ts | 47 +++++++++++++++------- assets/ts/terminal/index.ts | 2 +- 7 files changed, 82 insertions(+), 46 deletions(-) diff --git a/_sass/custom-styles.scss b/_sass/custom-styles.scss index 44290ba..111ef56 100644 --- a/_sass/custom-styles.scss +++ b/_sass/custom-styles.scss @@ -71,17 +71,6 @@ pre.terminal { animation: blink 1s steps(1) infinite; } -@keyframes growFromCenter { - from { - opacity: 0; - transform: scale(0); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes pulse { 0% { transform: scale(0); @@ -232,6 +221,7 @@ a .domain { top: 0; background-color: #000000; z-index: 100; + box-shadow: 0px 10px 20px 8px rgba(0, 0, 0, 0.6); } @keyframes fadeInRight { @@ -257,7 +247,6 @@ a .domain { gap: 10px; align-items: center; transform: translateY(1px); - animation: fadeInRight 0.5s ease-in-out; &:hover { color: #c6c6c6; @@ -488,14 +477,47 @@ img { @keyframes echo { 0% { - transform: scale(0); + transform: scale(0) rotate(0deg); opacity: 0; } - 50% { + 20% { + transform: scale(2) rotate(5deg); + opacity: 1; + } + 15% { + transform: scale(2) rotate(-5deg); + opacity: 1; + } + 25% { + transform: scale(2) rotate(5deg); + opacity: 1; + } + 35% { + transform: scale(2) rotate(-5deg); + opacity: 1; + } + 45% { + transform: scale(2) rotate(5deg); + opacity: 1; + } + 55% { + transform: scale(2) rotate(-5deg); + opacity: 1; + } + 65% { + transform: scale(2) rotate(5deg); + opacity: 1; + } + 75% { + transform: scale(2) rotate(-5deg); + opacity: 1; + } + 90% { + transform: scale(2) rotate(5deg); opacity: 1; } 100% { - transform: scale(3); + transform: scale(2.2) rotate(0deg); opacity: 0; } } @@ -512,4 +534,6 @@ img { color: white; font-size: 12px; animation: echo 2s ease-out; + max-width: calc(100vw - 100px); /* Ensure it doesn't overflow the viewport */ + max-height: calc(100vh - 100px); /* Ensure it doesn't overflow the viewport */ } diff --git a/assets/js/terminal.js b/assets/js/terminal.js index faca33e..05f9fc4 100644 --- a/assets/js/terminal.js +++ b/assets/js/terminal.js @@ -1 +1 @@ -(()=>{"use strict";var e=[{input:"echo Hi, I'm Karson ツ",execute:!0,backspace:!1,typeSpeed:120,initialDelay:6e3,endActionDelay:1e3},{input:"about",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"experience",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"skills --lanugages",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"education",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"help",execute:!0,backspace:!1,typeSpeed:200,initialDelay:3e3,endActionDelay:1e3},{input:"export PS1=🐸",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(✿◠‿◠)",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"whoami",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(^-^)/",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"skills",execute:!0,backspace:!1,typeSpeed:200,initialDelay:5e3,endActionDelay:1e3},{input:"(☉ ‿ ⚆)",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"date",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(づ｡◕‿‿◕｡)づ",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:3e3}],t=function(e,t,n,r){return new(n||(n=Promise))((function(i,a){function o(e){try{s(r.next(e))}catch(e){a(e)}}function c(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,c)}s((r=r.apply(e,t||[])).next())}))},n=function(e,t){var n,r,i,a,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(s){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(o=0)),o;)try{if(n=1,r&&(i=2&c[0]?r.return:c[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,c[1])).done)return i;switch(r=0,i&&(c=[2&c[0],i.value]),c[0]){case 0:case 1:i=c;break;case 4:return o.label++,{value:c[1],done:!1};case 5:o.label++,r=c[1],c=[0];continue;case 7:c=o.ops.pop(),o.trys.pop();continue;default:if(!((i=(i=o.trys).length>0&&i[i.length-1])||6!==c[0]&&2!==c[0])){o=0;continue}if(3===c[0]&&(!i||c[1]>i[0]&&c[1]0?(this.currentText=this.currentText.substring(0,t-1),this.setPromptValue(this.currentText),[4,this.sleep(this.deleteSpeed,r)]):[3,4];case 2:n.sent(),n.label=3;case 3:return t--,[3,1];case 4:return[2]}}))}))},r.prototype.moveToNextItem=function(e){return t(this,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,this.sleep(this.deleteSpeed,e)];case 1:return t.sent(),[2]}}))}))},r.prototype.executeCommand=function(e){var t=new CustomEvent("executeCommand",{detail:{command:e}});window.dispatchEvent(t)},r.prototype.stopAutoType=function(){this.abortController&&this.abortController.abort()},r}(),i=function(){var e=Math.floor(Math.random()*s.length);return s[e]};function a(e){var t=document.createElement("div");t.classList.add("oval"),t.innerText=e;var n=Math.random()*window.innerWidth,r=Math.random()*window.innerHeight;t.style.left="".concat(n,"px"),t.style.top="".concat(r,"px"),document.body.appendChild(t),t.addEventListener("animationend",(function(){document.body.removeChild(t)}))}var o={clear:{execute:function(e){return""},description:"Clears the terminal screen",flags:{}},echo:{execute:function(e){return function(e){for(var t=0;t<20;t++)setTimeout((function(){return a(e)}),100*t)}(e.join(" ")),"Echo effect triggered for ".concat(e.join(" "))},description:"Prints back the input received",flags:{}},ls:{execute:function(e){return"file1.txt\nfile2.txt\nfile3.txt"},description:"Lists all available files",flags:{}},about:{execute:function(e){return'I’m a passionate software engineer dedicated to crafting interfaces that delight users and make a difference. Currently, I’m a Software Engineer at JupiterOne , where I advocate for user experience and get to build impactful features every day.'},description:"Displays about information",flags:{}},help:{execute:function(e){for(var t="Available commands:\n",n=0,r=Object.entries(o);n")},description:"Shows help information about all commands",flags:{}},date:{execute:function(e){return(new Date).toString()},description:"Displays the current date and time",flags:{}},whoami:{execute:function(e){return"Karson, Frontend Developer"},description:"Displays user information",flags:{}},add:{execute:function(e){var t=e.indexOf("--tab");if(-1!==t&&e[t+1]){var n=e[t+1];return["stdout","blog","notes"].includes(n)?function(e){var t=document.querySelector("#".concat(e));return t?(t.removeAttribute("hidden"),'Tab "'.concat(e,'" is now visible.')):'Error: Tab "'.concat(e,'" does not exist.')}(n):'Error: Tab "'.concat(n,'" cannot be added. Only "stdout", "blog", and "about" can be added.')}return"Usage: tab --add "},description:"Adds content to the website",flags:{"--tab":"Adds a tab"}},skills:{execute:function(e){return e.includes("--languages")?"TypeScript, JavaScript, CSS":e.includes("-l")?"Frontend Development, React, UX Design, TypeScript, JavaScript, Node A11y, Agile, User-Centered Design":"Frontend Development, React, UX Design, TypeScript, JavaScript"},description:"Lists all my skills",flags:{"--languages":"Lists programming languages I know","-l":"Lists all my skills"}},projects:{execute:function(e){return"Projects: "},description:"Lists all my projects",flags:{}},education:{execute:function(e){return'B.S. Digital Marketing, Utah Valley University (2010 - 2014)\n Software Engineering Immersive Flatiron School (2017)\n '},description:"Displays my educational background",flags:{}},experience:{execute:function(e){return'Software Engineer, Applications, JupiterOne (October 2021 - Present)\n Natural Language Querying\n − Designed and developed the integration of generative AI into our search experience, converting natural language to our query language. Resulted in one of our highest adoption rates and helped accelerate platform time-to-value.\n − Implemented a vector database embedding cache, improving query response times and reducing operational costs.\n − Implemented Natural Language Processing (NLP) techniques including fuzzy matching and stop word filtering to enhance search precision.\n\n Design System Development\n − Spearheaded the development of JupiterOne’s design system, including creation of a comprehensive component library, design tokens, and theming system. Helping to streamline the development process and enabling engineers to focus on core feature development.\n − Crafted standardized-yet-customizable component APIs through a mix of composability, customization, and "component slots". Balanced flexibility with ease-of-use, allowing for customization without excessive rigidity. Leveraged standard naming conventions and JSDoc for streamlined development.\n '},description:"Displays my work experience",flags:{}},export:{execute:function(e){if(1!==e.length||!e[0].startsWith("PS1="))return"Usage: export PS1=''";var t=e[0].slice(4).trim();return document.querySelectorAll(".system-prompt").forEach((function(e){e.textContent=t})),"Prompt character changed to ".concat(t)},description:"Exports a variable",flags:{}}},c={cd:{execute:i},rm:{execute:i},sudo:{execute:i},mv:{execute:i},chmod:{execute:i},chown:{execute:i},mkdir:{execute:i},ls:{execute:i},cat:{execute:i},ps:{execute:i},top:{execute:i},vi:{execute:i},nano:{execute:i},exit:{execute:i},man:{execute:i},grep:{execute:i},find:{execute:i},pwd:{execute:i},df:{execute:i},du:{execute:i},curl:{execute:i},wget:{execute:i},ping:{execute:i},ifconfig:{execute:i}},s=["Nice try, but this isn't a real terminal!","You're not fooling anyone.","Did you really think that would work?","You must think you're pretty clever, huh?","You must be new here.","I'm sorry, Dave. I'm afraid I can't do that.","You must be mistaken, this isn't a real terminal.","That command is about as useful here as a chocolate teapot."],u=function(){function e(e,t,n,r){this.prompt=e,this.terminal=t,this.autoTypeManager=n,this.mirrorElement=r,this.initialize()}return e.prototype.createRipple=function(){var e=document.querySelector(".ripple-container"),t=1.1*Math.max(e.offsetWidth,e.offsetHeight),n=document.createElement("span");n.className="ripple",n.style.setProperty("--ripple-size","".concat(t,"px")),e.appendChild(n),n.addEventListener("animationend",(function(){n.remove()}))},e.prototype.setPromptValue=function(e){this.prompt.value=e,this.mirrorElement.textContent=e},e.prototype.handleBashCommand=function(e){this.createRipple();var t,n,r=e.split(" "),i=(t=r[0],n=r.slice(1),t in c?c[t].execute(n):t in o?o[t].execute(n):"Command not found: ".concat(t)).replace(/\n/g,"
");this.setPromptValue(""),this.addToStdoutLog(e,i)},e.prototype.addToStdoutLog=function(e,t){var n,r=document.querySelector(".tab-panels").querySelector(".stdout-log"),i=document.createElement("li");i.innerHTML='\n
\n
\n '.concat(e,'\n
').concat(t,"
\n
\n
\n "),r.insertBefore(i,r.firstChild);var a=null===(n=document.querySelector('button[role="tab"][aria-selected="true"]'))||void 0===n?void 0:n.id;a&&this.updateBadge("stdout"!==a)},e.prototype.updateBadge=function(e){var t=document.querySelector("#stdout").querySelector(".unread-badge");e?t.classList.contains("show")?(t.classList.add("pulse"),t.addEventListener("animationend",(function(){return t.classList.remove("pulse")}),{once:!0})):t.classList.add("show"):t.classList.remove("show","pulse")},e.prototype.switchTab=function(e){var t;if("stdout"===e){var n=null===(t=document.querySelector('button[role="tab"][aria-selected="true"]'))||void 0===t?void 0:t.id;n&&this.updateBadge("stdout"!==n)}},e.prototype.initialize=function(){var e=this;this.prompt.addEventListener("keydown",(function(t){"Enter"===t.key&&e.prompt.value.trim()&&(t.preventDefault(),e.handleBashCommand(e.prompt.value.trim()),e.setPromptValue(""),e.autoTypeManager.stopAutoType())})),document.querySelectorAll(".tab").forEach((function(t){t.addEventListener("click",(function(t){var n,r=null===(n=t.target)||void 0===n?void 0:n.getAttribute("data-tab");r&&e.switchTab(r)}))})),this.prompt.addEventListener("focus",(function(){e.autoTypeManager.stopAutoType()})),this.prompt.addEventListener("blur",(function(){e.autoTypeManager.startAutoType()})),this.terminal.addEventListener("click",(function(){e.prompt.focus()})),this.prompt.addEventListener("input",(function(t){var n=t.target;e.setPromptValue(n.value)})),window.addEventListener("executeCommand",(function(t){var n=t.detail.command;e.handleBashCommand(n)}))},e}(),l=document.querySelector(".prompt"),p=document.querySelector(".input-mirror");new u(l,document.querySelector(".terminal"),new r(l,p),p)})(); \ No newline at end of file +(()=>{"use strict";var e=[{input:"echo Hi, I'm Karson ツ",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"about",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"experience",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"skills --lanugages",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"education",execute:!0,backspace:!1,typeSpeed:120,initialDelay:3e3,endActionDelay:1e3},{input:"help",execute:!0,backspace:!1,typeSpeed:200,initialDelay:3e3,endActionDelay:1e3},{input:"export PS1=🐸",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(✿◠‿◠)",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"whoami",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(^-^)/",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"skills",execute:!0,backspace:!1,typeSpeed:200,initialDelay:5e3,endActionDelay:1e3},{input:"(☉ ‿ ⚆)",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"date",execute:!0,backspace:!1,typeSpeed:200,initialDelay:4e3,endActionDelay:1e3},{input:"(づ｡◕‿‿◕｡)づ",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:2e3},{input:"(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧",execute:!1,backspace:!0,typeSpeed:200,initialDelay:4e3,endActionDelay:3e3}],t=function(e,t,n,r){return new(n||(n=Promise))((function(i,a){function o(e){try{s(r.next(e))}catch(e){a(e)}}function c(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,c)}s((r=r.apply(e,t||[])).next())}))},n=function(e,t){var n,r,i,a,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(s){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(o=0)),o;)try{if(n=1,r&&(i=2&c[0]?r.return:c[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,c[1])).done)return i;switch(r=0,i&&(c=[2&c[0],i.value]),c[0]){case 0:case 1:i=c;break;case 4:return o.label++,{value:c[1],done:!1};case 5:o.label++,r=c[1],c=[0];continue;case 7:c=o.ops.pop(),o.trys.pop();continue;default:if(!((i=(i=o.trys).length>0&&i[i.length-1])||6!==c[0]&&2!==c[0])){o=0;continue}if(3===c[0]&&(!i||c[1]>i[0]&&c[1]0?(this.currentText=this.currentText.substring(0,t-1),this.setPromptValue(this.currentText),[4,this.sleep(this.deleteSpeed,r)]):[3,4];case 2:n.sent(),n.label=3;case 3:return t--,[3,1];case 4:return[2]}}))}))},r.prototype.moveToNextItem=function(e){return t(this,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,this.sleep(this.deleteSpeed,e)];case 1:return t.sent(),[2]}}))}))},r.prototype.executeCommand=function(e){var t=new CustomEvent("executeCommand",{detail:{command:e}});window.dispatchEvent(t)},r.prototype.stopAutoType=function(){this.abortController&&this.abortController.abort()},r}(),i=function(){var e=Math.floor(Math.random()*c.length);return c[e]},a={clear:{execute:function(e){return""},description:"Clears the terminal screen",flags:{}},echo:{execute:function(e){return function(e){for(var t=["topLeft","bottomRight"],n=function(n){setTimeout((function(){return function(e,t){var n=document.createElement("div");n.classList.add("oval"),n.innerText=e,n.style.display="flex",n.style.alignItems="center",n.style.justifyContent="center",n.style.zIndex="500","topLeft"===t?(n.style.left="50px",n.style.top="50px"):(n.style.right="50px",n.style.bottom="50px",n.style.backgroundColor="#001349",n.style.color="#9a9a9a"),document.body.appendChild(n),n.classList.add("oval-animate"),n.addEventListener("animationend",(function(){document.body.removeChild(n)}))}(e,t[n%2])}),2e3*n)},r=0;r<2;r++)n(r)}(e.join(" ")),"Echo effect triggered for ".concat(e.join(" "))},description:"Prints back the input received",flags:{}},ls:{execute:function(e){return"file1.txt\nfile2.txt\nfile3.txt"},description:"Lists all available files",flags:{}},about:{execute:function(e){return'I’m a passionate software engineer dedicated to crafting interfaces that delight users and make a difference. Currently, I’m a Software Engineer at JupiterOne , where I advocate for user experience and get to build impactful features every day.'},description:"Displays about information",flags:{}},help:{execute:function(e){for(var t="Available commands:\n",n=0,r=Object.entries(a);n")},description:"Shows help information about all commands",flags:{}},date:{execute:function(e){return(new Date).toString()},description:"Displays the current date and time",flags:{}},whoami:{execute:function(e){return"Karson, Frontend Developer"},description:"Displays user information",flags:{}},add:{execute:function(e){var t=e.indexOf("--tab");if(-1!==t&&e[t+1]){var n=e[t+1];return["stdout","blog","notes"].includes(n)?function(e){var t=document.querySelector("#".concat(e));return t?(t.removeAttribute("hidden"),'Tab "'.concat(e,'" is now visible.')):'Error: Tab "'.concat(e,'" does not exist.')}(n):'Error: Tab "'.concat(n,'" cannot be added. Only "stdout", "blog", and "about" can be added.')}return"Usage: tab --add "},description:"Adds content to the website",flags:{"--tab":"Adds a tab"}},skills:{execute:function(e){return e.includes("--languages")?"TypeScript, JavaScript, CSS":e.includes("-l")?"Frontend Development, React, UX Design, TypeScript, JavaScript, Node A11y, Agile, User-Centered Design":"Frontend Development, React, UX Design, TypeScript, JavaScript"},description:"Lists all my skills",flags:{"--languages":"Lists programming languages I know","-l":"Lists all my skills"}},projects:{execute:function(e){return"Projects: "},description:"Lists all my projects",flags:{}},education:{execute:function(e){return'B.S. Digital Marketing, Utah Valley University (2010 - 2014)\n Software Engineering Immersive Flatiron School (2017)\n '},description:"Displays my educational background",flags:{}},experience:{execute:function(e){return'Software Engineer, Applications, JupiterOne (October 2021 - Present)\n Natural Language Querying\n − Designed and developed the integration of generative AI into our search experience, converting natural language to our query language. Resulted in one of our highest adoption rates and helped accelerate platform time-to-value.\n − Implemented a vector database embedding cache, improving query response times and reducing operational costs.\n − Implemented Natural Language Processing (NLP) techniques including fuzzy matching and stop word filtering to enhance search precision.\n\n Design System Development\n − Spearheaded the development of JupiterOne’s design system, including creation of a comprehensive component library, design tokens, and theming system. Helping to streamline the development process and enabling engineers to focus on core feature development.\n − Crafted standardized-yet-customizable component APIs through a mix of composability, customization, and "component slots". Balanced flexibility with ease-of-use, allowing for customization without excessive rigidity. Leveraged standard naming conventions and JSDoc for streamlined development.\n '},description:"Displays my work experience",flags:{}},export:{execute:function(e){if(1!==e.length||!e[0].startsWith("PS1="))return"Usage: export PS1=''";var t=e[0].slice(4).trim();return document.querySelectorAll(".system-prompt").forEach((function(e){e.textContent=t})),"Prompt character changed to ".concat(t)},description:"Exports a variable",flags:{}}},o={cd:{execute:i},rm:{execute:i},sudo:{execute:i},mv:{execute:i},chmod:{execute:i},chown:{execute:i},mkdir:{execute:i},ls:{execute:i},cat:{execute:i},ps:{execute:i},top:{execute:i},vi:{execute:i},nano:{execute:i},exit:{execute:i},man:{execute:i},grep:{execute:i},find:{execute:i},pwd:{execute:i},df:{execute:i},du:{execute:i},curl:{execute:i},wget:{execute:i},ping:{execute:i},ifconfig:{execute:i}},c=["Nice try, but this isn't a real terminal!","You're not fooling anyone.","Did you really think that would work?","You must think you're pretty clever, huh?","You must be new here.","I'm sorry, Dave. I'm afraid I can't do that.","You must be mistaken, this isn't a real terminal.","That command is about as useful here as a chocolate teapot."],s=function(){function e(e,t,n,r){this.prompt=e,this.terminal=t,this.autoTypeManager=n,this.mirrorElement=r,this.initialize()}return e.prototype.createRipple=function(){var e=document.querySelector(".ripple-container"),t=1.1*Math.max(e.offsetWidth,e.offsetHeight),n=document.createElement("span");n.className="ripple",n.style.setProperty("--ripple-size","".concat(t,"px")),e.appendChild(n),n.addEventListener("animationend",(function(){n.remove()}))},e.prototype.setPromptValue=function(e){this.prompt.value=e,this.mirrorElement.textContent=e},e.prototype.handleBashCommand=function(e){this.createRipple();var t,n,r=e.split(" "),i=(t=r[0],n=r.slice(1),t in o?o[t].execute(n):t in a?a[t].execute(n):"Command not found: ".concat(t)).replace(/\n/g,"
");this.setPromptValue(""),this.addToStdoutLog(e,i)},e.prototype.addToStdoutLog=function(e,t){var n,r=document.querySelector(".tab-panels").querySelector(".stdout-log"),i=document.createElement("li");i.innerHTML='\n
\n
\n '.concat(e,'\n
').concat(t,"
\n
\n
\n "),r.insertBefore(i,r.firstChild);var a=null===(n=document.querySelector('button[role="tab"][aria-selected="true"]'))||void 0===n?void 0:n.id;a&&this.updateBadge("stdout"!==a)},e.prototype.updateBadge=function(e){var t=document.querySelector("#stdout").querySelector(".unread-badge");e&&t.classList.add("show")},e.prototype.switchTab=function(e){var t;if("stdout"===e){var n=null===(t=document.querySelector('button[role="tab"][aria-selected="true"]'))||void 0===t?void 0:t.id;n&&this.updateBadge("stdout"!==n)}},e.prototype.initialize=function(){var e=this;this.prompt.addEventListener("keydown",(function(t){"Enter"===t.key&&e.prompt.value.trim()&&(t.preventDefault(),e.handleBashCommand(e.prompt.value.trim()),e.setPromptValue(""),e.autoTypeManager.stopAutoType())})),document.querySelectorAll(".tab").forEach((function(t){t.addEventListener("click",(function(t){var n,r=null===(n=t.target)||void 0===n?void 0:n.getAttribute("data-tab");r&&e.switchTab(r)}))})),this.prompt.addEventListener("focus",(function(){e.autoTypeManager.stopAutoType()})),this.prompt.addEventListener("blur",(function(){e.autoTypeManager.startAutoType()})),this.terminal.addEventListener("click",(function(){e.prompt.focus()})),this.prompt.addEventListener("input",(function(t){var n=t.target;e.setPromptValue(n.value)})),window.addEventListener("executeCommand",(function(t){var n=t.detail.command;e.handleBashCommand(n)}))},e}(),u=document.querySelector(".prompt"),l=document.querySelector(".input-mirror"),p=document.querySelector(".terminal");new s(u,p,new r(u,p,l),l)})(); \ No newline at end of file diff --git a/assets/ts/terminal/AutoTypeManager.ts b/assets/ts/terminal/AutoTypeManager.ts index 01a6043..5cff4ee 100644 --- a/assets/ts/terminal/AutoTypeManager.ts +++ b/assets/ts/terminal/AutoTypeManager.ts @@ -9,10 +9,16 @@ class AutoTypeManager { private prompt: HTMLInputElement; private mirrorElement: HTMLDivElement; private deleteSpeed: number = 100; + private terminal: HTMLDivElement; - constructor(prompt: HTMLInputElement, mirrorElement: HTMLDivElement) { + constructor( + prompt: HTMLInputElement, + terminal: HTMLDivElement, + mirrorElement: HTMLDivElement + ) { this.prompt = prompt; this.mirrorElement = mirrorElement; + this.terminal = terminal; this.startAutoType(); } diff --git a/assets/ts/terminal/UserInputManager.ts b/assets/ts/terminal/UserInputManager.ts index f0d6522..a5c67a1 100644 --- a/assets/ts/terminal/UserInputManager.ts +++ b/assets/ts/terminal/UserInputManager.ts @@ -79,18 +79,7 @@ class UserInputManager { const badge = stdoutTab.querySelector(".unread-badge") as Element; if (hasUnreadStdout) { - if (!badge.classList.contains("show")) { - badge.classList.add("show"); - } else { - badge.classList.add("pulse"); - badge.addEventListener( - "animationend", - () => badge.classList.remove("pulse"), - { once: true } - ); - } - } else { - badge.classList.remove("show", "pulse"); + badge.classList.add("show"); } } diff --git a/assets/ts/terminal/autoTypeOptions.ts b/assets/ts/terminal/autoTypeOptions.ts index 3d33a41..315e967 100644 --- a/assets/ts/terminal/autoTypeOptions.ts +++ b/assets/ts/terminal/autoTypeOptions.ts @@ -13,7 +13,7 @@ export const autoTypeOptions: AutoTypeOption[] = [ execute: true, backspace: false, typeSpeed: 120, - initialDelay: 6000, + initialDelay: 3000, endActionDelay: 1000, }, { diff --git a/assets/ts/terminal/commands.ts b/assets/ts/terminal/commands.ts index 188d596..baffe91 100644 --- a/assets/ts/terminal/commands.ts +++ b/assets/ts/terminal/commands.ts @@ -3,11 +3,6 @@ const clearCommand: CommandExecute = (args) => { return ""; }; -const echoCommand: CommandExecute = (args) => { - createEchoes(args.join(" ")); - return `Echo effect triggered for ${args.join(" ")}`; -}; - const lsCommand: CommandExecute = (args) => { return "file1.txt\nfile2.txt\nfile3.txt"; }; @@ -120,19 +115,40 @@ function showTab(tabName: string) { } } -function echo(text: string) { +const echoCommand: CommandExecute = (args) => { + createEchoes(args.join(" ")); + return `Echo effect triggered for ${args.join(" ")}`; +}; + +function echo(text: string, position: "topLeft" | "bottomRight") { const oval = document.createElement("div"); oval.classList.add("oval"); - oval.innerText = text; // Set the inner text of the oval - - // Position the oval at a random location on the screen - const x = Math.random() * window.innerWidth; - const y = Math.random() * window.innerHeight; - oval.style.left = `${x}px`; - oval.style.top = `${y}px`; + oval.innerText = text; + + // Common styles for the oval + // oval.style.position = "fixed"; + oval.style.display = "flex"; + oval.style.alignItems = "center"; + oval.style.justifyContent = "center"; + oval.style.zIndex = "500"; + + // Apply the position-specific styles + if (position === "topLeft") { + oval.style.left = "50px"; + oval.style.top = "50px"; + } else { + oval.style.right = "50px"; + oval.style.bottom = "50px"; + oval.style.backgroundColor = "#001349"; + oval.style.color = "#9a9a9a"; + } + // Append the oval to the body document.body.appendChild(oval); + // Add a class for animation and styles, if needed + oval.classList.add("oval-animate"); + // Remove the oval from the DOM after the animation ends oval.addEventListener("animationend", () => { document.body.removeChild(oval); @@ -141,8 +157,9 @@ function echo(text: string) { // Function to create multiple ovals with the same text function createEchoes(text: string) { - for (let i = 0; i < 20; i++) { - setTimeout(() => echo(text), i * 100); // Adjust timing for staggered appearance + const positions: ("topLeft" | "bottomRight")[] = ["topLeft", "bottomRight"]; + for (let i = 0; i < 2; i++) { + setTimeout(() => echo(text, positions[i % 2]), i * 2000); // Adjust timing for staggered appearance } } diff --git a/assets/ts/terminal/index.ts b/assets/ts/terminal/index.ts index c5c651c..a963887 100644 --- a/assets/ts/terminal/index.ts +++ b/assets/ts/terminal/index.ts @@ -5,7 +5,7 @@ const prompt = document.querySelector(".prompt") as HTMLInputElement; const mirrorElement = document.querySelector(".input-mirror") as HTMLDivElement; const terminal = document.querySelector(".terminal") as HTMLDivElement; -const autoTypeManager = new AutoTypeManager(prompt, mirrorElement); +const autoTypeManager = new AutoTypeManager(prompt, terminal, mirrorElement); const userInputManager = new UserInputManager( prompt,