diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 342041d..aa90852 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {MainPageComponent} from "./pages/main-page/main-page.component"; +import {ServersPageComponent} from "./pages/servers-page/servers-page.component"; +import {ProfilePageComponent} from "./pages/profile-page/profile-page.component"; const routes: Routes = [ - { path: "", component: MainPageComponent} + { path: "", component: MainPageComponent}, + { path: "servers", component: ServersPageComponent }, + { path: "profile", component: ProfilePageComponent } ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index d3e96ff..ab50bb5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,7 @@ - факты13 +
+ факты13 +
- -
- +
+

person @@ -41,25 +39,25 @@

-
- +
+ Введите ник...
- One fish - Two fish - Primary fish - Accent fish + One fish + Two fish + Primary fish + Accent fish
-
+

Интереснные приколы

+

Вася убийца 2007

+

бибики

+
+ +
+
diff --git a/src/app/pages/profile-page/profile-page.component.scss b/src/app/pages/profile-page/profile-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/profile-page/profile-page.component.ts b/src/app/pages/profile-page/profile-page.component.ts new file mode 100644 index 0000000..4630843 --- /dev/null +++ b/src/app/pages/profile-page/profile-page.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute} from "@angular/router"; +import {PlayerServiceService} from "../../services/player-service.service"; +import {PlayerProfile} from "../../entities/profile/PlayerProfile"; +import {MatSnackBar} from "@angular/material/snack-bar"; + +@Component({ + selector: 'app-profile-page', + templateUrl: './profile-page.component.html', + styleUrls: ['./profile-page.component.scss'] +}) +export class ProfilePageComponent implements OnInit { + + profile: PlayerProfile|null = null; + + constructor(private route: ActivatedRoute, + private playerService: PlayerServiceService, + private snack: MatSnackBar) { } + + ngOnInit(): void { + const steam64: string|null = this.route.snapshot.queryParamMap.get("steam64"); + this.loadPlayer(steam64); + } + + loadPlayer(steam64: string|null) { + this.playerService.getProfile(steam64, []).subscribe( + (res) => this.profile = res, + (err) => this.snack.open("Невозможно загрузить профиль") + ); + } +} diff --git a/src/app/pages/servers-page/servers-page.component.html b/src/app/pages/servers-page/servers-page.component.html new file mode 100644 index 0000000..82af44b --- /dev/null +++ b/src/app/pages/servers-page/servers-page.component.html @@ -0,0 +1,35 @@ +
+

Серверы

+

Информация о игроках и живых серверах

+
+ +
+ + + + + {{server.value.name}} + + + {{server.value.player_count}}/{{server.value.max_players}} + + +
+

{{server.value.description}}

+ + + + {{player.name}} + + + {{player.score}} / {{player.deads}} / {{player.duration_seconds}} + + +

Ид игрока: {{player.id}}

+

Пинг: {{player.ping}}

+

Потери пакетов: {{player.loss}}

