Basic setup

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.sass"
             ],
             "scripts": []

hogwarts-points.code-workspace

@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "C:\\Users\\poprhythm\\Documents\\code\\Hogwarts Point Keeper"
+		}
+	]
+}

package-lock.json

@@ -1715,6 +1715,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

src/app/HousePoints.ts

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

src/app/app.component.html

@@ -1,20 +1,36 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<div class="fluid-container">
-<div style="text-align:center">
+  <div class="row">
-  <h1>
+    <div id="gryffindor" class="col-sm house-column">
-    Welcome to {{ title }}!
+      <img src="../assets/img/Gryffindor_Banner.png" class="banner mx-auto d-block"/>
-  </h1>
+      <p class="points">{{housePoints.gryffindor | number}}</p>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+      <points [pointWorth]="10" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <points [pointWorth]="50" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <points [pointWorth]="-5" (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>
+      <points [pointWorth]="10" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <points [pointWorth]="50" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <points [pointWorth]="-5" (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>
+      <points [pointWorth]="10" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <points [pointWorth]="50" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <points [pointWorth]="-5" (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>
+      <points [pointWorth]="10" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <points [pointWorth]="50" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <points [pointWorth]="-5" (changeEvent)="changeSlytherinPoints($event)"></points>
+      <img src="../assets/img/Slytherin_Crest.png" class="crest mx-auto d-block"/>
+    </div>
+  </div>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.component.sass

@@ -0,0 +1,32 @@
+.house-column
+    display: table-cell !important
+    float: none !important
+    border-style: solid
+    border-width: 1em
+    img
+        margin: 1em
+    img.banner
+        max-width: 100%
+    img.crest
+        max-width: 65%
+
+#slytherin
+    background-color: #011803
+    border-color: #033807
+    color: #a2bea4
+#gryffindor
+    background-color: #640c02
+    border-color: #9c1203
+    color: #dfc06b
+#hufflepuff
+    background-color: #664700
+    border-color: #e3a000
+    color: #e8b941
+#ravenclaw
+    background-color: #000c33
+    border-color: #00165e
+    color: #77b7d2
+.points
+    font-size: 7em
+    font-family: Garamond
+    text-align: center

src/app/app.component.ts

@@ -1,10 +1,50 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { HousePoints } from './HousePoints';
+import { HousePointsRemoteService } from './house-points-remote.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.sass']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
-  title = 'hogwarts-points';
+
+  constructor(private housePointsService: HousePointsRemoteService) { }
+
+  ngOnInit() {
+    this.getHousePoints();
+  }
+
+  getHousePoints(): void {
+    this.housePointsService.getPoints$()
+      .subscribe(points => this.housePoints = points);
+  }
+
+  updateHousePoints(): void {
+    this.housePointsService.updatePoints$(this.housePoints);
+  }
+
+  title = 'Hogwart\'s Point Keeper';
+  
+  housePoints: HousePoints;
+
+  changeGryffindorPoints($event) {
+    this.housePoints.gryffindor += $event;
+    this.updateHousePoints();
+  }
+
+  changeRavenclawPoints($event) {
+    this.housePoints.ravenclaw += $event;
+    this.updateHousePoints();
+  }
+
+  changeHufflepuffPoints($event) {
+    this.housePoints.hufflepuff += $event;
+    this.updateHousePoints();
+  }
+
+  changeSlytherinPoints($event) {
+    this.housePoints.slytherin += $event;
+    this.updateHousePoints();
+  }
 }

src/app/app.module.ts

@@ -2,13 +2,18 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { PointsComponent } from './points.component';
+
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    PointsComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

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

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

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { HousePoints } from './HousePoints';
+import { HttpClient } from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type':  'application/json'
+  })
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HousePointsRemoteService {
+
+  url : string;
+
+  constructor(private http: HttpClient) {
+    this.url = "https://api.myjson.com/bins/l1mki";
+   }
+
+  getPoints$(): Observable<HousePoints>  {
+    return this.http.get<HousePoints>(this.url);
+  }
+
+  updatePoints$(points: HousePoints): Observable<HousePoints>  {
+    return this.http.post<HousePoints>(this.url, points, httpOptions);
+  }
+}

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

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

src/app/house-points.service.ts

@@ -0,0 +1,21 @@
+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
+    });
+  }
+}

src/app/points.component.html

@@ -0,0 +1,3 @@
+<button class="btn btn-lg btn-secondary" (click)="addPoints()">
+    {{pointWorth}}
+</button>

src/app/points.component.ts

@@ -0,0 +1,16 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+ 
+@Component({
+  selector: 'points',
+  templateUrl: './points.component.html',
+})
+export class PointsComponent {
+
+    @Input() pointWorth: number;
+
+    @Output() changeEvent = new EventEmitter<number>();
+
+    addPoints() {
+        this.changeEvent.emit(this.pointWorth);
+    }
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>HogwartsPoints</title>
+  <title>Hogwart's Point Keeper</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">