Merge pull request #43 from Sybit-Education/feature/designe-rework

feat: redesign needs/messages
Sybit-Education · Aug 4, 2023 · a2089a5 · a2089a5
2 parents 23148b3 + d2039a2
commit a2089a5
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 66 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,4 +1,4 @@
 main {
-  margin-top: 5rem;
+  margin-top: 60.2px;
   min-height: calc(100vh - 45px - 275px);
 }
diff --git a/src/app/bedroom/bedroom.component.scss b/src/app/bedroom/bedroom.component.scss
@@ -19,7 +19,7 @@
         align-items: center;
     }
     .needs{
-        height: 33vh;
+        height: 30vh;
     }
 }
 @media screen and (orientation:landscape) { 

diff --git a/src/app/clean-function/clean-function.component.html b/src/app/clean-function/clean-function.component.html
@@ -1 +1,6 @@
+<div class="message">
+    <div *ngIf="showMessage">
+    <span class="message"> {{message.text}} </span>
+    </div>
+</div>
 <button class="btn btn-primary w-100" (click)="clean()">Putzen</button>
diff --git a/src/app/clean-function/clean-function.component.scss b/src/app/clean-function/clean-function.component.scss
@@ -0,0 +1,3 @@
+.message{
+    height: 24px;
+}
diff --git a/src/app/clean-function/clean-function.component.ts b/src/app/clean-function/clean-function.component.ts
@@ -38,12 +38,19 @@ export class CleanFunctionComponent implements OnInit {
       }
 
       )
+    }else{
+      this.message.Error = true
+        this.message.text = "Sygotchi ist nicht dreckig genug!"
+        this.messageHandler()  
     }
   }
   messageHandler() {
-    this.showMessage = true
-    setTimeout(() => {
-      this.showMessage = false
-    }, 7000)
+    if(!this.showMessage){
+      this.showMessage = true
+      console.log(this.showMessage)
+      setTimeout(() => {
+        this.showMessage = false
+      }, 7000)
+    }
   }
 }
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light align-text-bottom">
+<footer class="bd-footer py-4 py-md-5 bg-light align-text-bottom">
   <div class="container py-4 py-md-5 px-4 px-md-3">
     <div class="row">
       <div class="col-4 mb-3">

diff --git a/src/app/kitchen-function/kitchen-function.component.html b/src/app/kitchen-function/kitchen-function.component.html
@@ -1,2 +1,8 @@
+<div class="message">
+    <div *ngIf="showMessage">
+    <span class="message"> {{message.text}} </span>
+    </div>
+</div>
+
 <button class="btn btn-primary" (click)="feed()">Füttern</button>
 <button class="btn btn-primary" (click)="drink()">Trinken</button>
diff --git a/src/app/kitchen-function/kitchen-function.component.scss b/src/app/kitchen-function/kitchen-function.component.scss
@@ -1,4 +1,7 @@
 .btn{
     margin: 2px;
     width: 48.5%;
+}
+.message{
+    height: 24px;
 }
diff --git a/src/app/kitchen-function/kitchen-function.component.ts b/src/app/kitchen-function/kitchen-function.component.ts
@@ -13,6 +13,8 @@ import { setSygotchi } from '../store/sygotchi.actions';
 export class KitchenFunctionComponent implements OnInit{
   isHungry: number
   isThirsty: number
+  feedCooldown: number
+  drinkCooldown: number
   message = {text: '', error: false}
   sygotchi: SyGotchi
   showMessage: boolean = false
@@ -25,45 +27,67 @@ export class KitchenFunctionComponent implements OnInit{
         syGotchi => {
           this.isHungry = syGotchi.hunger
           this.isThirsty = syGotchi.thirst
+          this.feedCooldown = syGotchi.feedCooldown
+          this.drinkCooldown = syGotchi.drinkCooldown
           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}))
-      },
-      () => {
+      if(this.feedCooldown > 0){
         this.message.error = true
-        this.message.text = 'Sygotchi hat keinen Hunger mehr!'
+        this.message.text = 'Du musst ' + this.feedCooldown + ' Minuten warten bis dein SyGotchi wieder essen kann'
+        console.log(this.message.text)
         this.messageHandler()
+      }else{
+        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}))
-      },
-      () => {
+      if(this.drinkCooldown > 0){
         this.message.error = true
-        this.message.text = 'Sygotchi hat keinen Durst mehr!'
+        this.message.text = 'Du musst ' + this.drinkCooldown + ' Minuten warten bis dein SyGotchi wieder trinken kann'
+        console.log(this.message.text)
         this.messageHandler()
+      }else{
+        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)
+    if(!this.showMessage){
+      this.showMessage = true
+      console.log(this.showMessage)
+      setTimeout(() => {
+        this.showMessage = false
+      }, 7000)
+    }
   }
 }
