ChurchAngular/src/app/games/massive-darkness2/massive-darkness2.component.html

<div class="row">
    <!-- <div class="col-12 mb-1">
        <nb-accordion>
            <nb-accordion-item>
                <nb-accordion-item-header class="my-0">
                    Global Config
                </nb-accordion-item-header>
                <nb-accordion-item-body>

                </nb-accordion-item-body>
            </nb-accordion-item>
        </nb-accordion>
    </div>
        <div class="col-12">
        <md2-html-editor></md2-html-editor>
    </div>
    -->


    <div class="col-12 col-md-5">
        <nb-card>
            <nb-card-header>
                <img src="{{imgUrl('HeroIcon.png')}}" width="40px">
                <span class="ml-2 g-font-size-17 MD2text" [innerHtml]="round"></span>

                <button nbButton hero status="info" size="small" (click)="showQrCode()"
                    class="float-right">Invite</button>
                <button nbButton hero status="info" size="small" [disabled]="anyHeroRemainAction"
                    (click)="md2Service.runNextPhase()" class="float-right mr-2">Next Phase</button>
                <button nbButton hero status="info" size="small" (click)="broadcastHeros()"
                    class="float-right mr-2">Broadcast</button>
            </nb-card-header>
            <nb-card-body>

                <div class="row" *ngIf="md2Service.heros.length==0&& false">
                    <div class="col-6">

                        <adj-number-input name="heroLevel" [(ngModel)]="md2Service.playerAmount" [maximum]="6"
                            minimum="1" title="Hero Amount">
                        </adj-number-input>

                    </div>

                    <div class="col-6">
                        <adj-number-input name="heroLevel" [(ngModel)]="md2Service.highestPlayerLevel" [maximum]="5"
                            minimum="1" title="Highest Hero Level">
                        </adj-number-input>
                    </div>
                </div>

                <div class="row" *ngIf="md2Service.heros.length>0">
                    <!-- <div class="col-12 g-font-size-17" [innerHtml]="roundPhase"></div> -->
                    <!-- <div class="col-6">
                        <label for='playerAmount' class='label'>Hero Amount ({{md2Service.playerAmount}})</label>
                    </div>
                    <div class="col-6">
                        <label for='playerAmount' class='label'>Highest Hero Level
                            ({{md2Service.highestPlayerLevel}})</label>
                    </div> -->
                    <div class="col-12" *ngFor="let hero of md2Service.heros">
                        <label class='label mr-1'>{{hero.playerInfo.name}} ({{heroClassName(hero)}} -
                            {{hero.name}})</label>
                        <span class="badge badge-primary mr-1">Lv.:{{hero.level}}</span>
                        <span class="badge badge-primary mr-1">HP: {{hero.hp}}/{{hero.hpMaximum}}</span>
                        <span class="badge badge-primary mr-1">Mana: {{hero.mp}}/{{hero.mpMaximum}}</span>
                        <span class="badge badge-success mr-1">Exp: {{hero.exp}}</span>
                        <span class="badge badge-danger mr-1" *ngIf="hero.fireToken">
                            <md2-icon icon="fire" size="sm"></md2-icon> {{hero.fireToken}}
                        </span>
                        <span class="badge badge-info mr-1" *ngIf="hero.frozenToken">
                            <md2-icon icon="frozen" size="sm"></md2-icon>{{hero.frozenToken}}
                        </span>
                        <span class="badge badge-success mr-1" *ngIf="hero.remainActions>0">Actions:
                            {{hero.remainActions}}</span>
                        <span class="badge badge-light mr-1" *ngIf=" !hero.uiActivating">Inactive</span>
                        <span class="badge badge-primary mr-1" *ngIf="hero.uiActivating">Activating</span>
                        <!-- <span class="badge badge-success mr-1">{{hero.playerInfo.signalRClientId}}</span> -->
                        <!-- <button nbButton hero status="primary" size="tiny" class="ml-2"
                            (click)="removeHero(hero)">Remove</button> -->
                    </div>

                </div>
            </nb-card-body>
        </nb-card>
    </div>
    <div class="col-12 col-md-4">
        <md2-treasure-bag></md2-treasure-bag>
    </div>

    <div class="col-12 col-md-3">
        <div class="row">
            <!-- <div class="form-group col-4">

                <button nbButton hero fullWidth status="primary" (click)="enterBossFight()">Enter Boss Fight</button>
            </div>
            <div class="form-group col-4">

                <button nbButton hero fullWidth status="primary" (click)="enterBossFight()">Enter Boss Fight</button>
            </div>
            <div class="form-group col-4">
openGreatTreasureChest
                <button nbButton hero fullWidth status="success" (click)="accessHealFountain()">Access Heal Fountain</button>
            </div> -->
            <ng-container *ngIf="md2Service.currentActivateHero">
                <div class="form-group col-12">
                    <button nbButton hero fullWidth status="info" (click)="md2Service.openTreasureChest()">Open
                        Treasure Chest</button>
                </div>
                <div class="form-group col-12">
                    <button nbButton hero fullWidth status="primary" (click)="md2Service.openGreatTreasureChest()">Open
                        Great
                        Treasure Chest</button>
                </div>
                <div class="form-group col-12">
                    <button nbButton hero fullWidth status="success" (click)="accessHealFountain()">Access Heal
                        Fountain</button>
                </div>
            </ng-container>

            <div class="form-group col-12">

                <button nbButton hero fullWidth status="danger" (click)="enterBossFight()">Enter Boss Fight</button>
            </div>

        </div>

    </div>
    <div class="col-12 col-md-12" *ngIf="md2Service.info.isBossFight">
        <md2-boss-fight></md2-boss-fight>
    </div>
    <div class="col-12 col-md-12">
        <md2-mobs isRoamingMonster="true"></md2-mobs>
    </div>
    <div class="col-12 col-md-12">
        <md2-mobs></md2-mobs>
    </div>

    <div class="col-12 col-md-12">
        <md2-door-events></md2-door-events>
    </div>

</div>