Added "card scores" page to "add game" component, startet on score calculation

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

@@ -23,8 +23,28 @@
 			<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}}">
 
@@ -34,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 {
@@ -20,7 +30,7 @@
 	color: $inactive;
 }
 
-#player-amount-warn, #announcement-warn, #team-warn {
+#player-amount-warn, #announcement-warn, #team-warn, #score-warn {
 	color: $warn;
 }
 
@@ -38,3 +48,15 @@
 	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

@@ -30,27 +30,32 @@ export class AddGameComponent implements OnInit {
 		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));
@@ -106,11 +111,11 @@ export class AddGameComponent implements OnInit {
 	 */
 	getPlayerNamesAsString(): string {
 		let playerNames = '';
-		for(let player of this.actualPlayers) {
+		for (let player of this.actualPlayers) {
 			playerNames += player.firstName + ', ';
 		}
 		// Remove last ", "
-		return playerNames.substring(0, playerNames.length-2);
+		return playerNames.substring(0, playerNames.length - 2);
 	}
 
 	/**
@@ -173,7 +178,7 @@ export class AddGameComponent implements OnInit {
 	 * @param player The player to toggle the team for
 	 */
 	toggleElderPlayer(player: Player): void {
-		if(player.team === Team.RE) {
+		if (player.team === Team.RE) {
 			player.team = Team.CONTRA;
 		} else {
 			player.team = Team.RE;
@@ -193,12 +198,88 @@ export class AddGameComponent implements OnInit {
 	 */
 	checkValidTeamAssignment(): boolean {
 		let numberOfElderPlayers: number = 0;
-		for(let player of this.actualPlayers) {
-			if(player.team === Team.RE) {
+		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/models/doppelkopf/enums/team.ts

@@ -1,4 +1,4 @@
 export enum Team {
-	RE = 0,
-	CONTRA = 1
+	RE = 'Re',
+	CONTRA = 'Contra'
 }

src/styles.scss

@@ -13,7 +13,7 @@ $header_height: 3em;
 
 /* Global defaults */
 html, body {
-	height: 100%;
+	height: 95%;
 	background-color: $primary;
 	color: $text;
 	font-family: sans-serif;