diff --git a/package-lock.json b/package-lock.json
index 1182b06..d4ebe4c 100644
--- a/package-lock.json
+++ b/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==",
- "dev": true
+ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"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
}
}
},
diff --git a/package.json b/package.json
index bfab712..9032662 100644
--- a/package.json
+++ b/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"
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c7342..7fbdf98 100644
--- a/src/app/app-routing.module.ts
+++ b/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)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0f3d9d8..0680b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1 @@
-
-
-
- Welcome to {{ title }}!
-
-

-
-Here are some links to help you start:
-
-
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2c3ba29..758e450 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/assets/images/Aatrox.png b/src/assets/images/Aatrox.png
new file mode 100644
index 0000000..1fa09d7
Binary files /dev/null and b/src/assets/images/Aatrox.png differ
diff --git a/src/assets/images/Ahri.png b/src/assets/images/Ahri.png
new file mode 100644
index 0000000..fd60ff3
Binary files /dev/null and b/src/assets/images/Ahri.png differ
diff --git a/src/assets/images/Akali.png b/src/assets/images/Akali.png
new file mode 100644
index 0000000..82bb993
Binary files /dev/null and b/src/assets/images/Akali.png differ
diff --git a/src/assets/images/Anivia.png b/src/assets/images/Anivia.png
new file mode 100644
index 0000000..f66e8a5
Binary files /dev/null and b/src/assets/images/Anivia.png differ
diff --git a/src/assets/images/Ashe.png b/src/assets/images/Ashe.png
new file mode 100644
index 0000000..536df80
Binary files /dev/null and b/src/assets/images/Ashe.png differ
diff --git a/src/assets/images/AurelionSol.png b/src/assets/images/AurelionSol.png
new file mode 100644
index 0000000..faca233
Binary files /dev/null and b/src/assets/images/AurelionSol.png differ
diff --git a/src/assets/images/Blitzcrank.png b/src/assets/images/Blitzcrank.png
new file mode 100644
index 0000000..e1f8b6c
Binary files /dev/null and b/src/assets/images/Blitzcrank.png differ
diff --git a/src/assets/images/Brand.png b/src/assets/images/Brand.png
new file mode 100644
index 0000000..81639ce
Binary files /dev/null and b/src/assets/images/Brand.png differ
diff --git a/src/assets/images/Braum.png b/src/assets/images/Braum.png
new file mode 100644
index 0000000..f05ce3a
Binary files /dev/null and b/src/assets/images/Braum.png differ
diff --git a/src/assets/images/Camille.png b/src/assets/images/Camille.png
new file mode 100644
index 0000000..b8c6316
Binary files /dev/null and b/src/assets/images/Camille.png differ
diff --git a/src/assets/images/Chogath.png b/src/assets/images/Chogath.png
new file mode 100644
index 0000000..4525089
Binary files /dev/null and b/src/assets/images/Chogath.png differ
diff --git a/src/assets/images/Darius.png b/src/assets/images/Darius.png
new file mode 100644
index 0000000..841ca3b
Binary files /dev/null and b/src/assets/images/Darius.png differ
diff --git a/src/assets/images/Draven.png b/src/assets/images/Draven.png
new file mode 100644
index 0000000..44d7c37
Binary files /dev/null and b/src/assets/images/Draven.png differ
diff --git a/src/assets/images/Elise.png b/src/assets/images/Elise.png
new file mode 100644
index 0000000..79bb0ee
Binary files /dev/null and b/src/assets/images/Elise.png differ
diff --git a/src/assets/images/Evelynn.png b/src/assets/images/Evelynn.png
new file mode 100644
index 0000000..70f7f0a
Binary files /dev/null and b/src/assets/images/Evelynn.png differ
diff --git a/src/assets/images/Fiora.png b/src/assets/images/Fiora.png
new file mode 100644
index 0000000..a35a8f8
Binary files /dev/null and b/src/assets/images/Fiora.png differ
diff --git a/src/assets/images/Gangplank.png b/src/assets/images/Gangplank.png
new file mode 100644
index 0000000..f4bd8a1
Binary files /dev/null and b/src/assets/images/Gangplank.png differ
diff --git a/src/assets/images/Garen.png b/src/assets/images/Garen.png
new file mode 100644
index 0000000..9b270dd
Binary files /dev/null and b/src/assets/images/Garen.png differ
diff --git a/src/assets/images/Gnar.png b/src/assets/images/Gnar.png
new file mode 100644
index 0000000..4ee18c6
Binary files /dev/null and b/src/assets/images/Gnar.png differ
diff --git a/src/assets/images/Graves.png b/src/assets/images/Graves.png
new file mode 100644
index 0000000..af80862
Binary files /dev/null and b/src/assets/images/Graves.png differ
diff --git a/src/assets/images/Jayce.png b/src/assets/images/Jayce.png
new file mode 100644
index 0000000..af6453e
Binary files /dev/null and b/src/assets/images/Jayce.png differ
diff --git a/src/assets/images/Jinx.png b/src/assets/images/Jinx.png
new file mode 100644
index 0000000..cf403c9
Binary files /dev/null and b/src/assets/images/Jinx.png differ
diff --git a/src/assets/images/Karthus.png b/src/assets/images/Karthus.png
new file mode 100644
index 0000000..f742bed
Binary files /dev/null and b/src/assets/images/Karthus.png differ
diff --git a/src/assets/images/Kassadin.png b/src/assets/images/Kassadin.png
new file mode 100644
index 0000000..98724aa
Binary files /dev/null and b/src/assets/images/Kassadin.png differ
diff --git a/src/assets/images/Katarina.png b/src/assets/images/Katarina.png
new file mode 100644
index 0000000..266de46
Binary files /dev/null and b/src/assets/images/Katarina.png differ
diff --git a/src/assets/images/Kayle.png b/src/assets/images/Kayle.png
new file mode 100644
index 0000000..d41cf1d
Binary files /dev/null and b/src/assets/images/Kayle.png differ
diff --git a/src/assets/images/Kennen.png b/src/assets/images/Kennen.png
new file mode 100644
index 0000000..d9ccea6
Binary files /dev/null and b/src/assets/images/Kennen.png differ
diff --git a/src/assets/images/Khazix.png b/src/assets/images/Khazix.png
new file mode 100644
index 0000000..db8786d
Binary files /dev/null and b/src/assets/images/Khazix.png differ
diff --git a/src/assets/images/Kindred.png b/src/assets/images/Kindred.png
new file mode 100644
index 0000000..1b185a6
Binary files /dev/null and b/src/assets/images/Kindred.png differ
diff --git a/src/assets/images/Leona.png b/src/assets/images/Leona.png
new file mode 100644
index 0000000..ba20131
Binary files /dev/null and b/src/assets/images/Leona.png differ
diff --git a/src/assets/images/Lissandra.png b/src/assets/images/Lissandra.png
new file mode 100644
index 0000000..c0a9e0d
Binary files /dev/null and b/src/assets/images/Lissandra.png differ
diff --git a/src/assets/images/Lucian.png b/src/assets/images/Lucian.png
new file mode 100644
index 0000000..24778de
Binary files /dev/null and b/src/assets/images/Lucian.png differ
diff --git a/src/assets/images/Lulu.png b/src/assets/images/Lulu.png
new file mode 100644
index 0000000..30e6d52
Binary files /dev/null and b/src/assets/images/Lulu.png differ
diff --git a/src/assets/images/MissFortune.png b/src/assets/images/MissFortune.png
new file mode 100644
index 0000000..9eea542
Binary files /dev/null and b/src/assets/images/MissFortune.png differ
diff --git a/src/assets/images/Mordekaiser.png b/src/assets/images/Mordekaiser.png
new file mode 100644
index 0000000..487abbf
Binary files /dev/null and b/src/assets/images/Mordekaiser.png differ
diff --git a/src/assets/images/Morgana.png b/src/assets/images/Morgana.png
new file mode 100644
index 0000000..390e1d4
Binary files /dev/null and b/src/assets/images/Morgana.png differ
diff --git a/src/assets/images/Nidalee.png b/src/assets/images/Nidalee.png
new file mode 100644
index 0000000..bcb433c
Binary files /dev/null and b/src/assets/images/Nidalee.png differ
diff --git a/src/assets/images/Poppy.png b/src/assets/images/Poppy.png
new file mode 100644
index 0000000..e516358
Binary files /dev/null and b/src/assets/images/Poppy.png differ
diff --git a/src/assets/images/Pyke.png b/src/assets/images/Pyke.png
new file mode 100644
index 0000000..b9b36bf
Binary files /dev/null and b/src/assets/images/Pyke.png differ
diff --git a/src/assets/images/RekSai.png b/src/assets/images/RekSai.png
new file mode 100644
index 0000000..187aff2
Binary files /dev/null and b/src/assets/images/RekSai.png differ
diff --git a/src/assets/images/Rengar.png b/src/assets/images/Rengar.png
new file mode 100644
index 0000000..fc308fd
Binary files /dev/null and b/src/assets/images/Rengar.png differ
diff --git a/src/assets/images/Sejuani.png b/src/assets/images/Sejuani.png
new file mode 100644
index 0000000..38421dd
Binary files /dev/null and b/src/assets/images/Sejuani.png differ
diff --git a/src/assets/images/Shen.png b/src/assets/images/Shen.png
new file mode 100644
index 0000000..3bceefd
Binary files /dev/null and b/src/assets/images/Shen.png differ
diff --git a/src/assets/images/Shyvana.png b/src/assets/images/Shyvana.png
new file mode 100644
index 0000000..1f8b85c
Binary files /dev/null and b/src/assets/images/Shyvana.png differ
diff --git a/src/assets/images/Swain.png b/src/assets/images/Swain.png
new file mode 100644
index 0000000..9457437
Binary files /dev/null and b/src/assets/images/Swain.png differ
diff --git a/src/assets/images/Tristana.png b/src/assets/images/Tristana.png
new file mode 100644
index 0000000..dc57ad1
Binary files /dev/null and b/src/assets/images/Tristana.png differ
diff --git a/src/assets/images/TwistedFate.png b/src/assets/images/TwistedFate.png
new file mode 100644
index 0000000..b4ad054
Binary files /dev/null and b/src/assets/images/TwistedFate.png differ
diff --git a/src/assets/images/Varus.png b/src/assets/images/Varus.png
new file mode 100644
index 0000000..6e25432
Binary files /dev/null and b/src/assets/images/Varus.png differ
diff --git a/src/assets/images/Vayne.png b/src/assets/images/Vayne.png
new file mode 100644
index 0000000..8b708f8
Binary files /dev/null and b/src/assets/images/Vayne.png differ
diff --git a/src/assets/images/Veigar.png b/src/assets/images/Veigar.png
new file mode 100644
index 0000000..1271a1a
Binary files /dev/null and b/src/assets/images/Veigar.png differ
diff --git a/src/assets/images/Vi.png b/src/assets/images/Vi.png
new file mode 100644
index 0000000..1a7e929
Binary files /dev/null and b/src/assets/images/Vi.png differ
diff --git a/src/assets/images/Volibear.png b/src/assets/images/Volibear.png
new file mode 100644
index 0000000..916be19
Binary files /dev/null and b/src/assets/images/Volibear.png differ
diff --git a/src/assets/images/Warwick.png b/src/assets/images/Warwick.png
new file mode 100644
index 0000000..8046cfe
Binary files /dev/null and b/src/assets/images/Warwick.png differ
diff --git a/src/assets/images/Yasuo.png b/src/assets/images/Yasuo.png
new file mode 100644
index 0000000..8d6fa84
Binary files /dev/null and b/src/assets/images/Yasuo.png differ
diff --git a/src/assets/images/Zed.png b/src/assets/images/Zed.png
new file mode 100644
index 0000000..23ac123
Binary files /dev/null and b/src/assets/images/Zed.png differ
diff --git a/src/assets/images/assassin.png b/src/assets/images/assassin.png
new file mode 100644
index 0000000..5091826
Binary files /dev/null and b/src/assets/images/assassin.png differ
diff --git a/src/assets/images/blademaster.png b/src/assets/images/blademaster.png
new file mode 100644
index 0000000..17d8b08
Binary files /dev/null and b/src/assets/images/blademaster.png differ
diff --git a/src/assets/images/brawler.png b/src/assets/images/brawler.png
new file mode 100644
index 0000000..4af1686
Binary files /dev/null and b/src/assets/images/brawler.png differ
diff --git a/src/assets/images/demon.png b/src/assets/images/demon.png
new file mode 100644
index 0000000..8a793a8
Binary files /dev/null and b/src/assets/images/demon.png differ
diff --git a/src/assets/images/dragon.png b/src/assets/images/dragon.png
new file mode 100644
index 0000000..bff8945
Binary files /dev/null and b/src/assets/images/dragon.png differ
diff --git a/src/assets/images/elementalist.png b/src/assets/images/elementalist.png
new file mode 100644
index 0000000..f20f4e7
Binary files /dev/null and b/src/assets/images/elementalist.png differ
diff --git a/src/assets/images/exile.png b/src/assets/images/exile.png
new file mode 100644
index 0000000..cad0607
Binary files /dev/null and b/src/assets/images/exile.png differ
diff --git a/src/assets/images/glacial.png b/src/assets/images/glacial.png
new file mode 100644
index 0000000..38201e1
Binary files /dev/null and b/src/assets/images/glacial.png differ
diff --git a/src/assets/images/guardian.png b/src/assets/images/guardian.png
new file mode 100644
index 0000000..4c1fca8
Binary files /dev/null and b/src/assets/images/guardian.png differ
diff --git a/src/assets/images/gunslinger.png b/src/assets/images/gunslinger.png
new file mode 100644
index 0000000..580fe73
Binary files /dev/null and b/src/assets/images/gunslinger.png differ
diff --git a/src/assets/images/hextech.png b/src/assets/images/hextech.png
new file mode 100644
index 0000000..2862d57
Binary files /dev/null and b/src/assets/images/hextech.png differ
diff --git a/src/assets/images/imperial.png b/src/assets/images/imperial.png
new file mode 100644
index 0000000..efd5e6f
Binary files /dev/null and b/src/assets/images/imperial.png differ
diff --git a/src/assets/images/knight.png b/src/assets/images/knight.png
new file mode 100644
index 0000000..9e8e005
Binary files /dev/null and b/src/assets/images/knight.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..29c8927
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/ninja.png b/src/assets/images/ninja.png
new file mode 100644
index 0000000..75e17ae
Binary files /dev/null and b/src/assets/images/ninja.png differ
diff --git a/src/assets/images/noble.png b/src/assets/images/noble.png
new file mode 100644
index 0000000..12c310e
Binary files /dev/null and b/src/assets/images/noble.png differ
diff --git a/src/assets/images/phantom.png b/src/assets/images/phantom.png
new file mode 100644
index 0000000..d7cb954
Binary files /dev/null and b/src/assets/images/phantom.png differ
diff --git a/src/assets/images/pirate.png b/src/assets/images/pirate.png
new file mode 100644
index 0000000..30ed3a2
Binary files /dev/null and b/src/assets/images/pirate.png differ
diff --git a/src/assets/images/ranger.png b/src/assets/images/ranger.png
new file mode 100644
index 0000000..0d20c4d
Binary files /dev/null and b/src/assets/images/ranger.png differ
diff --git a/src/assets/images/robot.png b/src/assets/images/robot.png
new file mode 100644
index 0000000..02c076d
Binary files /dev/null and b/src/assets/images/robot.png differ
diff --git a/src/assets/images/shapeshifter.png b/src/assets/images/shapeshifter.png
new file mode 100644
index 0000000..364e964
Binary files /dev/null and b/src/assets/images/shapeshifter.png differ
diff --git a/src/assets/images/sorcerer.png b/src/assets/images/sorcerer.png
new file mode 100644
index 0000000..cbcd8df
Binary files /dev/null and b/src/assets/images/sorcerer.png differ
diff --git a/src/assets/images/void.png b/src/assets/images/void.png
new file mode 100644
index 0000000..6827a13
Binary files /dev/null and b/src/assets/images/void.png differ
diff --git a/src/assets/images/wild.png b/src/assets/images/wild.png
new file mode 100644
index 0000000..d71c934
Binary files /dev/null and b/src/assets/images/wild.png differ
diff --git a/src/assets/images/yordle.png b/src/assets/images/yordle.png
new file mode 100644
index 0000000..159e01c
Binary files /dev/null and b/src/assets/images/yordle.png differ
diff --git a/src/common/constants.ts b/src/common/constants.ts
new file mode 100644
index 0000000..5c95389
--- /dev/null
+++ b/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
+ }
+ ];
+}
diff --git a/src/components/home/home.component.html b/src/components/home/home.component.html
new file mode 100644
index 0000000..eda1dfd
--- /dev/null
+++ b/src/components/home/home.component.html
@@ -0,0 +1,63 @@
+
+
+
+

