Merge branch 'main' into leaderboard-improvement

src/app/app.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
-<main>
+<main class="container">
 <router-outlet></router-outlet>
 </main>
 <app-footer></app-footer>

src/app/app.component.scss

@@ -1,4 +1,4 @@
 main {
-  margin-top: 5rem;
+  margin-top: 60.2px;
   min-height: calc(100vh - 45px - 275px);
 }

src/app/app.module.ts

@@ -2,15 +2,15 @@ import {isDevMode, NgModule} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
-import {AuthInterceptor} from "./misc/auth.interceptor";
+import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { AuthInterceptor } from "./misc/auth.interceptor";
 import { AuthPageComponent } from './auth-page/auth-page.component';
-import {RouterModule, RouterOutlet} from "@angular/router";
-import {ReactiveFormsModule} from "@angular/forms";
-import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {APP_ROUTES} from "./misc/app.routes";
-import {StoreModule} from "@ngrx/store";
-import {sygotchiReducer} from "./store/sygotchi.reducer";
+import { RouterModule, RouterOutlet } from "@angular/router";
+import { ReactiveFormsModule } from "@angular/forms";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { APP_ROUTES } from "./misc/app.routes";
+import { StoreModule } from "@ngrx/store";
+import { sygotchiReducer } from "./store/sygotchi.reducer";
 import { LogoComponent } from './logo/logo.component';
 import { TeamSComponent } from './team-s/team-s.component';
 import { DsgvoPageComponent } from './dsgvo-page/dsgvo-page.component';
@@ -30,6 +30,8 @@ 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 { GymComponent } from './gym/gym.component';
+import { GymFunctionComponent } from './gym-function/gym-function.component';
 
 @NgModule({
   declarations: [
@@ -47,12 +49,15 @@ import { BedroomComponent } from './bedroom/bedroom.component';
     KitchenComponent,
     SygotchiCleanComponent,
     FooterComponent,
-    ErrorPageComponent,
     CleanFunctionComponent,
     KitchenFunctionComponent,
     BedroomComponent,
     HowToPlayComponent,
-    LeaderboardComponent
+    LeaderboardComponent,
+    LeaderboardComponent,
+    ErrorPageComponent,
+    GymComponent,
+    GymFunctionComponent
   ],
   imports: [
     BrowserModule,

src/app/bedroom/bedroom.component.scss

@@ -19,7 +19,7 @@
         align-items: center;
     }
     .needs{
-        height: 33vh;
+        height: 30vh;
     }
 }
 @media screen and (orientation:landscape) { 

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

@@ -1 +1,6 @@
+<div class="message">
+    <div *ngIf="showMessage">
+    <span class="message"> {{message.text}} </span>
+    </div>
+</div>
 <button class="btn btn-primary w-100" (click)="clean()">Putzen</button>

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

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

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

@@ -38,12 +38,19 @@ export class CleanFunctionComponent implements OnInit {
       }
 
       )
+    }else{
+      this.message.Error = true
+        this.message.text = "Sygotchi ist nicht dreckig genug!"
+        this.messageHandler()  
     }
   }
   messageHandler() {
-    this.showMessage = true
-    setTimeout(() => {
-      this.showMessage = false
-    }, 7000)
+    if(!this.showMessage){
+      this.showMessage = true
+      console.log(this.showMessage)
+      setTimeout(() => {
+        this.showMessage = false
+      }, 7000)
+    }
   }
 }

src/app/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light align-text-bottom">
+<footer class="bd-footer py-4 py-md-5 bg-light align-text-bottom">
   <div class="container py-4 py-md-5 px-4 px-md-3">
     <div class="row">
       <div class="col-4 mb-3">

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

@@ -0,0 +1,2 @@
+<button class="btn btn-primary w-100" (click)="train()">Trainieren</button>
+<span class="message"> {{message.text}} </span>

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

@@ -0,0 +1,4 @@
+.btn{
+    margin: 2px;
+    width: 48.5%;
+}

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

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { SyGotchi } from '../entities/syGotchi';
+import { ActionsService } from '../services/actions.service';
+import { Store } from '@ngrx/store';
+import { selectSygotchi } from '../store/sygotchi.selectors';
+import { setSygotchi } from '../store/sygotchi.actions';
+
+@Component({
+  selector: 'app-gym-function',
+  templateUrl: './gym-function.component.html',
+  styleUrls: ['./gym-function.component.scss']
+})
+export class GymFunctionComponent {
+  isTired: number = 0
+  isBored: number
+  message = {text: '', error: false}
+  sygotchi: SyGotchi
+  showMessage: boolean = false
+
+  constructor(private actionsService: ActionsService, private store: Store) {}
+
+  ngOnInit() {
+    this.store.select(selectSygotchi)
+      .subscribe(
+        syGotchi => {
+          this.isTired = syGotchi.tired
+          this.isBored = syGotchi.bored
+          this.sygotchi = syGotchi
+        }
+      )
+  }
+  train(){
+    if(this.isTired >= 50 ){
+      this.actionsService.playWithSygotchi()
+      .subscribe
+      (res => {
+        this.message.text = 'Sygotchi hat erfolgreich trainiert!'
+        this.messageHandler()
+        this.store.dispatch(setSygotchi({sygotchi: res as SyGotchi}))
+      },
+      () => {
+        this.message.error = true
+        this.message.text = 'Dein Sygotchi kann nicht mehr trainieren.'
+        this.messageHandler()
+      })
+    }
+  }
+
+  messageHandler() {
+    this.showMessage = true
+    setTimeout(() => {
+      this.showMessage = false
+    }, 7000)
+  }
+}
+

