style: implemented new button component on more screens

computas · Jul 24, 2024 · ecef361 · ecef361
1 parent 0f1d205
commit ecef361
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 86 deletions.
diff --git a/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.html b/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.html
@@ -1,16 +1,11 @@
 <footer>
-  <div role="button" aria-disabled="true" (keydown)="nextPage()" (click)="nextPage()" [class]="buttonStyle()">
-    <button class="next-page-button">
-      <div class="button-text">
-        {{ buttonTextKey | translate }}
-        @if (!isWaitingForPlayer) {
-        <img
-          class="button-icon"
-          src="../../../../assets/arrow-right-solid.svg"
-          alt="an arrow that points to the right"
-        />
-        }
-      </div>
-    </button>
-  </div>
+  <app-custom-button
+      aria-disabled="true"
+      [buttonStyle]="buttonStyleClass"
+      [buttonText]=" buttonTextKey | translate "
+      (keydown)="nextPage()" 
+      (click)="nextPage()"
+    >
+        <mat-icon slot="custom-mat-icon" class="button-icon-gradient" aria-label="play_arrow">arrow_forward_ios</mat-icon>
+    </app-custom-button>
 </footer>
diff --git a/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss b/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss
@@ -1,10 +1,17 @@
 @import './../../../../variables.scss';
 
 footer {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  display: flex;
+  flex-direction: row-reverse;
 }
 
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+
 .button-container,
 .disabled {
   grid-column: 7 / -1;
@@ -14,20 +21,7 @@ footer {
   border: 3px solid white;
   background: linear-gradient(90deg, #151cdb 0%, #6b2eac 25%, #fd595d 50%, #bea97e 75%, #1bc0d2 100%);
 }
-
-.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.next-page-button {
-  cursor: inherit;
-  padding: 0.1em 0.5em;
-  background-color: rgba(0, 0, 0, 0.3);
-  color: $text_primary_color;
-  font-size: var(--fontSizeSmall);
-  border-radius: var(--buttonBorderRadius);
-}
+/* 
 .button-container:hover {
   text-decoration: none;
   color: #fff;
@@ -48,16 +42,4 @@ footer {
 .button-container:active {
   box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.15), -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
     inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
-}
-
-.button-text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.3em;
-  font-family: AeonikRegular;
-}
-
-.button-icon {
-  height: 40px;
-}
+} */
diff --git a/...diate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.ts b/...diate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.ts
@@ -4,10 +4,12 @@ import { MatIcon } from '@angular/material/icon';
 import { GAMESTATE } from '@/app/shared/models/interfaces';
 import { MultiplayerService } from '../../services/multiplayer.service';
 import { GameStateService } from '../../services/game-state-service';
+import { CustomButton } from '../../custom-button/custom-button.component';
+import { ButtonStyleClass } from '@/app/shared/buttonStyles';
 @Component({
   selector: 'app-game-intermediate-result-footer',
   standalone: true,
-  imports: [TranslatePipe, MatIcon],
+  imports: [TranslatePipe, MatIcon, CustomButton],
   templateUrl: './game-intermediate-result-footer.component.html',
   styleUrl: './game-intermediate-result-footer.component.scss',
 })
@@ -16,6 +18,8 @@ export class GameIntermediateResultFooterComponent implements OnInit {
   waitingForPlayerState = 'WAITING_FOR_PLAYER';
   isWaitingForPlayer = false;
 
+  buttonStyleClass = ButtonStyleClass.forward;
+
   constructor(private gameStateService: GameStateService, private multiplayerService: MultiplayerService) {}
 
   ngOnInit(): void {

diff --git a/...ate-result/game-intermediate-result-header/game-intermediate-result-header.component.html b/...ate-result/game-intermediate-result-header/game-intermediate-result-header.component.html
@@ -1,7 +1,12 @@
 <header class="header">
-  <button class="home-btn" (click)="openDialog()">
-    {{ 'END_GAME_BUTTON' | translate }}
-  </button>
+  <app-custom-button
+      [buttonStyle]="homeButtonStyleClass"
+      [buttonText]=" 'END_GAME_BUTTON' | translate "
+      iconSrc="../../../../assets/house.svg"
+      (click)="openDialog()"
+      alt="Go home button" 
+      aria-label="Home button"
+    />
   <app-game-progress-bar class="game-progress-bar"></app-game-progress-bar>
   <img class="logo" src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" />
 </header>
diff --git a/...diate-result/game-intermediate-result-header/game-intermediate-result-header.component.ts b/...diate-result/game-intermediate-result-header/game-intermediate-result-header.component.ts
@@ -3,17 +3,21 @@ import { GameProgressBarComponent } from './game-progress-bar/game-progress-bar.
 import { TranslatePipe } from '@/app/core/translation.pipe';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmExitDialogComponent } from './confirm-exit-dialog/confirm-exit-dialog.component';
+import { CustomButton } from '../../custom-button/custom-button.component';
+import { ButtonStyleClass } from '@/app/shared/buttonStyles';
 
 @Component({
   selector: 'app-game-intermediate-result-header',
   standalone: true,
-  imports: [GameProgressBarComponent, TranslatePipe],
+  imports: [GameProgressBarComponent, TranslatePipe, CustomButton],
   templateUrl: './game-intermediate-result-header.component.html',
   styleUrl: './game-intermediate-result-header.component.scss',
 })
 export class GameIntermediateResultHeaderComponent {
   readonly dialog = inject(MatDialog);
 
+  homeButtonStyleClass = ButtonStyleClass.home;
+
   openDialog(): void {
     this.dialog.open(ConfirmExitDialogComponent);
   }

diff --git a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html
@@ -34,44 +34,6 @@
             >
             </app-speech-bubble>
             <div class="button-container" [@show]="stateButtons">
-              <!-- 
-              <button [disabled]="buttonsAreDisabled" class="button" id="easy-button" (click)="startDrawing('easy')">
-                <img
-                  src="../../../assets/icons/icon_difficulty_easy.svg"
-                  alt="Easy difficulty icon"
-                  class="difficulty-icon"
-                />
-                <div class="button-text">
-                  {{ 'EASY_BUTTON' | translate }}
-                </div>
-              </button>
-              <button
-                [disabled]="buttonsAreDisabled"
-                class="button"
-                id="medium-button"
-                (click)="startDrawing('medium')"
-              >
-                <img
-                  src="../../../assets/icons/icon_difficulty_medium.svg"
-                  alt="Medium difficulty icon"
-                  class="difficulty-icon"
-                />
-                <div class="button-text">
-                  {{ 'MEDIUM_BUTTON' | translate }}
-                </div>
-              </button>
-              <button [disabled]="buttonsAreDisabled" class="button" id="hard-button" (click)="startDrawing('hard')">
-                <img
-                  src="../../../assets/icons/icon_difficulty_hard.svg"
-                  alt="Hard difficulty icon"
-                  class="difficulty-icon"
-                />
-                <div class="button-text">
-                  {{ 'HARD_BUTTON' | translate }}
-                </div>
-              </button> -->
-
-
               <app-custom-button
                 [disabled]="buttonsAreDisabled"
                 [buttonStyle]="buttonStyleClass"