+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{rolesCount[role]}}
+

+
+
+
+
+
+
+
+
+ {{bonusesPool[role].role | titlecase}}-{{bonusesPool[role].units}} : {{bonusesPool[role].description}}
+
+
+
\ No newline at end of file
diff --git a/src/components/home/home.component.scss b/src/components/home/home.component.scss
new file mode 100644
index 0000000..f2c0312
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/home/home.component.ts b/src/components/home/home.component.ts
new file mode 100644
index 0000000..74a8e99
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/src/components/layout/layout.component.html b/src/components/layout/layout.component.html
new file mode 100644
index 0000000..1bb2cf1
--- /dev/null
+++ b/src/components/layout/layout.component.html
@@ -0,0 +1,7 @@
+
+

+
+
+
\ No newline at end of file
diff --git a/src/components/layout/layout.component.scss b/src/components/layout/layout.component.scss
new file mode 100644
index 0000000..323eef0
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/layout/layout.component.ts b/src/components/layout/layout.component.ts
new file mode 100644
index 0000000..b988907
--- /dev/null
+++ b/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() {
+ }
+
+}
diff --git a/src/favicon.ico b/src/favicon.ico
index 8081c7c..46a5c77 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index 87e920e..2d8162e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/src/models/bonus.ts b/src/models/bonus.ts
new file mode 100644
index 0000000..1b199ee
--- /dev/null
+++ b/src/models/bonus.ts
@@ -0,0 +1,8 @@
+export class Bonus {
+ constructor(
+ public description: string,
+ public role: string,
+ public units: number,
+ public maxUnits: number
+ ) {}
+}
diff --git a/src/models/champion.ts b/src/models/champion.ts
new file mode 100644
index 0000000..321fb13
--- /dev/null
+++ b/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
+ ) {}
+}