Pool module refactor

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

@@ -0,0 +1,69 @@
+<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,
+            '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/{{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>
+        <span id="oneSinergy">1 sinergy</span>
+        <span id="twoSinergies">2 sinergies</span>
+    </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}}&nbsp;:</b>&nbsp;{{bonusesPool[role].description}} </span>
+    </p>
+</div>
+<div class="clear"></div>

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

@@ -0,0 +1,196 @@
+#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;
+    }
+
+    #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{
+    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;
+
+            .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;
+        }
+
+    }
+}
+
+#selectedRoles{
+    float: left;
+    width: 100%;
+    text-align: center;
+    
+    #selectedRolesWrap{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 1%;
+
+        .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;
+}

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

@@ -0,0 +1,111 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+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';
+
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+
+export class HomeComponent implements OnInit, OnDestroy {
+  formFilters: FormGroup;
+  bonusesPool: Bonus[] = [];
+  champions: Champion[] = [];
+  noChampSelected = true;
+  roles: string[] = [];
+  rolesCount: number[] = [];
+  rolesPool: string[] = [];
+  teamSize = 0;
+  subscription: Subscription;
+
+
+  constructor(
+    private fb: FormBuilder,
+    private sanitizer: DomSanitizer,
+    private poolService: PoolService
+  ) {
+    this.subscription = this.poolService.setChampions().subscribe( (data: DataToShare) => {
+      if (data) {
+        const  {champions, roles, rolesPool, bonusesPool, noChampSelected, teamSize } = data;
+        this.champions = champions;
+        this.roles = roles;
+        this.rolesPool = rolesPool;
+        this.bonusesPool = bonusesPool;
+        this.noChampSelected = noChampSelected;
+        this.teamSize = teamSize;
+      }
+    })
+  }
+
+  ngOnInit(): void {
+    this.formFilters = this.fb.group({
+      teamSize: [this.teamSize]
+    });
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  /**
+   * 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) {
+    this.poolService.selectChampion(champion);
+    this.formFilters.patchValue({
+      teamSize: this.teamSize
+    });
+  }
+
+  /**
+   * Select role pool
+   * @param role name of role
+   */
+  selectRole(role) {
+    this.poolService.selectRole(role);
+    this.formFilters.patchValue({
+      teamSize: this.teamSize
+    });
+  }
+
+  /**
+   * Check role filter selected
+   * @param role name
+   */
+  checkRoleFilter(role) {
+    return this.poolService.checkRoleFilter(role);
+  }
+
+  /**
+   * Reset composition
+   */
+  resetComposition() {
+    this.poolService.resetComposition();
+    this.formFilters.patchValue({
+      teamSize: this.teamSize
+    });
+  }
+}

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

@@ -0,0 +1,7 @@
+<div id="nav">
+    <img src="../../assets/images/logo.png" alt="TFTPaths">
+</div>
+<app-home></app-home>
+<div id="footer">
+
+</div>

src/modules/pool/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;
+}

src/modules/pool/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() {
+  }
+
+}

src/modules/pool/pool-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LayoutComponent } from 'src/modules/pool/components/layout/layout.component';
+
+
+const routes: Routes = [
+  { path: '', component: LayoutComponent, pathMatch: 'full' },
+  { path: '**', component: LayoutComponent, pathMatch: 'full' }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PoolRoutingModule { }

src/modules/pool/pool.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+
+import { PoolRoutingModule } from './pool-routing.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { PoolService } from 'src/modules/pool/services/pool.service';
+import { LayoutComponent } from './components/layout/layout.component';
+import { HomeComponent } from './components/home/home.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    LayoutComponent,
+    HomeComponent
+  ],
+  imports: [
+    CommonModule,
+    PoolRoutingModule,
+    ReactiveFormsModule
+  ],
+  providers: [PoolService]
+})
+export class PoolModule { }

src/modules/pool/services/pool.service.ts

@@ -0,0 +1,218 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { Constants } from 'src/shared/constants';
+import { Bonus } from 'src/models/bonus';
+import { Champion } from 'src/models/champion';
+import { DataToShare } from 'src/models/dataToShare';
+
+import * as _ from 'lodash';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PoolService {
+  bonuses: Bonus[] = [...Constants.bonuses];
+  bonusesPool: Bonus[] = [];
+  champions: Champion[] = [...Constants.Champions];
+  championsPool: Champion[] = [];
+  noChampSelected = true;
+  roles: string[]= [...Constants.roles];
+  rolesCount: number[]= [];
+  rolesPool: string[] = [];
+  selectedRole = '';
+  teamSize = 0;
+  dataToShare = new BehaviorSubject<DataToShare>(null);
+
+  constructor() { }
+
+  /**
+   * Set Champion pool and return data
+   * @returns Observable
+   */
+  setChampions(): Observable<DataToShare> {
+    this.roles.forEach(role => {
+      this.rolesCount[role] = 0;
+    });
+    this.championSort(Constants.championName);
+    this.updateDataToShare();
+    return this.dataToShare.asObservable();
+  }
+
+  updateDataToShare(): void {
+    this.dataToShare.next({
+      champions: this.champions,
+      roles: this.roles,
+      rolesCount: this.rolesCount,
+      rolesPool: this.rolesPool,
+      bonusesPool: this.bonusesPool,
+      noChampSelected: this.noChampSelected,
+      teamSize: this.teamSize
+    });
+  }
+
+  /**
+   * 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.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.teamSize--;
+      if (this.teamSize === 0) {
+        this.noChampSelected = true;
+      }
+    }
+    this.getBonus();
+    this.updatePool();
+    this.updateSinergies();
+    this.updateDataToShare();
+  }
+
+
+  /**
+   * 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): void {
+    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.getBonus();
+      this.noChampSelected = false;
+    } else {
+      this.resetComposition();
+    }
+    this.updateDataToShare();
+  }
+
+  /**
+   * 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 => {
+      champion.sinergy2 = false;
+      return champion.sinergy = false;
+    });
+    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;
+        case 2:
+          return champion.sinergy2 = 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.sinergy2 = false;
+      champion.isSelected = false;
+      return champion;
+    });
+    this.setChampions();
+    this.updateDataToShare();
+  }
+
+}