feat(client): sass

.angular-cli.json

@@ -20,7 +20,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "lb",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -55,6 +55,6 @@
     }
   },
   "defaults": {
-    "styleExt": "css"
+    "styleExt": "scss"
   }
 }

.gitignore

@@ -33,6 +33,7 @@ testem.log
 yarn-error.log
 *.key
 *.crt
+*.css
 settings*.json
 
 # e2e

package.json

@@ -24,23 +24,19 @@
     "coverage": "npm run coveralls < ./coverage/lcov/lcov.info",
     "prebuild": "mkdir dist || true",
     "build": "npm run build:client && npm run build:server",
-    "build:client": "npm run build:client:prod",
-    "build:client:dev": "ng build",
+    "build:client": "ng build",
     "build:client:prod": "ng build --prod",
-    "build:server": "npm run build:server:prod",
-    "build:server:dev": "npm run webpack -- --config config/build/webpack.server.js --progress --env.dev",
+    "build:server": "npm run webpack -- --config config/build/webpack.server.js --progress --env.dev",
     "build:server:prod": "npm run webpack -- --config config/build/webpack.server.js --progress --bail",
     "build:server:test": "npm run webpack -- --config config/build/webpack.server.test.js --progress",
-    "static-server": "npm run static-server:dev -- --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
-    "static-server:dev": "npm run build:server:dev && node dist/server/static-server.js",
-    "static-server:prod": "npm run build:server:prod && node dist/server/static-server.js",
-    "match-server": "npm run match-server:dev -- --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
-    "match-server:dev": "npm run build:server:dev && node dist/server/match-server.js",
-    "match-server:prod": "npm run build:server:prod && node dist/server/match-server.js",
+    "static-server": "npm run build:server && node dist/server/static-server.js --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
+    "static-server:prod": "npm run build:server:prod && node dist/server/static-server.js --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
+    "match-server": "npm run build:server && node dist/server/match-server.js --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
+    "match-server:prod": "npm run build:server:prod && node dist/server/match-server.js --api=./secure/api.key --cert=./secure/cert.crt --key=./secure/cert.key",
     "format": "npm run clang-format -- --glob=\"@(src|config)/**/!(browser-providers.conf).@(ts|js)\" -i",
-    "pretest:server": "npm run build:server:test",
     "test": "npm run test:server && npm run test:client",
     "test:client": "ng test",
+    "pretest:server": "npm run build:server:test",
     "test:server": "node jasmine.js",
     "ci": "node config/build/ci.js",
     "sauce": "node config/build/sauce.js",
@@ -119,7 +115,6 @@
     "conventional-github-releaser": "^1.1.12",
     "coveralls": "^2.13.1",
     "csscomb": "^4.2.0",
-    "file-loader": "^0.11.2",
     "glob": "^7.1.2",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
@@ -139,4 +134,4 @@
     "tslint": "~5.3.2",
     "typescript": "~2.3.3"
   }
-}
+}

src/client/about/about.component.scss

@@ -0,0 +1,33 @@
+lb-about h2 {
+  font-size: 2em;
+}
+
+lb-about p {
+  margin: 2px 10px;
+}
+
+lb-about span {
+  display: inline-block;
+  width: 220px;
+}
+
+lb-about a {
+  text-decoration: underline;
+}
+
+lb-about img {
+  -webkit-clip-path: circle(50% at 50% 50%);
+          clip-path: circle(50% at 50% 50%);
+  height: 100px;
+}
+
+lb-about .contributor {
+  display: inline-block;
+  margin: 10px;
+}
+
+lb-about .contributor p {
+  font-size: 12px;
+  margin: 10px 0;
+  text-align: center;
+}

src/client/about/about.component.ts

