Merge pull request #24 from Sybit-Education/How-to-play

How to play
Sybit-Education · Aug 3, 2023 · d1ac6f0 · d1ac6f0
2 parents 02c2d0d + 06486d5
commit d1ac6f0
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 0 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -23,6 +23,7 @@ import { SygotchiCleanComponent } from './sygotchi-clean/sygotchi-clean.componen
 import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
 import { KitchenComponent } from './kitchen/kitchen.component';
 import { FooterComponent } from './footer/footer.component';
+import { HowToPlayComponent } from './how-to-play/how-to-play.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { ErrorPageComponent } from './error-page/error-page.component';
 
@@ -44,6 +45,7 @@ import { ErrorPageComponent } from './error-page/error-page.component';
     NeedsComponent,
     SygotchiCleanComponent,
     FooterComponent,
+    HowToPlayComponent,
     ErrorPageComponent
   ],
   imports: [

diff --git a/src/app/how-to-play/how-to-play.component.html b/src/app/how-to-play/how-to-play.component.html
@@ -0,0 +1,64 @@
+<!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 über Zeit kleiner. Wenn einer der Balken 0 erreicht ist das Spiel verloren. </p>
+
+    <h2>Aktionen:</h2>
+    <p>Du kannst im unteren Bereich mehrere Knöpfe drücken die verschiedene Balken auffüllen je nach dem in welchen Raum du bist.</p>
+
+    <h2>Umkleide:</h2>
+    <p>Hier kannst du deinen Sygotchi personalisieren indem du ihm Accessoires oder andere Farben gibst.</p>
+
+    <h2>Navigation:</h2>
+    <p>Mit den blauen Pfeilen an den Seiten kannst du Räume wechseln.</p>
+
+    <h2>Punkte:</h2>
+    <p>Punkte kann man nur durch Aktionen bekommen. Sie zeigen deinen Fortschritt und bestimmen deinen Platz in der Rangliste.</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>
+
+</body>
+</html>
diff --git a/src/app/how-to-play/how-to-play.component.scss b/src/app/how-to-play/how-to-play.component.scss
@@ -0,0 +1,28 @@
+body {
+    margin: 20px;
+
+}
+
+h1 {
+    margin-bottom: 40px;
+    text-decoration: underline;
+    color: #000;
+}
+
+p {
+    font-size: 20px;
+    margin-bottom: 40px;
+    color: #000;
+}
+
+h2 {
+    font-size: 25px;
+
+    color: #000;
+}
+
+table, thead, tbody, tr, th, td {
+    border: #000 thin solid;
+    padding: 10px;
+    font-size: 20px;
+}
diff --git a/src/app/how-to-play/how-to-play.component.ts b/src/app/how-to-play/how-to-play.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-how-to-play',
+  templateUrl: './how-to-play.component.html',
+  styleUrls: ['./how-to-play.component.scss']
+})
+export class HowToPlayComponent {
+
+}
diff --git a/src/app/misc/app.routes.ts b/src/app/misc/app.routes.ts
@@ -7,6 +7,7 @@ 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 { HowToPlayComponent } from "../how-to-play/how-to-play.component";
 import { KitchenComponent } from "../kitchen/kitchen.component";
 import { ErrorPageComponent } from "../error-page/error-page.component";
 
@@ -21,6 +22,8 @@ export const APP_ROUTES: Routes = [
   {path: 'clean', component: SygotchiCleanComponent, canActivate: [AuthGuard]},
   {path: 'sleep', component: SleepSceneComponent, canActivate: [AuthGuard]},
   {path: 'kitchen', component: KitchenComponent, canActivate: [AuthGuard]},
+  {path: 'how-to-play', component: HowToPlayComponent},
   {path: 'error', component: ErrorPageComponent},
   {path: '**', redirectTo: 'error' }
+
 ]