+ +
+ + +
diff --git a/src/app/pages/servers-page/servers-page.component.scss b/src/app/pages/servers-page/servers-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/servers-page/servers-page.component.ts b/src/app/pages/servers-page/servers-page.component.ts new file mode 100644 index 0000000..a1a4557 --- /dev/null +++ b/src/app/pages/servers-page/servers-page.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; +import {WebsocketServersListenerService} from "../../services/websocket-servers-listener.service"; +import {Server} from "../../entities/servers/Server"; + +@Component({ + selector: 'app-servers-page', + templateUrl: './servers-page.component.html', + styleUrls: ['./servers-page.component.scss'] +}) +export class ServersPageComponent implements OnInit { + + servers:{[srv_name: string]:Server} = {}; + + constructor(private servers_ws:WebsocketServersListenerService) { } + + ngOnInit(): void { + this.servers_ws.getServers().subscribe((r) => { + if (r.state == 0) this.servers = r.servers; + else { + for (let srv_name of Object.keys(r.servers)) { + Object.assign(this.servers[srv_name], r.servers[srv_name]); + } + } + }); + } + +} diff --git a/src/app/services/WebSockerServerMessage.ts b/src/app/services/WebSockerServerMessage.ts new file mode 100644 index 0000000..1c93232 --- /dev/null +++ b/src/app/services/WebSockerServerMessage.ts @@ -0,0 +1,6 @@ +import {Server} from "../entities/servers/Server"; + +export interface WebSockerServerMessage { + servers: {[srv_name: string]:Server}; + state: 0|1; +} diff --git a/src/app/services/player-service.service.ts b/src/app/services/player-service.service.ts new file mode 100644 index 0000000..fd7df29 --- /dev/null +++ b/src/app/services/player-service.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {ProfileRequestData} from "../entities/profile/ProfileRequestData"; +import * as http from "http"; +import {map, Observable} from "rxjs"; +import {PlayerProfile} from "../entities/profile/PlayerProfile"; + +@Injectable({ + providedIn: 'root' +}) +export class PlayerServiceService { + + constructor(private http: HttpClient) {} + + getProfile(steam64: string|null, request: ProfileRequestData[]): Observable { + const params = { + requests: request.map((p) => p.param) + } + return this.http.get("api/profile/" + steam64 == null ? 'current' : 'web', {params: params}) + .pipe(map((r) => PlayerProfile.fromData(r))); + } +} diff --git a/src/app/services/websocket-servers-listener.service.ts b/src/app/services/websocket-servers-listener.service.ts new file mode 100644 index 0000000..c80a27d --- /dev/null +++ b/src/app/services/websocket-servers-listener.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import {WebSocketSubject} from "rxjs/internal/observable/dom/WebSocketSubject"; +import {webSocket} from "rxjs/webSocket"; +import {map, Observable} from "rxjs"; +import {WebSockerServerMessage} from "./WebSockerServerMessage"; + +@Injectable({ + providedIn: 'root' +}) +export class WebsocketServersListenerService { + private socket: WebSocketSubject; + + constructor() { + this.socket = webSocket('wss://tf2.pblr-nyk.pro/ws/servers'); + } + + getServers(): Observable { + return this.socket.asObservable() + } +} diff --git a/src/assets/fonts/Lato-Black.ttf b/src/assets/fonts/Lato-Black.ttf new file mode 100644 index 0000000..a87109f Binary files /dev/null and b/src/assets/fonts/Lato-Black.ttf differ diff --git a/src/assets/fonts/Lato-Bold.ttf b/src/assets/fonts/Lato-Bold.ttf new file mode 100644 index 0000000..59c4843 Binary files /dev/null and b/src/assets/fonts/Lato-Bold.ttf differ diff --git a/src/assets/fonts/Lato-Regular.ttf b/src/assets/fonts/Lato-Regular.ttf new file mode 100644 index 0000000..f01f558 Binary files /dev/null and b/src/assets/fonts/Lato-Regular.ttf differ diff --git a/src/assets/fonts/Lato-Thin.ttf b/src/assets/fonts/Lato-Thin.ttf new file mode 100644 index 0000000..ca2cc0d Binary files /dev/null and b/src/assets/fonts/Lato-Thin.ttf differ diff --git a/src/styles.scss b/src/styles.scss index e704f76..0131bfc 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -35,8 +35,40 @@ $f13_ang_web-theme: mat.define-light-theme(( /* You can add global styles to this file, and also import other style files */ +@font-face { + font-family: Lato; + src: url('assets/fonts/Lato-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: LatoBlack; + src: url('assets/fonts/Lato-Black.ttf') format('truetype'); +} + +@font-face { + font-family: LatoThin; + src: url('assets/fonts/Lato-Thin.ttf') format('truetype'); +} + + html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +body { margin: 0; font-family: Lato, Roboto, "Helvetica Neue", sans-serif; } + +h1,h2,h3,h4,h5,h6 { + font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif; +} + +span { + font-family: LatoThin, Roboto, "Helvetica Neue", sans-serif; +} + +.lato { + font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif; +} + +.mat-card-subtitle { + font-family: LatoThin, Roboto, "Helvetica Neue", sans-serif; +} .spacer { flex: 1 1 auto; @@ -53,3 +85,11 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } .f13_color_extra { color: #5e7edf; } + +.content-in-center { + width: 66%; margin: 0 auto +} + +.content-in-center-header { + display: flex; width: 66%; padding-left: calc((100% - 66%)/2); padding-right: calc((100% - 66%)/2); margin: 0 auto; background: linear-gradient(to top, #f2a998, #e65e11); +}