refactor: add input to display drawing

computas · Jul 24, 2024 · 5922c38 · 5922c38
1 parent 6f8b736
commit 5922c38
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 408 deletions.
diff --git a/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.ts b/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.ts
@@ -10,18 +10,18 @@ import { DrawingService } from '../../services/drawing.service';
   styleUrl: './game-drawing-display.component.scss',
 })
 export class GameDrawingDisplayComponent implements OnInit {
+  @Input() drawingURL: string | undefined;
+  results = this.drawingService.lastResult;
   secondsUsed = 0;
-  drawingURL = '';
   hasCorrectGuess = false;
   roundScore = 0;
 
   constructor(private drawingService: DrawingService) {}
 
   ngOnInit(): void {
     this.secondsUsed = this.drawingService.getSecondsUsed();
-    this.drawingURL = this.drawingService.lastResult.imageData;
-    this.hasCorrectGuess = this.drawingService.lastResult.hasWon;
-    this.roundScore = this.drawingService.lastResult.score;
+    this.hasCorrectGuess = this.results.hasWon;
+    this.roundScore = this.results.score;
 
     this.drawingService.resetSecondsUsed();
   }

diff --git a/...pp/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.ts b/...pp/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.ts
@@ -1,6 +1,6 @@
 import { TranslatePipe } from '@/app/core/translation.pipe';
 import { SpeechBubbleComponent } from '../../speech-bubble/speech-bubble.component';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ArrowAlignment, PointerSide } from '@/app/shared/models/interfaces';
 import { CustomColorsIO } from '../../../shared/customColors';
 import { IAvatarComponent } from '@/assets/avatars/i-avatar/i-avatar.component';

diff --git a/src/app/game/game-intermediate-result/game-intermediate-result.component.html b/src/app/game/game-intermediate-result/game-intermediate-result.component.html
@@ -2,7 +2,10 @@
   <div id="intermediate-container">
     <app-game-intermediate-result-header class="result-header"></app-game-intermediate-result-header>
     <app-game-drawing-feedback class="avatar-feedback"></app-game-drawing-feedback>
-    <app-game-drawing-display class="user-drawing-and-score"></app-game-drawing-display>
+    <app-game-drawing-display
+      [drawingURL]="result?.imageData"
+      class="user-drawing-and-score"
+    ></app-game-drawing-display>
     <app-game-example-drawings class="example-drawings"></app-game-example-drawings>
     <app-game-intermediate-result-footer class="footer"></app-game-intermediate-result-footer>
   </div>

