<mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
  <mat-card-title>Spielstand</mat-card-title>
  <mat-card-content>
    <br>
    <table>
      <tr>
        <th>Team rot</th>
        <th>Team blau</th>
      </tr>
      <tr>
        <th class = "redfont">{{gameStatus.red}}</th>
        <th class = "bluefont">{{gameStatus.blue}}</th>
      </tr>
    </table>
  </mat-card-content>
</mat-card>
 <div data-aos="zoom-out" data-aos-duration="750">
  <mat-card class="transparent">
    <div class="FloatLeftAndCenterElement">
      <div *ngIf="view === 'mobileView'" class="textMobileView">
        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
        </button>
        <mat-icon *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
      </div>
      <br *ngIf="view === 'mobileView'">
      <br *ngIf="view === 'mobileView'">
      <div *ngIf="view !== 'mobileView'" class="newStartButtonLeft">
        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
        </button>
      </div>
      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
      <div class="CenterText">
        <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
        <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
      </div>
    </div>
    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
      <mat-icon matBadge="{{redPlayers}}" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadgeSize="small" matBadgeColor="primary" color = "warn" aria-hidden="false" aria-label="home icon red" >home</mat-icon>
    </button>
    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
      <mat-icon style="color: darkblue" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
    </button>
  </mat-card>
  <br>
  <br>
  <br>
  <mat-card class="transparent">
    <mat-card-title #matCard >Spielstand</mat-card-title>
    <mat-card-content>
      <br>
      <table>
        <tr>
          <th>Team rot</th>
          <th>Team blau</th>
        </tr>
        <tr>
          <th class = "redfont">{{gameStatus.red}}</th>
          <th class = "bluefont">{{gameStatus.blue}}</th>
        </tr>
      </table>
    </mat-card-content>
    <mat-card-actions>
      <br>
      <br>
      <div *ngIf="isActiveRound" class="spinner-wrapper">
        <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
        <mat-spinner diameter="30"></mat-spinner>
      </div>
      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
      <br>
      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
    </mat-card-actions>
  </mat-card>
</div>
<br>
<br>
<br>
<div *ngIf="history.length > 0" data-aos="zoom-out" data-aos-duration="750">
  <mat-card class="transparent" *ngIf="history.length > 0">
    <mat-card-title>Spielverlauf</mat-card-title>
    <mat-card-subtitle>Stimmt das Ergebnis nicht?<br>Dann überprüfe den Spielverlauf und passe die Antworten gegebenenfalls an</mat-card-subtitle>
  </mat-card>
</div>
<a *ngFor="let r of getArrayRounds(); let i = index;">
  <br>
  <app-round-history
    [round]="gameStatus.round - i"
    [canEdit]="!isActiveRound"
    [history]="history"
    [sessionName]="sessionName"
    (gameStatus)="fillGameStatus($event)"
    (canUpdate)="updateChangeHistory($event)">
  </app-round-history>
</a>
<br>
<br>
<br>