Adding solo page to add game component

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

@@ -47,10 +47,13 @@
 			<button (click)="switchToNextPage()" [disabled]="!calculatePointSum()">Next</button>
 		</div>
 		<div id="which-solo" class="visible-{{this.currentPage === 4}}">
-
+			<p>Select the Solo that has been played:</p>
+			<div class="togglebtn active-{{isSoloActive(solo)}}" *ngFor="let solo of getAllPossibleSolos()" (click)="toggleSolo(solo)">{{solo.toString()}}</div>
+			<button (click)="switchToNextPage()">Next</button>
 		</div>
 		<div id="extra-points" class="visible-{{this.currentPage === 5}}">
-
+			<p>Extra Points</p>
+			<button (click)="switchToNextPage()">Next</button>
 		</div>
 	</div>
 	<div id="scores">

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 announcements from '../../models/doppelkopf/enums/announcement';
+import * as solos from '../../models/doppelkopf/enums/solo';
 import {Team} from '../../models/doppelkopf/enums/team';
 
 @Component({
@@ -13,6 +14,7 @@ export class AddGameComponent implements OnInit {
 	actualPlayers: Player[] = [];
 
 	selectedAnnouncements: announcements.Announcement[] = [];
+	soloPlayed?: solos.Solo;
 
 	currentPage: number = 0;
 
@@ -81,6 +83,11 @@ export class AddGameComponent implements OnInit {
 			this.calculateCurrentScores();
 		}
 
+		if(this.currentPage === 3 && !this.checkIfSolo()) {
+			// If we don't play a solo, we can skip the solo page
+			this.currentPage++;
+		}
+
 		this.currentPage++;
 	}
 
@@ -632,4 +639,16 @@ export class AddGameComponent implements OnInit {
 
 		return numberOfElders === 1;
 	}
+
+	isSoloActive(solo: solos.Solo): boolean {
+		return this.soloPlayed === solo;
+	}
+
+	getAllPossibleSolos(): solos.Solo[] {
+		return solos.getAllSoloValues();
+	}
+
+	toggleSolo(solo: solos.Solo): void {
+		this.soloPlayed = solo;
+	}
 }

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

@@ -1,9 +1,24 @@
 export enum Solo {
-	QUEENS = 0,
-	JACKS = 1,
-	COLOR_CHECKS = 2,
-	COLOR_HEART = 3,
-	COLOR_SPADES = 4,
-	COLOR_CROSS = 5,
-	FLESHLESS = 6
+	QUEENS = 'Queens',
+	JACKS = 'Jacks',
+	COLOR_CHECKS = 'Checks',
+	COLOR_HEART = 'Heart',
+	COLOR_SPADES = 'Spades',
+	COLOR_CROSS = 'Cross',
+	FLESHLESS = 'Fleshless'
+}
+
+/**
+ * Returns all available solo values
+ */
+export function getAllSoloValues(): Solo[] {
+	return [
+		Solo.QUEENS,
+		Solo.JACKS,
+		Solo.COLOR_CHECKS,
+		Solo.COLOR_HEART,
+		Solo.COLOR_SPADES,
+		Solo.COLOR_CROSS,
+		Solo.FLESHLESS
+	];
 }