<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>

<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>
    </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>
    <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 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" 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>
<br>
<br>
<br>
<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>
<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>