diff --git a/src/app/game/game-intermediate-result/game-intermediate-result.component.ts b/src/app/game/game-intermediate-result/game-intermediate-result.component.ts
@@ -26,6 +26,7 @@ import { GameStateService } from '../services/game-state-service';
   ],
 })
 export class GameIntermediateResultComponent implements OnInit, OnDestroy {
+  result: Result | undefined;
   constructor(
     private gameStateService: GameStateService,
     private drawingService: DrawingService,
@@ -34,6 +35,7 @@ export class GameIntermediateResultComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.result = this.drawingService.lastResult;
     this.gameStateService.savePageToLocalStorage(GAMESTATE.intermediateResult);
     this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe();
 

diff --git a/src/app/game/game-result/game-result.component.html b/src/app/game/game-result/game-result.component.html
@@ -1,124 +1,124 @@
-<div class="result-container-background container-background">
-  <button class="logo">
-    <img src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" aria-label="Gå til admin side" />
-  </button>
-  <div class="result-container">
-    <div class="result-section">
-      <div id="header">
-        <p id="header-text">
-          @if (!ismultiplayer) {
-          {{ 'DIFFICULTY' | translate }}:
-          <span id="difficulty-text">
-            @switch (difficulty) { @case (1){
-            {{ 'EASY_BUTTON' | translate }}
-            } @case(2) {
-            {{ 'MEDIUM_BUTTON' | translate }}
-            } @case(3) {
-            {{ 'HARD_BUTTON' | translate }}
-            } @default {
-            {{ 'EASY_BUTTON' | translate }}
-            } }</span
-          >
-          }
-        </p>
-        <div id="highscore-section">
-          @if (newHighscore) {
-          <h2 id="highscore-number">{{ 'NEW_HIGHSCORE_TEXT' | translate }}</h2>
-          } @else {
-          <h2 id="header-text">
-            {{ 'TODAYS_HIGHSCORE_TEXT' | translate }}
-            <span id="highscore-points"> {{ todaysHighscore.toString() }} {{ 'POINTS' | translate }}</span>
-          </h2>
-          }
-        </div>
-      </div>
-    </div>
-    <div [@fadeIn]="IState" id="i-text-box-container">
-      <app-i-avatar [height]="190" [width]="38" [color]="CustomColorsIO.white" />
-      <app-speech-bubble
-        [pointerSide]="PointerSide.Left"
-        [arrowAlignment]="ArrowAlignment.Top"
-        [titleText]="''"
-        [bodyText]="''"
-        [textColor]="CustomColorsIO.white"
-        [bubbleColor]="CustomColorsIO.pastelBlue"
-        [bubbleSize]="'large'"
-      >
-        <ng-content slot="body-alt">
-          <h1>
-            @if (ismultiplayer && score > opponentScore && score > 0) {
-            {{ 'SUMMARY_I_MULTIPLAYER_WIN' | translate }}
-            <span id="points">{{ score }} {{ 'POINTS' | translate }} </span>
-            }@else if (ismultiplayer && score === opponentScore) {
-            {{ 'SUMMARY_I_MULTIPLAYER_DRAW' | translate }}
-            <span id="points">{{ score }} {{ 'POINTS' | translate }}</span>
-            } @else if (ismultiplayer && score < opponentScore) {
-            {{ 'SUMMARY_I_MULTIPLAYER_LOSS' | translate }}
-            <span id="points"> {{ score }} {{ 'POINTS' | translate }} </span>
-            } @else if (score === 0) { {{ 'SUMMARY_I_NO_POINTS_1' | translate }} <span id="o-avatar">O</span>
-            {{ 'SUMMARY_I_NO_POINTS_2' | translate }} <span id="points">{{ 'SUMMARY_I_NO_POINTS_3' | translate }}</span>
-            } @else {
-            {{ 'SUMMARY_I_1' | translate }} <span id="o-avatar">O</span> {{ 'SUMMARY_I_2' | translate }}
-            <span id="points"> {{ score }} {{ 'SUMMARY_I_3' | translate }}</span>
-            }
-          </h1>
-          <div id="result-card-container">
-            @for (result of results; track result) {
-            <div id="result-card">
-              <img
-                mat-card-image
-                [src]="result.imageData"
-                [className]="result.hasWon ? 'game-result-img card-won' : 'game-result-img card-loss'"
-                alt=""
-              />
-              <p id="result-subtitle">
-                @if (result.word) {
-                <span class="result-word">{{ result.word | titlecase }} </span>
-                <span [className]="result.hasWon ? 'score win' : 'score loss'"> {{ result.score }} p</span>
-                }
-              </p>
-            </div>
-            }
-          </div>
-        </ng-content></app-speech-bubble
-      >
-    </div>
-
-    <div [@fadeIn]="OState" id="o-text-box-container">
-      <app-speech-bubble
-        id="o-speech-bubble"
-        [pointerSide]="PointerSide.Right"
-        [arrowAlignment]="ArrowAlignment.Center"
-        [titleText]="''"
-        [bodyText]="''"
-        [textColor]="CustomColorsIO.white"
-        [bubbleColor]="CustomColorsIO.indigo"
-        [bubbleSize]="'medium'"
-      >
-        <ng-content slot="body-alt">
-          <h1>
-            @if (score === 0) {
-            {{ 'SUMMARY_O_NO_POINTS' | translate }}
-            } @else {
-            {{ 'SUMMARY_O' | translate }}
-            }
-          </h1>
-        </ng-content>
-      </app-speech-bubble>
-      <app-o-avatar [height]="130" [width]="130" [color]="CustomColorsIO.white" />
-    </div>
-
-    <div id="summary-buttons-container">
-      <button (click)="endGame()" class="btn btn-secondary">
-        <div class="btn-text btn-text-secondary">
-          {{ 'END_GAME_BUTTON' | translate }}
-        </div>
-      </button>
-      <button (click)="playAgain()" class="btn">
-        <div class="btn-text">
-          {{ 'PLAY_AGAIN_BUTTON' | translate }}
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
+<div class="result-container-background container-background">
+  <button class="logo">
+    <img src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" aria-label="Gå til admin side" />
+  </button>
+  <div class="result-container">
+    <div class="result-section">
+      <div id="header">
+        <p id="header-text">
+          @if (!ismultiplayer) {
+          {{ 'DIFFICULTY' | translate }}:
+          <span id="difficulty-text">
+            @switch (difficulty) { @case (1){
+            {{ 'EASY_BUTTON' | translate }}
+            } @case(2) {
+            {{ 'MEDIUM_BUTTON' | translate }}
+            } @case(3) {
+            {{ 'HARD_BUTTON' | translate }}
+            } @default {
+            {{ 'EASY_BUTTON' | translate }}
+            } }</span
+          >
+          }
+        </p>
+        <div id="highscore-section">
+          @if (newHighscore) {
+          <h2 id="highscore-number">{{ 'NEW_HIGHSCORE_TEXT' | translate }}</h2>
+          } @else {
+          <h2 id="header-text">
+            {{ 'TODAYS_HIGHSCORE_TEXT' | translate }}
+            <span id="highscore-points"> {{ todaysHighscore.toString() }} {{ 'POINTS' | translate }}</span>
+          </h2>
+          }
+        </div>
+      </div>
+    </div>
+    <div [@fadeIn]="IState" id="i-text-box-container">
+      <app-i-avatar [height]="190" [width]="38" [color]="CustomColorsIO.white" />
+      <app-speech-bubble
+        [pointerSide]="PointerSide.Left"
+        [arrowAlignment]="ArrowAlignment.Top"
+        [titleText]="''"
+        [bodyText]="''"
+        [textColor]="CustomColorsIO.white"
+        [bubbleColor]="CustomColorsIO.pastelBlue"
+        [bubbleSize]="'large'"
+      >
+        <ng-content slot="body-alt">
+          <h1>
+            @if (ismultiplayer && score > opponentScore && score > 0) {
+            {{ 'SUMMARY_I_MULTIPLAYER_WIN' | translate }}
+            <span id="points">{{ score }} {{ 'POINTS' | translate }} </span>
+            }@else if (ismultiplayer && score === opponentScore) {
+            {{ 'SUMMARY_I_MULTIPLAYER_DRAW' | translate }}
+            <span id="points">{{ score }} {{ 'POINTS' | translate }}</span>
+            } @else if (ismultiplayer && score < opponentScore) {
+            {{ 'SUMMARY_I_MULTIPLAYER_LOSS' | translate }}
+            <span id="points"> {{ score }} {{ 'POINTS' | translate }} </span>
+            } @else if (score === 0) { {{ 'SUMMARY_I_NO_POINTS_1' | translate }} <span id="o-avatar">O</span>
+            {{ 'SUMMARY_I_NO_POINTS_2' | translate }} <span id="points">{{ 'SUMMARY_I_NO_POINTS_3' | translate }}</span>
+            } @else {
+            {{ 'SUMMARY_I_1' | translate }} <span id="o-avatar">O</span> {{ 'SUMMARY_I_2' | translate }}
+            <span id="points"> {{ score }} {{ 'SUMMARY_I_3' | translate }}</span>
+            }
+          </h1>
+          <div id="result-card-container">
+            @for (result of results; track result) {
+            <div id="result-card">
+              <img
+                mat-card-image
+                [src]="result.imageData"
+                [className]="result.hasWon ? 'game-result-img card-won' : 'game-result-img card-loss'"
+                alt=""
+              />
+              <p id="result-subtitle">
+                @if (result.word) {
+                <span class="result-word">{{ result.word | titlecase }} </span>
+                <span [className]="result.hasWon ? 'score win' : 'score loss'"> {{ result.score }} p</span>
+                }
+              </p>
+            </div>
+            }
+          </div>
+        </ng-content></app-speech-bubble
+      >
+    </div>
+
+    <div [@fadeIn]="OState" id="o-text-box-container">
+      <app-speech-bubble
+        id="o-speech-bubble"
+        [pointerSide]="PointerSide.Right"
+        [arrowAlignment]="ArrowAlignment.Center"
+        [titleText]="''"
+        [bodyText]="''"
+        [textColor]="CustomColorsIO.white"
+        [bubbleColor]="CustomColorsIO.indigo"
+        [bubbleSize]="'medium'"
+      >
+        <ng-content slot="body-alt">
+          <h1>
+            @if (score === 0) {
+            {{ 'SUMMARY_O_NO_POINTS' | translate }}
+            } @else {
+            {{ 'SUMMARY_O' | translate }}
+            }
+          </h1>
+        </ng-content>
+      </app-speech-bubble>
+      <app-o-avatar [height]="130" [width]="130" [color]="CustomColorsIO.white" />
+    </div>
+
+    <div id="summary-buttons-container">
+      <button (click)="endGame()" class="btn btn-secondary">
+        <div class="btn-text btn-text-secondary">
+          {{ 'END_GAME_BUTTON' | translate }}
+        </div>
+      </button>
+      <button (click)="playAgain()" class="btn">
+        <div class="btn-text">
+          {{ 'PLAY_AGAIN_BUTTON' | translate }}
+        </div>
+      </button>
+    </div>
+  </div>
+</div>