From 0e6d1b43902b2db0b2112cb85119cb447db659f1 Mon Sep 17 00:00:00 2001 From: Patrick Mueller Date: Sat, 10 Sep 2022 13:38:36 +0200 Subject: [PATCH] WIP: Add Game Component - Create Component - Add logic to switch "pages" in component - add "select player" logic --- src/app/app.module.ts | 4 +- .../add-game/add-game.component.html | 29 +++++++ .../add-game/add-game.component.scss | 33 ++++++++ .../add-game/add-game.component.spec.ts | 23 +++++ .../components/add-game/add-game.component.ts | 83 +++++++++++++++++++ src/app/components/header/header.component.ts | 2 +- .../components/profile/profile.component.ts | 1 + .../models/doppelkopf/enums/announcement.ts | 11 ++- src/app/models/doppelkopf/player.ts | 10 +-- src/styles.scss | 3 + 10 files changed, 188 insertions(+), 11 deletions(-) create mode 100644 src/app/components/add-game/add-game.component.html create mode 100644 src/app/components/add-game/add-game.component.scss create mode 100644 src/app/components/add-game/add-game.component.spec.ts create mode 100644 src/app/components/add-game/add-game.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f37acad..eaa250d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import {StatsComponent} from './pages/stats/stats.component'; import {GamenightComponent} from './pages/gamenight/gamenight.component'; import {HeaderComponent} from './components/header/header.component'; import {ProfileComponent} from './components/profile/profile.component'; +import { AddGameComponent } from './components/add-game/add-game.component'; @NgModule({ declarations: [ @@ -16,7 +17,8 @@ import {ProfileComponent} from './components/profile/profile.component'; StatsComponent, GamenightComponent, HeaderComponent, - ProfileComponent + ProfileComponent, + AddGameComponent ], imports: [ BrowserModule, diff --git a/src/app/components/add-game/add-game.component.html b/src/app/components/add-game/add-game.component.html new file mode 100644 index 0000000..25be637 --- /dev/null +++ b/src/app/components/add-game/add-game.component.html @@ -0,0 +1,29 @@ + +
+
+ +
+
{{player.firstName}}
+

Illegal amount of players!

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
diff --git a/src/app/components/add-game/add-game.component.scss b/src/app/components/add-game/add-game.component.scss new file mode 100644 index 0000000..06447c2 --- /dev/null +++ b/src/app/components/add-game/add-game.component.scss @@ -0,0 +1,33 @@ +@import '../../../styles'; + +#add-game { + padding-top: $header_height; +} + +#which-players div { + padding: 0.3em; +} + +#which-players div:hover { + color: $text; +} + +.active-true { + color: $active; +} + +.active-false { + color: $inactive; +} + +#player-amount-warn { + color: $warn; +} + +.visible-false { + display: none; +} + +.visible-true { + display: inherit; +} diff --git a/src/app/components/add-game/add-game.component.spec.ts b/src/app/components/add-game/add-game.component.spec.ts new file mode 100644 index 0000000..4362d2b --- /dev/null +++ b/src/app/components/add-game/add-game.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddGameComponent } from './add-game.component'; + +describe('AddGameComponent', () => { + let component: AddGameComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddGameComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddGameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/add-game/add-game.component.ts b/src/app/components/add-game/add-game.component.ts new file mode 100644 index 0000000..ffd9c66 --- /dev/null +++ b/src/app/components/add-game/add-game.component.ts @@ -0,0 +1,83 @@ +import {Component, OnInit} from '@angular/core'; +import {Player} from '../../models/doppelkopf/player'; + +@Component({ + selector: 'app-add-game', + templateUrl: './add-game.component.html', + styleUrls: ['./add-game.component.scss'] +}) +export class AddGameComponent implements OnInit { + potentialPlayers: Player[] = []; + actualPlayers: Player[] = []; + + currentPage: number = 0; + + constructor() { + this.potentialPlayers.push({ + firebonkId: 1, + uuid: 'abc-def-ghi-j', + firstName: 'Patrick' + }); + this.potentialPlayers.push({ + firebonkId: 2, + uuid: 'abc-def-ghi-k', + firstName: 'Julian' + }); + this.potentialPlayers.push({ + firebonkId: 3, + uuid: 'abc-def-ghi-l', + firstName: 'Yannick' + }); + this.potentialPlayers.push({ + firebonkId: 4, + uuid: 'abc-def-ghi-m', + firstName: 'Janina' + }); + this.potentialPlayers.push({ + firebonkId: 5, + uuid: 'abc-def-ghi-n', + firstName: 'Moritz' + }); + + this.actualPlayers.push(...this.potentialPlayers.slice(0,4)); + } + + ngOnInit(): void { + } + + /** + * Toggles if the given player is should be an active player for the current game + * @param player The player to toggle the activity for + */ + togglePlayer(player: Player): void { + let index = this.actualPlayers.indexOf(player); + if(index !== -1){ + this.actualPlayers.splice(index, 1); + } else { + this.actualPlayers.push(player); + } + } + + /** + * Checks, if the given player is currently marked as active for this game + * @param player The player to check the activity status for + * @returns boolean If the player is active + */ + isPlayerActive(player: Player): boolean { + return this.actualPlayers.indexOf(player) !== -1; + } + + /** + * Returns, if the amount of currently active players is greater or less than 4 + */ + not4Players() { + return this.actualPlayers.length !== 4; + } + + /** + * Switches the entry mask UI to the next page + */ + switchToNextPage(): void { + this.currentPage++; + } +} diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index a744ed4..25fa5e9 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -33,7 +33,7 @@ export class HeaderComponent implements OnInit { return this.user ? this.user.firstName : 'Logged out'; } - navigate(path: String): void { + navigate(path: string): void { this.router.navigate([path]); } diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index fcfadb9..1f7cb98 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -35,4 +35,5 @@ export class ProfileComponent implements OnInit { } } + // TODO: Close modal also when "escape" is clicked } diff --git a/src/app/models/doppelkopf/enums/announcement.ts b/src/app/models/doppelkopf/enums/announcement.ts index 0ee3fe8..8e6b3e2 100644 --- a/src/app/models/doppelkopf/enums/announcement.ts +++ b/src/app/models/doppelkopf/enums/announcement.ts @@ -1,7 +1,10 @@ export enum Announcement { RE = 0, - KONTRA = 1, - NO_NINETY = 2, - NO_SIXTY = 3, - NO_THIRTY = 4 + CONTRA = 1, + RE_NO_NINETY = 2.1, + CONTRA_NO_NINETY = 2.2, + RE_NO_SIXTY = 3.1, + CONTRA_NO_SIXTY = 3.2, + RE_NO_THIRTY = 4.1, + CONTRA_NO_THIRTY = 4.2 } diff --git a/src/app/models/doppelkopf/player.ts b/src/app/models/doppelkopf/player.ts index e2ab9aa..b53cbb5 100644 --- a/src/app/models/doppelkopf/player.ts +++ b/src/app/models/doppelkopf/player.ts @@ -4,9 +4,9 @@ export interface Player { firebonkId: number; uuid: string; firstName: string; - finalCardScore: number; - gamePoints: number; - hadMarriage: boolean; - hadTrumpHandoff: boolean; - team: Team; + finalCardScore?: number; + gamePoints?: number; + hadMarriage?: boolean; + hadTrumpHandoff?: boolean; + team?: Team; } diff --git a/src/styles.scss b/src/styles.scss index 3973b7e..f004367 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,6 +3,9 @@ $primary: #050533; $secondary: #0D698B; $text: #F2F1E8; $accent: #E34234; +$active: green; +$inactive: red; +$warn: orange; /* Global vars */ $header_height: 3em;