WIP: Add Game Component

- Create Component
- Add logic to switch "pages" in component
- add "select player" logic

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,

src/app/components/add-game/add-game.component.html

@@ -0,0 +1,29 @@
+<app-header></app-header>
+<div id="add-game">
+	<div id="game-infos">
+		<!-- The following divs get displayed one after another, kinda wizard-like -->
+		<div id="which-players" class="visible-{{this.currentPage === 0}}">
+			<div class="active-{{isPlayerActive(player)}}" *ngFor="let player of potentialPlayers" (click)="togglePlayer(player)">{{player.firstName}}</div>
+			<p id="player-amount-warn" *ngIf="not4Players()">Illegal amount of players!</p>
+			<button (click)="switchToNextPage()">Next</button>
+		</div>
+		<div id="announcements" class="visible-{{this.currentPage === 1}}">
+
+		</div>
+		<div id="player-teams" class="visible-{{this.currentPage === 2}}">
+
+		</div>
+		<div id="player-points" class="visible-{{this.currentPage === 3}}">
+
+		</div>
+		<div id="which-solo" class="visible-{{this.currentPage === 4}}">
+
+		</div>
+		<div id="extra-points" class="visible-{{this.currentPage === 5}}">
+
+		</div>
+	</div>
+	<div id="scores">
+
+	</div>
+</div>

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;
+}

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<AddGameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddGameComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddGameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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++;
+	}
+}

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]);
 	}
 

src/app/components/profile/profile.component.ts

@@ -35,4 +35,5 @@ export class ProfileComponent implements OnInit {
 		}
 	}
 
+	// TODO: Close modal also when "escape" is clicked
 }

src/app/models/doppelkopf/enums/announcement.ts

@@ -1,7 +1,10 @@
 export enum Announcement {
 	RE = 0,
-	KONTRA = 1,
+	CONTRA = 1,
-	NO_NINETY = 2,
+	RE_NO_NINETY = 2.1,
-	NO_SIXTY = 3,
+	CONTRA_NO_NINETY = 2.2,
-	NO_THIRTY = 4
+	RE_NO_SIXTY = 3.1,
+	CONTRA_NO_SIXTY = 3.2,
+	RE_NO_THIRTY = 4.1,
+	CONTRA_NO_THIRTY = 4.2
 }

src/app/models/doppelkopf/player.ts

@@ -4,9 +4,9 @@ export interface Player {
 	firebonkId: number;
 	uuid: string;
 	firstName: string;
-	finalCardScore: number;
+	finalCardScore?: number;
-	gamePoints: number;
+	gamePoints?: number;
-	hadMarriage: boolean;
+	hadMarriage?: boolean;
-	hadTrumpHandoff: boolean;
+	hadTrumpHandoff?: boolean;
-	team: Team;
+	team?: Team;
 }

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;