<ng-container *ngIf="!isAppRoute; else appRouteContent">
  <router-outlet></router-outlet>
</ng-container>

<ng-template #appRouteContent>
  <div class="game">
    <div class="interactive-area">
      <app-counters
        [totalMoney]="player.money"
        (emitData)="updatePlayerData($event)"
      >
      </app-counters>

      @for (npc of npcs; track $index; let first = $first) {
        @if (first) {
            <div class="customers">
                <img src="sprites-bubble/character/woman.png" alt="" />
            </div>  
            <div class="balcony">
                <div class="dialog-customer">
                    <h1>
                        {{npc.name}}
                    </h1>
                    <h2>
                        {{npc.dialogs.entry}}
                    </h2>
                </div>
            </div>
        }
      }
    </div>

    <app-machine
      [ingredients]="ingredients"
      (bubbleTeaSubmitted)="submitBubbleTea($event)"
    >
    </app-machine>
  </div>
</ng-template>
