вооо крутооо спискок серверов да еще и игроками

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {FormsModule} from "@angular/forms";
 import {ServerService} from "./services/server.service";
 import {registerLocaleData} from "@angular/common";
 import localeRu from "@angular/common/locales/ru";
+import {Tf2dataService} from "./services/tf2data.service";
 
 registerLocaleData(localeRu, "ru")
 
@@ -65,7 +66,8 @@ registerLocaleData(localeRu, "ru")
     AnnonceService,
     PlayerService,
     BanService,
-    ServerService
+    ServerService,
+    Tf2dataService
   ],
   bootstrap: [AppComponent]
 })

src/app/entities/servers/Player.ts

@@ -1,3 +1,5 @@
+import {SteamIDs} from "../profile/SteamIDs";
+
 export interface Player {
   clz: number|null;
   deads: number;
@@ -10,7 +12,7 @@ export interface Player {
   pos: number[];
   score: number;
   state: string;
-  steam: any;
+  steam: SteamIDs;
   steam2: string;
   team: number;
 }

src/app/pages/servers-page/servers-page.component.html

@@ -85,9 +85,68 @@
                   {{player.score}} / {{player.deads}} / {{player.duration}}
                 </mat-panel-description>
               </mat-expansion-panel-header>
-              <p>Ид игрока: {{player.id}}</p>
-              <p>Пинг: {{player.ping}}</p>
-              <p>Потери пакетов: {{player.loss}}</p>
+              <div class="container responsive-grid-100">
+                <mat-card>
+                  <mat-card-title>{{player.score}}</mat-card-title>
+                  <mat-card-subtitle>очков набрано</mat-card-subtitle>
+                </mat-card>
+                <mat-card>
+                  <mat-card-title>{{player.deads}}</mat-card-title>
+                  <mat-card-subtitle>смертей</mat-card-subtitle>
+                </mat-card>
+                <mat-card>
+                  <mat-card-title>{{player.ping}}</mat-card-title>
+                  <mat-card-subtitle>пинг игрока</mat-card-subtitle>
+                </mat-card>
+                <mat-card>
+                  <mat-card-title>{{player.loss}}</mat-card-title>
+                  <mat-card-subtitle>потери пакетов</mat-card-subtitle>
+                </mat-card>
+                <mat-card *ngIf="player.clz != null">
+                  <mat-card-title>{{tf2data.TFClassType[player.clz]}}</mat-card-title>
+                  <mat-card-subtitle>на сервере</mat-card-subtitle>
+                </mat-card>
+                <mat-card *ngIf="player.team != null">
+                  <mat-card-title>{{tf2data.TFTeam[player.team]}}</mat-card-title>
+                  <mat-card-subtitle>команда</mat-card-subtitle>
+                </mat-card>
+              </div>
+              <div class="container responsive-grid-250">
+                <mat-card>
+                  <mat-card-content>
+                    <p *ngIf="player.steam.steam2" style="cursor: pointer" (click)="actionService.copyToClipboard(player.steam.steam2) && actionService.showSnack('Скопировано в буфер обмена')">{{player.steam.steam2}}</p>
+                    <p *ngIf="player.steam.steam3" style="cursor: pointer" (click)="actionService.copyToClipboard(player.steam.steam3) && actionService.showSnack('Скопировано в буфер обмена')">{{player.steam.steam3}}</p>
+                    <p *ngIf="player.steam.steam64" style="cursor: pointer" (click)="actionService.copyToClipboard(player.steam.steam64) && actionService.showSnack('Скопировано в буфер обмена')">{{player.steam.steam64}}</p>
+                  </mat-card-content>
+                </mat-card>
+                <mat-card style="cursor: pointer"
+                  *ngIf="player.steam.steam64 != null"
+                  (click)="actionService.goToUrlViaRouter(['profile', player.steam.steam64])">
+                  <mat-card-title>Открыть профиль</mat-card-title>
+                  <mat-card-subtitle>на сайте</mat-card-subtitle>
+                </mat-card>
+                <mat-card style="cursor: pointer"
+                          (click)="actionService.goToUrlViaTab(player.steam.community_url)">
+                  <mat-card-title >Открыть профиль</mat-card-title>
+                  <mat-card-subtitle>в стиме</mat-card-subtitle>
+                </mat-card>
+                <mat-card style="cursor: pointer"
+                          (click)="actionService.showSnack('Пока что нет')">
+                  <mat-card-title>Пожаловаться</mat-card-title>
+                  <mat-card-subtitle>на игрока который играет</mat-card-subtitle>
+                </mat-card>
+              </div>
+              <div class="container responsive-grid-300">
+                <mat-card>
+                  <mat-card-title>Забанить</mat-card-title>
+                </mat-card>
+                <mat-card>
+                  <mat-card-title>Кикнуть</mat-card-title>
+                </mat-card>
+                <mat-card>
+                  <mat-card-title>Кинуть в мут</mat-card-title>
+                </mat-card>
+              </div>
             </mat-expansion-panel>
           </mat-expansion-panel>
         </div>

src/app/pages/servers-page/servers-page.component.ts

@@ -3,6 +3,7 @@ import {WebsocketServersListenerService} from "../../services/websocket-servers-
 import {Server} from "../../entities/servers/Server";
 import {KeyValue} from "@angular/common";
 import {ActionService} from "../../services/action.service";
+import {Tf2dataService} from "../../services/tf2data.service";
 
 @Component({
   selector: 'app-servers-page',
@@ -14,7 +15,8 @@ export class ServersPageComponent implements OnInit {
   servers:{[srv_name: string]:Server|any} = {};
 
   constructor(private servers_ws:WebsocketServersListenerService,
-              public actionService: ActionService) { }
+              public actionService: ActionService,
+              public tf2data: Tf2dataService) { }
 
   ngOnInit(): void {
     this.servers_ws.getServers().subscribe((r) => {
@@ -22,10 +24,6 @@ export class ServersPageComponent implements OnInit {
     });
   }
 
-  private updateProp<TObj, K extends keyof TObj>(obj: TObj, key: K, value: TObj[K]) {
-    return {...obj, [key]: value};
-  }
-
   setServers(servers: {[srv_name: string]:Server|any}) {
     const keys_current = Object.keys(this.servers);
     const keys_update = Object.keys(servers);

src/app/services/action.service.ts

@@ -20,7 +20,8 @@ export class ActionService {
     return true;
   }
 
-  public goToUrlViaRouter(...url: string[]): boolean {
+  public goToUrlViaRouter(url: string[]|null|undefined): boolean {
+    if (url == null) return false;
     this.router.navigate(url)
     return true;
   }

src/app/services/tf2data.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class Tf2dataService {
+  TFClassType: string[] = [
+    "ХЗ",
+    "Скаут",
+    "Снайпер",
+    "Солдат",
+    "Подрывник",
+    "Медик",
+    "Пулеметчик",
+    "Пиро",
+    "Шпион",
+    "Инженер"
+  ]
+
+  TFTeam: string[] = [
+    "ХЗ",
+    "Наблюдатель",
+    "Красная",
+    "Синия"
+  ]
+
+  constructor() { }
+}

src/styles.scss

@@ -67,7 +67,7 @@ span {
   font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
 }
 
-.mat-card-subtitle {
+.mat-card-subtitle, mat-card-content {
   font-family: LatoThin, Roboto, "Helvetica Neue", sans-serif;
 }
 
@@ -194,3 +194,14 @@ span {
   gap: 24px;
 }
 
+.responsive-grid-100 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 24px;
+}
+
+.responsive-grid-300 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 24px;
+}