@@ -1,10 +1,9 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {Http} from '@angular/http';
 
 @Component({
   selector: 'lb-about',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./about.css').toString()],
+  styleUrls: ['./about.component.scss'],
   template: `
     <section>
       <h2>About</h2>

src/client/app.component.ts

@@ -1,10 +1,6 @@
 import {Component} from '@angular/core';
 
-@Component({
-  selector: 'lb-app',
-  styleUrls: ['./app.component.css'],
-  template: `<router-outlet></router-outlet>`
-})
+@Component({selector: 'lb-app', template: `<router-outlet></router-outlet>`})
 
 export class AppComponent {
 }

src/client/build/abilities/abilities.component.scss

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+}
+
+:host > div {
+  position: absolute;
+  width: 74px;
+}
+
+.ability {
+  display: block;
+  height: 36px;
+  padding: 2px;
+}
+
+.ability:not(.ult) {
+  margin-left: 5px;
+}
+
+.ability.ult {
+  height: 46px;
+  padding: 2px;
+}
+
+.x.axis.level-line text,
+.x.axis.level-text line {
+  display: none;
+}
+
+.x.axis .domain {
+  stroke: none;
+}
+
+.x.axis.level-line > g:first-of-type > line {
+  display: none;
+}

src/client/build/abilities/abilities.component.spec.ts

@@ -9,7 +9,7 @@ import {Samples} from '../samples';
 import {AbilitiesComponent} from './abilities.component';
 
 xdescribe('AbilitiesComponent', () => {
-  let samples: Samples = {xp: [17000], gold: []};
+  const samples: Samples = {xp: [17000], gold: []};
 
   let component;
   beforeEach(() => {
@@ -19,12 +19,12 @@ xdescribe('AbilitiesComponent', () => {
       imports: [TestModule]
     });
 
-    let fixture = TestBed.createComponent(AbilitiesComponent);
+    const fixture = TestBed.createComponent(AbilitiesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  let champion = {
+  const champion = {
     stats: {attackrange: 175, mpperlevel: 47, mp: 334},
     spells: [
       {

src/client/build/abilities/abilities.component.ts

@@ -9,6 +9,7 @@ import {Samples} from '../samples';
 
 @Component({
   selector: 'lb-abilities',
+  styleUrls: ['./abilities.component.scss'],
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 220" width="100%" height="100%">
       <g [ngClass]="{ult : i == 3}" *ngFor="let spell of champion?.spells; let i = index">
@@ -53,43 +54,43 @@ export class AbilitiesComponent implements OnInit {
   }
 
   private update(): void {
-    for (let spell of this.champion.spells) {
+    for (const spell of this.champion.spells) {
       spell.extendedTooltip = this.applyEffects(spell);
     }
   }
 
   private applyEffects(spell: any) {
-    let effects = new Object();
+    const effects = new Object();
 
     if (spell.effect) {
       for (let i = 0; i < spell.effect.length; i++) {
-        let value = spell.effect[i];
+        const value = spell.effect[i];
         if (value) {
           effects['e' + i] = value[0];
         }
       }
     }
 
     if (spell.vars) {
-      for (let value of spell.vars) {
+      for (const value of spell.vars) {
         if (value.key && value.coeff) {
           effects[value.key] = value.coeff[0];
         }
       }
     }
 
-    let stats = this.getStats();
-    for (let attrname in stats) {
+    const stats = this.getStats();
+    for (const attrname of Object.keys(stats)) {
       effects[attrname] = stats[attrname];
     }
 
     return tim(spell.tooltip, effects);
   }
 
   private getStats(): Array<string> {
-    let stats = [];
+    const stats = [];
     let i = 0;
-    for (let stat in this.champion.stats) {
+    for (const stat of Object.keys(this.champion.stats)) {
       i++;
       stats['f' + i] = this.champion.stats[stat];
     }

src/client/build/build.component.scss

@@ -0,0 +1,76 @@
+.content {
+  background-color: #fff;
+}
+
+.title {
+  display: flex;
+  height: 80px;
+  margin-top: -80px;
+  padding-left: 30px;
+
+  img {
+    height: 80px;
+    width: 80px;
+  }
+
+  h2 {
+    font-size: 1.8em;
+    margin: 32px 0 0 12px;
+  }
+}
+
+lb-preview lb-item p.gold,
+lb-item-slot lb-item p.gold {
+  background-color: rgba(0,0,0,.7);
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+  min-width: 0;
+  padding: 0 2px;
+  position: absolute;
+}
+
+lb-preview lb-item p.gold {
+  margin: 30px 0 0 0;
+}
+
+lb-item-slot lb-item p.gold {
+  margin: 31px 0 0 0;
+}
+
+/* media */
+
+@media (max-width: 1300px) {
+  .title {
+    height: 60px;
+    margin-top: -60px;
+
+    img {
+      height: 60px;
+      width: 60px;
+    }
+
+    h2 {
+      font-size: 1.4em;
+      margin: 20px 0 0 10px;
+    }
+  }
+}
+
+@media (max-width: 850px) {
+  .title h2 {
+    display: none;
+  }
+}
+
+@media (max-width: 575px) {
+  .title {
+    background-color: #ddd;
+    margin-top: 0;
+    padding: 0;
+
+    h2 {
+      display: inherit;
+      font-size: 1.6em;
+    }
+  }
+}

src/client/build/build.component.ts

@@ -1,12 +1,12 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 import {LolApiService} from '../services';
 import {ItemsComponent} from './items/items.component';
 import {ShopComponent} from './shop/shop.component';
 
 @Component({
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./build.css').toString()],
+  selector: 'lb-build',
+  styleUrls: ['./build.component.scss'],
   template: `
     <div class="title">
       <img *ngIf="champion"