TFTPaths 1.0

package-lock.json

@@ -328,7 +328,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -349,12 +350,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -369,17 +372,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -496,7 +502,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -508,6 +515,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -522,6 +530,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -535,6 +544,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -633,7 +643,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -645,6 +656,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -766,6 +778,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -785,6 +798,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -828,7 +842,8 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
@@ -5612,12 +5627,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -5637,7 +5654,8 @@
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
@@ -5785,6 +5803,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -6313,8 +6332,7 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-      "dev": true
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -10304,7 +10322,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -10325,12 +10344,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -10345,17 +10366,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -10472,7 +10496,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -10484,6 +10509,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -10498,6 +10524,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -10505,12 +10532,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -10529,6 +10558,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -10609,7 +10639,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -10621,6 +10652,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -10706,7 +10738,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -10742,6 +10775,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -10761,6 +10795,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -10804,12 +10839,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
+    "lodash": "^4.17.15",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

src/app/app-routing.module.ts

@@ -1,8 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { LayoutComponent } from 'src/components/layout/layout.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', component: LayoutComponent, pathMatch: 'full' },
+  { path: '**', component: LayoutComponent, pathMatch: 'full' }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,21 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</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>
-
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HomeComponent } from '../components/home/home.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { LayoutComponent } from '../components/layout/layout.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    LayoutComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/common/constants.ts

