PlutoDev/Doppelkopf-Stats-Frontend
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julian Brunner 2022-09-10 22:13:56 +02:00
commit d0df6e3e5c
8 changed files with 421 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -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]

46
src/app/components/add-game/add-game.component.html
View File

@ -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>

35
src/app/components/add-game/add-game.component.scss
View File

@ -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;
}

264
src/app/components/add-game/add-game.component.ts
View File

@ -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,48 +12,78 @@ export class AddGameComponent implements OnInit {
potentialPlayers: Player[] = [];
actualPlayers: Player[] = [];
selectedAnnouncements: Announcement.Announcement[] = [];
currentPage: number = 0;
constructor() {
this.potentialPlayers.push({
firebonkId: 1,
uuid: 'abc-def-ghi-j',
firstName: 'Patrick'
});
this.potentialPlayers.push({
firebonkId: 2,
uuid: 'abc-def-ghi-k',
firstName: 'Julian'
});
this.potentialPlayers.push({
firebonkId: 3,
uuid: 'abc-def-ghi-l',
firstName: 'Yannick'
});
this.potentialPlayers.push({
firebonkId: 4,
uuid: 'abc-def-ghi-m',
firstName: 'Janina'
});
this.potentialPlayers.push({
firebonkId: 5,
uuid: 'abc-def-ghi-n',
firstName: 'Moritz'
});
this.actualPlayers.push(...this.potentialPlayers.slice(0,4));
this.generateDemoData();
}
ngOnInit(): void {
}
/**
* Generates demo data to test the UI
*/
generateDemoData() {
this.potentialPlayers.push({
firebonkId: 1,
uuid: 'abc-def-ghi-j',
firstName: 'Patrick',
team: Team.CONTRA
});
this.potentialPlayers.push({
firebonkId: 2,
uuid: 'abc-def-ghi-k',
firstName: 'Julian',
team: Team.CONTRA
});
this.potentialPlayers.push({
firebonkId: 3,
uuid: 'abc-def-ghi-l',
firstName: 'Yannick',
team: Team.CONTRA
});
this.potentialPlayers.push({
firebonkId: 4,
uuid: 'abc-def-ghi-m',
firstName: 'Janina',
team: Team.CONTRA
});
this.potentialPlayers.push({
firebonkId: 5,
uuid: 'abc-def-ghi-n',
firstName: 'Moritz',
team: Team.CONTRA
});
this.actualPlayers.push(...this.potentialPlayers.slice(0, 4));
}
/**
* 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
*/
togglePlayer(player: Player): void {
let index = this.actualPlayers.indexOf(player);
if(index !== -1){
if (index !== -1) {
this.actualPlayers.splice(index, 1);
} else {
this.actualPlayers.push(player);
@ -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 {
this.currentPage++;
getPlayerNamesAsString(): string {
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;
}
}

2
src/app/components/header/header.component.html
View File

@ -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>

117
src/app/models/doppelkopf/enums/announcement.ts
View File

@ -1,10 +1,111 @@
export enum Announcement {
RE = 0,
CONTRA = 1,
RE_NO_NINETY = 2.1,
CONTRA_NO_NINETY = 2.2,
RE_NO_SIXTY = 3.1,
CONTRA_NO_SIXTY = 3.2,
RE_NO_THIRTY = 4.1,
CONTRA_NO_THIRTY = 4.2
RE = 'Re',
CONTRA = 'Contra',
RE_NO_NINETY = 'Re: No ninety',
CONTRA_NO_NINETY = 'Contra: No ninety',
RE_NO_SIXTY = 'Re: No sixty',
CONTRA_NO_SIXTY = 'Contra: No sixty',
RE_NO_THIRTY = 'Re: No thirty',
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;
}

4
src/app/models/doppelkopf/enums/team.ts
View File

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

3
src/styles.scss
View File

@ -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;