Add "Announcements" page to "Add game" component

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

@@ -3,12 +3,16 @@
 	<div id="game-infos">
 		<!-- The following divs get displayed one after another, kinda wizard-like -->
 		<div id="which-players" class="visible-{{this.currentPage === 0}}">
+			<p>Select the active players for the game:</p>
 			<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>
+			<button (click)="switchToNextPage()" [disabled]="not4Players()">Next</button>
 		</div>
 		<div id="announcements" class="visible-{{this.currentPage === 1}}">
-
+			<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}}">
 

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

@@ -31,3 +31,7 @@
 .visible-true {
 	display: inherit;
 }
+
+#announcement-warn {
+	color: $warn;
+}

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

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Player} from '../../models/doppelkopf/player';
+import * as Announcement from '../../models/doppelkopf/enums/announcement';
 
 @Component({
 	selector: 'app-add-game',
@@ -10,6 +11,8 @@ export class AddGameComponent implements OnInit {
 	potentialPlayers: Player[] = [];
 	actualPlayers: Player[] = [];
 
+	selectedAnnouncements: Announcement.Announcement[] = [];
+
 	currentPage: number = 0;
 
 	constructor() {
@@ -80,4 +83,39 @@ export class AddGameComponent implements OnInit {
 	switchToNextPage(): void {
 		this.currentPage++;
 	}
+
+	/**
+	 * Toggles the activity status for the given announcement
+	 * @param announcement The announcement to toggle activity for
+	 */
+	toggleAnnouncement(announcement: Announcement.Announcement): void {
+		let index = this.selectedAnnouncements.indexOf(announcement);
+		if(index !== -1){
+			this.selectedAnnouncements.splice(index, 1);
+		} else {
+			this.selectedAnnouncements.push(announcement);
+		}
+	}
+
+	/**
+	 * Checks if the given announcement is already marked as selected
+	 * @param announcement The announcement to check the status for
+	 */
+	isAnnouncementActive(announcement: Announcement.Announcement): boolean {
+		return this.selectedAnnouncements.indexOf(announcement) !== -1;
+	}
+
+	/**
+	 * Returns a list of all possible announcements
+	 */
+	getAllPossibleAnnouncements(): Announcement.Announcement[] {
+		return Announcement.getAllAnnouncementValues();
+	}
+
+	/**
+	 * Checks, if the currently selected announcements are a valid set of announcements
+	 */
+	checkAnnouncementsValid(): boolean {
+		return Announcement.checkValidity(this.selectedAnnouncements);
+	}
 }

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

@@ -1,10 +1,71 @@
 export enum Announcement {
-	RE = 0,
+	RE = 'Re',
-	CONTRA = 1,
+	CONTRA = 'Contra',
-	RE_NO_NINETY = 2.1,
+	RE_NO_NINETY = 'Re: No ninety',
-	CONTRA_NO_NINETY = 2.2,
+	CONTRA_NO_NINETY = 'Contra: No ninety',
-	RE_NO_SIXTY = 3.1,
+	RE_NO_SIXTY = 'Re: No sixty',
-	CONTRA_NO_SIXTY = 3.2,
+	CONTRA_NO_SIXTY = 'Contra: No sixty',
-	RE_NO_THIRTY = 4.1,
+	RE_NO_THIRTY = 'Re: No thirty',
-	CONTRA_NO_THIRTY = 4.2
+	CONTRA_NO_THIRTY = 'Contra: No thirty'
+}
+
+/**
+ * Returns all available announcement values
+ */
+export function getAllAnnouncementValues(): Announcement[] {
+	return [
+		Announcement.RE,
+		Announcement.CONTRA,
+		Announcement.RE_NO_NINETY,
+		Announcement.CONTRA_NO_NINETY,
+		Announcement.RE_NO_SIXTY,
+		Announcement.CONTRA_NO_SIXTY,
+		Announcement.RE_NO_THIRTY,
+		Announcement.CONTRA_NO_THIRTY
+	];
+}
+
+/**
+ * Checks if the selected announcements are a valid set of announcements.
+ * E.g.: If RE_NO_NINETY is newly selected, RE also has to be selected
+ * @param alreadySelected
+ * @param newSelected
+ */
+export function checkValidity(selectedAnnouncements: Announcement[]): boolean {
+	// First check all "RE" Announcements
+	if(selectedAnnouncements.indexOf(Announcement.RE_NO_THIRTY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.RE_NO_SIXTY) === -1) {
+			return false;
+		}
+	}
+	if(selectedAnnouncements.indexOf(Announcement.RE_NO_SIXTY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.RE_NO_NINETY) === -1) {
+			return false;
+		}
+	}
+	if(selectedAnnouncements.indexOf(Announcement.RE_NO_NINETY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.RE) === -1) {
+			return false;
+		}
+	}
+
+	// Now same for "CONTRA"
+	if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_THIRTY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_SIXTY) === -1) {
+			return false;
+		}
+	}
+	if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_SIXTY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_NINETY) === -1) {
+			return false;
+		}
+	}
+	if(selectedAnnouncements.indexOf(Announcement.CONTRA_NO_NINETY) !== -1) {
+		if(selectedAnnouncements.indexOf(Announcement.CONTRA) === -1) {
+			return false;
+		}
+	}
+
+	// all fine, return true
+	return true
 }