Add logo animation

Author: trungvose

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { StartLineComponent } from './components/start-line/start-line.component
 import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
 import { environment } from '../environments/environment';
 import { TileComponent } from './components/tile/tile.component';
+import { LogoComponent } from './components/logo/logo.component';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import { TileComponent } from './components/tile/tile.component';
     LevelComponent,
     StartLineComponent,
     TileComponent,
+    LogoComponent,
   ],
   imports: [BrowserModule, environment.production ? [] : AkitaNgDevtools.forRoot()],
   providers: [],

src/app/components/logo/logo.component.html

@@ -0,0 +1,4 @@
+<div class="logo">
+    <div [ngClass]="['bg dragon', className]"></div>
+    <p>Press Space to start</p>
+</div>

src/app/components/logo/logo.component.scss

@@ -0,0 +1,53 @@
+.logo {
+  width: 224px;
+  height: 200px;
+  position: absolute;
+  top: 100px;
+  left: 12px;
+  text-align: center;
+  overflow: hidden;
+  
+  p {
+    position: absolute;
+    width: 100%;
+    line-height: 1.4;
+    top: 100px;
+    left: 0;
+    font-family: initial;
+    letter-spacing: 6px;
+    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.35);
+  }
+
+  .dragon {
+    width: 80px;
+    height: 86px;
+    margin: 0 auto;
+    background-position: 0 -100px;
+    &.r1,
+    &.l1 {
+      background-position: 0 -100px;
+    }
+    &.r2,
+    &.l2 {
+      background-position: -100px -100px;
+    }
+    &.r3,
+    &.l3 {
+      background-position: -200px -100px;
+    }
+    &.r4,
+    &.l4 {
+      background-position: -300px -100px;
+    }
+    &.l1,
+    &.l2,
+    &.l3,
+    &.l4 {
+      transform: scale(-1, 1);
+      -webkit-transform: scale(-1, 1);
+      -ms-transform: scale(-1, 1);
+      -moz-transform: scale(-1, 1);
+      -o-transform: scale(-1, 1);
+    }
+  }
+}

src/app/components/logo/logo.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable, timer } from 'rxjs';
+import { finalize, map, startWith, takeWhile, tap } from 'rxjs/operators';
+
+@Component({
+  selector: 't-logo',
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.scss']
+})
+export class LogoComponent implements OnInit {
+  className: string = '';
+  constructor() {}
+
+  ngOnInit(): void {
+    this.run().subscribe();
+  }
+
+  eyes() {
+    return timer(0, 150).pipe(
+      startWith(0),
+      map((x) => x + 1),
+      takeWhile((x) => x < 6),
+      tap((x) => {
+        let state = x % 2 === 0 ? 1 : 2;
+        this.className = `l${state}`;
+      })
+    );
+  }
+
+  run(): Observable<number> {
+    let side = 'r';
+    return timer(0, 100).pipe(
+      startWith(0),
+      map((x) => x + 1),
+      takeWhile((x) => x <= 40),
+      tap((x) => {
+        if (x === 10 || x === 20 || x === 30) {
+          side = side === 'r' ? 'l' : 'r';
+        }
+        let state = x % 2 === 0 ? 3 : 4;
+        this.className = `${side}${state}`;
+      }),
+      finalize(() => {
+        this.className = `${side}1`;
+      })
+    );
+  }
+}

src/app/containers/angular-tetris/angular-tetris.component.html

@@ -4,6 +4,7 @@
     <div class="screen">
         <div class="panel">
             <t-matrix></t-matrix>
+            <t-logo></t-logo>
             <div class="state">
                 <t-point></t-point>
                 <t-start-line></t-start-line>