feat: made seperate components / fixed routing etc.

src/app/misc/app.routes.ts

@@ -5,7 +5,7 @@ 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 { ShowSygotchiComponent } from "../show-sygotchi/show-sygotchi.component";
+import {SleepSceneComponent} from "../sleep-scene/sleep-scene.component";
 
 export const APP_ROUTES: Routes = [
   {path: '', redirectTo: 'auth', pathMatch: 'full'},
@@ -14,7 +14,6 @@ export const APP_ROUTES: Routes = [
   {path: 'team-site', component: TeamSComponent},
   {path: 'dsgvo', component: DsgvoPageComponent},
   {path: 'impressum', component: ImpressumComponent },
-  {path: 'sygotchi', component: ShowSygotchiComponent, canActivate: [AuthGuard]},
+  {path: 'sleep', component: SleepSceneComponent, canActivate: [AuthGuard]},
   {path: '**', redirectTo: 'auth' }
-
 ]

src/app/services/actions.service.ts

@@ -21,11 +21,11 @@ export class ActionsService {
   }
 
    sleep(): Observable<SyGotchi> {
-    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi`, null)
-  } 
+    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/sleep`, null)
+  }
 
   wakeUp(): Observable<SyGotchi> {
-    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi`, null)
+    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/wakeUp`, null)
   }
 
 }

src/app/show-sygotchi/show-sygotchi.component.html

@@ -1,9 +1 @@
 <canvas id="canvas"></canvas>
-<button (click)="onSleep()" class="btn btn-primary">
-    <div *ngIf="isAsleep;else other_content">
-        <span>Aufwachen</span>
-    </div>
-    <ng-template #other_content>
-        <span>Schlafen</span>
-    </ng-template>
-</button>

src/app/show-sygotchi/show-sygotchi.component.ts

@@ -7,6 +7,7 @@ import { Project } from "paper";
 import { WebsocketService } from '../services/websocket.service';
 import { selectSygotchi } from '../store/sygotchi.selectors';
 import { setSygotchi } from '../store/sygotchi.actions';
+import {Store} from "@ngrx/store";
 
 @Component({
   selector: 'app-show-sygotchi',
@@ -18,10 +19,9 @@ export class ShowSygotchiComponent implements OnInit {
   canvas: any
   shapePath: any
   shape: any
-  isAsleep: boolean = false
 
   constructor(private actionsService: ActionsService, private store: Store, private wsService: WebsocketService) { }
-  
+
   ngOnInit(): void {
     window['paper'] = paper;
     new Project('canvas');
@@ -36,18 +36,17 @@ export class ShowSygotchiComponent implements OnInit {
         if (this.sygotchi === null) {
           this.actionsService.getSygotchi().subscribe(result => {
             this.sygotchi = result
-            this.store.dispach(setSygotchi({ sygotchi: result as SyGotchi }))
+            this.store.dispatch(setSygotchi({ sygotchi: result as SyGotchi }))
             this.buildSygotchi()
           })
+        } else {
+          this.wsService.initializeWebSocketConnection(this.sygotchi.id)
+          this.buildSygotchi()
         }
-
-
-        this.buildSygotchi()
-        this.getSleepStatus()
       })
     })
   }
-      
+
 
   buildSygotchi() {
     const shapeType = this.sygotchi.shape;
@@ -125,22 +124,4 @@ export class ShowSygotchiComponent implements OnInit {
     })
     this.canvas.addChild(this.shapePath);
   }
-
-  onSleep() {
-    if (this.isAsleep) {
-      this.isAsleep = false
-      this.actonsService.sleep().subscribe(sygotchi => {
-        this.sygotchi = sygotchi
-      })
-    } else {
-      this.isAsleep = true
-      this.actonsService.wakeUp().subscribe(sygotchi => {
-        this.sygotchi = sygotchi
-      })
-    }
-  }
-
-  getSleepStatus() {
-
-  }
 }

src/app/sleep-scene/sleep-scene.component.html

@@ -1 +1,9 @@
-<p>sleep-scene works!</p>
+<app-show-sygotchi></app-show-sygotchi>
+<button (click)="onSleep()" class="btn btn-primary">
+  <div *ngIf="isAsleep;else goSleep">
+    <span>Aufwachen</span>
+  </div>
+  <ng-template #goSleep>
+    <span>Schlafen</span>
+  </ng-template>
+</button>

src/app/sleep-scene/sleep-scene.component.ts

@@ -1,10 +1,72 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActionsService} from "../services/actions.service";
+import {Store} from "@ngrx/store";
+import {SyGotchi} from "../entities/syGotchi";
+import {setSygotchi} from "../store/sygotchi.actions";
+import {selectSygotchi} from "../store/sygotchi.selectors";
 
 @Component({
   selector: 'app-sleep-scene',
   templateUrl: './sleep-scene.component.html',
   styleUrls: ['./sleep-scene.component.scss']
 })
-export class SleepSceneComponent {
+export class SleepSceneComponent implements OnInit {
+  isAsleep: boolean = false
+  message = {text: '', error: false}
+  sygotchi: SyGotchi
+  showMessage: boolean = false
 
+  constructor(private actionsService: ActionsService, private store: Store) {}
+
+  ngOnInit() {
+    this.store.select(selectSygotchi)
+      .subscribe(
+        syGotchi => {
+          this.isAsleep = syGotchi.sleeping
+          this.sygotchi = syGotchi
+        }
+      )
+  }
+
+  onSleep() {
+    if(!this.isAsleep) {
+      this.actionsService.sleep()
+        .subscribe(
+          result => {
+            this.message.text = 'SyGotchi schläft nun.'
+            this.messageHandler()
+
+            this.store.dispatch(setSygotchi({sygotchi: result as SyGotchi}))
+          },
+          () => {
+            this.message.error = true
+            this.message.text = "SyGotchi ist nicht müde genug."
+            this.messageHandler()
+          }
+        )
+    } else {
+      this.actionsService.wakeUp()
+        .subscribe(
+          result => {
+            this.message.text = 'SyGotchi ist wieder aufgewacht.'
+            this.messageHandler()
+
+            this.store.dispatch(setSygotchi({sygotchi: result as SyGotchi}))
+          },
+          () => {
+            this.message.error = true
+            this.message.text = "SyGotchi kann nicht aufwachen."
+            this.messageHandler()
+          }
+        )
+    }
+  }
+
+  messageHandler() {
+    this.showMessage = true
+
+    setTimeout(() => {
+      this.showMessage = false
+    }, 7000)
+  }
 }