draft: feature/websocket

src/app/app.module.ts

@@ -15,8 +15,10 @@ import { LogoComponent } from './logo/logo.component';
 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 { SygotchiErstellenComponent } from './sygotchi-erstellen/sygotchi-erstellen.component';
 import { HeaderComponent } from './header/header.component';
+import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
 
 @NgModule({
   declarations: [
@@ -26,9 +28,12 @@ import { HeaderComponent } from './header/header.component';
     TeamSComponent,
     DsgvoPageComponent,
     ImpressumComponent,
+    ShowSygotchiComponent,
+    ImpressumComponent,
     SygotchiErstellenComponent,
     ImpressumComponent,
-    HeaderComponent
+    HeaderComponent,
+    SleepSceneComponent
   ],
   imports: [
     BrowserModule,

src/app/auth-page/auth-page.component.ts

@@ -5,6 +5,9 @@ import { AuthService } from '../services/auth.service';
 import { Store, resultMemoize } from '@ngrx/store';
 import { WebsocketService } from '../services/websocket.service';
 import { HttpStatusCode } from '@angular/common/http';
+import { setSygotchi } from '../store/sygotchi.actions';
+import { SyGotchi } from '../entities/syGotchi';
+import {ActionsService} from "../services/actions.service";
 
 @Component({
   selector: 'app-auth-page',
@@ -17,7 +20,7 @@ export class AuthPageComponent implements OnInit {
   showError: boolean = false
   errorMessage: string = ''
 
-  constructor(private fb: FormBuilder, private router: Router, private authService: AuthService, private store: Store, private wsService: WebsocketService) {}
+  constructor(private fb: FormBuilder, private router: Router, private authService: AuthService, private store: Store, private wsService: WebsocketService, private actionsService: ActionsService) {}
 
   ngOnInit() {
     localStorage.clear()
@@ -34,7 +37,7 @@ export class AuthPageComponent implements OnInit {
         result => {
           localStorage.setItem('token', result["token"])
           localStorage.setItem('id', result["id"])
-          this.router.navigate(['/creation']);
+          this.router.navigate(['/create']);
         },
       err => {
         if (err.status === HttpStatusCode.Unauthorized) {
@@ -44,7 +47,7 @@ export class AuthPageComponent implements OnInit {
           this.errorMessage = 'Unerwarteter Fehler'
           this.showError = true;
         }
-      } 
+      }
       );
     } else {
     this.errorMessage = 'Passwörter stimmen nicht überein.'
@@ -57,11 +60,17 @@ export class AuthPageComponent implements OnInit {
     .subscribe(
       result => {
         localStorage.setItem('token', result["token"])
-        localStorage.setItem('id', result["id"]),
-
-        () => {
-          this.router.navigate(['/creation'])
-        }
+        localStorage.setItem('id', result["id"])
+
+          this.actionsService.getSygotchi().subscribe(result => {
+            this.store.dispatch(setSygotchi({sygotchi: result as SyGotchi}))
+              this.wsService.initializeWebSocketConnection(result.id)
+
+              this.router.navigate(['/sleep'])
+          },
+            () => {
+            this.router.navigate(['/create'])
+          })
       },
       err => {
         if (err.status === HttpStatusCode.BadRequest) {
@@ -88,4 +97,4 @@ export class AuthPageComponent implements OnInit {
 
 
 
-}
+}

src/app/misc/app.routes.ts

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

src/app/services/actions.service.ts

@@ -12,7 +12,26 @@ export class ActionsService {
 
   constructor(private http: HttpClient) {}
 
+  getAccountInfo() {
+    const id = localStorage.getItem('id')
+
+    return this.http.get(`${this.apiUrl}/user/${id}`)
+  }
+
   createSygotchi(name, eyes, shape, color, height, width): Observable<SyGotchi> {
     return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi`, { name, eyes, shape, color, height, width })
   }
+
+  getSygotchi(): Observable<SyGotchi> {
+    return this.http.get<SyGotchi>(`${this.apiUrl}/tamagotchi`)
+  }
+
+   sleep(): Observable<SyGotchi> {
+    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/sleep`, null)
+  }
+
+  wakeUp(): Observable<SyGotchi> {
+    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi/wakeUp`, null)
+  }
+
 }

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

@@ -0,0 +1 @@
+<canvas id="canvas"></canvas>

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

@@ -0,0 +1,125 @@
+import { Component, OnInit } from '@angular/core';
+import { ActionsService } from '../services/actions.service';
+import { SyGotchi } from '../entities/syGotchi';
+import * as paper from 'paper';
+import { Eye } from '../enums/eye.enum';
+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',
+  templateUrl: './show-sygotchi.component.html',
+  styleUrls: ['./show-sygotchi.component.scss']
+})
+export class ShowSygotchiComponent implements OnInit {
+  sygotchi: SyGotchi
+  canvas: any
+  shapePath: any
+  shape: any
+
+  constructor(private actionsService: ActionsService, private store: Store, private wsService: WebsocketService) { }
+
+  ngOnInit(): void {
+    window['paper'] = paper;
+    new Project('canvas');
+
+    this.canvas = paper.project.activeLayer;
+
+    this.canvas = paper.project.activeLayer;
+    this.store.select(selectSygotchi).subscribe(result => {
+      this.sygotchi = result
+
+      if(this.sygotchi === null) {
+        this.actionsService.getSygotchi().subscribe(result => {
+          this.sygotchi = result
+          this.store.dispatch(setSygotchi({sygotchi: result as SyGotchi}))
+          this.buildSygotchi()
+        })
+      } else {
+        this.wsService.initializeWebSocketConnection(this.sygotchi.id)
+        this.buildSygotchi()
+      }
+    })
+  }
+
+
+  buildSygotchi() {
+    const shapeType = this.sygotchi.shape;
+    const color = this.sygotchi.color;
+    const width = this.sygotchi.width;
+    const height = this.sygotchi.height;
+    const eyes = this.sygotchi.eyes;
+    let eyeSize;
+    let pupilSize;
+
+    switch(eyes){
+
+      case Eye.SMALL:
+        eyeSize = Math.min(width, height) * 0.1;
+        pupilSize = eyeSize * 0.5;
+      break;
+
+      case Eye.MEDIUM:
+        eyeSize = Math.min(width, height) * 0.2;
+        pupilSize = eyeSize * 0.5;
+      break;
+
+      case Eye.LARGE:
+        eyeSize = Math.min(width, height) * 0.3;
+        pupilSize = eyeSize * 0.5;
+      break;
+    }
+    switch(shapeType){
+      case 'TRIANGLE':
+        this.shape = new paper.Path.RegularPolygon({
+          center: paper.view.center,
+          sides: 3,
+          radius: width / 2,
+          fillColor: color
+        });
+        break;
+
+      case 'RECTANGLE':
+        this.shape = new paper.Path.Rectangle({
+          point: paper.view.center.subtract(new paper.Point(width / 2, height / 2)),
+          size: [width, height],
+          fillColor: color
+        });
+        break;
+      case 'CIRCLE':
+        this.shape = new paper.Path.Circle({
+          center: paper.view.center,
+          radius: width / 2,
+          fillColor: color
+        });
+        break;
+    }
+    const eyeLeft = new paper.Path.Circle({
+      center: this.shape.position.subtract(new paper .Point(width / 4, height / 10)),
+      radius: eyeSize,
+      fillColor: 'white'
+    })
+    const eyeRight = new paper.Path.Circle({
+      center: this.shape.position.subtract(new paper .Point(-width / 4, height / 10)),
+      radius: eyeSize,
+      fillColor: 'white'
+    })
+    const pupilLeft = new paper.Path.Circle({
+      center: eyeLeft.position.add(new paper.Point(0, eyeSize * 0.1)),
+      radius: pupilSize,
+      fillColor: 'black'
+    })
+    const pupilRight = new paper.Path.Circle({
+      center: eyeRight.position.add(new paper.Point(0, eyeSize * 0.1)),
+      radius: pupilSize,
+      fillColor: 'black'
+    })
+    this.shapePath = new paper.Group({
+      children: [this.shape, eyeLeft, eyeRight, pupilRight, pupilLeft]
+    })
+    this.canvas.addChild(this.shapePath);
+  }
+}

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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,72 @@
+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 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)
+  }
+}

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

@@ -7,6 +7,7 @@ import {Store} from "@ngrx/store";
 import {setSygotchi} from "../store/sygotchi.actions";
 import {ActionsService} from "../services/actions.service";
 import {WebsocketService} from "../services/websocket.service";
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -21,7 +22,7 @@ export class SygotchiErstellenComponent implements OnInit{
   shape: any;
   shapePath: any;
 
-  constructor(private formBuilder: FormBuilder, private store: Store, private actionsService: ActionsService, private wsService: WebsocketService){
+  constructor(private formBuilder: FormBuilder, private store: Store, private actionsService: ActionsService, private wsService: WebsocketService, private router: Router){
     this.characterForm = this.formBuilder.group({
       name: ['',Validators.required],
       shape: ['RECTANGLE',Validators.required],
@@ -126,12 +127,25 @@ export class SygotchiErstellenComponent implements OnInit{
 
   createShape() {
     const characterData = this.characterForm.value;
-    this.actionsService.createSygotchi(characterData.name, characterData.eyes, characterData.shape, characterData.color, characterData.height, characterData.width).subscribe(result => {
+    let eye: Eye = Eye.SMALL
+    switch (characterData.eyes) {
+      case 1:
+        eye = Eye.SMALL
+        break;
+      case 2:
+        eye = Eye.MEDIUM
+        break;
+      case 3:
+        eye = Eye.LARGE
+        break;
+    }
+
+    this.actionsService.createSygotchi(characterData.name, eye, characterData.shape, characterData.color, characterData.height, characterData.width).subscribe(result => {
 
       this.store.dispatch(setSygotchi({sygotchi: result as any}))
       this.wsService.initializeWebSocketConnection(result.id)
 
-      // TODO: Routing
+      this.router.navigate(['/sleep']);
     })
   }
 }