Merge pull request #270 from computas/SP24-770-felles-header

Sp24 770 felles header

src/app/game/game-intermediate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.ts

@@ -4,7 +4,7 @@ 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 { CustomButtonComponent } from '../../custom-button/custom-button.component';
+import { CustomButtonComponent } from '../../shared-components/custom-button/custom-button.component';
 import { ButtonStyleClass } from '@/app/shared/buttonStyles';
 @Component({
   selector: 'app-game-intermediate-result-footer',

src/app/game/game-intermediate-result/game-intermediate-result.component.html

@@ -1,6 +1,10 @@
 <div class="container-background">
   <div id="intermediate-container">
-    <app-game-intermediate-result-header class="result-header"></app-game-intermediate-result-header>
+    <app-custom-header
+      [buttonStyle]="homeButtonStyleClass"
+      [buttonText]="'END_GAME_BUTTON' | translate"
+      [showProgressBar]="true"
+    />
     <app-game-drawing-feedback class="avatar-feedback"></app-game-drawing-feedback>
     <app-game-drawing-display
       [drawingURL]="result?.imageData"

src/app/game/game-intermediate-result/game-intermediate-result.component.scss

@@ -2,17 +2,17 @@
 
 #intermediate-container {
   display: grid;
-  grid-template-rows: 10vh 44vh 34vh 12vh;
+  grid-template-rows: 10vh 44vh 34vh auto;
   grid-template-columns: repeat(12, 1fr);
   position: relative;
   color: $white_color;
-  padding: 0.6em 1.2em;
+  padding: 1em 1.5em 0;
   min-height: 100vh;
 }
 
-.result-header {
+app-custom-header {
+  grid-row: 1;
   grid-column: 1 / -1;
-  grid-row: 1 / 2;
 }
 
 .avatar-feedback {
@@ -23,26 +23,20 @@
 .user-drawing-and-score {
   grid-column: 9 / 12;
   justify-self: end;
+  margin-top: 0.2rem;
 }
 
-.footer {
-  grid-row: 4 / -1;
-  grid-column: 1 / -1;
-}
-
-.result-img > img {
-  width: 256px;
-  height: 256px;
-}
-
-.guessed-word {
-  font-family: AeonikBlack;
-  color: $white_color;
-}
 
 .example-drawings {
   margin-top: 2em;
   margin-right: 3em;
   grid-row: 3 / -1;
   grid-column: 1 / -1;
 }
+
+.footer {
+  grid-row: 3 / -1;
+  grid-column: 1 / -1;
+  align-self: flex-end;
+  padding-bottom: 1em;
+}

src/app/game/game-intermediate-result/game-intermediate-result.component.ts

@@ -6,10 +6,11 @@ import { TranslationService } from '@/app/core/translation.service';
 import { TranslatePipe } from '@/app/core/translation.pipe';
 import { GameDrawingFeedbackComponent } from './game-drawing-feedback/game-drawing-feedback.component';
 import { GameDrawingDisplayComponent } from './game-drawing-display/game-drawing-display.component';
-import { GameIntermediateResultHeaderComponent } from './game-intermediate-result-header/game-intermediate-result-header.component';
 import { GameExampleDrawingsComponent } from './game-example-drawings/game-example-drawings.component';
 import { GameIntermediateResultFooterComponent } from './game-intermediate-result-footer/game-intermediate-result-footer.component';
 import { GameStateService } from '../services/game-state-service';
+import { CustomHeaderComponent } from '../shared-components/custom-header/custom-header.component';
+import { ButtonStyleClass } from '@/app/shared/buttonStyles';
 @Component({
   selector: 'app-game-intermediate-result',
   templateUrl: './game-intermediate-result.component.html',
@@ -20,13 +21,14 @@ import { GameStateService } from '../services/game-state-service';
     GameDrawingFeedbackComponent,
     GameDrawingDisplayComponent,
     GameIntermediateResultComponent,
-    GameIntermediateResultHeaderComponent,
     GameExampleDrawingsComponent,
     GameIntermediateResultFooterComponent,
+    CustomHeaderComponent
   ],
 })
 export class GameIntermediateResultComponent implements OnInit, OnDestroy {
   result: Result | undefined;
+  homeButtonStyleClass = ButtonStyleClass.home;
   constructor(
     private gameStateService: GameStateService,
     private drawingService: DrawingService,

src/app/game/game-intermediate-result/game-intermediate-result-header/game-progress-bar/game-progress-bar.component.scss → src/app/game/game-intermediate-result/game-progress-bar/game-progress-bar.component.scss

@@ -1,4 +1,4 @@
-@import './../../../../../variables.scss';
+@import './../../../../variables.scss';
 
 .round-number-progress {
   font-family: 'AeonikMedium';

src/app/game/game-intermediate-result/game-intermediate-result-header/game-progress-bar/game-progress-bar.component.ts → src/app/game/game-intermediate-result/game-progress-bar/game-progress-bar.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { DrawingService } from '../../../services/drawing.service';
+import { DrawingService } from '../../services/drawing.service';
 import { TranslatePipe } from '@/app/core/translation.pipe';
 import { GameStateService } from '@/app/game/services/game-state-service';
 
+
 @Component({
   selector: 'app-game-progress-bar',
   standalone: true,

src/app/game/game-multiplayer/lobby/lobby.component.ts

@@ -12,7 +12,7 @@ import { SpeechBubbleComponent } from '../../speech-bubble/speech-bubble.compone
 import { CustomColorsIO } from '@/app/shared/customColors';
 import { PointerSide, ArrowAlignment } from '@/app/shared/models/interfaces';
 import { IAvatarComponent } from '@/assets/avatars/i-avatar/i-avatar.component';
-import { CustomButtonComponent } from '../../custom-button/custom-button.component';
+import { CustomButtonComponent } from '../../shared-components/custom-button/custom-button.component';
 import { ButtonStyleClass } from '@/app/shared/buttonStyles';
 
 @Component({

src/app/game/game-pick-difficulty/game-pick-difficulty.component.html

@@ -1,20 +1,10 @@
 <div class="container-background">
   <div class="container" (click)="skipAnimation()" (keypress)="skipAnimation()" tabindex="0">
-    <app-custom-button
+    <app-custom-header 
       [buttonStyle]="homeButtonStyleClass"
       [buttonText]="'BACK_BUTTON' | translate"
-      iconSrc="../assets/icons/arrow4-svgrepo-com.svg"
-      routerLink="/welcome"
-      routerLinkActive="active"
-      alt="Go back button"
-      aria-label="Return button"
-      id="back-btn"
+      [showProgressBar]="false"
     />
-    <header class="header">
-      <button class="logo">
-        <img src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" aria-label="Gå til admin side" />
-      </button>
-    </header>
     <div class="main-content">
       <div class="text-content">
         <div class="I-figure" [@show]="stateFigureI">

src/app/game/game-pick-difficulty/game-pick-difficulty.component.scss

@@ -1,30 +1,29 @@
 @import '../../../variables.scss';
 
 .container {
+  display: grid;
+  grid-template-rows: 10vh auto 1fr; 
+  grid-template-columns: 1fr; 
+  min-height: 100vh;
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
+  padding: 1em 1.5em;
 }
 
-.header {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  padding-right: 1.5rem;
+app-custom-header {
+  grid-row: 1;
 }
 
 .main-content {
-  flex: 1;
+  grid-row: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 50px;
+  margin-top: 2rem;
 }
 
 .text-content {
+  margin-top: 2rem;
   display: flex;
   justify-content: start;
   width: 70ww;
@@ -61,15 +60,10 @@
 }
 
 .button-container {
-  margin: 20px;
   display: inline-flex;
   align-items: center;
   gap: 1.5rem;
-  margin: 15vh 20px 0 60px;
+  margin: 15vh 0 0 60px;
 }
 
-#back-btn {
-  position: absolute;
-  top: 2rem;
-  left: 2rem;
-}
+

src/app/game/game-pick-difficulty/game-pick-difficulty.component.ts

@@ -3,7 +3,6 @@ import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { routes } from '../../shared/models/routes';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
-import { NgIf } from '@angular/common';
 import { GameConfigService } from '../services/game-config.service';
 import { TranslationService } from '@/app/core/translation.service';
 import { TranslatePipe } from '@/app/core/translation.pipe';
@@ -14,22 +13,23 @@ import { CustomColorsIO } from '../../shared/customColors';
 import { ArrowAlignment, PointerSide } from '@/app/shared/models/interfaces';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { ButtonStyleClass } from '@/app/shared/buttonStyles';
-import { CustomButtonComponent } from '../custom-button/custom-button.component';
+import { CustomButtonComponent } from '../shared-components/custom-button/custom-button.component';
+import { CustomHeaderComponent } from '../shared-components/custom-header/custom-header.component';
 
 @Component({
   selector: 'app-game-pick-difficulty',
   templateUrl: './game-pick-difficulty.component.html',
   styleUrl: './game-pick-difficulty.component.scss',
   standalone: true,
   imports: [
-    NgIf,
     MatIcon,
     MatButton,
     TranslatePipe,
     SpeechBubbleComponent,
     RouterLink,
     RouterLinkActive,
     CustomButtonComponent,
+    CustomHeaderComponent
   ],
   animations: [
     trigger('show', [

src/app/game/game-result/game-result.component.ts

@@ -27,7 +27,7 @@ import { confettiSettings, iConfettiFigure, oConfettiFigure } from '@/assets/ava
 import { IAvatarComponent } from '@/assets/avatars/i-avatar/i-avatar.component';
 import { OAvatarComponent } from '@/assets/avatars/o-avatar/o-avatar.component';
 import { ButtonStyleClass } from '@/app/shared/buttonStyles';
-import { CustomButtonComponent } from '../custom-button/custom-button.component';
+import { CustomButtonComponent } from '../shared-components/custom-button/custom-button.component';
 
 @Component({
   selector: 'app-game-result',