Changes check, selected role and added 2 sinergies

This commit is contained in:
Daniel Rodriguez 2019-08-20 18:06:55 +02:00
parent 7f1539ac11
commit 24629508dd
10 changed files with 193 additions and 87 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -11,7 +11,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Ahri', name: 'Ahri',
@ -21,7 +22,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'AurelionSol', name: 'AurelionSol',
@ -31,7 +33,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Anivia', name: 'Anivia',
@ -41,7 +44,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Ashe', name: 'Ashe',
@ -51,7 +55,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Akali', name: 'Akali',
@ -61,7 +66,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Brand', name: 'Brand',
@ -71,7 +77,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Braum', name: 'Braum',
@ -81,7 +88,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Blitzcrank', name: 'Blitzcrank',
@ -91,7 +99,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Chogath', name: 'Chogath',
@ -101,7 +110,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Draven', name: 'Draven',
@ -111,7 +121,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Darius', name: 'Darius',
@ -121,7 +132,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
} }
, ,
{ {
@ -132,7 +144,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Elise', name: 'Elise',
@ -142,7 +155,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Fiora', name: 'Fiora',
@ -152,7 +166,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Gnar', name: 'Gnar',
@ -163,7 +178,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Garen', name: 'Garen',
@ -173,7 +189,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Gangplank', name: 'Gangplank',
@ -184,7 +201,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Graves', name: 'Graves',
@ -194,7 +212,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Kayle', name: 'Kayle',
@ -204,7 +223,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Karthus', name: 'Karthus',
@ -214,7 +234,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Kennen', name: 'Kennen',
@ -225,7 +246,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Katarina', name: 'Katarina',
@ -235,7 +257,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Kindred', name: 'Kindred',
@ -245,7 +268,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Kassadin', name: 'Kassadin',
@ -255,7 +279,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Khazix', name: 'Khazix',
@ -265,7 +290,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Lissandra', name: 'Lissandra',
@ -275,7 +301,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Lucian', name: 'Lucian',
@ -285,7 +312,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Lulu', name: 'Lulu',
@ -295,7 +323,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Leona', name: 'Leona',
@ -305,7 +334,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'MissFortune', name: 'MissFortune',
@ -315,7 +345,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Mordekaiser', name: 'Mordekaiser',
@ -325,7 +356,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Morgana', name: 'Morgana',
@ -335,7 +367,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Nidalee', name: 'Nidalee',
@ -345,7 +378,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Pyke', name: 'Pyke',
@ -355,7 +389,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Poppy', name: 'Poppy',
@ -365,7 +400,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Rengar', name: 'Rengar',
@ -375,7 +411,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'RekSai', name: 'RekSai',
@ -385,7 +422,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Swain', name: 'Swain',
@ -396,7 +434,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Sejuani', name: 'Sejuani',
@ -406,7 +445,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Shen', name: 'Shen',
@ -416,7 +456,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Shyvana', name: 'Shyvana',
@ -426,7 +467,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'TwistedFate', name: 'TwistedFate',
@ -436,7 +478,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Tristana', name: 'Tristana',
@ -446,7 +489,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Varus', name: 'Varus',
@ -456,7 +500,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Vayne', name: 'Vayne',
@ -466,7 +511,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Veigar', name: 'Veigar',
@ -476,7 +522,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Volibear', name: 'Volibear',
@ -486,7 +533,8 @@ export class Constants {
], ],
cost: 3, cost: 3,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Warwick', name: 'Warwick',
@ -496,7 +544,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Yasuo', name: 'Yasuo',
@ -506,7 +555,8 @@ export class Constants {
], ],
cost: 5, cost: 5,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Zed', name: 'Zed',
@ -516,7 +566,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Camille', name: 'Camille',
@ -526,7 +577,8 @@ export class Constants {
], ],
cost: 1, cost: 1,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Jayce', name: 'Jayce',
@ -536,7 +588,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Jinx', name: 'Jinx',
@ -546,7 +599,8 @@ export class Constants {
], ],
cost: 4, cost: 4,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
}, },
{ {
name: 'Vi', name: 'Vi',
@ -556,7 +610,8 @@ export class Constants {
], ],
cost: 2, cost: 2,
isSelected: false, isSelected: false,
sinergy: false sinergy: false,
sinergy2: false
} }
]; ];
public static championName = 'name'; public static championName = 'name';

View file

@ -9,8 +9,11 @@
[ngClass]="{ [ngClass]="{
'selected': champion.isSelected, 'selected': champion.isSelected,
'sinergy': champion.sinergy && !champion.isSelected, 'sinergy': champion.sinergy && !champion.isSelected,
'dark': !champion.isSelected && !champion.sinergy && !noChampSelected 'sinergy2': champion.sinergy2 && !champion.isSelected,
}"></div> 'dark': !champion.isSelected && !champion.sinergy && !champion.sinergy2 && !noChampSelected
}">
<img class="checkSelectedChampion"*ngIf="champion.isSelected" src="../../assets/images/greencheck.png">
</div>
<div class="rolesWrap"> <div class="rolesWrap">
<div *ngFor="let role of champion.roles" class="roles"> <div *ngFor="let role of champion.roles" class="roles">
<img title="{{role}}" src="../../assets/images/{{role}}.png" alt="{{role}}"> <img title="{{role}}" src="../../assets/images/{{role}}.png" alt="{{role}}">
@ -28,6 +31,8 @@
<input formControlName="teamSize" type="text" disabled/> <input formControlName="teamSize" type="text" disabled/>
</label> </label>
<button (click)="resetComposition()">Reset</button> <button (click)="resetComposition()">Reset</button>
<span id="oneSinergy">1 sinergy</span>
<span id="twoSinergies">2 sinergies</span>
</form> </form>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