src/app/gym/gym.component.html

@@ -0,0 +1,16 @@
+<div class="container_all">
+    <div class="main">
+        <button class="btn">&#10094;</button>
+        <app-show-sygotchi></app-show-sygotchi>
+        <button class="btn">&#10095;</button>
+    </div>
+    <div class="aside">
+        <div class="needs">
+            <app-needs></app-needs>
+        </div>
+        <div class="clean">
+            <app-gym-function></app-gym-function>
+        </div>
+    </div>
+</div>
+

src/app/gym/gym.component.scss

@@ -0,0 +1,44 @@
+.container_all{
+    background-color: #EFD3D2;
+    display: flex; 
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    .main{
+        .btn{
+            border: 0;
+            background-color: #dbdbdba1;
+        }
+        background-image: url("../../assets/images/GymBackground.jpg");
+        background-size: 100% 100%;
+        background-repeat:no-repeat;
+        background-position: 0% 0%;
+        height: 50vh;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .needs{
+        height: 33vh;
+    }
+}
+@media screen and (orientation:landscape) { 
+    .container_all{
+        flex-direction: row-reverse;
+        justify-content: space-between;
+        .main{
+            height: 75vh;
+            width: 66vw;
+        }
+        .aside{
+            height: 75vh;
+            width: 33vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        .needs{
+            height: auto;
+        }
+        }
+    }
+}

src/app/gym/gym.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-gym',
+  templateUrl: './gym.component.html',
+  styleUrls: ['./gym.component.scss']
+})
+export class GymComponent {
+
+}

src/app/how-to-play/how-to-play.component.html

@@ -1,64 +1,50 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>Anleitung </h1> 
-
-    <h2>Statusbalken:</h2>
-    <p>Die Statusbalken zeigen was dein Sygotchi gerade braucht. Sie werden mit der Zeit kleiner. Wenn einer der Balken 0 erreicht ist das Spiel verloren. </p>
+<div class="container">
+  <h1>Anleitung </h1>
 
-    <h2>Aktionen:</h2>
-    <p>Durch das Drücken der Knöpfe in einem Raum füllst du die jeweiligen Balken auf.</p>
+  <h2>Statusbalken:</h2>
+  <p>Die Statusbalken zeigen was dein Sygotchi gerade braucht. Sie werden mit der Zeit kleiner. Wenn einer der Balken 0 erreicht ist das Spiel verloren. </p>
 
-    <h2>Umkleide:</h2>
-    <p>Hier kannst du deinen Sygotchi personalisieren, indem du ihm Accessoires oder andere Farben gibst.</p>
+  <h2>Aktionen:</h2>
+  <p>Durch das Drücken der Knöpfe in einem Raum füllst du die jeweiligen Balken auf.</p>
 
-    <h2>Navigation:</h2>
-    <p>Mit den Pfeilen an den Seiten kannst du die Räume wechseln.</p>
+  <h2>Umkleide:</h2>
+  <p>Hier kannst du deinen Sygotchi personalisieren, indem du ihm Accessoires oder andere Farben gibst.</p>
 
-    <h2>Punkte:</h2>
-    <p>Punkte kann man nur durch Aktionen bekommen. Sie zeigen deinen Fortschritt und bestimmen deinen Platz in der Rangliste.</p>
+  <h2>Navigation:</h2>
+  <p>Mit den Pfeilen an den Seiten kannst du die Räume wechseln.</p>
 
-    <table>
-        <thead>
-            <tr>
-                <th>Action</th>
-                <th>Score</th>
-                <th>Cooldown</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>drink</td>
-                <td> +1</td>
-                <td>10s</td>
-            </tr>
-            <tr>
-                <td>feed </td>
-                <td>+2</td>
-                <td>30s</td>
-            </tr>
-            <tr>
-                <td>clean </td>
-                <td>+7</td>
-                <td>100s</td>
-            </tr>
-            <tr>
-                <td>play</td>
-                <td> -</td>
-                <td>-</td>
-            </tr>
-            <tr>
-                <td>sleep</td>
-                <td>-</td>
-                <td>-</td>
-            </tr>
-        </tbody>
-    </table>
+  <h2>Punkte:</h2>
+  <p>Punkte kann man nur durch Aktionen bekommen. Sie zeigen deinen Fortschritt und bestimmen deinen Platz in der Rangliste.</p>
 
-</body>
-</html>
+  <table>
+    <thead>
+    <tr>
+      <th>Action</th>
+      <th>Score</th>
+      <th>Cooldown</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>Drink</td>
+      <td>+1</td>
+      <td>10 Min.</td>
+    </tr>
+    <tr>
+      <td>Feed</td>
+      <td>+2</td>
+      <td>30 Min.</td>
+    </tr>
+    <tr>
+      <td>Clean </td>
+      <td>+7</td>
+      <td>Muss mind. 50% dreckig sein</td>
+    </tr>
+    <tr>
+      <td>Play</td>
+      <td>+5</td>
+      <td>60 Min.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -1,2 +1,8 @@
+<div class="message">
+    <div *ngIf="showMessage">
+    <span class="message"> {{message.text}} </span>
+    </div>
+</div>
+
 <button class="btn btn-primary" (click)="feed()">Füttern</button>
 <button class="btn btn-primary" (click)="drink()">Trinken</button>

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

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