Merge remote-tracking branch 'origin/master' into master

src/app/app.module.ts

@@ -10,6 +10,7 @@ import {HeaderComponent} from './components/header/header.component';
 import {ProfileComponent} from './components/profile/profile.component';
 import {AddGameComponent} from './components/add-game/add-game.component';
 import {MatchHistoryComponent} from './pages/match-history/match-history.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
 	declarations: [
@@ -24,7 +25,8 @@ import {MatchHistoryComponent} from './pages/match-history/match-history.compone
 	],
 	imports: [
 		BrowserModule,
-		AppRoutingModule
+		AppRoutingModule,
+		FormsModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

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

@@ -3,18 +3,48 @@
 	<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>Select the active players for the game:</p>
+			<div class="togglebtn 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>Players: {{getPlayerNamesAsString()}}</p>
+			<p>Select the announcements for this game:</p>
+			<div class="togglebtn 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="togglebtn 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}}">
+		<div id="player-card-scores" class="visible-{{this.currentPage === 3}}">
-
+			<p>Please enter the points that every player has collected:</p>
+			<table class="point-entry">
+				<tr>
+					<td><p>{{this.actualPlayers[0].firstName}}</p></td>
+					<td><input type="number" [(ngModel)]="this.actualPlayers[0].finalCardScore"/></td>
+				</tr>
+				<tr>
+					<td><p>{{this.actualPlayers[1].firstName}}</p></td>
+					<td><input type="number" [(ngModel)]="this.actualPlayers[1].finalCardScore"/></td>
+				</tr>
+				<tr>
+					<td><p>{{this.actualPlayers[2].firstName}}</p></td>
+					<td><input type="number" [(ngModel)]="this.actualPlayers[2].finalCardScore"/></td>
+				</tr>
+				<tr>
+					<td><p>{{this.actualPlayers[3].firstName}}</p></td>
+					<td><input type="number" [(ngModel)]="this.actualPlayers[3].finalCardScore"/></td>
+				</tr>
+			</table>
+			<p id="score-warn" *ngIf="!totalScoreValid()">Total score doesn't add up!</p>
+			<button (click)="switchToNextPage()" [disabled]="!totalScoreValid()">Next</button>
 		</div>
 		<div id="which-solo" class="visible-{{this.currentPage === 4}}">
 
@@ -24,6 +54,8 @@
 		</div>
 	</div>
 	<div id="scores">
-
+		<p class="team-{{player.team}}" *ngFor="let player of actualPlayers">
+			{{player.firstName}}: {{calculateCurrentScore(player)}}
+		</p>
 	</div>
 </div>

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

@@ -2,6 +2,16 @@
 
 #add-game {
 	padding-top: $header_height;
+	display: grid;
+	grid-template-areas: 'entry entry scores';
+}
+
+#game-infos {
+	grid-area: entry;
+}
+
+#scores {
+	grid-area: scores;
 }
 
 #which-players div {
@@ -12,15 +22,15 @@
 	color: $text;
 }
 
