diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 950ba4a..cff0691 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,2 +1,40 @@ -

Home

-Temp +
+
+ +
+
+

Collaborative map making... {{typedText | async}}

+
+
+
+
+ + + +
+
+ +
+
+ + + +
+
+ +
+
+
+
+
+
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 98b9def..165200d 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,9 +1,27 @@ import {Component} from "@angular/core"; +import {Observable, timer} from "rxjs"; +import {map, take} from "rxjs/operators"; +import {Router} from "@angular/router"; + +const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; @Component({ selector: 'home', - templateUrl: 'home.component.html', + templateUrl: 'home.component.html' }) export class HomeComponent { + phrase = 'If you\'re into that'; + typedText: Observable; + constructor(private router: Router) { + this.typedText = timer(750, 50).pipe(take(this.phrase.length), map((i: number) => this.phrase.substring(0, i + 1))); + } + + async new() { + let mapCode: string; + do { + mapCode = Array(16).fill(0).map(() => chars[Math.round(Math.random() * chars.length)]).join(''); + } while (false); + this.router.navigate(['/', mapCode]); + } } diff --git a/src/styles.scss b/src/styles.scss index 8443754..b7039b1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,4 @@ +@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); @import '~bootstrap-scss/bootstrap.scss'; :focus { @@ -22,3 +23,9 @@ a[href^="https://maps.google.com/maps"]{display:none !important} .gmnoprint div { background:none !important; } + +.mat-padding-0 { + .mat-form-field-infix { + border: 0 !important; + } +}