Merge pull request #6 from Sybit-Education/Sygotchi-erstelllen

Feat: Create Sygotchi

src/app/app.module.ts

@@ -5,7 +5,6 @@ import { AppComponent } from './app.component';
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {AuthInterceptor} from "./misc/auth.interceptor";
 import { AuthPageComponent } from './auth-page/auth-page.component';
-import { CreationPageComponent } from './creation-page/creation-page.component';
 import {RouterModule, RouterOutlet} from "@angular/router";
 import {ReactiveFormsModule} from "@angular/forms";
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
@@ -16,18 +15,19 @@ 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 { SygotchiErstellenComponent } from './sygotchi-erstellen/sygotchi-erstellen.component';
 import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     AuthPageComponent,
-    CreationPageComponent,
     LogoComponent,
-    CreationPageComponent,
     TeamSComponent,
     DsgvoPageComponent,
     ImpressumComponent,
+    SygotchiErstellenComponent,
+    ImpressumComponent,
     HeaderComponent
   ],
   imports: [

src/app/misc/app.routes.ts

@@ -1,15 +1,15 @@
 import {Routes} from "@angular/router";
 import {AuthPageComponent} from "../auth-page/auth-page.component";
-import {CreationPageComponent} from "../creation-page/creation-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";
 
 export const APP_ROUTES: Routes = [
   {path: '', redirectTo: 'auth', pathMatch: 'full'},
   {path: 'auth', component: AuthPageComponent},
-  {path: 'creation', component: CreationPageComponent, canActivate: [AuthGuard]},
+  {path: 'create', component: SygotchiErstellenComponent, canActivate: [AuthGuard]},
   {path: 'team-site', component: TeamSComponent},
   {path: 'dsgvo', component: DsgvoPageComponent},
   {path: 'impressum', component: ImpressumComponent},

src/app/services/actions.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {SyGotchi} from "../entities/syGotchi";
+import {environment} from "../../environments/environment";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActionsService {
+  apiUrl = environment.apiUrl
+
+  constructor(private http: HttpClient) {}
+
+  createSygotchi(name, eyes, shape, color, height, width): Observable<SyGotchi> {
+    return this.http.post<SyGotchi>(`${this.apiUrl}/tamagotchi`, { name, eyes, shape, color, height, width })
+  }
+}

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

@@ -0,0 +1,43 @@
+<div class="container_all">
+
+    <aside>
+        <form [formGroup]="characterForm">
+            <div class="mb-3">
+                <label class="form-label" for="Name"> Name</label>
+                <input class="form-control" type="text" formControlName="name">
+            </div>
+            <div class="mb-3">
+                <label class="form-label" for="Form">Form</label>
+                <select class="form-select" type="text" formControlName="shape">
+                    <option value="RECTANGLE">Rechteck</option>
+                    <option value="TRIANGLE">Dreieck</option>
+                    <option value="CIRCLE">Kreis</option>
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label" for="Breite">Breite</label>
+                <input class="form-range" type="range"min="100" max="150" formControlName="width">
+            </div>
+            <div *ngIf="characterForm.value.shape=='RECTANGLE'" class="mb-3">
+                <label class="form-label" for="Höhe">Höhe</label>
+                <input class="form-range" type="range" min="100" max="150" formControlName="height">
+            </div>
+            <div class="mb-3">
+                <label class="form-label" for="Augen">Augen</label> <br>
+                <input class="form-range" type="range" min="1" max="3" formControlName="eyes">
+            </div>
+            <div class="mb-3">
+                <label class="form-label" for="körperfarbe">Körperfarbe</label> <br>
+                <input type="color" class="w-100 form-color form-control-color" formControlName="color">
+            </div>
+            <button class="btn btn-primary w-100" (click)="createShape()">Submit</button>
+        </form>
+    </aside>
+    <main>
+
+    <canvas id="canvas" height="200" width="200"></canvas>
+    </main>
+
+
+</div>

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

@@ -0,0 +1,37 @@
+
+.container_all{
+    display:grid; 
+    grid-template-columns: 1fr 2fr;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+    main{
+        background-color: #FBD189;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+    aside{
+        padding: 30px;
+        background-color: #EFD3D2;
+       .color-container{
+        display:flex;
+        justify-content: space-evenly;
+
+       }
+    }
+}
+@media screen and (max-width: 630px) {
+    .container_all{
+        grid-template-columns: 1fr;
+        main{
+            grid-row: 1;
+        }
+        aside{
+            grid-row: 2;
+        }
+    }
+
+}

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

@@ -0,0 +1,138 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import * as paper from 'paper';
+import { Eye } from '../enums/eye.enum';
+import { Project } from "paper";
+import {Store} from "@ngrx/store";
+import {setSygotchi} from "../store/sygotchi.actions";
+import {ActionsService} from "../services/actions.service";
+import {WebsocketService} from "../services/websocket.service";
+
+
+@Component({
+  selector: 'app-sygotchi-erstellen',
+  templateUrl: './sygotchi-erstellen.component.html',
+  styleUrls: ['./sygotchi-erstellen.component.scss']
+})
+export class SygotchiErstellenComponent implements OnInit{
+  characterForm: FormGroup;
+  eyes:string[] = Object.values(Eye);
+  canvas: any;
+  shape: any;
+  shapePath: any;
+
+  constructor(private formBuilder: FormBuilder, private store: Store, private actionsService: ActionsService, private wsService: WebsocketService){
+    this.characterForm = this.formBuilder.group({
+      name: ['',Validators.required],
+      shape: ['RECTANGLE',Validators.required],
+      color: ['#EFD3D2',Validators.required],
+      width: [100,Validators.required],
+      height: [100,Validators.required],
+      eyes: [1,Validators.required],
+      eyeSize: [0.2, Validators.required]
+
+    })
+
+  }
+  ngOnInit(){
+    window['paper'] = paper;
+    new Project('canvas');
+
+    this.canvas = paper.project.activeLayer;
+    this.drawShape();
+    this.characterForm.valueChanges.subscribe(() =>{
+      this.drawShape();
+    });
+  }
+  drawShape(){
+    if(this.shapePath){
+      this.shapePath.remove();
+    }
+    const shapeType = this.characterForm.value.shape;
+    const color = this.characterForm.value.color;
+    const width = this.characterForm.value.width;
+    const height = this.characterForm.value.height;
+    const eyes = this.characterForm.value.eyes;
+    let eyeSize;
+    let pupilSize;
+
+    switch(eyes){
+
+      case 1:
+        eyeSize = Math.min(width, height) * 0.1;
+        pupilSize = eyeSize * 0.5;
+      break;
+
+      case 2:
+        eyeSize = Math.min(width, height) * 0.2;
+        pupilSize = eyeSize * 0.5;
+      break;
+
+      case 3:
+        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);
+  }
+
+  createShape() {
+    const characterData = this.characterForm.value;
+    this.actionsService.createSygotchi(characterData.name, characterData.eyes, 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
+    })
+  }
+}
+