1.0

src/app/app.component.html

@@ -2,35 +2,36 @@
   <div class="row">
     <div id="gryffindor" class="col-sm house-column">
       <img src="../assets/img/Gryffindor_Banner.png" class="banner mx-auto d-block"/>
-      <p class="points">{{housePoints.gryffindor | number}}</p>
+      <p class="points" *ngIf="housePoints">{{housePoints.gryffindor | number}}</p>
-      <points [pointWorth]="10" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <points [amount]="-5" (changeEvent)="changeGryffindorPoints($event)"></points>
-      <points [pointWorth]="50" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <points [amount]="10" (changeEvent)="changeGryffindorPoints($event)"></points>
-      <points [pointWorth]="-5" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <points [amount]="50" (changeEvent)="changeGryffindorPoints($event)"></points>
       <img src="../assets/img/Gryffindor_Crest.png" class="crest mx-auto d-block"/>
     </div>
     <div id="ravenclaw" class="col-sm house-column">
       <img src="../assets/img/Ravenclaw_Banner.png" class="banner mx-auto d-block"/>
-      <p class="points">{{housePoints.ravenclaw | number}}</p>
+      <p class="points" *ngIf="housePoints">{{housePoints.ravenclaw | number}}</p>
-      <points [pointWorth]="10" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <points [amount]="-5" (changeEvent)="changeRavenclawPoints($event)"></points>
-      <points [pointWorth]="50" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <points [amount]="10" (changeEvent)="changeRavenclawPoints($event)"></points>
-      <points [pointWorth]="-5" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <points [amount]="50" (changeEvent)="changeRavenclawPoints($event)"></points>
       <img src="../assets/img/Ravenclaw_Crest.png" class="crest mx-auto d-block"/>
     </div>
     <div id="hufflepuff" class="col-sm house-column">
       <img src="../assets/img/Hufflepuff_Banner.png" class="banner mx-auto d-block"/>
-      <p class="points">{{housePoints.hufflepuff | number}}</p>
+      <p class="points" *ngIf="housePoints">{{housePoints.hufflepuff | number}}</p>
-      <points [pointWorth]="10" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <points [amount]="-5" (changeEvent)="changeHufflepuffPoints($event)"></points>
-      <points [pointWorth]="50" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <points [amount]="10" (changeEvent)="changeHufflepuffPoints($event)"></points>
-      <points [pointWorth]="-5" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <points [amount]="50" (changeEvent)="changeHufflepuffPoints($event)"></points>
       <img src="../assets/img/Hufflepuff_Crest.png" class="crest mx-auto d-block"/>
     </div>
     <div id="slytherin" class="col-sm house-column">
       <img src="../assets/img/Slytherin_Banner.png" class="banner mx-auto d-block"/>
-      <p class="points">{{housePoints.slytherin | number}}</p>
+      <p class="points" *ngIf="housePoints">{{housePoints.slytherin | number}}</p>
-      <points [pointWorth]="10" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <points [amount]="-5" (changeEvent)="changeSlytherinPoints($event)"></points>
-      <points [pointWorth]="50" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <points [amount]="10" (changeEvent)="changeSlytherinPoints($event)"></points>
-      <points [pointWorth]="-5" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <points [amount]="50" (changeEvent)="changeSlytherinPoints($event)"></points>
       <img src="../assets/img/Slytherin_Crest.png" class="crest mx-auto d-block"/>
     </div>
   </div>
+  <!-- <button (click)="resetPoints()">Reset</button> -->
 </div>

src/app/app.component.sass

@@ -1,14 +1,25 @@
+body
+    background-color: #000000
+
 .house-column
     display: table-cell !important
     float: none !important
     border-style: solid
     border-width: 1em
+    text-align: center
+
     img
         margin: 1em
     img.banner
         max-width: 100%
     img.crest
         max-width: 65%
+        
+@media screen and (max-width: 600px)
+    img.banner
+        max-width: 40% !important
+    img.crest
+        display: none !important
 
 #slytherin
     background-color: #011803
@@ -27,6 +38,12 @@
     border-color: #00165e
     color: #77b7d2
 .points
-    font-size: 7em
     font-family: Garamond