diff --git a/src/app/kitchen/kitchen.component.scss b/src/app/kitchen/kitchen.component.scss
@@ -20,7 +20,7 @@
         align-items: center;
     }
     .needs{
-        height: 33vh;
+        height: 30vh;
     }
 }
 @media screen and (orientation:landscape) { 

diff --git a/src/app/needs/needs.component.html b/src/app/needs/needs.component.html
@@ -1,16 +1,16 @@
-<div>
-  <div class="row">
+<div class="center">
+  <div class="row w-100">
     <div class="col-6 mb-3">
       <div class="row align-items-center" *ngFor="let need of needsLeft">
         <div class="col-2 text-center">
           <i *ngIf="need.icon" [ngClass]="need.icon"></i>
         </div>
         <div class="col-10">
           <div class="d-flex align-items-center">
-            <div class="w-50 me-2">
+            <div class="w-100 me-2">
               <div class="progress">
                 <div class="progress-bar" role="progressbar" [style.width.%]="need.progress"
-                     [ngStyle]="{'background-color': need.progress >= 75 ? 'green': need.progress >= 50 ? 'yellow': need.progress >= 25 ? 'orange': 'red'}">
+                    [ngStyle]="{'background-color': need.progress >= 75 ? 'green': need.progress >= 50 ? 'yellow': need.progress >= 25 ? 'orange': 'red'}">
                 </div>
               </div>
             </div>
@@ -20,24 +20,7 @@
       </div>
     </div>
     <div class="col-6 mb-3">
-      <div class="row align-items-center" *ngFor="let need of needsRight">
-        <div class="col-2 text-center">
-          <i *ngIf="need.icon" [ngClass]="need.icon"></i>
-        </div>
-        <div class="col-10">
-          <div class="d-flex align-items-center">
-            <div class="w-50 me-2">
-              <div class="progress">
-                <div class="progress-bar" role="progressbar" [style.width.%]="need.progress"
-                     [ngStyle]="{'background-color': need.progress >= 75 ? 'green': need.progress >= 50 ? 'yellow': need.progress >= 25 ? 'orange': 'red'}">
-                </div>
-              </div>
-            </div>
-            <label>{{ need.progress }}%</label>
-          </div>
-        </div>
-      </div>
-      <div>
+      <div class="flex">
         <label>Stimmung:
           <i class="fa-regular fa-lg" [ngClass]="mood"></i>
         </label>

diff --git a/src/app/needs/needs.component.scss b/src/app/needs/needs.component.scss
@@ -6,6 +6,18 @@
 .warning-text {
   color: red;
 }
+.center {
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.flex{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 
 .modal-title {
   position: relative;
@@ -15,3 +27,12 @@
 .progress {
   height: 7px;
 }
+@media screen and (max-width: 978px) {
+
+
+}
+@media screen and (orientation:landscape) { 
+.center{
+      margin-top: 100px;
+  }
+}
diff --git a/src/app/needs/needs.component.ts b/src/app/needs/needs.component.ts
@@ -17,12 +17,9 @@ export class NeedsComponent {
 
   needsLeft = [
     { label: 'Hunger', icon: 'fa-solid fa-drumstick-bite fa-lg', progress: 0 },
+    { label: 'Durst', icon: 'fa-solid fa-glass-water fa-lg', progress: 0 },
     { label: 'Hygiene', icon: 'fa-solid fa-bath fa-lg', progress: 0 },
     { label: 'Müde', icon: 'fa-solid fa-battery-full fa-lg', progress: 0 },
-  ]
-
-  needsRight = [
-    { label: 'Durst', icon: 'fa-solid fa-glass-water fa-lg', progress: 0 },
     { label: 'Gelangweilt', icon: 'fa-solid fa-user-group fa-lg', progress: 0 },
   ]
 
@@ -32,10 +29,10 @@ export class NeedsComponent {
 
       if (this.sygotchi) {
         this.needsLeft[0].progress = parseInt(this.sygotchi.hunger.toString())
-        this.needsRight[0].progress = parseInt(this.sygotchi.thirst.toString())
-        this.needsLeft[1].progress = parseInt(this.sygotchi.dirty.toString())
-        this.needsRight[1].progress = parseInt(this.sygotchi.tired.toString())
-        this.needsLeft[2].progress = parseInt(this.sygotchi.bored.toString())
+        this.needsLeft[1].progress = parseInt(this.sygotchi.thirst.toString())
+        this.needsLeft[2].progress = parseInt(this.sygotchi.dirty.toString())
+        this.needsLeft[3].progress = parseInt(this.sygotchi.tired.toString())
+        this.needsLeft[4].progress = parseInt(this.sygotchi.bored.toString())
         this.moodIconSelector(this.sygotchi.mood)
       }
     })

diff --git a/src/app/sleep-scene/sleep-scene.component.html b/src/app/sleep-scene/sleep-scene.component.html
@@ -1,5 +1,7 @@
-<div *ngIf="showMessage">
+<div class="message">
+  <div *ngIf="showMessage">
   <span class="message"> {{message.text}} </span>
+  </div>
 </div>
 <button (click)="onSleep()" class="btn btn-primary w-100">
   <div *ngIf="isAsleep;else goSleep">

diff --git a/src/app/sleep-scene/sleep-scene.component.scss b/src/app/sleep-scene/sleep-scene.component.scss
@@ -1,3 +1,4 @@
 .message {
     display: block;
+    height: 24px;
 }
diff --git a/src/app/sleep-scene/sleep-scene.component.ts b/src/app/sleep-scene/sleep-scene.component.ts
@@ -63,10 +63,12 @@ export class SleepSceneComponent implements OnInit {
   }
 
   messageHandler() {
-    this.showMessage = true
-
-    setTimeout(() => {
-      this.showMessage = false
-    }, 7000)
+    if(!this.showMessage){
+      this.showMessage = true
+      console.log(this.showMessage)
+      setTimeout(() => {
+        this.showMessage = false
+      }, 7000)
+    }
   }
 }
diff --git a/src/app/sygotchi-clean/sygotchi-clean.component.scss b/src/app/sygotchi-clean/sygotchi-clean.component.scss
@@ -19,7 +19,7 @@
         align-items: center;
     }
     .needs{
-        height: 33vh;
+        height: 30vh;
     }
 }
 @media screen and (orientation:landscape) {