Added loop to console (closes #1)

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) {
+	clear() { this.output = []; }
-		this.done = () => {
+
-			this.output.push(`${this.prompt} ${input}`);
+	exec(input: string, output: () => any, pause = 1000) {
-			console.log(output());
+		this.done = async () => {
-			this.output.push(output());
+			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;
 	}

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<unknown>} - Promise you should await
+ */
+export function sleep(ms: number) {
+	return new Promise(res => setTimeout(res, ms));
+}

src/app/views/home/home.component.ts

@@ -1,15 +1,27 @@
-import {Component, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {ConsoleComponent, ConsoleConfig} from '../../components/console/console.component';
+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) {
+	constructor(private quotes: QuoteService) { }
-		setTimeout(() => this.console.exec('bash ./random-thought.sh', () => quotes.random()), 3000);
+
+	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);
 	}
 }

tsconfig.app.json

@@ -6,8 +6,9 @@
     "types": []
   },
   "files": [
-    "src/main.ts",
+	  "src/main.ts",
-    "src/polyfills.ts"
+	  "src/polyfills.ts",
+	  "src/app/misc/utils.ts"
   ],
   "include": [
     "src/**/*.d.ts"