вооо крутооо 7

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { BanlistPageComponent } from './pages/banlist-page/banlist-page.componen
 import {BanService} from "./services/ban.service";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {FormsModule} from "@angular/forms";
+import {ServerService} from "./services/server.service";
 
 @NgModule({
   declarations: [
@@ -58,7 +59,8 @@ import {FormsModule} from "@angular/forms";
   providers: [
     AnnonceService,
     PlayerService,
-    BanService
+    BanService,
+    ServerService
   ],
   bootstrap: [AppComponent]
 })

src/app/entities/servers/StatExporter.ts

@@ -0,0 +1,12 @@
+export class StatExporter<T> {
+  data: T|null = null;
+
+  fromData(res:any, field:string): StatExporter<T> {
+    this.data = res[field];
+    return this;
+  }
+
+  export(): T|null {
+    return this.data;
+  }
+}

src/app/entities/servers/Statistic.ts

@@ -0,0 +1,6 @@
+export interface Statistic {
+  player_max: number;
+  player_now: number;
+  total_servers: number;
+  working_servers: number;
+}

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

@@ -1,8 +1,8 @@
 <!--тут меню кнопочки всякая хуйня-->
 <div
   class="content-in-center-header">
-  <div style="width: 15%"><img style="height: 250px; padding-top: 20px" src="assets/images/Engineertaunt1.png"></div>
-  <div style="width: 65%">
+  <div class="img-in-header"><img style="height: 250px; padding-top: 20px" src="assets/images/Engineertaunt1.png"></div>
+  <div class="main-content-in-header">
     <!--кнопочки страниц-->
     <mat-toolbar style="background: unset !important; margin-bottom: 2%">
       <button *ngFor="let b of go2urls" mat-icon-button style="color: #fbf1d7; margin: 0 1%;" class="spacer" (click)="go2url(b.url)">
@@ -12,32 +12,29 @@
       </button>
     </mat-toolbar>
     <div style="padding-bottom: 1%" >
-      <mat-grid-list cols="3" rowHeight="75px" style="color: #fbf1d7;">
-        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
-          <h2>
+      <div class="stats-container">
+        <div class="stats-container-element">
+          <div class="stats-container-element-sub">
             <mat-icon>person</mat-icon>
-            <p style="display: inline">Сейчас играют</p>
-          </h2>
-          <span class="spacer"></span>
-          <h2>102</h2>
-        </mat-grid-tile>
-        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
-          <h2>
+            <p>Играет сейчас</p>
+          </div>
+          <p style="padding-right: 1%;">{{statistic?.player_now}}</p>
+        </div>
+        <div class="stats-container-element">
+          <div class="stats-container-element-sub">
             <mat-icon>person</mat-icon>
-            <p style="display: inline">Пик игроков за день</p>
-          </h2>
-          <span class="spacer"></span>
-          <h2>252</h2>
-        </mat-grid-tile>
-        <mat-grid-tile rowspan="1" colspan="1" style="border-radius: 15px; border: 0 solid black; background: rgba(255,255,255,0.25)">
-          <h2>
+            <p>Максимум сегодня</p>
+          </div>
+          <p style="padding-right: 1%;">{{statistic?.player_max}}</p>
+        </div>
+        <div class="stats-container-element">
+          <div class="stats-container-element-sub">
             <mat-icon>person</mat-icon>
-            <p style="display: inline">Серверов работает</p>
-          </h2>
-          <span class="spacer"></span>
-          <h2>13|13</h2>
-        </mat-grid-tile>
-      </mat-grid-list>
+            <p>Серверов</p>
+          </div>
+          <p style="padding-right: 1%;">{{statistic?.working_servers}}|{{statistic?.total_servers}}</p>
+        </div>
+      </div>
     </div>
     <div style="padding-bottom: 1%">
       <mat-form-field style="width: 100%; background: white; border-radius: 15px" appearance="fill">

src/app/pages/main-page/main-page.component.scss

@@ -32,3 +32,87 @@
 ::ng-deep .mat-autocomplete-panel {
   border-radius: 15px;
 }
+
+.img-in-header {
+  width: 15%;
+}
+
+.main-content-in-header {
+  width: 65%
+}
+
+@media only screen and (max-width: 600px) {
+  .img-in-header {
+    display: none;
+  }
+
+  .main-content-in-header {
+    width: 100%;
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  .img-in-header {
+    display: none;
+  }
+
+  .main-content-in-header {
+    width: 100%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .img-in-header {
+    display: none;
+  }
+
+  .main-content-in-header {
+    width: 100%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .img-in-header {
+    display: unset;
+    width: 15%;
+  }
+
+  .main-content-in-header {
+    width: 75%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .img-in-header {
+    display: unset;
+    width: 15%;
+  }
+
+  .main-content-in-header {
+    width: 65%;
+  }
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-between
+}
+
+.stats-container-element {
+  display: flex;
+  justify-content: space-between;
+  border-radius: 15px;
+  border: 0 solid black;
+  background: rgba(255,255,255,0.25);
+  width: 30%;
+  align-items: center;
+  font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
+  font-size: 1em;
+  color: #fbf1d7;
+}
+
+.stats-container-element-sub {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center
+}

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

@@ -5,6 +5,8 @@ import {Router} from "@angular/router";
 import {AuthService} from "../../services/auth.service";
 import {PlayerService} from "../../services/player.service";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {ServerService} from "../../services/server.service";
+import {Statistic} from "../../entities/servers/Statistic";
 
 @Component({
   selector: 'app-main-page',
@@ -26,14 +28,19 @@ export class MainPageComponent implements OnInit {
   search: string = "";
   loading: boolean = false;
   public static SEARCH_HISTORY = "SEARCH_HISTORY";
+  statistic: Statistic|null = null;
 
   constructor(private annoncesService: AnnonceService,
               protected authService: AuthService,
               protected playerService: PlayerService,
               private router: Router,
-              protected snack: MatSnackBar) { }
+              protected snack: MatSnackBar,
+              protected serverService: ServerService) { }
 
   ngOnInit(): void {
+    this.serverService.getStats("statistic").subscribe(
+      (res) => this.statistic = res.export()
+    )
   }
 
   getAnnonces(type: any, limit: number = 3): Annonce[] {
@@ -71,6 +78,11 @@ export class MainPageComponent implements OnInit {
       this.snack.open("Сначала стоит ввести данные об игроке");
       return;
     }
+    if (!this.authService.isAuth()) {
+      this.snack.open("Сначала стоит войти в стим", "Закрыть", {duration: 3000});
+      return;
+    }
+
     this.search = search;
     this.loading = true;
     this.playerService.searchProfile(search).subscribe(

src/app/services/server.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {map, Observable} from "rxjs";
+import {StatExporter} from "../entities/servers/StatExporter";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServerService {
+
+  constructor(private http: HttpClient) { }
+
+  getStats(filter: string): Observable<StatExporter<any>> {
+    return this.http.get(`api/stats?filter=${filter}`).pipe(
+      map((res) => {
+        const d = new StatExporter();
+        d.fromData(res, filter);
+        return d;
+      })
+    )
+  }
+}