Add Star Trek assets, update .gitignore

.gitignore

@@ -1,43 +1,6 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+node_modules/
-
+dist/
-# compiled output
+.angular/
-/dist
+*.suo
-/tmp
+*.user
-/out-tsc
+.vs/
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db

.vscode/launch.json

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

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,37 +1,43 @@
+
 <div class="fluid-container">
+  <div id="stars"></div>
+  <div id="stars2"></div>
+  <div id="stars3"></div>
   <div class="row">
-    <div id="gryffindor" class="col-sm house-column">
+    <div id="klingon" class="col-sm faction-column">
-      <img src="../assets/img/Gryffindor_Banner.png" class="banner mx-auto d-block"/>
+      <img src="../assets/img/klingon_banner.png" class="banner mx-auto d-block"/>
-      <p class="points" *ngIf="housePoints">{{housePoints.gryffindor | number}}</p>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.klingon | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeGryffindorPoints($event)"></points>
+      <div *ngIf="displayOnlyMode==false">
-      <points [amount]="10" (changeEvent)="changeGryffindorPoints($event)"></points>
+        <points [amount]="-1" (changeEvent)="changeKlingonPoints($event)"></points>
-      <points [amount]="50" (changeEvent)="changeGryffindorPoints($event)"></points>
+        <points [amount]="5" (changeEvent)="changeKlingonPoints($event)"></points>
-      <img src="../assets/img/Gryffindor_Crest.png" class="crest mx-auto d-block"/>
+        <points [amount]="10" (changeEvent)="changeKlingonPoints($event)"></points>
+      </div>
+      <img src="../assets/img/klingon_emblem.png" class="crest mx-auto d-block"/>
     </div>
-    <div id="ravenclaw" class="col-sm house-column">
+    <div id="starfleet" class="col-sm faction-column">
-      <img src="../assets/img/Ravenclaw_Banner.png" class="banner mx-auto d-block"/>
+      <img src="../assets/img/starfleet_banner.png" class="banner mx-auto d-block"/>
-      <p class="points" *ngIf="housePoints">{{housePoints.ravenclaw | number}}</p>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.starfleet | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeRavenclawPoints($event)"></points>
+      <div *ngIf="displayOnlyMode==false">
-      <points [amount]="10" (changeEvent)="changeRavenclawPoints($event)"></points>
+        <points [amount]="-1" (changeEvent)="changeStarfleetPoints($event)"></points>
-      <points [amount]="50" (changeEvent)="changeRavenclawPoints($event)"></points>
+        <points [amount]="5" (changeEvent)="changeStarfleetPoints($event)"></points>
-      <img src="../assets/img/Ravenclaw_Crest.png" class="crest mx-auto d-block"/>
+        <points [amount]="10" (changeEvent)="changeStarfleetPoints($event)"></points>
+      </div>
+      <img src="../assets/img/starfleet_emblem.png" class="crest mx-auto d-block"/>
     </div>
-    <div id="hufflepuff" class="col-sm house-column">
+    <div id="romulan" class="col-sm faction-column">
-      <img src="../assets/img/Hufflepuff_Banner.png" class="banner mx-auto d-block"/>
+      <img src="../assets/img/romulan_banner.png" class="banner mx-auto d-block"/>
-      <p class="points" *ngIf="housePoints">{{housePoints.hufflepuff | number}}</p>
+      <p class="points" *ngIf="factionPoints">{{factionPoints.romulan | number}}</p>
-      <points [amount]="-5" (changeEvent)="changeHufflepuffPoints($event)"></points>
+      <div *ngIf="displayOnlyMode==false">
-      <points [amount]="10" (changeEvent)="changeHufflepuffPoints($event)"></points>
+        <points [amount]="-1" (changeEvent)="changeRomulanPoints($event)"></points>
-      <points [amount]="50" (changeEvent)="changeHufflepuffPoints($event)"></points>
+        <points [amount]="5" (changeEvent)="changeRomulanPoints($event)"></points>
-      <img src="../assets/img/Hufflepuff_Crest.png" class="crest mx-auto d-block"/>
+        <points [amount]="10" (changeEvent)="changeRomulanPoints($event)"></points>
-    </div>
+      </div>
-    <div id="slytherin" class="col-sm house-column">
+      <img src="../assets/img/romulan_emblem.png" class="crest-wide mx-auto d-block"/>
-      <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>
   </div>
