refactor champion card

src/modules/pool/components/card/card.component.html

@@ -0,0 +1,16 @@
+<div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)" 
+[ngClass]="{
+    'selected': champion.isSelected,
+    'sinergy': champion.sinergy && !champion.isSelected,
+    'sinergy2': champion.sinergy2 && !champion.isSelected,
+    'dark': !champion.isSelected && !champion.sinergy && !champion.sinergy2 && !noChampSelected
+}">
+    <img class="checkSelectedChampion"*ngIf="champion.isSelected" src="../../assets/images/greencheck.png">
+    <span class="cost" title="cost">{{champion.cost}}</span>
+</div>
+<div class="rolesWrap">
+    <div *ngFor="let role of champion.roles" class="roles">
+        <img title="{{role }}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}">
+    </div>
+    <div class="clear"></div>
+</div>

src/modules/pool/components/card/card.component.scss

@@ -0,0 +1,61 @@
+.imageWrap{
+    width: 4em;
+    height: 4em;
+    background-size: cover;
+    background-position: center;
+
+    .checkSelectedChampion{
+        float: right;
+        margin: -15% -15% 0% 0%;
+
+    }
+
+    .cost{
+        color: white;
+        float: left;
+        background: black;
+        padding: 3px;
+        border-radius: 10px;
+        margin: 3px;
+    }
+}
+
+.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;
+}
+
+.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;
+}

src/modules/pool/components/card/card.component.ts

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output} from '@angular/core';
+
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { Champion } from 'src/models/champion';
+
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+
+export class CardComponent{
+
+  @Input() champion: Champion;
+  @Input() noChampSelected: boolean;
+  @Output() championClicked = new EventEmitter<Champion>();
+
+  constructor(
+    private sanitizer: DomSanitizer,
+  ) {}
+
+  /**
+   * Get champion image
+   * @param name Champion name
+   */
+  getImage(name) {
+    return this.sanitizer.bypassSecurityTrustStyle(`url(${'../../assets/images/champions/' + name + '.png'})`);
+  }
+
+  /**
+   * Send output to parent with champion clicked
+   * @param champion Champion
+   */
+  selectChampion(champion) {
+    this.championClicked.emit(champion);
+  }
+
+
+}

src/modules/pool/components/pool/pool.component.html

@@ -5,22 +5,7 @@
         </div>
     </div>
     <div class="champion" *ngFor="let champion of champions">
-        <div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)" 
+        <app-card [champion]='champion' [noChampSelected]='noChampSelected' (championClicked)='selectChampion(champion)'></app-card>
-        [ngClass]="{
-            'selected': champion.isSelected,
-            'sinergy': champion.sinergy && !champion.isSelected,
-            'sinergy2': champion.sinergy2 && !champion.isSelected,
-            'dark': !champion.isSelected && !champion.sinergy && !champion.sinergy2 && !noChampSelected
-        }">
-            <img class="checkSelectedChampion"*ngIf="champion.isSelected" src="../../assets/images/greencheck.png">
-            <span class="cost" title="cost">{{champion.cost}}</span>
-        </div>
-        <div class="rolesWrap">
-            <div *ngFor="let role of champion.roles" class="roles">
-                <img title="{{role }}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}">
-            </div>
-            <div class="clear"></div>
-        </div>
         <div class="clear"></div>
     </div>
 </div>

src/modules/pool/components/pool/pool.component.scss

@@ -75,70 +75,6 @@
         float: left;
         text-align: center;
         cursor: pointer;
-         
-
-        .imageWrap{
-            width: 4em;
-            height: 4em;
-            background-size: cover;
-            background-position: center;
-
-            .checkSelectedChampion{
-                float: right;
-                margin: -15% -15% 0% 0%;
-
-            }
-
-            .cost{
-                color: white;
-                float: left;
-                background: black;
-                padding: 3px;
-                border-radius: 10px;
-                margin: 3px;
-            }
-        }
-
-        .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;
-        }
-
-        .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;
-        }
-
     }
 }
 

src/modules/pool/components/pool/pool.component.ts

@@ -5,7 +5,6 @@ import { Champion } from 'src/models/champion';
 import { Bonus } from 'src/models/bonus';
 import { PoolService } from 'src/modules/pool/services/pool.service';
 
-import { DomSanitizer } from '@angular/platform-browser';
 import * as _ from 'lodash';
 import { Subscription } from 'rxjs';
 import { DataToShare } from 'src/models/dataToShare';
@@ -32,7 +31,6 @@ export class PoolComponent implements OnInit, OnDestroy {
 
   constructor(
     private fb: FormBuilder,
-    private sanitizer: DomSanitizer,
     private poolService: PoolService
   ) {
     this.subscription = this.poolService.setChampions().subscribe( (data: DataToShare) => {
@@ -60,15 +58,6 @@ export class PoolComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Get champion image
-   * @param name Champion name
-   */
-  getImage(name) {
-    return this.sanitizer.bypassSecurityTrustStyle(`url(${'../../assets/images/champions/' + name + '.png'})`);
-  }
-
-
   /**
    * Select or unselect champion
    * @param champion model

src/modules/pool/pool.module.ts

@@ -7,10 +7,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { PoolService } from 'src/modules/pool/services/pool.service';
 
 import { PoolComponent } from './components/pool/pool.component';
+import { CardComponent } from './components/card/card.component';
 
 @NgModule({
   declarations: [
-    PoolComponent
+    PoolComponent,
+    CardComponent
   ],
   imports: [
     CommonModule,