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
const codes = require('./http-codes');

View File

@ -15,8 +15,9 @@
</span>
</div>
<div *ngFor="let attributeMap of playerAttributeDisplayNames.slice(2, playerAttributeDisplayNames.length)">
<ngx-datatable
[rows]="players.kill"
[rows]="players[attributeMap.prop]"
[messages]="emptyMessage"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
@ -33,176 +34,23 @@
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="Kills" prop="kill"></ngx-datatable-column>
</ngx-datatable>
<ngx-datatable
[rows]="players.friendlyFire"
[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">
<ngx-datatable-column [width]="valueColWidth" prop="{{attributeMap.prop}}">
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{attributeMap.head}}" (click)="sort()">
<img src="../../../../assets/scoreboard/{{attributeMap.prop}}.png" alt="{{attributeMap.head}}">
</span>
</span>
</ng-template>
<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">
<span style="padding-left: 7px;">
{{value}}
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="valueColWidth" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
</ngx-datatable>
<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 {Observable} from 'rxjs/Observable';
import {Player} from '../../../models/model-interfaces';
import {PlayerUtils} from "../../../utils/player-utils";
@Component({
@ -27,13 +28,15 @@ export class StatisticHighScoreComponent implements OnInit {
playersStored = {};
playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames;
cellHeight = 40;
numberColWidth = 60;
nameColWidth = 210;
valueColWidth = 110;
valueColWidth = 50;
emptyMessage = {emptyMessage: 'Keine Einträge'};

View File

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

View File

@ -19,13 +19,7 @@ export class ScoreboardComponent implements OnChanges {
@Output() playerTabSwitch = new EventEmitter();
tableHead = [
{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'}
];
tableHead = PlayerUtils.attributeDisplayNames;
isSteamUUID = PlayerUtils.isSteamUUID;

View File

@ -1,5 +1,13 @@
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 {
const steamUIDPattern = new RegExp('[0-9]{17}');
return steamUIDPattern.test(input);