Hello Everyone,
I’m building a small game that contains a background (table) and four players on it .
I have two buttons (next & previous) when I click next I need to highlight the next player icon (replace the old icon with highlighted one).
the default highlighted icon is for player1.
I’m thinking of a way that can retrieve the next player to highlight it’s icon.
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg-image">
<ion-grid>
<ion-row>
<ion-col>
<div class="player2" (click)="player2btn()">
<br><br>
<img src="assets/imgs/player-2.png" width=100 height=100 id="playert" name="playert">
</div>
</ion-col>
<ion-col>
<div class="playernamebox">
<img src="assets/imgs/player name box.png">
</div>
</ion-col>
<ion-col>
<div class="player3" (click)="player3btn()">
<br><br>
<img src="assets/imgs/player-3.png"width=100 height=100>
</div>
</ion-col>
</ion-row>
<ion-row>
<div *ngIf="hideme" class= "file" width=50 height=50>
<img src="assets/imgs/file.png">
<div class="player-description">{{playernum}}
<img src="assets/imgs/ok btn.png">
</div>
</div>
</ion-row>
<ion-row>
<ion-col>
<div class="player1" (click)="player1btn()">
<br><br>
<img src="assets/imgs/player-1h.png" width=100 height=100>
</div>
</ion-col>
<ion-col>
<div class="player4" (click)="player4btn()">
<br><br>
<img src="assets/imgs/player-4.png"width=100 height=100>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div class="previous">
<br><br>
<img src="assets/imgs/previous button.png"width=60 height=70>
</div>
</ion-col>
<ion-col>
<div class="next">
<br><br>
<img src="assets/imgs/next button.png"width=60 height=70 ng-click="selectnext()">
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController , NavParams} from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
hideme: boolean;
name: string;
playernum:string;
player1flag: boolean;
player2flag: boolean;
player3flag: boolean;
player4flag: boolean;
id: number;
player1btn(){
this.playernum="P1";
this.hideme= !this.hideme;
}
player2btn(){
this.playernum="P2";
this.hideme= !this.hideme;
}
player3btn(){
this.playernum="P3";
this.hideme= !this.hideme;
}
player4btn(){
this.playernum="P4";
this.hideme= !this.hideme;
}
nextbtn(){
this.id=this.id+1;
switch (this.id){
case 1:{
break;
}
}
}
constructor(public navCtrl: NavController,public NavParams:NavParams) {
this.player1flag =true;
}
}