battle.component.html 3.02 KB
Newer Older
Manish Kumar's avatar
Manish Kumar committed
1
2
3
<div class="main-container">
    <div class="game">
        <div class="opponent">
4
5
6
7
            <div class="stats">
                <div class="row1">
                    <div>
                        <span class="name">
8
                            {{enemyPokemon.pokeName}}
9
10
                        </span>
                        <span class="level">
11
                            {{level}}
12
13
14
15
                        </span>
                    </div>
                </div>
                <div class="health-box">
16
17
                    <div class="health-bar-red" [style.width.%]="enemyAffichageHp"></div>
                    <div class="health-bar" [style.width.%]="enemyAffichageHp"></div>
18
19
20
21
                    <div class="health-bar-text"></div>
                </div>
                <div class="top">
                    <div class="pokeballs">
22
                        <div [ngClass]="poke.stats[0].stat_value>0 ? 'pokeball pokeballAlive' : 'pokeball pokeballKo'" *ngFor="let poke of enemyTeam"></div>
23
24
                    </div>
                </div>
Manish Kumar's avatar
Manish Kumar committed
25
            </div>
26
            <img class="enemy" src="https://projectpokemon.org/images/normal-sprite/{{enemyPokemon.pokeName}}.gif" alt="A sprite of {{enemyPokemon.pokeName}}" *ngIf="displayEndgame!=1"/>
Manish Kumar's avatar
Manish Kumar committed
27
        </div>
28
        <div class="opponent">
29
            <img class="self" src="https://projectpokemon.org/images/sprites-models/normal-back/{{curPoke.pokeName}}.gif" onerror="" alt="A sprite of {{curPoke.pokeName}}" *ngIf="displayEndgame!=2"/>
30
31
32
33
            <div class="stats">
                <div class="row1">
                    <div>
                        <span class="name">
34
                            {{curPoke.pokeName}}
35
36
                        </span>
                        <span class="level">
37
                            {{level}}
38
39
                        </span>
                    </div>
Manish Kumar's avatar
Manish Kumar committed
40
                    <div id="apHP" class="hp-count">{{curHealthSelf}}</div>
41
42
                </div>
                <div class="health-box">
43
44
                    <div class="health-bar-red" [style.width.%]="affichageHp"></div>
                    <div class="health-bar" [style.width.%]="affichageHp"></div>
45
46
47
48
                    <div class="health-bar-text"></div>
                </div>
                <div class="top">
                    <div class="pokeballs">
49
                        <div [ngClass]="poke.stats[0].stat_value>0 ? 'pokeball pokeballAlive' : 'pokeball pokeballKo'" *ngFor="let poke of selfTeam"></div>
50
51
                    </div>
                </div>
Manish Kumar's avatar
Manish Kumar committed
52
53
            </div>
        </div>
54
        <div class="box" *ngIf="!yourTurn">
Sofia Aicha Delijaj's avatar
Sofia Aicha Delijaj committed
55
            <div id="message" class="message">
56
57
58
59
60
                {{boxMessage}}
            </div>
        </div>
        <div class="box" *ngIf="yourTurn">
            <div id="message" class="message"  >
61
                What should {{curPoke.pokeName}} do?
Sofia Aicha Delijaj's avatar
Sofia Aicha Delijaj committed
62
63
            </div>
            <div class="actions">
64
                <button (click)="typeAdv(move)" *ngFor="let move of curPoke.moves">{{move.identifier}}    {{move.pp}}</button>
Sofia Aicha Delijaj's avatar
Sofia Aicha Delijaj committed
65
            </div>
Manish Kumar's avatar
Manish Kumar committed
66
        </div>
Sofia Aicha Delijaj's avatar
Sofia Aicha Delijaj committed
67
    </div>