View file

@ -17,6 +17,7 @@
color: white; color: white;
} }
} }
button { button {
-webkit-border-radius: 4; -webkit-border-radius: 4;
-moz-border-radius: 4; -moz-border-radius: 4;
@ -26,6 +27,19 @@
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
text-decoration: none; text-decoration: none;
} }
#oneSinergy {
color: #5c7edec7;
margin: 0% 0.5% 0% 1%;
font-weight: bold;
}
#twoSinergies {
color: #b7de5cc7;
margin: 0% 0% 0% 0.5%;
font-weight: bold;
}
} }
#champions{ #champions{
@ -68,6 +82,12 @@
height: 4em; height: 4em;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
.checkSelectedChampion{
float: right;
margin: -15% -15% 0% 0%;
}
} }
.rolesWrap{ .rolesWrap{
@ -100,6 +120,12 @@
box-shadow: inset 0 0 0 3px #5c7edec7; box-shadow: inset 0 0 0 3px #5c7edec7;
} }
.sinergy2{
-webkit-box-shadow: inset 0 0 0 3px #b7de5cc7;
-moz-box-shadow: inset 0 0 0 3px #b7de5cc7;
box-shadow: inset 0 0 0 3px #b7de5cc7;
}
.dark { .dark {
opacity: 0.3; opacity: 0.3;
} }
@ -117,6 +143,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 1%;
.roleSelectedRoles{ .roleSelectedRoles{
float: left; float: left;

View file

@ -106,28 +106,32 @@ export class HomeComponent implements OnInit {
* @param role name of role * @param role name of role
*/ */
selectRole(role) { selectRole(role) {
this.resetComposition(); if (role !== this.selectedRole) {
this.selectedRole = role; this.resetComposition();
let countChampions = 0; this.selectedRole = role;
this.champions.map( champion => { let countChampions = 0;
if (_.indexOf(champion.roles, role) !== -1) { this.champions.map( champion => {
champion.isSelected = true; if (_.indexOf(champion.roles, role) !== -1) {
countChampions++; champion.isSelected = true;
this.championsPool.push(champion); countChampions++;
champion.roles.forEach( rol => { this.championsPool.push(champion);
this.rolesCount[rol]++; champion.roles.forEach( rol => {
}); this.rolesCount[rol]++;
} });
return champion; }
}); return champion;
this.updatePool(); });
this.updateSinergies(); this.updatePool();
this.teamSize = countChampions; this.updateSinergies();
this.formFilters.patchValue({ this.teamSize = countChampions;
teamSize: this.teamSize this.formFilters.patchValue({
}); teamSize: this.teamSize
this.getBonus(); });
this.noChampSelected = false; this.getBonus();
this.noChampSelected = false;
} else {
this.resetComposition();
}
} }
/** /**
@ -162,15 +166,26 @@ export class HomeComponent implements OnInit {
*/ */
updateSinergies() { updateSinergies() {
this.champions.map(champion => { this.champions.map(champion => {
return champion.sinergy = false; champion.sinergy2 = false;
return champion.sinergy = false;
}); });
this.rolesPool.forEach( role => { this.champions.map(champion => {
this.champions.map(champion => { let countRoles = 0;
if (_.indexOf(champion.roles, role) !== -1 ) { this.rolesPool.forEach( role => {
return champion.sinergy = true; if (_.indexOf(champion.roles, role) !== -1 ) {
countRoles++;
}
});
switch (countRoles) {
case 1:
return champion.sinergy = true;
break;
case 2:
return champion.sinergy2 = true;
break;
} }
});
}); });
} }
/** /**
@ -197,6 +212,7 @@ export class HomeComponent implements OnInit {
this.teamSize = 0; this.teamSize = 0;
this.champions.map(champion => { this.champions.map(champion => {
champion.sinergy = false; champion.sinergy = false;
champion.sinergy2 = false;
champion.isSelected = false; champion.isSelected = false;
return champion; return champion;
}); });

View file

@ -4,6 +4,7 @@ export class Champion {
public roles: string[], public roles: string[],
public cost: number, public cost: number,
public isSelected: boolean, public isSelected: boolean,
public sinergy: boolean public sinergy: boolean,
public sinergy2: boolean
) {} ) {}
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -19,5 +19,5 @@
<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head> <link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>
<body style="background-color: #000000;"> <body style="background-color: #000000;">
<app-root></app-root> <app-root></app-root>
<script src="runtime-es2015.5bc68c0dd8cf137fbe82.js" type="module"></script><script src="polyfills-es2015.5cb1e996b2a376ba4548.js" type="module"></script><script src="runtime-es5.ee0aae13fb762b150814.js" nomodule defer></script><script src="polyfills-es5.38c6da221291b284e1c4.js" nomodule defer></script><script src="main-es2015.2c4c9f71a4d226a67bc7.js" type="module"></script><script src="main-es5.3a33160b0961c8f3c55a.js" nomodule defer></script></body> <script src="runtime-es2015.5bc68c0dd8cf137fbe82.js" type="module"></script><script src="polyfills-es2015.5cb1e996b2a376ba4548.js" type="module"></script><script src="runtime-es5.ee0aae13fb762b150814.js" nomodule defer></script><script src="polyfills-es5.38c6da221291b284e1c4.js" nomodule defer></script><script src="main-es2015.199bb722f0f4a2593176.js" type="module"></script><script src="main-es5.b9d89e8afffa5156ba78.js" nomodule defer></script></body>
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long