fkranjec/TFTPaths
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Angular v20

Browse source
This commit is contained in:
filip.kranjec 2025-08-14 15:01:14 +02:00
parent ff3c70dab6
commit d59395835d
8 changed files with 2412 additions and 2072 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/pool/components/card/card.component.html
View file

@ -1,4 +1,4 @@
<div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)"
<div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)"
[ngClass]="{
'selected': champion.isSelected,
'sinergy': champion.sinergy && !champion.isSelected,
@ -13,4 +13,4 @@
<img title="{{role }}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}">
</div>
<div class="clear"></div>
</div>
</div>

77
src/modules/pool/components/card/card.component.ts
View file

@ -1,42 +1,37 @@
import { Component, EventEmitter, Input, Output} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Champion } from '@models/champion';
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { Champion } from "@models/champion";
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
standalone: false
})
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);
}
}
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.scss"],
standalone: false,
})
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);
}
}

62
src/modules/pool/components/pool/pool.component.html
View file

@ -1,32 +1,37 @@
<div id="champions">
<div id="rolesFilterWrap">
<div class="roleFilter" *ngFor="let role of roles">
<img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" (click)="selectRole(role)" alt="{{role}}" [ngClass]="{'selectedFilter': checkRoleFilter(role)}">
</div>
</div>
<div class="champion" *ngFor="let champion of champions">
<app-card [champion]='champion' [noChampSelected]='noChampSelected' (championClicked)='selectChampion(champion)'></app-card>
<div class="clear"></div>
<div id="rolesFilterWrap">
@for (role of roles; track role) {
<div class="roleFilter">
<img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" (click)="selectRole(role)" alt="{{role}}" [ngClass]="{'selectedFilter': checkRoleFilter(role)}">
</div>
}
</div>
@for (champion of champions; track champion) {
<div class="champion">
<app-card [champion]='champion' [noChampSelected]='noChampSelected' (championClicked)='selectChampion(champion)'></app-card>
<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>
<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/traits/{{role.toLowerCase()}}.png" alt="{{role}}"
<div id="selectedRolesWrap">
@for (role of rolesPool; track role) {
<div class="roleSelectedRoles">
<span>{{rolesCount[role]}}</span>
<img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.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,
@ -42,15 +47,20 @@
'bonus8': bonusesPool[role] && bonusesPool[role].units === 8,
'bonus9': bonusesPool[role] && bonusesPool[role].units === 9
}">
</div>
<div class="clear"></div>
</div>
</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>
@for (role of rolesPool; track role) {
<p>
@if (bonusesPool[role]) {
<span> <b>{{bonusesPool[role].role | titlecase}}-{{bonusesPool[role].units}}&nbsp;:</b>&nbsp;{{bonusesPool[role].description}} </span>
}
</p>
}
</div>
<div class="clear"></div>