Feature/improved ux (#59)

* chore: images minimized

* chore: refactored name

* chore: unified messages

* chore: names refactored

* fix: remove console.logs

* chore: layout optimized

* feat: add more mood reaction

* chore: redirect to login if backend requires

src/app/app.module.ts

@@ -19,8 +19,8 @@ import { NeedsComponent } from './needs/needs.component';
 import { ShowSygotchiComponent } from './show-sygotchi/show-sygotchi.component';
 import { SygotchiErstellenComponent } from './sygotchi-erstellen/sygotchi-erstellen.component';
 import { HeaderComponent } from './header/header.component';
-import { SygotchiCleanComponent } from './sygotchi-clean/sygotchi-clean.component';
-import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
+import { SygotchiCleanComponent } from './clean-scene/sygotchi-clean.component';
+import { SleepFunctionComponent } from './sleep-function/sleep-function.component';
 import { KitchenComponent } from './kitchen/kitchen.component';
 import { FooterComponent } from './footer/footer.component';
 import { LeaderboardComponent } from './leaderboard/leaderboard.component';
@@ -29,7 +29,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { ErrorPageComponent } from './error-page/error-page.component';
 import { CleanFunctionComponent } from './clean-function/clean-function.component';
 import { KitchenFunctionComponent } from './kitchen-function/kitchen-function.component';
-import { BedroomComponent } from './bedroom/bedroom.component';
+import { BedroomSceneComponent } from './bedroom-scene/bedroom-scene.component';
 import { GymComponent } from './gym/gym.component';
 import { GymFunctionComponent } from './gym-function/gym-function.component';
 
@@ -44,14 +44,14 @@ import { GymFunctionComponent } from './gym-function/gym-function.component';
     ShowSygotchiComponent,
     SygotchiErstellenComponent,
     HeaderComponent,
-    SleepSceneComponent,
+    SleepFunctionComponent,
     NeedsComponent,
     KitchenComponent,
     SygotchiCleanComponent,
     FooterComponent,
     CleanFunctionComponent,
     KitchenFunctionComponent,
-    BedroomComponent,
+    BedroomSceneComponent,
     HowToPlayComponent,
     LeaderboardComponent,
     LeaderboardComponent,

src/app/bedroom/bedroom.component.html → src/app/bedroom-scene/bedroom-scene.component.html

@@ -10,7 +10,7 @@
             <app-needs></app-needs>
         </div>
         <div class="clean">
-            <app-sleep-scene></app-sleep-scene>
+            <app-sleep-function></app-sleep-function>
         </div>
     </div>
 </div>

src/app/bedroom/bedroom.component.ts → src/app/bedroom-scene/bedroom-scene.component.ts

@@ -4,11 +4,11 @@ import { Store } from '@ngrx/store';
 import { selectSygotchi } from '../store/sygotchi.selectors';
 
 @Component({
-  selector: 'app-bedroom',
-  templateUrl: './bedroom.component.html',
-  styleUrls: ['./bedroom.component.scss']
+  selector: 'app-bedroom-scene',
+  templateUrl: './bedroom-scene.component.html',
+  styleUrls: ['./bedroom-scene.component.scss']
 })
-export class BedroomComponent implements OnInit{
+export class BedroomSceneComponent implements OnInit{
   isAsleep: boolean;
   constructor(public router:Router, public store:Store){}
   ngOnInit(): void {

src/app/clean-function/clean-function.component.html

@@ -1,9 +1,8 @@
-<div class="message">
-    <div *ngIf="showMessage">
-    <span class="message"> {{message.text}} </span>
-    </div>
-</div>
-<button class="btn btn-primary w-100" (click)="clean()">
+<ngb-alert *ngIf="showMessage" [dismissible]="false">
+  {{message.text}}
+</ngb-alert>
+
+<button class="btn btn-primary w-100"  type="button" (click)="clean()">
     <i class="fa-solid fa-bath"></i>
     Waschen
-</button>
+</button>

src/app/clean-function/clean-function.component.scss

@@ -1,3 +0,0 @@
-.message{
-    height: 24px;
-}

src/app/gym-function/gym-function.component.html

@@ -1,9 +1,7 @@
-<div class="message">
-    <div *ngIf="showMessage">
-    <span class="message"> {{message.text}} </span>
-    </div>
-</div>
-<button class="btn btn-primary w-100" (click)="train()">
+<ngb-alert *ngIf="showMessage" [dismissible]="false">
+  {{message.text}}
+</ngb-alert>
+<button class="btn btn-primary w-100" type="button" (click)="train()">
     <i class="fa-solid fa-heart"></i>
     Trainieren
-</button>
+</button>

src/app/gym-function/gym-function.component.scss

@@ -1,7 +0,0 @@
-.btn{
-    margin: 2px;
-    width: 48.5%;
-}
-.message{
-    height: 24px;
-}

src/app/kitchen-function/kitchen-function.component.html

@@ -1,14 +1,12 @@
-<div class="message">
-    <div *ngIf="showMessage">
-    <span class="message"> {{message.text}} </span>
-    </div>
-</div>
+<ngb-alert *ngIf="showMessage" [dismissible]="false">
+  {{message.text}}
+</ngb-alert>
 
-<button class="btn btn-primary" (click)="feed()">
+<button class="btn btn-primary" type="button" (click)="feed()">
     <i class="fa-solid fa-cutlery"></i>
     Füttern
 </button>
-<button class="btn btn-primary" (click)="drink()">
+<button class="btn btn-primary" type="button" (click)="drink()">
     <i class="fa-solid fa-beer"></i>
     Trinken
-</button>
+</button>

src/app/kitchen-function/kitchen-function.component.scss

@@ -1,7 +1,4 @@
 .btn{
     margin: 2px;
-    width: 48.5%;
+    width: 48%;
 }
-.message{
-    height: 24px;
-}

src/app/kitchen-function/kitchen-function.component.ts

@@ -41,7 +41,6 @@ export class KitchenFunctionComponent implements OnInit{
       if(this.feedCooldown > -1){
         this.message.error = true
         this.message.text = 'Du musst ' + this.feedCooldown + ' Minuten warten bis dein SyGotchi wieder essen kann'
-        console.log(this.message.text)
         this.messageHandler()
       }else{
         this.actionsService.feedSygotchi()
@@ -94,7 +93,6 @@ export class KitchenFunctionComponent implements OnInit{
   messageHandler() {
     if(!this.showMessage){
       this.showMessage = true
-      console.log(this.showMessage)
       setTimeout(() => {
         this.showMessage = false
       }, 7000)

src/app/misc/app.routes.ts

@@ -5,11 +5,11 @@ import { SygotchiErstellenComponent } from "../sygotchi-erstellen/sygotchi-erste
 import { TeamSComponent } from "../team-s/team-s.component";
 import { DsgvoPageComponent } from "../dsgvo-page/dsgvo-page.component";
 import { ImpressumComponent } from "../impressum/impressum.component";
-import { SygotchiCleanComponent } from "../sygotchi-clean/sygotchi-clean.component";
+import { SygotchiCleanComponent } from "../clean-scene/sygotchi-clean.component";
 import { HowToPlayComponent } from "../how-to-play/how-to-play.component";
 import { KitchenComponent } from "../kitchen/kitchen.component";
 import { ErrorPageComponent } from "../error-page/error-page.component";
-import { BedroomComponent } from "../bedroom/bedroom.component";
+import { BedroomSceneComponent } from "../bedroom-scene/bedroom-scene.component";
 import {LeaderboardComponent} from "../leaderboard/leaderboard.component";
 import { GymComponent } from "../gym/gym.component";
 
@@ -22,7 +22,7 @@ export const APP_ROUTES: Routes = [
   {path: 'impressum', component: ImpressumComponent},
   {path: 'bathroom', component: SygotchiCleanComponent, canActivate: [AuthGuard]},
   {path: 'kitchen', component: KitchenComponent, canActivate: [AuthGuard]},
-  {path: 'bedroom', component: BedroomComponent, canActivate: [AuthGuard]},
+  {path: 'bedroom', component: BedroomSceneComponent, canActivate: [AuthGuard]},
   {path: 'leaderboard', component: LeaderboardComponent, canActivate: [AuthGuard]},
   {path: 'gym', component: GymComponent, canActivate: [AuthGuard]},
   {path: 'how-to-play', component: HowToPlayComponent},

src/app/misc/auth.interceptor.ts

@@ -1,15 +1,30 @@
 import { Injectable } from '@angular/core';
-import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
+import { catchError, throwError } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
+
+  constructor(private router: Router) {}
+
   intercept(request: HttpRequest<any>, next: HttpHandler) {
     const authToken = sessionStorage.getItem('token');
     if (authToken) {
       request = request.clone({
         headers: request.headers.set('Authorization', `Bearer ${authToken}`)
       });
     }
-    return next.handle(request);
+    return next.handle(request).pipe(
+      catchError((error: HttpErrorResponse) => {
+        if (error.status === 401) {
+          // Wenn ein 401-Fehler auftritt, leiten Sie den Benutzer zur Anmeldeseite um
+          this.router.navigate(['/auth']);
+        }
+
+        // Andernfalls lassen Sie den Fehler weiterhin durch
+        return throwError(error);
+      })
+    );
   }
 }

src/app/needs/needs.component.html

@@ -3,8 +3,8 @@
     <div class="text-center h3" *ngIf="sygotchi">
       <a>{{sygotchi.name}}</a>
     </div>
-    <div class="col-6 mb-3">
-      <div class="row align-items-center" *ngFor="let need of needsLeft">
+    <div class="col-6">
+      <div class="row align-items-center mb-2" *ngFor="let need of needsLeft">
         <div class="col-2 text-center">
           <i *ngIf="need.icon" [ngClass]="need.icon"></i>
         </div>
@@ -22,25 +22,16 @@
         </div>
       </div>
     </div>
-    <div class="col-6 mb-3">
-      <div class="flex">
-        <label>Stimmung:
-          <i class="fa-regular fa-lg" [ngClass]="mood"></i>
-        </label>
-        <br>
-        <label>Rang:
-          <span *ngIf="sygotchi">
-            {{ sygotchi.rank + 1 }}
-            <i class="fa-solid fa-trophy"></i>
-          </span>
-        </label>
-        <br>
-        <label>Score:
-          <span *ngIf="sygotchi">
-            {{ sygotchi.score}}
-            <i class="fa-solid fa-bank"></i>
-          </span>
-        </label>
+    <div class="col-6">
+      <div class="row" *ngIf="mood">
+        <label class="col-8 mb-3"><i class="fa-regular fa-smile"></i> Stimmung:</label>
+        <span class="col-4 text-end"><i class="fa-regular fa-lg" [ngClass]="mood"></i></span>
+
+        <label class="col-8 mb-3"><i class="fa-solid fa-trophy"></i> Rang:</label>
+        <span  class="col-4 text-end" *ngIf="sygotchi"> {{ sygotchi.rank }}</span>
+
+        <label class="col-8 mb-3"><i class="fa-solid fa-bank"></i> Score:</label>
+        <span class="col-4 text-end" *ngIf="sygotchi">{{ sygotchi.score}}</span>
       </div>
     </div>
   </div>

src/app/needs/needs.component.scss

@@ -12,13 +12,6 @@
   justify-content: center;
 }
 
-.flex{
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .modal-title {
   position: relative;
   left: 36%;
@@ -28,10 +21,10 @@
   height: 7px;
 }
 @media screen and (max-width: 978px) {
-  
-  
+
+
 }
-@media screen and (orientation:landscape) { 
+@media screen and (orientation:landscape) {
 .center{
       margin-top: 100px;
   }