<div class="body-bg"></div>
<div class="player-border">
  <div class="player-preview-content"
       (click)="handleTapText();$event.preventDefault()"
       style="background-image: url('assets/talk/bg2.png');">
    <div class="all-talk-wrap">
      <div class="all-talk-box"  #talkListBox>
        <ul class="talk-list">
          <!--<li *ngFor="let itm of talkListData index as i;" id="tklst_{{i%2===0?'A':'B'}}_{{i}}" >-->
          <!--{{itm.text}}-->
          <!--</li>-->
        </ul>
      </div>
    </div>
    <div class="monster-talk">
      <div class="monster-talk-wrap">
        <div class="A-role">
          <div class="A-avatar" ></div>
          <!--<div class="A-text-wrap" *ngIf="talkText.A" [style.zIndex]="zIdxA">-->
          <!--<img class="talk-bubble" src="assets/talk/bubble_left.png" />-->
          <!--<div class="talktext">-->
          <!--<p>-->
          <!--{{talkText.A}}-->
          <!--</p>-->
          <!--</div>-->
          <!--</div>-->
        </div>
        <div class="talk-bubble-box">
          <div class="p-dialog A-text-wrap" *ngIf="talkText.A" [@dialog]="animationA" [style.zIndex]="zIdxA">
            <img class="talk-bubble" src="assets/talk/bubble_left.png" />
            <div class="talktext">
              <p>
                {{talkText.A}}
              </p>
            </div>
          </div>
          <div class="p-dialog B-text-wrap" *ngIf="talkText.B" [@dialog]="animationB" [style.zIndex]="zIdxB">
            <img class="talk-bubble" src="assets/talk/bubble_right.png" />
            <div class="talktext">
              <p>
                {{talkText.B}}
              </p>
            </div>
          </div>
        </div>
        <div class="B-role">
          <div class="B-avatar" ></div>
          <!--<div class="B-text-wrap" *ngIf="talkText.B" [style.zIndex]="zIdxB">-->
          <!--<img class="talk-bubble" src="assets/talk/bubble_right.png" />-->
          <!--<div class="talktext">-->
          <!--<p>-->
          <!--{{talkText.B}}-->
          <!--</p>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>

  </div>
</div>
