diff --git a/src/app/components/console/console.component.ts b/src/app/components/console/console.component.ts index 2419b85..7444914 100644 --- a/src/app/components/console/console.component.ts +++ b/src/app/components/console/console.component.ts @@ -1,34 +1,31 @@ import {Component, Input, ViewChild} from '@angular/core'; -import { take } from 'rxjs'; +import {sleep} from '../../misc/utils'; import {TypewriterComponent} from '../typewriter/typewriter.component'; -export type ConsoleConfig = { - input: string, - output: () => string -} - @Component({ selector: 'console', templateUrl: './console.component.html', styleUrls: ['./console.component.scss'] }) export class ConsoleComponent { + done = () => {}; input = ''; output: string[] = []; prompt = '>' - done = () => {}; - @Input() height: string = 'auto'; @ViewChild(TypewriterComponent) typewriter!: TypewriterComponent; - exec(input: string, output: () => string) { - this.done = () => { - this.output.push(`${this.prompt} ${input}`); - console.log(output()); - this.output.push(output()); + clear() { this.output = []; } + + exec(input: string, output: () => any, pause = 1000) { + this.done = async () => { + await sleep(pause); this.input = ''; + this.output.push(`${this.prompt} ${input}`); + const out = output(); + if(typeof out == 'string') this.output.push(out); }; this.input = input; } diff --git a/src/app/misc/utils.ts b/src/app/misc/utils.ts new file mode 100644 index 0000000..7c91310 --- /dev/null +++ b/src/app/misc/utils.ts @@ -0,0 +1,18 @@ +/** + * Use with await to pause the script for a specified amount of time (in miliseconds). + * + * **Example:** + * ``` + * async () => { + * ... + * await sleep(1000) // Wait 1 second + * ... + * } + * ``` + * + * @param {number} ms - Time to pause in miliseconds + * @returns {Promise} - Promise you should await + */ +export function sleep(ms: number) { + return new Promise(res => setTimeout(res, ms)); +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index bcae2b3..3970ab4 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -1,15 +1,27 @@ -import {Component, ViewChild} from '@angular/core'; -import {ConsoleComponent, ConsoleConfig} from '../../components/console/console.component'; +import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {ConsoleComponent} from '../../components/console/console.component'; import {QuoteService} from '../../services/quote.service'; +import {sleep} from '../../misc/utils'; @Component({ selector: 'home', templateUrl: './home.component.html' }) -export class HomeComponent { +export class HomeComponent implements AfterViewInit { @ViewChild(ConsoleComponent) console!: ConsoleComponent; - constructor(private quotes: QuoteService) { - setTimeout(() => this.console.exec('bash ./random-thought.sh', () => quotes.random()), 3000); + constructor(private quotes: QuoteService) { } + + ngAfterViewInit() { this.animateConsole(); } + + animateConsole() { + setTimeout(async () => { + this.console.exec('bash ./random-thought.sh', () => this.quotes.random()); + await sleep(10000); + this.console.exec('clear', async () => { + this.console.clear(); + this.animateConsole(); + }); + }, 1000); } } diff --git a/tsconfig.app.json b/tsconfig.app.json index 82d91dc..23d4467 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -6,8 +6,9 @@ "types": [] }, "files": [ - "src/main.ts", - "src/polyfills.ts" + "src/main.ts", + "src/polyfills.ts", + "src/app/misc/utils.ts" ], "include": [ "src/**/*.d.ts"