simplify code for highscore and use icons in highscore

pull/34/head
HardiReady 2018-05-05 08:08:33 +02:00
parent e8ea7dc6a9
commit 819f8ee469
6 changed files with 46 additions and 193 deletions

View File

@ -1,4 +1,4 @@
"use strict"; 'use strict';
// HTTP status codes by name // HTTP status codes by name
const codes = require('./http-codes'); const codes = require('./http-codes');

View File

@ -15,194 +15,42 @@
</span> </span>
</div> </div>
<ngx-datatable <div *ngFor="let attributeMap of playerAttributeDisplayNames.slice(2, playerAttributeDisplayNames.length)">
[rows]="players.kill" <ngx-datatable
[messages]="emptyMessage" [rows]="players[attributeMap.prop]"
[headerHeight]="cellHeight" [messages]="emptyMessage"
[rowHeight]="cellHeight" [headerHeight]="cellHeight"
[cssClasses]='customClasses' [rowHeight]="cellHeight"
[columnMode]="'force'" [cssClasses]='customClasses'
[scrollbarV]="true" [columnMode]="'force'"
[selectionType]="'single'"> [scrollbarV]="true"
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column> [selectionType]="'single'">
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px"> <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name" <span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"> [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}} {{value}}
</span> </span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Kills" prop="kill"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable <ngx-datatable-column [width]="valueColWidth" prop="{{attributeMap.prop}}">
[rows]="players.friendlyFire" <ng-template ngx-datatable-header-template let-sort="sortFn">
[messages]="emptyMessage" <span class="datatable-header-cell-wrapper">
[headerHeight]="cellHeight" <span class="datatable-header-cell-label text-truncate" title="{{attributeMap.head}}" (click)="sort()">
[rowHeight]="cellHeight" <img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
[cssClasses]='customClasses' </span>
[columnMode]="'force'" </span>
[scrollbarV]="true" </ng-template>
[selectionType]="'single'"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column> <span style="padding-left: 7px;">
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}} {{value}}
</span> </span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column> </ngx-datatable>
</ngx-datatable> </div>
<ngx-datatable
[rows]="players.death"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Tode" prop="death"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.respawn"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.revive"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Revive" prop="revive"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.flagTouch"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.vehicleLight"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Fzg (Light)" prop="vehicleLight"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.vehicleHeavy"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Fzg (Heavy)" prop="vehicleHeavy"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.vehicleAir"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[columnMode]="'force'"
[scrollbarV]="true"
[selectionType]="'single'">
<ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
<ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name"
[style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Fzg (Air)" prop="vehicleAir"></ngx-datatable-column>
</ngx-datatable>
</div> </div>

View File

@ -6,6 +6,7 @@ import {Fraction} from '../../../utils/fraction.enum';
import {FormControl} from '@angular/forms'; import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
import {Player} from '../../../models/model-interfaces'; import {Player} from '../../../models/model-interfaces';
import {PlayerUtils} from "../../../utils/player-utils";
@Component({ @Component({
@ -27,13 +28,15 @@ export class StatisticHighScoreComponent implements OnInit {
playersStored = {}; playersStored = {};
playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames;
cellHeight = 40; cellHeight = 40;
numberColWidth = 60; numberColWidth = 60;
nameColWidth = 210; nameColWidth = 210;
valueColWidth = 110; valueColWidth = 50;
emptyMessage = {emptyMessage: 'Keine Einträge'}; emptyMessage = {emptyMessage: 'Keine Einträge'};

View File

@ -45,9 +45,9 @@ export class FractionStatsComponent implements OnInit, OnChanges {
labelPoints = 'Punkte'; labelPoints = 'Punkte';
labelBudget = 'Budget'; labelBudget = 'Budget';
labelKill = 'Kills'; labelKill = 'Abschüsse';
labelFriendlyFire = 'FriendlyFire'; labelFriendlyFire = 'Friendly Fire';
labelVehicle = 'Fahrzeug-Kills'; labelVehicle = 'Fahrzeug Abschüsse';
labelTransport = 'Lufttransport'; labelTransport = 'Lufttransport';
labelRevive = 'Revive'; labelRevive = 'Revive';
labelStabilize = 'Stabilisiert'; labelStabilize = 'Stabilisiert';

View File

@ -19,13 +19,7 @@ export class ScoreboardComponent implements OnChanges {
@Output() playerTabSwitch = new EventEmitter(); @Output() playerTabSwitch = new EventEmitter();
tableHead = [ tableHead = PlayerUtils.attributeDisplayNames;
{prop: 'name', head: 'Spieler'}, {prop: 'fraction', head: 'Fraktion'}, {prop: 'kill', head: 'Abschüsse'},
{prop: 'friendlyFire', head: 'Friendly Fire'}, {prop: 'vehicleLight', head: 'Fahrzeug (leicht)'},
{prop: 'vehicleHeavy', head: 'Fahrzeug (schwer)'}, {prop: 'vehicleAir', head: 'Fahrzeug (Luft)'},
{prop: 'revive', head: 'Revive'}, {prop: 'flagTouch', head: 'Eroberungen'}, {prop: 'death', head: 'Tode'},
{prop: 'respawn', head: 'Respawn'}
];
isSteamUUID = PlayerUtils.isSteamUUID; isSteamUUID = PlayerUtils.isSteamUUID;

View File

@ -1,5 +1,13 @@
export class PlayerUtils { export class PlayerUtils {
public static readonly attributeDisplayNames = [
{prop: 'name', head: 'Spieler'}, {prop: 'fraction', head: 'Fraktion'}, {prop: 'kill', head: 'Abschüsse'},
{prop: 'friendlyFire', head: 'Friendly Fire'}, {prop: 'vehicleLight', head: 'Fahrzeug (leicht)'},
{prop: 'vehicleHeavy', head: 'Fahrzeug (schwer)'}, {prop: 'vehicleAir', head: 'Fahrzeug (Luft)'},
{prop: 'revive', head: 'Revive'}, {prop: 'flagTouch', head: 'Eroberungen'}, {prop: 'death', head: 'Tode'},
{prop: 'respawn', head: 'Respawn'}
];
public static isSteamUUID(input: string): boolean { public static isSteamUUID(input: string): boolean {
const steamUIDPattern = new RegExp('[0-9]{17}'); const steamUIDPattern = new RegExp('[0-9]{17}');
return steamUIDPattern.test(input); return steamUIDPattern.test(input);