Changes check, selected role and added 2 sinergies

app/src/components/home/home.component.html

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

app/src/components/home/home.component.scss

@@ -17,6 +17,7 @@
             color: white;
         }
     }
+
     button {
         -webkit-border-radius: 4;
         -moz-border-radius: 4;
@@ -26,6 +27,19 @@
         padding: 10px 20px 10px 20px;
         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{
@@ -68,6 +82,12 @@
             height: 4em;
             background-size: cover;
             background-position: center;
+
+            .checkSelectedChampion{
+                float: right;
+                margin: -15% -15% 0% 0%;
+
+            }
         }
 
         .rolesWrap{
@@ -100,6 +120,12 @@
             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 {
             opacity: 0.3;
         }
@@ -117,6 +143,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        margin-top: 1%;
 
         .roleSelectedRoles{
             float: left;

app/src/components/home/home.component.ts

@@ -106,28 +106,32 @@ export class HomeComponent implements OnInit {
    * @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;
+    if (role !== this.selectedRole) {
+      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;
+    } else {
+      this.resetComposition();
+    }
   }
 
   /**
@@ -162,15 +166,26 @@ export class HomeComponent implements OnInit {
    */
   updateSinergies() {
     this.champions.map(champion => {
-        return champion.sinergy = false;
+      champion.sinergy2 = false;
+      return champion.sinergy = false;
     });
-    this.rolesPool.forEach( role => {
-      this.champions.map(champion => {
-        if (_.indexOf(champion.roles, role) !== -1 ) {
-          return champion.sinergy = true;
+    this.champions.map(champion => {
+        let countRoles = 0;
+        this.rolesPool.forEach( role => {
+          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.champions.map(champion => {
       champion.sinergy = false;
+      champion.sinergy2 = false;
       champion.isSelected = false;
       return champion;
     });