I am managing a list of participants:
<div class="heroWrapper">
<div class="image hero" *ngFor="let participant of participants; index as i" [class]="i === selectedParticipant ? 'selected hero' : 'image hero'">
<img [src]="participant.imageUrl" (click)="toggleMoves = !toggleMoves"/>
<span [ngStyle]="{'color': getColor(participant)}" class="HP">{{participant.hitPoints}}</span>
<span class="namePlayer" *ngIf="isHero(participant)">{{getPlayerName(participant)}}</span>
<span class="nameHero">{{participant.name}}</span>
</div>
</div>
Additionally, there are next and previous buttons available:
next() {
if (this.selectedParticipant != this.participants.length - 1) {
++this.selectedParticipant;
} else {
this.selectedParticipant = 0;
}
this.toggleMove();
}
previous() {
if (this.selectedParticipant != 0) {
--this.selectedParticipant;
} else {
this.selectedParticipant = this.participants.length - 1;
}
this.toggleMove();
}
The selectedParticipant corresponds to the index of the element in the array. In case a participant's HP reaches 0, I want them to be disabled so that they are skipped by the next and previous methods. Additionally, when disabled, I would like them to appear grayed out.
I attempted to implement the following logic:
if (this.participants[selectedParticipant].hitPoints = 0) {
++selectedParticipant;
if (this.selectedParticipant != this.participants.length - 1) {
++this.selectedParticipant;
} else {
this.selectedParticipant = 0;
}
}
This logic needs to be duplicated for each team check. However, it seems to be setting the hitPoints of participants to 0 for some reason?