-    text-align: center
+    text-align: center
+
+@media screen and (min-width: 601px)
+    .points
+        font-size: 7em
+@media screen and (max-width: 600px)
+    .points
+        font-size: 4em

src/app/app.component.ts

@@ -13,6 +13,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.getHousePoints();
+    setInterval(()=>{this.getHousePoints();}, 10000);
   }
 
   getHousePoints(): void {
@@ -20,8 +21,12 @@ export class AppComponent implements OnInit {
       .subscribe(points => this.housePoints = points);
   }
 
-  updateHousePoints(): void {
+  updateHousePoints(housePoints: HousePoints): void {
-    this.housePointsService.updatePoints$(this.housePoints);
+    this.housePointsService.updatePoints$(housePoints)
+      .subscribe(result => {
+        console.log(result);
+        this.getHousePoints();
+      });
   }
 
   title = 'Hogwart\'s Point Keeper';
@@ -29,22 +34,43 @@ export class AppComponent implements OnInit {
   housePoints: HousePoints;
 
   changeGryffindorPoints($event) {
-    this.housePoints.gryffindor += $event;
+    this.housePointsService.getPoints$()
-    this.updateHousePoints();
+      .subscribe(points => {
+        points.gryffindor += $event;
+        this.updateHousePoints(points);
+      });
   }
 
   changeRavenclawPoints($event) {
-    this.housePoints.ravenclaw += $event;
+    this.housePointsService.getPoints$()
-    this.updateHousePoints();
+      .subscribe(points => {
+        points.ravenclaw += $event;
+        this.updateHousePoints(points);
+      });
   }
 
   changeHufflepuffPoints($event) {
-    this.housePoints.hufflepuff += $event;
+    this.housePointsService.getPoints$()
-    this.updateHousePoints();
+      .subscribe(points => {
+        points.hufflepuff += $event;
+        this.updateHousePoints(points);
+      });
   }
 
   changeSlytherinPoints($event) {
-    this.housePoints.slytherin += $event;
+    this.housePointsService.getPoints$()
-    this.updateHousePoints();
+      .subscribe(points => {
+        points.slytherin += $event;
+        this.updateHousePoints(points);
+      });
+  }
+
+  resetPoints() {
+    this.updateHousePoints({
+      gryffindor:0,
+      ravenclaw:0,
+      hufflepuff:0,
+      slytherin:0
+    });
   }
 }

src/app/house-points-remote.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
+// import { BehaviorSubject } from 'rxjs';
 import { HousePoints } from './HousePoints';
 import { HttpClient } from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
@@ -26,6 +27,6 @@ export class HousePointsRemoteService {
   }
 
   updatePoints$(points: HousePoints): Observable<HousePoints>  {
-    return this.http.post<HousePoints>(this.url, points, httpOptions);
+    return this.http.put<HousePoints>(this.url, points, httpOptions);
   }
 }

src/app/points.component.html

@@ -1,3 +1,3 @@
-<button class="btn btn-lg btn-secondary" (click)="addPoints()">
+<button class="btn btn-light" (click)="change()" >
-    {{pointWorth}}
+    <span *ngIf="isPositive()">+</span> {{amount}}
 </button>

src/app/points.component.sass

@@ -0,0 +1,6 @@
+.btn
+    opacity: 0.5
+    margin: 4%
+    font-family: Garamond
+    font-weight: bold
+    font-size: 1.5em

src/app/points.component.ts

@@ -3,14 +3,19 @@ import { Component, Output, EventEmitter, Input } from '@angular/core';
 @Component({
   selector: 'points',
   templateUrl: './points.component.html',
+  styleUrls: ['./points.component.sass']
 })
 export class PointsComponent {
 
-    @Input() pointWorth: number;
+    @Input() amount: number;
 
     @Output() changeEvent = new EventEmitter<number>();
 
-    addPoints() {
+    change() {
-        this.changeEvent.emit(this.pointWorth);
+        this.changeEvent.emit(this.amount);
+    }
+
+    isPositive() {
+        return this.amount > 0;
     }
 }

src/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body style="background-color: black">
   <app-root></app-root>
 </body>
 </html>