@@ -0,0 +1,867 @@
+import { Champion } from 'src/models/champion';
+import { Bonus } from 'src/models/bonus';
+
+export class Constants {
+    public static Champions: Champion [] = [
+        {
+            name: 'Aatrox',
+            roles: [
+                'demon',
+                'blademaster'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Ahri',
+            roles: [
+                'wild',
+                'sorcerer'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'AurelionSol',
+            roles: [
+                'dragon',
+                'sorcerer'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Anivia',
+            roles: [
+                'glacial',
+                'elementalist'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Ashe',
+            roles: [
+                'glacial',
+                'ranger'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Akali',
+            roles: [
+                'ninja',
+                'assassin'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Brand',
+            roles: [
+                'demon',
+                'elementalist'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Braum',
+            roles: [
+                'glacial',
+                'guardian'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Blitzcrank',
+            roles: [
+                'robot',
+                'brawler'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Chogath',
+            roles: [
+                'void',
+                'brawler'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Draven',
+            roles: [
+                'imperial',
+                'blademaster'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Darius',
+            roles: [
+                'imperial',
+                'knight'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        }
+        ,
+        {
+            name: 'Evelynn',
+            roles: [
+                'demon',
+                'assassin'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+          {
+            name: 'Elise',
+            roles: [
+                'demon',
+                'shapeshifter'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Fiora',
+            roles: [
+                'noble',
+                'blademaster'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Gnar',
+            roles: [
+                'wild',
+                'yordle',
+                'shapeshifter'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Garen',
+            roles: [
+                'noble',
+                'knight'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Gangplank',
+            roles: [
+                'pirate',
+                'gunslinger',
+                'blademaster'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Graves',
+            roles: [
+                'pirate',
+                'gunslinger'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Kayle',
+            roles: [
+                'noble',
+                'knight'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Karthus',
+            roles: [
+                'phantom',
+                'sorcerer'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Kennen',
+            roles: [
+                'ninja',
+                'yordle',
+                'elementalist'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Katarina',
+            roles: [
+                'imperial',
+                'assassin'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Kindred',
+            roles: [
+                'phantom',
+                'ranger'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Kassadin',
+            roles: [
+                'void',
+                'sorcerer'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Khazix',
+            roles: [
+                'void',
+                'assassin'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Lissandra',
+            roles: [
+                'glacial',
+                'elementalist'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Lucian',
+            roles: [
+                'noble',
+                'gunslinger'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Lulu',
+            roles: [
+                'yordle',
+                'sorcerer'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Leona',
+            roles: [
+                'noble',
+                'guardian'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'MissFortune',
+            roles: [
+                'pirate',
+                'gunslinger'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Mordekaiser',
+            roles: [
+                'phantom',
+                'knight'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Morgana',
+            roles: [
+                'demon',
+                'sorcerer'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Nidalee',
+            roles: [
+                'wild',
+                'shapeshifter'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Pyke',
+            roles: [
+                'pirate',
+                'assassin'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Poppy',
+            roles: [
+                'yordle',
+                'knight'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Rengar',
+            roles: [
+                'wild',
+                'assassin'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'RekSai',
+            roles: [
+                'void',
+                'brawler'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Swain',
+            roles: [
+                'demon',
+                'imperial',
+                'shapeshifter'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Sejuani',
+            roles: [
+                'glacial',
+                'knight'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Shen',
+            roles: [
+                'ninja',
+                'blademaster'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Shyvana',
+            roles: [
+                'dragon',
+                'shapeshifter'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'TwistedFate',
+            roles: [
+                'pirate',
+                'sorcerer'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Tristana',
+            roles: [
+                'yordle',
+                'gunslinger'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Varus',
+            roles: [
+                'demon',
+                'ranger'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Vayne',
+            roles: [
+                'noble',
+                'ranger'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Veigar',
+            roles: [
+                'yordle',
+                'sorcerer'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Volibear',
+            roles: [
+                'glacial',
+                'brawler'
+            ],
+            cost: 3,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Warwick',
+            roles: [
+                'wild',
+                'brawler',
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Yasuo',
+            roles: [
+                'exile',
+                'blademaster'
+            ],
+            cost: 5,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Zed',
+            roles: [
+                'ninja',
+                'assassin'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Camille',
+            roles: [
+                'hextech',
+                'blademaster'
+            ],
+            cost: 1,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Jayce',
+            roles: [
+                'hextech',
+                'shapeshifter'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Jinx',
+            roles: [
+                'hextech',
+                'gunslinger'
+            ],
+            cost: 4,
+            isSelected: false,
+            sinergy: false
+        },
+        {
+            name: 'Vi',
+            roles: [
+                'hextech',
+                'brawler'
+            ],
+            cost: 2,
+            isSelected: false,
+            sinergy: false
+        }
+    ];
+    public static championName = 'name';
+    public static roles = [
+        'demon',
+        'blademaster',
+        'imperial',
+        'assassin',
+        'shapeshifter',
+        'wild',
+        'noble',
+        'ranger',
+        'sorcerer',
+        'yordle',
+        'knight',
+        'ninja',
+        'elementalist',
+        'pirate',
+        'hextech',
+        'brawler',
+        'glacial',
+        'void',
+        'exile',
+        'dragon',
+        'gunslinger',
+        'phantom',
+        'guardian',
+        'robot'
+    ];
+    public static bonuses: Bonus [] = [
+        {
+           description: 'Demon basic attacks have a 40% chance to burn 20 mana from their target and return 15 mana to the attacker',
+           role: 'demon',
+           units: 2,
+           maxUnits: 6
+        },
+        {
+            description: 'Demon basic attacks have a 40% chance to burn 20 mana from their target and return 30 mana to the attacker',
+            role: 'demon',
+            units: 4,
+            maxUnits: 6
+        },
+        {
+            description: 'Demon basic attacks have a 40% chance to burn 20 mana from their target and return 45 mana to the attacker',
+            role: 'demon',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Dragons are 83% inmune to Magic Damage',
+            role: 'dragon',
+            units: 2,
+            maxUnits: 2
+        },
+        {
+            description: 'Exiles start combat with a shield equal to 100% max HP when placed adjacent to NO other units',
+            role: 'exile',
+            units: 1,
+            maxUnits: 1
+        },
+        {
+            description: 'Glacial units have a 25% chance to stun on hit for two seconds',
+            role: 'glacial',
+            units: 2,
+            maxUnits: 6
+        },
+        {
+            description: 'Glacial units have a 35% chance to stun on hit for two seconds',
+            role: 'glacial',
+            units: 4,
+            maxUnits: 6
+        },
+        {
+            description: 'Glacial units have a 45% chance to stun on hit for two seconds',
+            role: 'glacial',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Robots start combat with full mana',
+            role: 'robot',
+            units: 1,
+            maxUnits: 1
+        },
+        {
+            description: 'Double damage for one random Imperial',
+            role: 'imperial',
+            units: 2,
+            maxUnits: 4
+        },
+        {
+            description: 'Double damage for all Imperials',
+            role: 'imperial',
+            units: 4,
+            maxUnits: 4
+        },
+        {
+            description: '+60 Armor and magic resist, heal 35 on hit for random ally',
+            role: 'noble',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: '+60 Armor and magic resist, heal 35 on hit for all allies',
+            role: 'noble',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Exactly 1: +60 attack damage and ability power for one Ninja',
+            role: 'ninja',
+            units: 1,
+            maxUnits: 4
+        },
+        {
+            description: 'Exactly 4: +70 attack damage and ability power for your Ninjas',
+            role: 'ninja',
+            units: 4,
+            maxUnits: 4
+        },
+        {
+            description: 'You earn up to 4 additional gold from each PVP round, average 1.75 gold',
+            role: 'pirate',
+            units: 3,
+            maxUnits: 3
+        },
+        {
+            description: 'Curse a random enemy at the start of combat, setting their HP to 100',
+            role: 'phantom',
+            units: 2,
+            maxUnits: 2
+        },
+        {
+            description: `Each unit's attacks give then Fury (5 stack cap). Stacks give 12% attack speed. For Wild`,
+            role: 'wild',
+            units: 2,
+            maxUnits: 4
+        },
+        {
+            description: `Each unit's attacks give then Fury (5 stack cap). Stacks give 12% attack speed. For team`,
+            role: 'wild',
+            units: 4,
+            maxUnits: 4
+        },
+        {
+            description: 'Void units deal true damage',
+            role: 'void',
+            units: 3,
+            maxUnits: 3
+        },
+        {
+            description: 'Attacks against your Yordles have a 30% chance to miss, also dodges on-hit effects',
+            role: 'yordle',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: 'Attacks against your Yordles have a 55% chance to miss, also dodges on-hit effects',
+            role: 'yordle',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: '+125% crit damage for Assassins',
+            role: 'assassin',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: '+350% crit damage for Assassins',
+            role: 'assassin',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Blademasters attack 1 extra time',
+            role: 'blademaster',
+            units: 3,
+            maxUnits: 9
+        },
+        {
+            description: 'Blademasters attack 2 extra times',
+            role: 'blademaster',
+            units: 6,
+            maxUnits: 9
+        },
+        {
+            description: 'Blademasters attack 4 extra times',
+            role: 'blademaster',
+            units: 9,
+            maxUnits: 9
+        },
+        {
+            description: '+300 health to Brawlers',
+            role: 'brawler',
+            units: 2,
+            maxUnits: 6
+        },
+        {
+            description: '+600 health to Brawlers',
+            role: 'brawler',
+            units: 4,
+            maxUnits: 6
+        },
+        {
+            description: '+1000 health to Brawlers',
+            role: 'brawler',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Each combat, summon a golem with 2200 hp',
+            role: 'elementalist',
+            units: 3,
+            maxUnits: 3
+        },
+        {
+            description: `+50 Armor to allies that start combat adjacent to them, guardians don't buff themselves`,
+            role: 'guardian',
+            units: 2,
+            maxUnits: 2
+        },
+        {
+            description: '50% chance on attack to attack one additional target in range',
+            role: 'gunslinger',
+            units: 2,
+            maxUnits: 6
+        },
+        {
+            description: '50% chance on attack to attack two additional targets in range',
+            role: 'gunslinger',
+            units: 4,
+            maxUnits: 6
+        },
+        {
+            description: '50% chance on attack to attack three additional targets in range',
+            role: 'gunslinger',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Your team ignores 15 damage from all sources',
+            role: 'knight',
+            units: 2,
+            maxUnits: 6
+        },
+        {
+            description: 'Your team ignores 30 damage from all sources',
+            role: 'knight',
+            units: 4,
+            maxUnits: 6
+        },
+        {
+            description: 'Your team ignores 55 damage from all sources',
+            role: 'knight',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Every 3 seconds, Rangers have a 25% chance to double their attack speed for 3s',
+            role: 'ranger',
+            units: 2,
+            maxUnits: 4
+        },
+        {
+            description: 'Every 3 seconds Rangers have a 65% chance to double their attack speed for 3s',
+            role: 'ranger',
+            units: 4,
+            maxUnits: 4
+        },
+        {
+            description: 'On transform gain 60% max HP',
+            role: 'shapeshifter',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: 'On transform gain 120% max HP',
+            role: 'shapeshifter',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: 'Your team has +40 Ability Power',
+            role: 'sorcerer',
+            units: 3,
+            maxUnits: 6
+        },
+        {
+            description: 'Your team has +100 Ability Power',
+            role: 'sorcerer',
+            units: 6,
+            maxUnits: 6
+        },
+        {
+            description: 'Throw a bomb at an enemy unit with an item, and disables all items in a 1 hex radius for 8 seconds.',
+            role: 'hextech',
+            units: 2,
+            maxUnits: 4
+        },
+        {
+            description: 'Throw a bomb at an enemy unit with an item, and disables all items in a 2 hex radius for 8 seconds.',
+            role: 'hextech',
+            units: 4,
+            maxUnits: 4
+        }
+    ];
+}

src/components/home/home.component.html

@@ -0,0 +1,63 @@
+<div id="champions">
+    <div id="rolesFilterWrap">
+        <div class="roleFilter" *ngFor="let role of roles">
+            <img title="{{role}}" src="../../assets/images/{{role}}.png" (click)="selectRole(role)" alt="{{role}}" [ngClass]="{'selectedFilter': checkRoleFilter(role)}">
+        </div>
+    </div>
+    <div class="champion" *ngFor="let champion of champions">
+        <div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.name)" (click)="selectChampion(champion)" 
+        [ngClass]="{
+            'selected': champion.isSelected,
+            'sinergy': champion.sinergy && !champion.isSelected,
+            'dark': !champion.isSelected && !champion.sinergy && !noChampSelected
+        }"></div>
+        <div class="rolesWrap">
+            <div *ngFor="let role of champion.roles" class="roles">
+                <img title="{{role}}" src="../../assets/images/{{role}}.png" alt="{{role}}">
+            </div>
+            <div class="clear"></div>
+        </div>
+        <div class="clear"></div>
+    </div>
+</div>
+<div class="clear"></div>
+<div id="filters">
+    <form [formGroup]="formFilters">
+        <label>
+            Team Size: 
+            <input formControlName="teamSize" type="text" disabled/>
+        </label>
+        <button (click)="resetComposition()">Reset</button>
+    </form>
+</div>
+<div class="clear"></div>
+<div id="selectedRoles">
+    <div id="selectedRolesWrap">
+        <div class="roleSelectedRoles" *ngFor="let role of rolesPool">
+            <span>{{rolesCount[role]}}</span>
+            <img title="{{role}}" src="../../assets/images/{{role}}.png" alt="{{role}}" 
+            [ngClass]="{
+                'bonus1': bonusesPool[role] && bonusesPool[role].units === 1 && bonusesPool[role].maxUnits !== 1,
+                'bonus1e':bonusesPool[role] && bonusesPool[role].units === 1 && bonusesPool[role].maxUnits === 1,
+                'bonus2': bonusesPool[role] && bonusesPool[role].units === 2 && bonusesPool[role].maxUnits !== 2,
+                'bonus2e': bonusesPool[role] && bonusesPool[role].units === 2 && bonusesPool[role].maxUnits === 2,
+                'bonus3': bonusesPool[role] && bonusesPool[role].units === 3 && bonusesPool[role].maxUnits !== 3,
+                'bonus3e': bonusesPool[role] && bonusesPool[role].units === 3 && bonusesPool[role].maxUnits === 3,
+                'bonus4': bonusesPool[role] && bonusesPool[role].units === 4 && bonusesPool[role].maxUnits !== 4,
+                'bonus4e': bonusesPool[role] && bonusesPool[role].units === 4 && bonusesPool[role].maxUnits === 4,
+                'bonus6': bonusesPool[role] && bonusesPool[role].units === 6 && bonusesPool[role].maxUnits !== 6,
+                'bonus6e': bonusesPool[role] && bonusesPool[role].units === 6 && bonusesPool[role].maxUnits === 6,
+                'bonus9': bonusesPool[role] && bonusesPool[role].units === 9
+            }">
+        </div>
+        <div class="clear"></div>
+    </div>
+    <div class="clear"></div>
+</div>
+<div class="clear"></div>
+<div id="bonuses">
+    <p *ngFor="let role of rolesPool">
+        <span *ngIf="bonusesPool[role]"> <b>{{bonusesPool[role].role | titlecase}}-{{bonusesPool[role].units}}&nbsp;:</b>&nbsp;{{bonusesPool[role].description}} </span>
+    </p>
+</div>
+<div class="clear"></div>

src/components/home/home.component.scss

@@ -0,0 +1,160 @@
+#filters{
+    width: 100%;
+    float: left;
+    text-align: center;
+
+    label {
+        color: #ffffff;
+        font-size: 1em;
+
+        input{
+            margin: 1%;
+            border: 0;
+            background-color: black;
+            border: none;
+            font-size: 1em;
+            width: 1em;
+            color: white;
+        }
+    }
+    button {
+        -webkit-border-radius: 4;
+        -moz-border-radius: 4;
+        border-radius: 4px;
+        color: #ffffff;
+        background: #929182;
+        padding: 10px 20px 10px 20px;
+        text-decoration: none;
+    }
+}
+
+#champions{
+    margin: 0px 10% 0px 10%;
+    float: left;
+
+    #rolesFilterWrap{
+        margin: 1%  0 1% 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        .roleFilter{
+            float: left;
+            margin: 0.1%;
+
+            img{
+                float: left;
+                width: 30px;
+                height: 30px;
+            }
+
+            .selectedFilter{
+                filter: invert(16%) sepia(29%) saturate(6804%) hue-rotate(349deg) brightness(87%) contrast(124%);
+            }
+        }
+    }
+
+    .champion{
+        margin: 1%;
+        float: left;
+        text-align: center;
+        cursor: pointer;
+         
+
+        .imageWrap{
+            width: 4em;
+            height: 4em;
+            background-size: cover;
+            background-position: center;
+        }
+
+        .rolesWrap{
+            margin: 1%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .roles {
+                float: left;
+
+                img{
+                    float:left;
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+        
+        .selected{
+            -webkit-box-shadow: inset 0 0 0 3px red;
+            -moz-box-shadow: inset 0 0 0 3px red;
+            box-shadow: inset 0 0 0 3px red;
+        }
+
+        .sinergy{
+            -webkit-box-shadow: inset 0 0 0 3px #5c7edec7;
+            -moz-box-shadow: inset 0 0 0 3px #5c7edec7;
+            box-shadow: inset 0 0 0 3px #5c7edec7;
+        }
+
+        .dark {
+            opacity: 0.3;
+        }
+
+    }
+}
+
+#selectedRoles{
+    float: left;
+    width: 100%;
+    text-align: center;
+    
+    #selectedRolesWrap{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .roleSelectedRoles{
+            float: left;
+
+            span{
+                color: #ffffff;
+            }
+
+            img{
+                float: left;
+                width: 50px;
+                height: 50px;
+            }
+
+            .bonus1, .bonus2, .bonus3{
+                filter: invert(71%) sepia(53%) saturate(336%) hue-rotate(10deg) brightness(94%) contrast(89%);
+            }
+
+            .bonus1e, .bonus2e, .bonus3e, .bonus4e, .bonus6e, .bonus9{
+                filter: invert(16%) sepia(29%) saturate(6804%) hue-rotate(349deg) brightness(87%) contrast(124%);
+            }
+
+            .bonus4, .bonus6{
+                filter: invert(69%) sepia(41%) saturate(414%) hue-rotate(173deg) brightness(102%) contrast(101%);
+            }
+        }
+    }
+}
+
+#bonuses{
+    width: 100%;
+    text-align: center;
+
+    p {
+        color: white;
+    }
+}
+
+.clear {
+    clear: both;
+}

src/components/home/home.component.ts

@@ -0,0 +1,205 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Champion } from 'src/models/champion';
+import { Bonus } from 'src/models/bonus';
+import { Constants } from 'src/common/constants';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as _ from 'lodash';
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+
+export class HomeComponent implements OnInit {
+  teamSize = 0;
+  champions: Champion[] = [...Constants.Champions];
+  roles = [...Constants.roles];
+  formFilters;
+  championsPool: Champion[] = [];
+  rolesPool = [];
+  rolesCount = [];
+  bonuses: Bonus [] = [...Constants.bonuses];
+  bonusesPool: Bonus [] = [];
+  noChampSelected = true;
+  selectedRole = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private sanitizer: DomSanitizer
+  ) { }
+
+  ngOnInit() {
+    this.roles.forEach(role => {
+      this.rolesCount[role] = 0;
+    });
+    this.formFilters = this.fb.group({
+      teamSize: [this.teamSize]
+    });
+    this.championSort(Constants.championName);
+  }
+
+  /**
+   * Get champion image
+   * @param name Champion name
+   */
+  getImage(name) {
+    return this.sanitizer.bypassSecurityTrustStyle(`url(${'../../assets/images/' + name + '.png'})`);
+  }
+
+  /**
+   * Select or unselect champion
+   * @param champion model
+   */
+  selectChampion(champion) {
+    const champIndex = this.champions.findIndex((champ => champ.name === champion.name));
+    if (!this.champions[champIndex].isSelected) {
+        this.champions[champIndex].isSelected = true;
+        this.championsPool.push(champion);
+        champion.roles.forEach( role => {
+          this.rolesCount[role]++;
+        });
+        this.formFilters.patchValue({
+          teamSize: ++this.teamSize
+        });
+        this.noChampSelected = false;
+    } else {
+        this.champions[champIndex].isSelected = false;
+        this.championsPool = _.remove(this.championsPool, champ => {
+          return champ.name !== champion.name;
+        });
+        champion.roles.forEach(role => {
+          this.rolesCount[role]--;
+        });
+        this.formFilters.patchValue({
+          teamSize: --this.teamSize
+        });
+        if ( this.teamSize === 0 ) {
+          this.noChampSelected = true;
+        }
+    }
+    this.getBonus();
+    this.updatePool();
+    this.updateSinergies();
+  }
+
+  /**
+   * Sort champion by param
+   * @param param use to sort
+   */
+  championSort(param) {
+    this.champions.sort( (a, b) => {
+      if (a[param] > b[param]) {
+        return 1;
+      }
+      if (a[param] < b[param]) {
+        return -1;
+      }
+      return 0;
+    });
+  }
+
+  /**
+   * Select role pool
+   * @param role name of role
+   */
+  selectRole(role) {
+    this.resetComposition();
+    this.selectedRole = role;
+    let countChampions = 0;
+    this.champions.map( champion => {
+      if (_.indexOf(champion.roles, role) !== -1) {
+        champion.isSelected = true;
+        countChampions++;
+        this.championsPool.push(champion);
+        champion.roles.forEach( rol => {
+          this.rolesCount[rol]++;
+        });
+      }
+      return champion;
+    });
+    this.updatePool();
+    this.updateSinergies();
+    this.teamSize = countChampions;
+    this.formFilters.patchValue({
+      teamSize: this.teamSize
+    });
+    this.getBonus();
+    this.noChampSelected = false;
+  }
+
+  /**
+   * Get champions bonuses
+   */
+  getBonus() {
+    this.bonusesPool = [];
+    this.bonuses.forEach( bonus => {
+      if (bonus.role === 'ninja' ) {
+        if ( this.rolesCount[bonus.role] === bonus.units) {
+          this.bonusesPool[bonus.role] = bonus;
+        }
+      } else if (bonus.units <= this.rolesCount[bonus.role]) {
+        this.bonusesPool[bonus.role] = bonus;
+      }
+
+    });
+  }
+
+  /**
+   * Update role pool
+   */
+  updatePool() {
+    this.rolesPool = [];
+    this.championsPool.forEach( champion => {
+      this.rolesPool = _.union(this.rolesPool, champion.roles);
+    });
+  }
+
+  /**
+   * Update sinergies
+   */
+  updateSinergies() {
+    this.champions.map(champion => {
+        return champion.sinergy = false;
+    });
+    this.rolesPool.forEach( role => {
+      this.champions.map(champion => {
+        if (_.indexOf(champion.roles, role) !== -1 ) {
+          return champion.sinergy = true;
+        }
+      });
+    });
+  }
+
+  /**
+   * Check role filter selected
+   * @param role name
+   */
+  checkRoleFilter(role) {
+    if (this.selectedRole === role) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * Reset composition
+   */
+  resetComposition() {
+    this.rolesCount = [];
+    this.rolesPool = [];
+    this.championsPool = [];
+    this.noChampSelected = true;
+    this.selectedRole = '';
+    this.teamSize = 0;
+    this.champions.map(champion => {
+      champion.sinergy = false;
+      champion.isSelected = false;
+      return champion;
+    });
+    this.ngOnInit();
+  }
+}

src/components/layout/layout.component.html

@@ -0,0 +1,7 @@
+<div id="nav">
+    <img src="../../assets/images/logo.png" alt="TFTPaths">
+</div>
+<app-home></app-home>
+<div id="footer">
+
+</div>

src/components/layout/layout.component.scss

@@ -0,0 +1,11 @@
+#nav {
+    width: 100%;
+    text-align: center;
+}
+
+#footer {
+    width: 100%;
+    text-align: center;
+    color: white;
+    padding: 2% 0 2% 0;
+}

src/components/layout/layout.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body style="background-color: #000000;">
   <app-root></app-root>
 </body>
 </html>

src/models/bonus.ts

@@ -0,0 +1,8 @@
+export class Bonus {
+    constructor(
+        public description: string,
+        public role: string,
+        public units: number,
+        public maxUnits: number
+    ) {}
+}

src/models/champion.ts

@@ -0,0 +1,9 @@
+export class Champion {
+    constructor(
+        public name: string,
+        public roles: string[],
+        public cost: number,
+        public isSelected: boolean,
+        public sinergy: boolean
+    ) {}
+}