diff --git a/src/app/app.component.html b/src/app/app.component.html index 4c17ef8..2d3ac0c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,5 +12,5 @@ - + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2d051c8..f704bc5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,21 +9,25 @@ import { EffectsModule } from '@ngrx/effects'; 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 { MatRadioModule } from '@angular/material/radio'; import { MatToolbarModule } from '@angular/material/toolbar'; import { AppComponent } from './app.component'; import { GameStoreModule } from './store'; import { DirectivesModule } from './directives/directives.module'; +import { PipesModule } from './pipes/pipes.module'; import { GameCardComponent } from './game-card/game-card.component'; import { MatchResultsComponent } from './match-results/match-results.component'; import { ScoreCardComponent } from './score-card/score-card.component'; +import { MatchHistoryComponent } from './match-history/match-history.component'; const materialModules = [ MatButtonModule, MatCardModule, MatIconModule, + MatListModule, MatRadioModule, MatToolbarModule ]; @@ -33,7 +37,8 @@ const materialModules = [ AppComponent, GameCardComponent, MatchResultsComponent, - ScoreCardComponent + ScoreCardComponent, + MatchHistoryComponent ], imports: [ BrowserModule, @@ -44,6 +49,7 @@ const materialModules = [ StoreModule.forRoot({}, {}), EffectsModule.forRoot([]), DirectivesModule, + PipesModule, GameStoreModule ], providers: [], diff --git a/src/app/match-history/match-history.component.css b/src/app/match-history/match-history.component.css new file mode 100644 index 0000000..f659d9d --- /dev/null +++ b/src/app/match-history/match-history.component.css @@ -0,0 +1,40 @@ +:host { + display: block; + margin-top: 1rem; +} + +.match-history-card { + width: var(--card-width); +} + +.match-list-item { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; +} + +.match-visual { + display: flex; + flex-direction: row; + align-items: center; +} + +.match-visual > * { + margin-right: 1rem; +} + +.match-visual img { + width: 25px; + height: auto; +} + +.result { + font-size: 1.2rem; + font-weight: 500; +} + +.match-visual .vs { + font-size: 1.2rem; + font-weight: 500; +} \ No newline at end of file diff --git a/src/app/match-history/match-history.component.html b/src/app/match-history/match-history.component.html new file mode 100644 index 0000000..3bca939 --- /dev/null +++ b/src/app/match-history/match-history.component.html @@ -0,0 +1,17 @@ + + Match History + + + +
+
+ + vs + +
+ {{ item.result }} +
+ + + + \ No newline at end of file diff --git a/src/app/match-history/match-history.component.ts b/src/app/match-history/match-history.component.ts new file mode 100644 index 0000000..502f370 --- /dev/null +++ b/src/app/match-history/match-history.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +import { GameFacade } from '../store/game'; + +@Component({ + selector: 'app-match-history', + templateUrl: './match-history.component.html', + styleUrls: ['./match-history.component.css'] +}) +export class MatchHistoryComponent { + matchHistory$ = this.gameFacade.matchHistory$; + + constructor( + private readonly gameFacade: GameFacade + ) { } + +} diff --git a/src/app/match-results/match-results.component.html b/src/app/match-results/match-results.component.html index 94656cc..a8be326 100644 --- a/src/app/match-results/match-results.component.html +++ b/src/app/match-results/match-results.component.html @@ -1,6 +1,5 @@ Match Results -
You {{ results.result }}!
diff --git a/src/app/pipes/pipes.module.ts b/src/app/pipes/pipes.module.ts new file mode 100644 index 0000000..13ca4dd --- /dev/null +++ b/src/app/pipes/pipes.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; + +import { ReverseArrayPipe } from './reverse-array.pipe'; + +const exportedPipes = [ + ReverseArrayPipe +]; + +@NgModule({ + declarations: [ + ...exportedPipes, + ], + providers: [ + ...exportedPipes + ], + exports: [ + ...exportedPipes + ] +}) +export class PipesModule { } \ No newline at end of file diff --git a/src/app/pipes/reverse-array.pipe.ts b/src/app/pipes/reverse-array.pipe.ts new file mode 100644 index 0000000..6293fe6 --- /dev/null +++ b/src/app/pipes/reverse-array.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'reverseArray' +}) +export class ReverseArrayPipe implements PipeTransform { + + transform(input: any[]): any[] { + return Array.isArray(input) ? input.slice().reverse() : input + } + +} diff --git a/src/app/store/game/game.reducer.ts b/src/app/store/game/game.reducer.ts index 1a1a8b2..c93a7d5 100644 --- a/src/app/store/game/game.reducer.ts +++ b/src/app/store/game/game.reducer.ts @@ -46,7 +46,7 @@ export const reducer = createReducer( ); export const getHasMatchHistory = (state: State) => state.gameHistory.length > 0; -export const getMatchHistory = (state: State) => state.gameHistory; +export const getMatchHistory = (state: State) => state.gameHistory.filter(h => h.result !== 'error'); export const getGameStatus = (state: State) => state.gameStatus; export const getRecentMatchHistory = (state: State) => state.gameHistory.slice(-1).pop(); export const getPlayerScore = (state: State) => state.gameHistory.reduce((acc, match) => acc += Number(match.result === 'win'), 0);