Skip to content

Commit

Permalink
V2.0.0b
Browse files Browse the repository at this point in the history
  • Loading branch information
ertkjern committed Mar 14, 2019
1 parent bb056f8 commit 2f67460
Show file tree
Hide file tree
Showing 43 changed files with 1,292 additions and 346 deletions.
199 changes: 131 additions & 68 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"jquery": "^3.3.1",
"rxjs": "^6.4.0",
"tslib": "^1.9.0",
"unique-names-generator": "^2.0.1",
"zone.js": "~0.8.29"
},
"devDependencies": {
Expand Down
19 changes: 9 additions & 10 deletions src/app/home/history/history.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="container history">
<div class="row">
<div class="col-12 center">
<h2>Recent matches</h2>
<h2>Last 20 matches</h2>
</div>
</div>

Expand All @@ -10,26 +10,25 @@ <h2>Recent matches</h2>
{{h.created |date: 'dd/MM/yyyy hh:mm' }}
</div>
<div class="col-2 center-text">
<p [ngClass]="{'loss': (h.player1NewRating - h.player1OldRating) <= 0, 'win' : (h.player1NewRating - h.player1OldRating) > 0}">
<span *ngIf="(h.player1NewRating - h.player1OldRating) > 0">+</span>
{{h.player1NewRating - h.player1OldRating}}
<p [ngClass]="{'loss': (h.winnerNewRating - h.winnerOldRating) <= 0, 'win' : (h.winnerNewRating - h.winnerOldRating) > 0}">
<span *ngIf="(h.winnerNewRating - h.winnerOldRating) > 0">+</span>
{{h.winnerNewRating - h.winnerOldRating}}
</p>
</div>
<div class="col-3 center-text">
<p>{{h.player1Username}} ({{h.player1NewRating}})</p>
<p>{{h.winnerName}} <br/> ({{h.winnerNewRating}})</p>
</div>
<div class="col-1 center-text">
<p>VS</p>
</div>
<div class="col-3 center-text">
<p>{{h.player2Username}} ({{h.player2NewRating}})</p>
<p>{{h.loserName}} <br/> ({{h.loserNewRating}})</p>
</div>
<div class="col-2 center-text">
<p [ngClass]="{'loss': (h.player2NewRating - h.player2OldRating) <= 0, 'win' : (h.player2NewRating - h.player2OldRating) > 0}">
<span *ngIf="(h.player2NewRating - h.player2OldRating) > 0">+</span>
{{h.player2NewRating - h.player2OldRating}}
<p [ngClass]="{'loss': (h.loserNewRating - h.loserOldRating) <= 0, 'win' : (h.loserNewRating - h.loserOldRating) > 0}">
<span *ngIf="(h.loserNewRating - h.loserOldRating) > 0">+</span>
{{h.loserNewRating - h.loserOldRating}}
</p>
</div>

</div>
</div>
43 changes: 40 additions & 3 deletions src/app/home/history/history.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import {Component, OnInit} from '@angular/core';
import {HistoryService} from '../../shared/services/history.service';
import {HistoryModel} from '../../shared/models/history.model';
import {TeamHistoryModel} from '../../shared/models/team-history.model';
import {GenericHistoryModel} from '../../shared/models/generic-history.model';
import {combineLatest} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
selector: 'app-history',
Expand All @@ -9,20 +13,53 @@ import {HistoryModel} from '../../shared/models/history.model';
})
export class HistoryComponent implements OnInit {

history: HistoryModel[];
history: GenericHistoryModel[];

constructor(private historyService: HistoryService) {
}

private static convertUserHistory(history: HistoryModel): GenericHistoryModel {
const tmp = new GenericHistoryModel();
tmp.created = history.created;
tmp.lastUpdated = history.lastUpdated;
tmp.winnerName = history.player1Name;
tmp.winnerOldRating = history.player1OldRating;
tmp.winnerNewRating = history.player1NewRating;
tmp.loserName = history.player2Name;
tmp.loserOldRating = history.player2OldRating;
tmp.loserNewRating = history.player2NewRating;
return tmp;
}

private static convertTeamHistory(history: TeamHistoryModel): GenericHistoryModel {
const tmp = new GenericHistoryModel();
tmp.created = history.created;
tmp.lastUpdated = history.lastUpdated;
tmp.winnerName = history.team1Name;
tmp.winnerOldRating = history.team1OldRating;
tmp.winnerNewRating = history.team1NewRating;
tmp.loserName = history.team2Name;
tmp.loserOldRating = history.team2OldRating;
tmp.loserNewRating = history.team2NewRating;
return tmp;
}

ngOnInit() {
this.loadHistory();
}

loadHistory() {
this.historyService.getHistory(10).subscribe(result => {
this.history = result;
combineLatest(this.historyService.getHistory(20), this.historyService.getTeamHistory(20)).pipe(
map(([userHistory, teamHistory]) => {
return userHistory.map(h => HistoryComponent.convertUserHistory(h))
.concat(teamHistory.map(h => HistoryComponent.convertTeamHistory(h)));
}),
).subscribe(history => {
history.sort((a, b) => b.created - a.created);
this.history = history.splice(0, 20);
}, error => {
console.log(error);
});
}

}
10 changes: 5 additions & 5 deletions src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@
</main>

<div *ngIf="!hasReadReleaseNote" class="release-notes">
<h3>Release 1.2.1 Beta <button (click)="close()" class="close"><i class="material-icons">close</i></button></h3>
<h3>Release 2.0.0 Beta <button (click)="close()" class="close"><i class="material-icons">close</i></button></h3>

<p>This release has the following changes:</p>
<ul>
<li>Updated Angular and other NPM packages</li>
<li>Date on recent matches</li>
<li>Just some tiny CSS changes</li>
<li>Verify unique user names</li>
<li>2v2 teams are not supported.</li>
<li>Team rating is now supported.</li>
<li>Currently team names are random.</li>
<li>Just some tiny CSS changes.</li>
</ul>
</div>
</div>
Expand Down
11 changes: 10 additions & 1 deletion src/app/home/home.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import {HistoryComponent} from './history/history.component';
import {RouterModule} from '@angular/router';
import {RegisterMatchComponent} from './register-winner/register-match.component';
import {NgSelectModule} from '@ng-select/ng-select';
import { Register1vs1MatchComponent } from './register-winner/register1vs1-match/register1vs1-match.component';
import { Register2vs2MatchComponent } from './register-winner/register2vs2-match/register2vs2-match.component';
import { Score1vs1Component } from './score/score1vs1/score1vs1.component';
import { Score2vs2Component } from './score/score2vs2/score2vs2.component';


@NgModule({
Expand All @@ -32,7 +36,12 @@ import {NgSelectModule} from '@ng-select/ng-select';
ScoreComponent,
GamesComponent,
RegisterMatchComponent,
HistoryComponent],
HistoryComponent,
Register1vs1MatchComponent,
Register2vs2MatchComponent,
Score1vs1Component,
Score2vs2Component,
],
providers: [],
})
export class HomeModule {
Expand Down
66 changes: 4 additions & 62 deletions src/app/home/register-winner/register-match.component.html
Original file line number Diff line number Diff line change
@@ -1,63 +1,5 @@
<section class="container">
<div class="register-match row">
<div class="col-md-12">
<h2 *ngIf="!isLoading && !hasRegisterd">Register a match</h2>
<div *ngIf="isLoading"><span class="fa fa-cog fa-spin fa-4x"></span></div>
<div *ngIf="!isLoading && !hasRegisterd">
<div class="row">
<div class="col-5">
<label class="select-label" for="player1">Winner</label>
<ng-select id="player1" [(ngModel)]="player1Id">
<ng-option [value]="''">Velg...</ng-option>
<ng-option *ngFor="let user of users" [value]="user.uid" [disabled]="user.uid === player2Id" >{{user.username}} ({{user.name}})</ng-option>
</ng-select>
</div>
<div class="col-2"><span class="vs">won against</span></div>
<div class="col-5">
<label class="select-label" for="player2">Loser</label>
<ng-select id="player2" [(ngModel)]="player2Id">
<ng-option [value]="''">Velg...</ng-option>
<ng-option *ngFor="let user of users" [value]="user.uid" [disabled]="user.uid === player1Id" >{{user.username}} ({{user.name}})</ng-option>
</ng-select>
</div>
</div>

<div class="row">
<div class="col-12">
<button (click)="registerWinner()" class="create-game">REGISTER WINNER</button>
</div>
</div>
</div>
<div *ngIf="!isLoading && hasRegisterd">
<h3 class="header-winner">🏆 {{player1.name}} WON! 🏆 </h3>
<div class="row summary-match">
<div class="col-3">
<p [ngClass]="{'loss': (matchResult.player1NewRating - matchResult.player1OldRating) <= 0, 'win' : (matchResult.player1NewRating - matchResult.player1OldRating) > 0}">
<span *ngIf="(matchResult.player1NewRating - matchResult.player1OldRating) > 0">+</span>
{{matchResult.player1NewRating - matchResult.player1OldRating}}
</p>
</div>
<div class="col-3">
<p>{{matchResult.player1Username}} ({{matchResult.player1NewRating}})</p>
</div>
<div class="col-3">
<p>{{matchResult.player2Username}} ({{matchResult.player2NewRating}})</p>
</div>
<div class="col-3">
<p [ngClass]="{'loss': (matchResult.player2NewRating - matchResult.player2OldRating) <= 0, 'win' : (matchResult.player2NewRating - matchResult.player2OldRating) > 0}">
<span *ngIf="(matchResult.player2NewRating - matchResult.player2OldRating) > 0">+</span>
{{matchResult.player2NewRating - matchResult.player2OldRating}}
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<button (click)="registerNewMatch()" class="create-game">REGISTER NEW MATCH</button>
</div>
</div>
</div>
</div>
</div>


<section class="container" [ngSwitch]="display">
<app-match-type-selector (selected)="select($event)"></app-match-type-selector>
<app-register1vs1-match *ngSwitchDefault></app-register1vs1-match>
<app-register2vs2-match *ngSwitchCase="matchTypes.TWO_VS_TWO"></app-register2vs2-match>
</section>
57 changes: 3 additions & 54 deletions src/app/home/register-winner/register-match.component.scss
Original file line number Diff line number Diff line change
@@ -1,55 +1,4 @@
@import "../../../styles/variables";
@import "../../../styles/mixins";

.register-match{
margin-top: 35px;
text-align: center;

.select-label{
text-align: left;
font-size: 18px;
}
.vs{
display: block;
text-align: center;
margin-top: 24px;
font-size: 28px
}
.select-box{
margin: auto;
width: 100%;
font-size: 18px;
border: none;
background: none;
border: 1px solid $tangarine;
border-radius: 0px;
background-color: white;
display: block;
}

.create-game{
@include no-button-styling();
@include standard-button($tangarine, $tangarine-transparent, white);
width: 300px;
font-size: 22px;
padding: 5px;
margin-top: 35px;
}

.loss{
color: red;
}

.win{
color: green;
}

.header-winner{
margin-top: 35px;
}

.summary-match{
font-size: 22px;
margin-top: 35px;
}
.container {
display: flex;
flex-direction: column;
}
69 changes: 7 additions & 62 deletions src/app/home/register-winner/register-match.component.ts
Original file line number Diff line number Diff line change
@@ -1,78 +1,23 @@
import {Component, OnInit} from '@angular/core';
import {UserService} from '../../shared/services/user.service';
import {AuthenticationService} from '../../shared/services/authentication.service';
import {MatchmakerService} from '../../shared/services/matchmaker.service';
import {UserModel} from '../../shared/models/user.model';
import {MatchModel} from '../../shared/models/match.model';
import {HistoryModel} from '../../shared/models/history.model';
import {MatchType} from '../../shared/models/match-type.enum';

@Component({
selector: 'app-register-match',
templateUrl: 'register-match.component.html',
styleUrls: ['register-match.component.scss']
})
export class RegisterMatchComponent implements OnInit {
users: UserModel[];
player1: UserModel;
player2: UserModel;
matchResult: HistoryModel;
player1Id: string;
player2Id: string;
isLoading: boolean;
hasRegisterd: boolean;
matchTypes = MatchType;

constructor(private userService: UserService, private auth: AuthenticationService, private matchmaker: MatchmakerService) {
}

ngOnInit() {
this.player1Id = '';
this.player2Id = '';
this.auth.isLoggedIn().subscribe(result => {
this.loadUsers(result.uid);
}, error => {
console.log(error);
});
}
display: string;

private loadUsers(id: string) {
this.userService.getUsersByName().subscribe(result => {
this.users = result;
}, error => {
console.log(error);
});
constructor() {
}

registerWinner() {
if (this.player2Id && this.player1Id) {
this.player1 = this.users.filter(u => u.uid === this.player1Id)[0];
if (confirm('Did ' + this.player1.name + ' win?')) {
this.isLoading = true;
this.player2 = this.users.filter(u => u.uid === this.player2Id)[0];
const matchModel: MatchModel = this.createMatch(this.player1, this.player2);
this.matchmaker.registerWinner(true, matchModel).then(result => {
this.isLoading = false;
if (result) {
this.matchResult = result;
this.hasRegisterd = true;
}
});
} else {
console.log('Cancel');
}
}
}

registerNewMatch() {
this.hasRegisterd = false;
ngOnInit() {
}

private createMatch(player1: UserModel, player2): MatchModel {
const match: MatchModel = {
player1: player1,
player2: player2,
lastUpdated: new Date(),
created: new Date().getTime()
};
return match;
select(type) {
this.display = type;
}
}
Loading

0 comments on commit 2f67460

Please sign in to comment.