Merge pull request #27 from Sybit-Education/feature/eatdrink

Feature/eatdrink

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { SygotchiErstellenComponent } from './sygotchi-erstellen/sygotchi-erstel
 import { HeaderComponent } from './header/header.component';
 import { SygotchiCleanComponent } from './sygotchi-clean/sygotchi-clean.component';
 import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
+import { KitchenComponent } from './kitchen/kitchen.component';
 import { FooterComponent } from './footer/footer.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { ErrorPageComponent } from './error-page/error-page.component';
@@ -37,6 +38,9 @@ import { ErrorPageComponent } from './error-page/error-page.component';
     SygotchiErstellenComponent,
     HeaderComponent,
     SleepSceneComponent,
+    ImpressumComponent,
+    NeedsComponent,
+    KitchenComponent,
     NeedsComponent,
     SygotchiCleanComponent,
     FooterComponent,

src/app/kitchen/kitchen.component.html

@@ -0,0 +1,11 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
+<div class="container_all">
+    <aside>
+        <button (click)="feed()" class="btn w-100"><span class="material-symbols-outlined">restaurant</span></button>
+        <button (click)="drink()" class="btn w-100"><span class="material-symbols-outlined">water_full</span></button>
+    </aside>
+    <main>
+        <app-show-sygotchi></app-show-sygotchi>
+    </main>
+</div>

src/app/kitchen/kitchen.component.scss

@@ -0,0 +1,59 @@
+.container_all{
+    display:grid; 
+    grid-template-columns: 1fr 2fr;
+    margin: 0;
+    padding: 0;
+    main{
+        background-image: url("../../assets/images/KitchenBackground.jpeg");
+        background-size: 100% 100%;
+        background-repeat:no-repeat;
+        background-position: 0% 0%;
+        height: 91.21vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+    aside{
+        padding: 30px;
+        background-color: #EFD3D2;
+        display: flex;
+        justify-content: space-evenly;
+        flex-direction: column;
+       .color-container{
+            display:flex;
+            justify-content: space-evenly;
+       }
+       .btn{
+        border: 0;
+            .material-symbols-outlined{
+                font-variation-settings:
+                'FILL' 0,
+                'wght' 400,
+                'GRAD' 0,
+                'opsz' 48;
+                font-size: 15rem;
+            }
+       } 
+    }
+}
+@media screen and (max-width: 630px) {
+    .container_all{
+        display: flex;
+        flex-direction: column-reverse;
+        height: 91.21vh;
+        aside{
+            display: flex;
+            flex-direction: row;
+            .btn .material-symbols-outlined{
+                font-variation-settings:
+                'FILL' 0,
+                'wght' 400,
+                'GRAD' 0,
+                'opsz' 48;
+                font-size: 10rem;
+            }
+        }
+    }
+
+}

src/app/kitchen/kitchen.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { SyGotchi } from '../entities/syGotchi';
+import { ActionsService } from '../services/actions.service';
+import { selectSygotchi } from '../store/sygotchi.selectors';
+import { Store } from '@ngrx/store';
+import { setSygotchi } from '../store/sygotchi.actions';
+
+@Component({
+  selector: 'app-kitchen',
+  templateUrl: './kitchen.component.html',
+  styleUrls: ['./kitchen.component.scss']
+})
+export class KitchenComponent implements OnInit{
+  isHungry: number
+  isThirsty: 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.isHungry = syGotchi.hunger
+          this.isThirsty = syGotchi.thirst
+          this.sygotchi = syGotchi
+        }
+      )
+  }
+  feed(){
+    if(this.isHungry <= 90){
+      this.actionsService.feedSygotchi()
+      .subscribe
+      (res => {
+        this.message.text = 'Sygotchi ist jetzt satt!'
+        this.messageHandler()
+        this.store.dispatch(setSygotchi({sygotchi: res as SyGotchi}))
+      },
+      () => {
+        this.message.error = true
+        this.message.text = 'Sygotchi hat keinen Hunger mehr!'
+        this.messageHandler()
+      })
+    }
+  }
+  drink(){
+    if(this.isThirsty <= 90){
+      this.actionsService.drinkSygotchi().subscribe
+      (res => {
+        this.message.text = 'Sygotchi ist jetzt sitt!'
+        this.messageHandler()
+        this.store.dispatch(setSygotchi({sygotchi: res as SyGotchi}))
+      },
+      () => {
+        this.message.error = true
+        this.message.text = 'Sygotchi hat keinen Durst mehr!'
+        this.messageHandler()
+      })
+    }
+  }
+  messageHandler() {
+    this.showMessage = true
+    setTimeout(() => {
+      this.showMessage = false
+    }, 7000)
+  }
+}

src/app/misc/app.routes.ts

@@ -1,12 +1,13 @@
-import {Routes} from "@angular/router";
-import {AuthPageComponent} from "../auth-page/auth-page.component";
-import {AuthGuard} from "./auth.guard";
+import { Routes } from "@angular/router";
+import { AuthPageComponent } from "../auth-page/auth-page.component";
+import { AuthGuard } from "./auth.guard";
 import { SygotchiErstellenComponent } from "../sygotchi-erstellen/sygotchi-erstellen.component";
 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 {SleepSceneComponent} from "../sleep-scene/sleep-scene.component";
+import { KitchenComponent } from "../kitchen/kitchen.component";
 import { ErrorPageComponent } from "../error-page/error-page.component";
 
 export const APP_ROUTES: Routes = [
@@ -19,6 +20,7 @@ export const APP_ROUTES: Routes = [
   {path: 'impressum', component: ImpressumComponent},
   {path: 'clean', component: SygotchiCleanComponent, canActivate: [AuthGuard]},
   {path: 'sleep', component: SleepSceneComponent, canActivate: [AuthGuard]},
+  {path: 'kitchen', component: KitchenComponent, canActivate: [AuthGuard]},
   {path: 'error', component: ErrorPageComponent},
   {path: '**', redirectTo: 'error' }
 ]

src/app/services/actions.service.ts

@@ -27,19 +27,19 @@ export class ActionsService {
   }
 
   cleanSygotchi(): Observable<SyGotchi> {
-    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/clean`, null)
+    return this.http.put<SyGotchi>(`${this.apiUrl}/tamagotchi/clean`, null)
   }
 
   playWithSygotchi(): Observable<SyGotchi> {
     return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/play`, null)
   }
 
   feedSygotchi(): Observable<SyGotchi> {
-    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/feed`, null)
+    return this.http.put<SyGotchi>(`${this.apiUrl}/tamagotchi/feed`, null)
   }
 
   drinkSygotchi(): Observable<SyGotchi> {
-    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/drink`, null)
+    return this.http.put<SyGotchi>(`${this.apiUrl}/tamagotchi/drink`, null)
   }
 
   sleepSygotchi(): Observable<SyGotchi> {
@@ -58,7 +58,7 @@ export class ActionsService {
     return this.http.get<SyGotchi>(`${this.apiUrl}/tamagotchi/highscore`)
   }
 
-   sleep(): Observable<SyGotchi> {
+  sleep(): Observable<SyGotchi> {
     return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/sleep`, null)
   }