Add "team selection" page to "add game" component

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

@@ -9,13 +9,19 @@
 			<button (click)="switchToNextPage()" [disabled]="not4Players()">Next</button>
 		</div>
 		<div id="announcements" class="visible-{{this.currentPage === 1}}">
+			<p>Players: {{getPlayerNamesAsString()}}</p>
 			<p>Select the announcements for this game:</p>
 			<div class="active-{{isAnnouncementActive(announcement)}}" *ngFor="let announcement of getAllPossibleAnnouncements()" (click)="toggleAnnouncement(announcement)">{{announcement.toString()}}</div>
 			<p id="announcement-warn" *ngIf="!checkAnnouncementsValid()">Illegal set of announcements!</p>
 			<button (click)="switchToNextPage()" [disabled]="!checkAnnouncementsValid()">Next</button>
 		</div>
 		<div id="player-teams" class="visible-{{this.currentPage === 2}}">
-
+			<p>Players: {{getPlayerNamesAsString()}}</p>
+			<p>Highest Announcements: {{getHighestAnnouncements()}}</p>
+			<p>Please select the elder(s):</p>
+			<div class="elder-player-{{isPlayerElder(player)}}" *ngFor="let player of actualPlayers" (click)="toggleElderPlayer(player)">{{player.firstName}}</div>
+			<p id="team-warn" *ngIf="!checkValidTeamAssignment()">Illegal game teams!</p>
+			<button (click)="switchToNextPage()" [disabled]="!checkValidTeamAssignment()">Next</button>
 		</div>
 		<div id="player-points" class="visible-{{this.currentPage === 3}}">
 

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

@@ -20,7 +20,7 @@
 	color: $inactive;
 }
 
-#player-amount-warn {
+#player-amount-warn, #announcement-warn, #team-warn {
 	color: $warn;
 }
 
@@ -32,6 +32,10 @@
 	display: inherit;
 }
 
-#announcement-warn {
-	color: $warn;
+.elder-player-false {
+	color: $inactive;
+}
+
+.elder-player-true {
+	color: $active;
 }

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

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Player} from '../../models/doppelkopf/player';
 import * as Announcement from '../../models/doppelkopf/enums/announcement';
+import {Team} from '../../models/doppelkopf/enums/team';
 
 @Component({
 	selector: 'app-add-game',
@@ -100,6 +101,18 @@ export class AddGameComponent implements OnInit {
 		return this.actualPlayers.length !== 4;
 	}
 
+	/**
+	 * Returns the names of the active players as a comma-separated string
+	 */
+	getPlayerNamesAsString(): string {
+		let playerNames = '';
+		for(let player of this.actualPlayers) {
+			playerNames += player.firstName + ', ';
+		}
+		// Remove last ", "
+		return playerNames.substring(0, playerNames.length-2);
+	}
+
 	/**
 	 *      ___                                                                 __
 	 *    /   |  ____  ____  ____  __  ______  ________  ____ ___  ___  ____  / /______
@@ -142,4 +155,50 @@ export class AddGameComponent implements OnInit {
 	checkAnnouncementsValid(): boolean {
 		return Announcement.checkValidity(this.selectedAnnouncements);
 	}
+
+	getHighestAnnouncements(): string {
+		return Announcement.returnTwoHighestAnnouncements(this.selectedAnnouncements);
+	}
+
+	/**
+	 *   ______
+	 *  /_  __/__  ____ _____ ___  _____
+	 *   / / / _ \/ __ `/ __ `__ \/ ___/
+	 *  / / /  __/ /_/ / / / / / (__  )
+	 * /_/  \___/\__,_/_/ /_/ /_/____/
+	 */
+
+	/**
+	 * Toggles the players team
+	 * @param player The player to toggle the team for
+	 */
+	toggleElderPlayer(player: Player): void {
+		if(player.team === Team.RE) {
+			player.team = Team.CONTRA;
+		} else {
+			player.team = Team.RE;
+		}
+	}
+
+	/**
+	 * Checks if the player is an elder
+	 * @param player The player to check
+	 */
+	isPlayerElder(player: Player): boolean {
+		return player.team === Team.RE;
+	}
+
+	/**
+	 * Checks if the current team assignment is valid
+	 */
+	checkValidTeamAssignment(): boolean {
+		let numberOfElderPlayers: number = 0;
+		for(let player of this.actualPlayers) {
+			if(player.team === Team.RE) {
+				numberOfElderPlayers++;
+			}
+		}
+
+		return !(numberOfElderPlayers !== 1 && numberOfElderPlayers !== 2);
+	}
 }

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

@@ -69,3 +69,43 @@ export function checkValidity(selectedAnnouncements: Announcement[]): boolean {
 	// all fine, return true
 	return true
 }
+
+export function returnTwoHighestAnnouncements(selectedAnnouncements: Announcement[]): string {
+	let finalString: string = '';
+
+	// First check "RE" announcements
+	if(selectedAnnouncements.indexOf(Announcement.RE_NO_THIRTY) !== -1) {
+		finalString += Announcement.RE_NO_THIRTY;
+	} else if (selectedAnnouncements.indexOf(Announcement.RE_NO_SIXTY) !== -1) {
+		finalString += Announcement.RE_NO_SIXTY;
+	} else if (selectedAnnouncements.indexOf(Announcement.RE_NO_NINETY) !== -1) {
+		finalString += Announcement.RE_NO_NINETY;
+	} else if (selectedAnnouncements.indexOf(Announcement.RE) !== -1) {
+		finalString += Announcement.RE;
+	}
+
+	// If there was a "RE" announcement, add a ", " so we can list the CONTRA announcement properly
+	if(finalString !== '') {
+		finalString += ', ';
+	}
+
+	// Now check "CONTRA"
+	if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_THIRTY) !== -1) {
+		finalString += Announcement.CONTRA_NO_THIRTY;
+	} else if (selectedAnnouncements.indexOf(Announcement.CONTRA_NO_SIXTY) !== -1) {
+		finalString += Announcement.CONTRA_NO_SIXTY;
+	} else if (selectedAnnouncements.indexOf(Announcement.CONTRA_NO_NINETY) !== -1) {
+		finalString += Announcement.CONTRA_NO_NINETY;
+	} else if (selectedAnnouncements.indexOf(Announcement.CONTRA) !== -1) {
+		finalString += Announcement.CONTRA;
+	} else {
+		// Remove the last two chars from the finalString (", ")
+		finalString = finalString.substring(0, finalString.length-2);
+	}
+
+	if(finalString === '') {
+		finalString = 'None';
+	}
+
+	return finalString;
+}

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

@@ -1,4 +1,4 @@
 export enum Team {
 	RE = 0,
-	KONTRA = 1
+	CONTRA = 1
 }