-  <!-- <button (click)="resetPoints()">Reset</button> -->
+  <!--https://codepen.io/bigsweater/pen/KbCIh-->
+  <div *ngIf="displayOnlyMode==false" id="desktop-controls">
+    <!--<button (click)="resetPoints()">Reset</button>-->
+    <button (click)="displayOnly()">Hide Points</button>
+  </div>
 </div>

src/app/app.component.sass

@@ -1,49 +1,69 @@
-body
+body
-    background-color: #000000
+    background-color: #000000
-
+
-.house-column
+
-    display: table-cell !important
+@media screen and (max-width: 600px)
-    float: none !important
+    #desktop-controls
-    border-style: solid
+        display: none !important
-    border-width: 1em
+
-    text-align: center
+.faction-column
-
+    display: table-cell !important
-    img
+    float: none !important
-        margin: 1em
+    border-style: solid
-    img.banner
+    border-width: 1em
-        max-width: 100%
+    text-align: center
-    img.crest
+
-        max-width: 65%
+    img
-        
+        margin: 1em
-@media screen and (max-width: 600px)
+        .crest
-    img.banner
+            max-width: 65%
-        max-width: 40% !important
+        .crest-wide
-    img.crest
+            max-width: 80%
-        display: none !important
+
-
+@media screen and (max-width: 600px)
-#slytherin
+    img.banner
-    background-color: #011803
+        display: inline !important
-    border-color: #033807
+        max-width: 50% !important
-    color: #a2bea4
+        margin: .1em !important
-#gryffindor
+    .faction-column 
-    background-color: #640c02
+        border-width: .4em
-    border-color: #9c1203
+        p
-    color: #dfc06b
+            display: inline !important
-#hufflepuff
+            vertical-align: middle
-    background-color: #664700
+            margin-left: .2em
-    border-color: #e3a000
+    img.crest
-    color: #e8b941
+        display: none !important
-#ravenclaw
+    img.crest-wide
-    background-color: #000c33
+        display: none !important
-    border-color: #00165e
+    
-    color: #77b7d2
+#klingon
-.points
+    background: radial-gradient(ellipse at bottom, rgba(#934741, .9) 0%, rgba(#640c02, 0.1) 100%)
-    font-family: Garamond
+    border-color: #9c1203
-    text-align: center
+    color: #dceaf9
-
+    @media screen and (min-width: 601px)
-@media screen and (min-width: 601px)
+        margin-left: 1em
-    .points
+
-        font-size: 7em
+#starfleet
-@media screen and (max-width: 600px)
+    background: radial-gradient(ellipse at bottom, rgba(#344c67, .9) 0%, rgba(#000c33, 0.1) 100%)
-    .points
+    border-color: #374561
-        font-size: 4em
+    color: #f4ebd5
+    background-image: url('../assets/img/starfleet_emblem_bw.png') center center
+
+#romulan
+    background: radial-gradient(ellipse at bottom, rgba(#234448, .9) 0%, rgba(#011803, 0.1) 100%)
+    border-color: #033807
+    color: #c3e5c6
+    @media screen and (min-width: 601px)
+        margin-right: 1em
+    
+.points
+    font-family: Odibee Sans
+    text-align: center
+
+    @media screen and (min-width: 601px)
+        font-size: 7em
+    @media screen and (max-width: 600px)
+        font-size: 4em
+        margin-bottom: 0em
+        padding: 0em !important
+        

src/app/app.component.ts

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

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

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

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>  {
+  getPoints$(): Observable<FactionPoints>  {
-    return this.http.get<HousePoints>(this.url);
+    return this.http.get<FactionPoints>(this.url);
   }
 
-  updatePoints$(points: HousePoints): Observable<HousePoints>  {
+  updatePoints$(points: FactionPoints): Observable<FactionPoints>  {
-    return this.http.put<HousePoints>(this.url, points, httpOptions);
+    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-remote.service.spec.ts

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

src/app/points.component.html

@@ -1,5 +1,5 @@
-<button class="btn btn-light" (click)="change()" >
+<button class="btn btn-light" (click)="change()" >
-    <span [ngClass]="{'extraLarge' : isExtraLarge() } ">
+    <span [ngClass]="{'extraLarge' : isExtraLarge() } ">
-        <span *ngIf="isPositive()">+</span> {{amount}}
+        <span *ngIf="isPositive()">+</span> {{amount}}
-    </span>
+    </span>
-</button>
+</button>

src/app/points.component.sass

@@ -1,8 +1,11 @@
-.btn
+.btn
-    opacity: 0.5
+    opacity: 0.5
-    margin: 4%
+    margin: 4%
-    font-family: Garamond
+    font-family: Odibee Sans
-    font-weight: bold
+    font-size: 1.3em
-    font-size: 1.3em
+.extraLarge
-.extraLarge
+    font-size: 1.7em
-    font-size: 1.7em
+
+@media screen and (max-width: 600px)
+    .btn
+        margin-top: 0em !important

src/app/points.component.ts

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

src/index.html

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

src/stars.sass

@@ -0,0 +1,91 @@
+// n is number of stars required
+@function multiple-box-shadow ($n) 
+  $value: '#{random(2000)}px #{random(2000)}px #FFF'
+  @for $i from 2 through $n
+    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
+
+  @return unquote($value)
+
+$shadows-small:  multiple-box-shadow(700)
+$shadows-medium: multiple-box-shadow(200)
+$shadows-big:    multiple-box-shadow(100)
+
+html
+  height: 100%
+  overflow: hidden
+    
+#stars
+  width: 1px
+  height: 1px
+  background: transparent
+  box-shadow: $shadows-small
+  animation			: animStar 50s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 1px
+    height: 1px
+    background: transparent
+    box-shadow: $shadows-small
+    
+#stars2
+  width: 2px
+  height: 2px
+  background: transparent
+  box-shadow: $shadows-medium
+  animation			: animStar 100s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 2px
+    height: 2px
+    background: transparent
+    box-shadow: $shadows-medium
+    
+#stars3
+  width: 3px
+  height: 3px
+  background: transparent
+  box-shadow: $shadows-big
+  animation			: animStar 150s linear infinite
+    
+  &:after
+    content: " "
+    position: absolute
+    top: 2000px
+    width: 3px
+    height: 3px
+    background: transparent
+    box-shadow: $shadows-big
+
+#title
+  position: absolute
+  top: 50%
+  left: 0
+  right: 0
+  
+  color: #FFF
+  text-align: center
+  font-family: 'lato',sans-serif
+  font-weight: 300
+  font-size: 50px
+  letter-spacing: 10px
+  
+  margin-top: -60px
+  padding-left: 10px
+  
+  span
+    background: -webkit-linear-gradient(white, #38495a)
+    -webkit-background-clip: text
+    -webkit-text-fill-color: transparent
+    
+@keyframes animStar
+  from	
+    transform: translateY(0px)
+  to		
+    transform: translateY(-2000px)
+    

src/styles.sass

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+@import 'stars';
+
+@font-face
+    font-family: "Odibee Sans";
+    src: url("assets/fonts/OdibeeSans-Regular.eot") format("eot")
+    src: url("assets/fonts/OdibeeSans-Regular.otf") format("otf")
+    src: url("assets/fonts/OdibeeSans-Regular.woff") format("woff")
+    src: url("assets/fonts/OdibeeSans-Regular.ttf") format("truetype")