Change from "Houses" to "Factions"

src/app/FactionPoints.ts

@@ -0,0 +1,5 @@
+export class FactionPoints {
+    klingon: number;
+    starfleet: number;
+    romulan: number;
+}

src/app/HousePoints.ts

@@ -1,6 +0,0 @@
-export class HousePoints {
-    gryffindor: number;
-    ravenclaw: number;
-    hufflepuff: number;
-    slytherin: number;
-}

src/app/app.component.html

@@ -1,36 +1,28 @@
 <div class="fluid-container">
   <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" *ngIf="housePoints">{{housePoints.gryffindor | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeGryffindorPoints($event)"></points>
-      <points [amount]="10" (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 id="klingon" class="col-sm faction-column">
+      <img src="../assets/img/Klingon_Banner.png" class="banner mx-auto d-block"/>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.klingon | number}}</p>
+      <points [amount]="-1" (changeEvent)="changeKlingonPoints($event)"></points>
+      <points [amount]="1" (changeEvent)="changeKlingonPoints($event)"></points>
+      <points [amount]="5" (changeEvent)="changeKlingonPoints($event)"></points>
+      <img src="../assets/img/Klingon_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" *ngIf="housePoints">{{housePoints.ravenclaw | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeRavenclawPoints($event)"></points>
-      <points [amount]="10" (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 id="starfleet" class="col-sm faction-column">
+      <img src="../assets/img/Starfleet_Banner.png" class="banner mx-auto d-block"/>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.starfleet | number}}</p>
+      <points [amount]="-1" (changeEvent)="changeStarfleetPoints($event)"></points>
+      <points [amount]="1" (changeEvent)="changeStarfleetPoints($event)"></points>
+      <points [amount]="5" (changeEvent)="changeStarfleetPoints($event)"></points>
+      <img src="../assets/img/Starfleet_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" *ngIf="housePoints">{{housePoints.hufflepuff | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeHufflepuffPoints($event)"></points>
-      <points [amount]="10" (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" *ngIf="housePoints">{{housePoints.slytherin | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeSlytherinPoints($event)"></points>
-      <points [amount]="10" (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 id="romulan" class="col-sm faction-column">
+      <img src="../assets/img/Romulan_Banner.png" class="banner mx-auto d-block"/>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.romulan | number}}</p>
+      <points [amount]="-1" (changeEvent)="changeRomulanPoints($event)"></points>
+      <points [amount]="1" (changeEvent)="changeRomulanPoints($event)"></points>
+      <points [amount]="5" (changeEvent)="changeRomulanPoints($event)"></points>
+      <img src="../assets/img/Romulan_Crest.png" class="crest mx-auto d-block"/>
     </div>
   </div>
   <!-- <button (click)="resetPoints()">Reset</button> -->

src/app/app.component.sass

@@ -1,7 +1,7 @@
 body
     background-color: #000000
 
-.house-column
+.faction-column
     display: table-cell !important
     float: none !important
     border-style: solid
@@ -21,19 +21,15 @@ body
     img.crest
         display: none !important
 
-#slytherin
+#romulan
     background-color: #011803
     border-color: #033807
     color: #a2bea4
-#gryffindor
+#klingon
     background-color: #640c02
     border-color: #9c1203
     color: #dfc06b
-#hufflepuff
-    background-color: #664700
-    border-color: #e3a000
-    color: #e8b941
-#ravenclaw
+#starfleet
     background-color: #000c33
     border-color: #00165e
     color: #77b7d2

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { HousePoints } from './HousePoints';
-import { HousePointsRemoteService } from './house-points-remote.service';
+import { FactionPoints } from './FactionPoints';
+import { FactionPointsRemoteService } from './faction-points-remote.service';
 
 @Component({
   selector: 'app-root',
@@ -9,68 +9,59 @@ import { HousePointsRemoteService } from './house-points-remote.service';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private housePointsService: HousePointsRemoteService) { }
+  constructor(private factionPointsService: FactionPointsRemoteService) { }
 
   ngOnInit() {
-    this.getHousePoints();
-    setInterval(()=>{this.getHousePoints();}, 10000);
+    this.getFactionPoints();
+    setInterval(()=>{this.getFactionPoints();}, 10000);
   }
 
-  getHousePoints(): void {
-    this.housePointsService.getPoints$()
-      .subscribe(points => this.housePoints = points);
+  getFactionPoints(): void {
+    this.factionPointsService.getPoints$()
+      .subscribe(points => this.factionPoints = points);
   }
 
-  updateHousePoints(housePoints: HousePoints): void {
-    this.housePointsService.updatePoints$(housePoints)
+  updateFactionPoints(factionPoints: FactionPoints): void {
+    this.factionPointsService.updatePoints$(factionPoints)
       .subscribe(result => {
         console.log(result);
-        this.getHousePoints();
+        this.getFactionPoints();
       });
   }
 
-  title = 'Hogwart\'s Point Keeper';
+  title = 'Galaxy Point';
   
-  housePoints: HousePoints;
+  factionPoints: FactionPoints;
 
-  changeGryffindorPoints($event) {
-    this.housePointsService.getPoints$()
+  changeKlingonPoints($event) {
+    this.factionPointsService.getPoints$()
       .subscribe(points => {
-        points.gryffindor += $event;
-        this.updateHousePoints(points);
+        points.klingon += $event;
+        this.updateFactionPoints(points);
       });
   }
 
-  changeRavenclawPoints($event) {
-    this.housePointsService.getPoints$()
+  changeStarfleetPoints($event) {
+    this.factionPointsService.getPoints$()
       .subscribe(points => {
-        points.ravenclaw += $event;
-        this.updateHousePoints(points);
+        points.starfleet += $event;
+        this.updateFactionPoints(points);
       });
   }
 
-  changeHufflepuffPoints($event) {
-    this.housePointsService.getPoints$()
+  changeRomulanPoints($event) {
+    this.factionPointsService.getPoints$()
       .subscribe(points => {
-        points.hufflepuff += $event;
-        this.updateHousePoints(points);
-      });
-  }
-
-  changeSlytherinPoints($event) {
-    this.housePointsService.getPoints$()
-      .subscribe(points => {
-        points.slytherin += $event;
-        this.updateHousePoints(points);
+        points.romulan += $event;
+        this.updateFactionPoints(points);
       });
   }
 
   resetPoints() {
-    this.updateHousePoints({
-      gryffindor:0,
-      ravenclaw:0,
-      hufflepuff:0,
-      slytherin:0
+    this.updateFactionPoints({
+      klingon:0,
+      starfleet:0,
+      romulan:0
     });
   }
 }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 // import { BehaviorSubject } from 'rxjs';
-import { HousePoints } from './HousePoints';
+import { FactionPoints } from './FactionPoints';
 import { HttpClient } from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 
@@ -14,7 +14,7 @@ const httpOptions = {
 @Injectable({
   providedIn: 'root'
 })
-export class HousePointsRemoteService {
+export class FactionPointsRemoteService {
 
   url : string;
 
@@ -22,11 +22,11 @@ export class HousePointsRemoteService {
     this.url = "https://api.myjson.com/bins/l1mki";
    }
 
-  getPoints$(): Observable<HousePoints>  {
-    return this.http.get<HousePoints>(this.url);
+  getPoints$(): Observable<FactionPoints>  {
+    return this.http.get<FactionPoints>(this.url);
   }
 
-  updatePoints$(points: HousePoints): Observable<HousePoints>  {
-    return this.http.put<HousePoints>(this.url, points, httpOptions);
+  updatePoints$(points: FactionPoints): Observable<FactionPoints>  {
+    return this.http.put<FactionPoints>(this.url, points, httpOptions);
   }
 }

src/app/faction-points.service.spec.ts

@@ -1,12 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 
-import { HousePointsService } from './house-points.service';
+import { FactionPointsService } from './faction-points.service';
 
-describe('HousePointsService', () => {
+describe('FactionPointsService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: HousePointsService = TestBed.get(HousePointsService);
+    const service: FactionPointsService = TestBed.get(FactionPointsService);
     expect(service).toBeTruthy();
   });
 });

src/app/faction-points.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { FactionPoints } from './FactionPoints';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FactionPointsService {
+
+  constructor() { }
+
+  getPoints$(): Observable<FactionPoints>  {
+    
+    return of ({
+      klingon:0,
+      starfleet:0,
+      romulan:0
+    });
+  }
+}

src/app/house-points.service.ts

@@ -1,21 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { HousePoints } from './HousePoints';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class HousePointsService {
-
-  constructor() { }
-
-  getPoints$(): Observable<HousePoints>  {
-    
-    return of ({
-      gryffindor:0,
-      ravenclaw:0,
-      hufflepuff:0,
-      slytherin:0
-    });
-  }
-}