Wrap app
This commit is contained in:
Daniel Rodriguez
parent
2e12f90b7f
commit
a7de236f3f
540 changed files with 65753 additions and 11694 deletions
63
app/src/components/home/home.component.html
Normal file
63
app/src/components/home/home.component.html
Normal file
|
|
@ -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}} :</b> {{bonusesPool[role].description}} </span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
160
app/src/components/home/home.component.scss
Normal file
160
app/src/components/home/home.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
205
app/src/components/home/home.component.ts
Normal file
205
app/src/components/home/home.component.ts
Normal file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
7
app/src/components/layout/layout.component.html
Normal file
7
app/src/components/layout/layout.component.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<div id="nav">
|
||||
<img src="../../assets/images/logo.png" alt="TFTPaths">
|
||||
</div>
|
||||
<app-home></app-home>
|
||||
<div id="footer">
|
||||
|
||||
</div>
|
||||
11
app/src/components/layout/layout.component.scss
Normal file
11
app/src/components/layout/layout.component.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#nav {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 2% 0 2% 0;
|
||||
}
|
||||
15
app/src/components/layout/layout.component.ts
Normal file
15
app/src/components/layout/layout.component.ts
Normal file
|
|
@ -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() {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue