Added build:prod rpm script, updated workflow scripts, implemented co…

…mposability using ngx-span-of-strings

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: npm ci && npm run build:prod
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/firebase-hosting-pull-request.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: npm ci && npm run build:prod
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -27,6 +28,7 @@
     "@angular/platform-browser-dynamic": "~11.0.1",
     "@angular/router": "~11.0.1",
     "ngx-countdown": "^11.0.0",
+    "ngx-span-of-strings": "0.0.2",
     "rxjs": "~6.6.0",
     "sweetalert2": "^10.10.1",
     "tslib": "^2.0.0",

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
+import { NgxSpanOfStringsModule } from 'ngx-span-of-strings';
 
 @NgModule({
   declarations: [AppComponent, HomeComponent],
@@ -32,6 +33,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     CountdownModule,
     FormsModule,
     ReactiveFormsModule,
+    NgxSpanOfStringsModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/pages/home/home.component.html

@@ -16,7 +16,7 @@
   </button>
 </div>
 <div class="container" *ngIf="!showStartButton">
-  <!-- Timer -->
+  <!-- start: Timer -->
   <div class="timer-container">
     <p>TIME LEFT</p>
     <countdown
@@ -25,16 +25,16 @@
       (event)="handleEvent($event)"
     ></countdown>
   </div>
-  <!-- Text -->
-  <div class="typing-paragraph" id="typing-paragraph">
-    <span
-      *ngFor="let text of stringArr; let i = index"
-      [class.shaded]="i < currentWordIndex"
-      [class.active]="i === currentWordIndex"
-      >{{ text }}</span
-    >
-  </div>
-  <!-- Input box -->
+  <!-- end: Timer -->
+
+  <!-- start: Text -->
+  <lib-ngx-span-of-strings
+    [stringArr]="stringArr"
+    [currentWordIndex]="currentWordIndex"
+  ></lib-ngx-span-of-strings>
+  <!-- end: Text -->
+
+  <!-- start: Input box -->
   <div>
     <form class="typing-form">
       <mat-form-field class="typing-full-width">
@@ -51,8 +51,14 @@
         ></textarea>
       </mat-form-field>
     </form>
-    <button mat-raised-button color="accent" class="float-right" (click)="resetTest()">
+    <button
+      mat-raised-button
+      color="accent"
+      class="float-right"
+      (click)="resetTest()"
+    >
       Cancel
     </button>
   </div>
+  <!-- end: Input box -->
 </div>

src/app/pages/home/home.component.scss

@@ -10,18 +10,6 @@
   width: 100%;
 }
 
-.typing-paragraph {
-  max-width: 700px;
-  width: 100%;
-  overflow-y: scroll;
-  height: 100px;
-  background-color: white;
-  color: #000;
-  padding: 15px;
-  border-radius: 15px;
-  margin: 15px;
-}
-
 .typing-full-width {
   width: 100%;
 }
@@ -33,13 +21,6 @@
   margin: 25px;
 }
 
-span.active {
-  color: #69f0ae;
-}
-span.shaded {
-  color: #d8d8d8;
-}
-
 .float-right {
   float: right;
 }

src/app/pages/home/home.component.ts

@@ -76,9 +76,10 @@ export class HomeComponent implements OnInit {
     inputText.split(' ').forEach((word: string, index: number) => {
       const expectedWord = this.stringArr[index].trim();
       const didWordsMatch = expectedWord === word;
-      console.log(
-        `expectedWord: ${expectedWord} realWord: ${word} didWordsMatch: ${didWordsMatch}`
-      );
+      // Uncomment for logging purpose
+      // console.log(
+      //   `expectedWord: ${expectedWord} realWord: ${word} didWordsMatch: ${didWordsMatch}`
+      // );
       if (didWordsMatch) {
         score += 10;
       } else {