diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6fc1879..3b58ac5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatRadioModule } from '@angular/material/radio'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatToolbarModule } from '@angular/material/toolbar'; @@ -29,6 +30,7 @@ const materialModules = [ MatCardModule, MatIconModule, MatListModule, + MatProgressSpinnerModule, MatRadioModule, MatSnackBarModule, MatToolbarModule diff --git a/src/app/game-card/game-card.component.css b/src/app/game-card/game-card.component.css index da33d18..181c6a1 100644 --- a/src/app/game-card/game-card.component.css +++ b/src/app/game-card/game-card.component.css @@ -6,6 +6,14 @@ width: var(--card-width); } +.spinner-container { + align-items: center; + display: flex; + justify-content: center; + min-height: 190px; + width: 100%; +} + .full-width-field { width: 100%; } diff --git a/src/app/game-card/game-card.component.html b/src/app/game-card/game-card.component.html index 4fe09ee..ddf0905 100644 --- a/src/app/game-card/game-card.component.html +++ b/src/app/game-card/game-card.component.html @@ -1,5 +1,6 @@ - -
+ + @@ -13,4 +14,7 @@ +
+ +
\ No newline at end of file diff --git a/src/app/game-card/game-card.component.ts b/src/app/game-card/game-card.component.ts index a3f8c2c..7c8db85 100644 --- a/src/app/game-card/game-card.component.ts +++ b/src/app/game-card/game-card.component.ts @@ -9,6 +9,7 @@ import { GameFacade } from "../store/game"; styleUrls: ['./game-card.component.css'] }) export class GameCardComponent implements OnInit { + gameStatus$ = this.gameFacade.gameStatus$; form: FormGroup; choices = ['rock', 'paper', 'scissors'];