-.active-true {
+.active-true, .elder-player-true {
 	color: $active;
 }
 
-.active-false {
+.active-false, .elder-player-false {
 	color: $inactive;
 }
 
-#player-amount-warn {
+#player-amount-warn, #announcement-warn, #team-warn, #score-warn {
 	color: $warn;
 }
 
@@ -31,3 +41,22 @@
 .visible-true {
 	display: inherit;
 }
+
+.togglebtn {
+	text-align: center;
+	max-width: 10em;
+	background-color: $button;
+	margin: .5em;
+}
+
+.team-Re {
+	background-color: $secondary;
+}
+
+.team-Contra {
+	background-color: $primary;
+}
+
+table.point-entry td {
+	padding: .5em;
+}

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

@@ -1,5 +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',
@@ -10,41 +12,71 @@ export class AddGameComponent implements OnInit {
 	potentialPlayers: Player[] = [];
 	actualPlayers: Player[] = [];
 
+	selectedAnnouncements: Announcement.Announcement[] = [];
+
 	currentPage: number = 0;
 
 	constructor() {
+		this.generateDemoData();
+	}
+
+	ngOnInit(): void {
+	}
+
+	/**
+	 * Generates demo data to test the UI
+	 */
+	generateDemoData() {
 		this.potentialPlayers.push({
 			firebonkId: 1,
 			uuid: 'abc-def-ghi-j',
-			firstName: 'Patrick'
+			firstName: 'Patrick',
+			team: Team.CONTRA
 		});
 		this.potentialPlayers.push({
 			firebonkId: 2,
 			uuid: 'abc-def-ghi-k',
-			firstName: 'Julian'
+			firstName: 'Julian',
+			team: Team.CONTRA
 		});
 		this.potentialPlayers.push({
 			firebonkId: 3,
 			uuid: 'abc-def-ghi-l',
-			firstName: 'Yannick'
+			firstName: 'Yannick',
+			team: Team.CONTRA
 		});
 		this.potentialPlayers.push({
 			firebonkId: 4,
 			uuid: 'abc-def-ghi-m',
-			firstName: 'Janina'
+			firstName: 'Janina',
+			team: Team.CONTRA
 		});
 		this.potentialPlayers.push({
 			firebonkId: 5,
 			uuid: 'abc-def-ghi-n',
-			firstName: 'Moritz'
+			firstName: 'Moritz',
+			team: Team.CONTRA
 		});
 
 		this.actualPlayers.push(...this.potentialPlayers.slice(0, 4));
 	}
 
-	ngOnInit(): void {
+	/**
+	 * Switches the entry mask UI to the next page
+	 */
+	switchToNextPage(): void {
+		this.currentPage++;
 	}
 
+	/**
+	 *     ____  __
+	 *    / __ \/ /___ ___  _____  __________
+	 *   / /_/ / / __ `/ / / / _ \/ ___/ ___/
+	 *  / ____/ / /_/ / /_/ /  __/ /  (__  )
+	 * /_/   /_/\__,_/\__, /\___/_/  /____/
+	 *               /____/
+	 */
+
 	/**
 	 * Toggles if the given player is should be an active player for the current game
 	 * @param player The player to toggle the activity for
@@ -75,9 +107,179 @@ export class AddGameComponent implements OnInit {
 	}
 
 	/**
-	 * Switches the entry mask UI to the next page
+	 * Returns the names of the active players as a comma-separated string
 	 */
-	switchToNextPage(): void {
+	getPlayerNamesAsString(): string {
-		this.currentPage++;
+		let playerNames = '';
+		for (let player of this.actualPlayers) {
+			playerNames += player.firstName + ', ';
+		}
+		// Remove last ", "
+		return playerNames.substring(0, playerNames.length - 2);
+	}
+
+	/**
+	 *      ___                                                                 __
+	 *    /   |  ____  ____  ____  __  ______  ________  ____ ___  ___  ____  / /______
+	 *   / /| | / __ \/ __ \/ __ \/ / / / __ \/ ___/ _ \/ __ `__ \/ _ \/ __ \/ __/ ___/
+	 *  / ___ |/ / / / / / / /_/ / /_/ / / / / /__/  __/ / / / / /  __/ / / / /_(__  )
+	 * /_/  |_/_/ /_/_/ /_/\____/\__,_/_/ /_/\___/\___/_/ /_/ /_/\___/_/ /_/\__/____/
+	 */
+
+	/**
+	 * 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);
+	}
+
+	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);
+	}
+
+	/**
+	 *    _____
+	 *   / ___/_________  ________  _____
+	 *   \__ \/ ___/ __ \/ ___/ _ \/ ___/
+	 *  ___/ / /__/ /_/ / /  /  __(__  )
+	 * /____/\___/\____/_/   \___/____/
+	 */
+
+	/**
+	 * Checks if the sum of all points is exactly 240
+	 */
+	totalScoreValid(): boolean {
+		let totalScore: number = 0;
+		for (let player of this.actualPlayers) {
+			totalScore += player.finalCardScore ?? 0;
+		}
+
+		return totalScore === 240;
+	}
+
+	/**
+	 *    ______                        _____
+	 *   / ____/___ _____ ___  ___     / ___/_________  ________
+	 *  / / __/ __ `/ __ `__ \/ _ \    \__ \/ ___/ __ \/ ___/ _ \
+	 * / /_/ / /_/ / / / / / /  __/   ___/ / /__/ /_/ / /  /  __/
+	 * \____/\__,_/_/ /_/ /_/\___/   /____/\___/\____/_/   \___/
+	 */
+
+	/**
+	 * Calculates the game points for the given player
+	 * @param player The player to calculate points for
+	 */
+	calculateCurrentScore(player: Player): number {
+		let gameScore: number = 0;
+		let teamScore = this.getTeamScore(player);
+
+		// Won? If so, by how much?
+		if (teamScore > 210) {
+			gameScore += 4;
+		} else if (teamScore > 180) {
+			gameScore += 3;
+		} else if (teamScore > 150) {
+			gameScore += 2;
+		} else if (teamScore > 120) {
+			gameScore += 1;
+		} else if (teamScore < 30) {
+			gameScore -= 4;
+		} else if (teamScore < 60) {
+			gameScore -= 3;
+		} else if (teamScore < 90) {
+			gameScore -= 2;
+		} else {
+			gameScore -= 1;
+		}
+
+		// TODO Announcements etc
+
+		return gameScore;
+	}
+
+	/**
+	 * Calculates the team card score of the given players team
+	 * @param player The player to calculate the teams points for
+	 */
+	getTeamScore(player: Player): number {
+		let totalTeamScore: number = player.finalCardScore ?? 0;
+
+		for (let otherPlayer of this.actualPlayers) {
+			if (otherPlayer !== player && otherPlayer.team === player.team) {
+				totalTeamScore += otherPlayer.finalCardScore ?? 0;
+			}
+		}
+
+		return totalTeamScore;
 	}
 }

src/app/components/header/header.component.html

@@ -1,5 +1,5 @@
 <div id="header">
-	<p id="header-title">Doppelkopf-Stats</p>
+	<p id="header-title" (click)="navigate('/')">Doppelkopf-Stats</p>
 	<span id="menu">
 		<div id="menu-desktop">
 			<div (click)="navigate('/')">Home</div>

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

@@ -1,10 +1,111 @@
 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
+}
+
+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,
+	RE = 'Re',
-	KONTRA = 1
+	CONTRA = 'Contra'
 }

src/styles.scss

@@ -6,13 +6,14 @@ $accent: #E34234;
 $active: green;
 $inactive: red;
 $warn: orange;
+$button: #2b2b2b;
 
 /* Global vars */
 $header_height: 3em;
 
 /* Global defaults */
 html, body {
-	height: 100%;
+	height: 95%;
 	background-color: $primary;
 	color: $text;
 	font-family: sans-serif;