diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.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}" + } + ] +} \ No newline at end of file diff --git a/angular.json b/angular.json index b2400cc..2872948 100644 --- a/angular.json +++ b/angular.json @@ -27,6 +27,7 @@ "src/assets" ], "styles": [ + "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.sass" ], "scripts": [] diff --git a/hogwarts-points.code-workspace b/hogwarts-points.code-workspace new file mode 100644 index 0000000..e216d19 --- /dev/null +++ b/hogwarts-points.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "C:\\Users\\poprhythm\\Documents\\code\\Hogwarts Point Keeper" + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 84c09b5..59ca34d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d91cb6e..b3e93b7 100644 --- a/package.json +++ b/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", diff --git a/src/app/HousePoints.ts b/src/app/HousePoints.ts new file mode 100644 index 0000000..bc8bae9 --- /dev/null +++ b/src/app/HousePoints.ts @@ -0,0 +1,6 @@ +export class HousePoints { + gryffindor: number; + ravenclaw: number; + hufflepuff: number; + slytherin: number; +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 5226d57..372fa1d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,36 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo +
+
+
+ +

{{housePoints.gryffindor | number}}

+ + + + +
+
+ +

{{housePoints.ravenclaw | number}}

+ + + + +
+
+ +

{{housePoints.hufflepuff | number}}

+ + + + +
+
+ +

{{housePoints.slytherin | number}}

+ + + + +
+
-

Here are some links to help you start:

- - diff --git a/src/app/app.component.sass b/src/app/app.component.sass index e69de29..898fc34 100644 --- a/src/app/app.component.sass +++ b/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 \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3e44c93..a0b1207 100644 --- a/src/app/app.component.ts +++ b/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 { - title = 'hogwarts-points'; +export class AppComponent implements OnInit { + + 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(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..a8e523d 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/house-points-remote.service.spec.ts b/src/app/house-points-remote.service.spec.ts new file mode 100644 index 0000000..f5a954a --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/house-points-remote.service.ts b/src/app/house-points-remote.service.ts new file mode 100644 index 0000000..961fc25 --- /dev/null +++ b/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 { + return this.http.get(this.url); + } + + updatePoints$(points: HousePoints): Observable { + return this.http.post(this.url, points, httpOptions); + } +} diff --git a/src/app/house-points.service.spec.ts b/src/app/house-points.service.spec.ts new file mode 100644 index 0000000..dc2ff62 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/house-points.service.ts b/src/app/house-points.service.ts new file mode 100644 index 0000000..6c1452e --- /dev/null +++ b/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 { + + return of ({ + gryffindor:0, + ravenclaw:0, + hufflepuff:0, + slytherin:0 + }); + } +} diff --git a/src/app/points.component.html b/src/app/points.component.html new file mode 100644 index 0000000..6f4bd79 --- /dev/null +++ b/src/app/points.component.html @@ -0,0 +1,3 @@ + diff --git a/src/app/points.component.ts b/src/app/points.component.ts new file mode 100644 index 0000000..9dda6f9 --- /dev/null +++ b/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(); + + addPoints() { + this.changeEvent.emit(this.pointWorth); + } +} \ No newline at end of file diff --git a/src/assets/img/Gryffindor_Banner.png b/src/assets/img/Gryffindor_Banner.png new file mode 100644 index 0000000..62be2b4 Binary files /dev/null and b/src/assets/img/Gryffindor_Banner.png differ diff --git a/src/assets/img/Gryffindor_Crest.png b/src/assets/img/Gryffindor_Crest.png new file mode 100644 index 0000000..0fc4dac Binary files /dev/null and b/src/assets/img/Gryffindor_Crest.png differ diff --git a/src/assets/img/Hufflepuff_Banner.png b/src/assets/img/Hufflepuff_Banner.png new file mode 100644 index 0000000..593d32e Binary files /dev/null and b/src/assets/img/Hufflepuff_Banner.png differ diff --git a/src/assets/img/Hufflepuff_Crest.png b/src/assets/img/Hufflepuff_Crest.png new file mode 100644 index 0000000..2aa5719 Binary files /dev/null and b/src/assets/img/Hufflepuff_Crest.png differ diff --git a/src/assets/img/Ravenclaw_Banner.png b/src/assets/img/Ravenclaw_Banner.png new file mode 100644 index 0000000..bbd41d9 Binary files /dev/null and b/src/assets/img/Ravenclaw_Banner.png differ diff --git a/src/assets/img/Ravenclaw_Crest.png b/src/assets/img/Ravenclaw_Crest.png new file mode 100644 index 0000000..caeb877 Binary files /dev/null and b/src/assets/img/Ravenclaw_Crest.png differ diff --git a/src/assets/img/Slytherin_Banner.png b/src/assets/img/Slytherin_Banner.png new file mode 100644 index 0000000..183612d Binary files /dev/null and b/src/assets/img/Slytherin_Banner.png differ diff --git a/src/assets/img/Slytherin_Crest.png b/src/assets/img/Slytherin_Crest.png new file mode 100644 index 0000000..c52da66 Binary files /dev/null and b/src/assets/img/Slytherin_Crest.png differ diff --git a/src/index.html b/src/index.html index 78ad03a..96e0c01 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - HogwartsPoints + Hogwart's Point Keeper