From f243483688a5a591f6b3438b323a8ec907c473e7 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 3 Sep 2024 09:10:37 +0200
Subject: [PATCH] feat(Child): add broke message and update button styles

---
 src/app/Child/child.component.html   |  3 ++-
 src/app/Child/child.component.ts     | 15 ++++++++++++---
 src/app/Parent/parent.component.html |  7 +++++--
 src/styles.css                       |  4 ++++
 tailwind.config.js                   |  9 ++++++++-
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/app/Child/child.component.html b/src/app/Child/child.component.html
index ab0f045..0718f0d 100644
--- a/src/app/Child/child.component.html
+++ b/src/app/Child/child.component.html
@@ -1,3 +1,4 @@
 <h1>Child</h1>
 <p>Balance: {{balance}}</p>
-<button type="button" (click)=takeMoney() class="btn btn-secondary">Take Money</button>
+<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
+<button type="button" (click)=takeMoney() class="button">Take Money</button>
diff --git a/src/app/Child/child.component.ts b/src/app/Child/child.component.ts
index 5235d0c..e03c3ad 100644
--- a/src/app/Child/child.component.ts
+++ b/src/app/Child/child.component.ts
@@ -6,11 +6,20 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
   templateUrl: './child.component.html',
 })
 export class ChildComponent {
-  @Input() public balance:number = 0;
+  @Input() public balance: number = 0;
   @Output() balanceChange = new EventEmitter<number>();
 
+  public isBroke = false;
+
   public takeMoney() {
-    this.balance -= 50;
-    this.balanceChange.emit(this.balance);
+    if (this.balance <= 0) {
+      this.isBroke = true;
+    } else {
+      this.balance -= 50;
+      if (this.balance == 0) {
+        this.isBroke = true;
+      }
+      this.balanceChange.emit(this.balance);
+    }
   }
 }
diff --git a/src/app/Parent/parent.component.html b/src/app/Parent/parent.component.html
index 887f29d..6fc429c 100644
--- a/src/app/Parent/parent.component.html
+++ b/src/app/Parent/parent.component.html
@@ -1,6 +1,9 @@
-<h1>Parent</h1>
+<div class="m-3">
+ <h1>Parent</h1>
 <p>Kontostand: {{ balance }}</p>
-<button type="button" class="px-3 py-1 border-[3px] border-black m-3" (click)=addFifty()>Add Money</button>
+<button type="button" class="button" (click)=addFifty()>Add Money</button>
 
 <app-child [(balance)]="balance"></app-child>
 <app-child [(balance)]="balance"></app-child>
+</div>
+
diff --git a/src/styles.css b/src/styles.css
index d3a1a9a..2adbbf3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,3 +2,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.button {
+  @apply border-black rounded px-3 py-1 border-[3px];
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7586753..068e770 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,17 @@
 /** @type {import('tailwindcss').Config} */
+
+const colors = require('tailwindcss/colors');
+
 module.exports = {
   content: [
     "./src/**/*.{html,ts}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        ...colors,
+      }
+    },
   },
   plugins: [],
 }