#64 adjusting template

Author: isahann

src/app/about-window/about-window.component.html

@@ -1,7 +1,7 @@
 <div class="window">
   <app-window-title-bar iconPath="about.png" title="About XPQuiz"></app-window-title-bar>
   <div class="window-body">
-    <label><b>XPQuiz</b>&nbsp;- Version 1.4.2</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.5.0</label>
     <label class="main">Created by&nbsp;<b><a href="https://isahann.github.io">Isahann Hanacleto</a></b></label>
 
     <label>Source code at&nbsp;<b><a href="https://github.com/xpquiz/xpquiz.github.io">GitHub</a></b></label>

src/app/common/icon-text-button/icon-text-button.component.html

@@ -1,4 +1,4 @@
-<button (click)="this.onClick()">
+<button (click)="this.onClick()" [disabled]="this.disabled">
   <img
     [ngSrc]="'assets/icons/30x30/' + this.iconPath"
     alt="" [height]="this.iconSize" [width]="this.iconSize"/>

src/app/common/icon-text-button/icon-text-button.component.sass

@@ -3,7 +3,7 @@ button
   flex-direction: column
   align-items: center
   justify-content: center
-  min-height: 100px
+  height: 130px
   width: 170px
 
   img

src/app/common/icon-text-button/icon-text-button.component.ts

@@ -13,6 +13,8 @@ export class IconTextButtonComponent {
   public title: string = '';
   @Input()
   public description: string = '';
+  @Input()
+  public disabled: boolean = false;
   @Output()
   public onButtonClick: EventEmitter<void> = new EventEmitter<void>();
 

src/app/game-mode-window/game-mode-window.component.html

@@ -7,9 +7,10 @@
       <ng-container *ngFor="let mode of this.gameModes">
         <app-icon-text-button
           [iconPath]="mode.title + '.png'"
-          [title]="mode.title.toUpperCase()"
+          [title]="mode.title.toUpperCase().replace('-', ' ')"
           [description]="mode.description"
           (onButtonClick)="this.router.navigateByUrl('quiz-' + mode.title)"
+          [disabled]="mode.questions < 0"
         ></app-icon-text-button>
       </ng-container>
     </div>

src/app/game-mode-window/game-mode-window.component.ts

@@ -14,7 +14,8 @@ export class GameModeWindowComponent {
 
   protected readonly gameModes: GameMode[] = [
     GameMode.NORMAL,
-    GameMode.TRIFECTA
+    GameMode.TRIFECTA,
+    GameMode.TIME_RUSH,
   ];
 
   constructor(

src/app/question-trifecta-window/question-trifecta-window.component.ts

@@ -147,7 +147,7 @@ export class QuestionTrifectaWindowComponent {
         return {
           icon: correctAnswer ? '🟩' : '🟥',
           answer: answer!,
-          points: correctAnswer ? `(${question.points} * 3) = ${question.points * 3} points` : '0'
+          points: correctAnswer ? `(${question.points} * 3) = ${question.points * 3}` : '0'
         }
       }),
       questionPoints: correctAnswers ? totalPoints : 0,

src/assets/icons/30x30/time-rush.png

@@ -1,19 +1,24 @@
 {{#questions}}
-  👉 {{{.}}} 👈
+👉 {{{.}}}
 {{/questions}}
 
 The answers were...
 
 {{#correctAnswers}}
-  🟥 {{{.}}}
+  🟩 {{{.}}}
 {{/correctAnswers}}
 
 I picked...
 
 {{#selectedAnswers}}
-  {{{icon}}} {{{answer}}} {{{points}}}
+  {{{icon}}} {{{answer}}} - {{{points}}} points
 {{/selectedAnswers}}
 
-{{totalPoints}}
+{{#questionPoints}}
+Earned {{questionPoints}} points in total!
+{{/questionPoints}}
+{{^questionPoints}}
+Need some luck next time...
+{{/questionPoints}}
 
 🤔 XPQuiz - xpquiz.github.io ❔

src/assets/templates/question_result_trifecta.mustache

@@ -2,7 +2,8 @@ import {TemplateEnum} from "../Template";
 
 export class GameMode {
   static readonly NORMAL = new GameMode('normal', 'Standard mode. Answer a question, wait 3 hours to play again. Simple as that.', 1, TemplateEnum.QUESTION_RESULT);
-  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3, TemplateEnum.QUESTION_RESULT);
+  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3, TemplateEnum.QUESTION_RESULT_TRIFECTA);
+  static readonly TIME_RUSH = new GameMode('time-rush', 'Coming soon...', -1, TemplateEnum.QUESTION_RESULT);
 
   private constructor(public readonly title: string,
                       public readonly description: string,
@@ -16,6 +17,8 @@ export class GameMode {
         return GameMode.NORMAL;
       case 'trifecta':
         return GameMode.TRIFECTA;
+      case 'time-rush':
+        return GameMode.TIME_RUSH;
       default:
         return GameMode.NORMAL;
     }