You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
8.2 KiB
233 lines
8.2 KiB
import {AfterViewInit, Component, Input} from "@angular/core";
|
|
import {Server} from "../../entities/servers/Server";
|
|
import * as L from 'leaflet';
|
|
import {LatLng, LatLngBoundsLiteral, Layer, Marker} from "leaflet";
|
|
import {HttpClient} from "@angular/common/http";
|
|
import {Player} from "../../entities/servers/Player";
|
|
import {of} from "rxjs";
|
|
import {Tf2dataService} from "../../services/tf2data.service";
|
|
import {MatExpansionPanel} from "@angular/material/expansion";
|
|
|
|
interface MapOverlayConfig {
|
|
x: number;
|
|
y: number;
|
|
hu: number;
|
|
}
|
|
|
|
@Component({
|
|
selector: "app-live-time-server-map",
|
|
template: `
|
|
<div class="container responsive-grid-250">
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Команда</mat-label>
|
|
<mat-select [(ngModel)]="teams_select">
|
|
<mat-option *ngFor="let team of teams" [value]="team.id">
|
|
{{team.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Класс</mat-label>
|
|
<mat-select [(ngModel)]="classes_select">
|
|
<mat-option *ngFor="let clz of classes" [value]="clz.id">
|
|
{{clz.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Игрок</mat-label>
|
|
<mat-select [(ngModel)]="player_select" multiple>
|
|
<mat-option *ngFor="let m of markers | keyvalue" [value]="m.key">
|
|
{{m.value.player.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div [id]="server.name+'_map'" style="height: 500px;width: 100%;">
|
|
<div *ngIf="allow_processing"><p hidden *ngFor="let player of server.players">{{updatePlayerPos(player)}}</p></div>
|
|
</div>
|
|
`,
|
|
styleUrls: ["servers-page.component.scss"]
|
|
})
|
|
export class LivetimeServerMap implements AfterViewInit {
|
|
@Input("server")
|
|
server!: Server;
|
|
map!: L.Map;
|
|
canShow: boolean = false;
|
|
markers: {[player_id: string]: {
|
|
marker: L.Marker,
|
|
player: Player,
|
|
hidden_via_team: boolean,
|
|
hidden_via_class: boolean,
|
|
hidden_via_player: boolean
|
|
}} = {};
|
|
config: MapOverlayConfig = {
|
|
x: 0, y: 0, hu:0
|
|
}
|
|
|
|
teams:{id:number, name:string}[] = [];
|
|
teams_select: number = 0;
|
|
classes:{id:number, name:string}[] = []
|
|
classes_select: number = 0;
|
|
player_select: string[] = [];
|
|
allow_processing: boolean = false;
|
|
|
|
constructor(private http: HttpClient,
|
|
private tf2service: Tf2dataService) {
|
|
this.classes = tf2service.TFClassType.map(clz => {
|
|
return {id: tf2service.TFClassType.indexOf(clz), name: clz}
|
|
})
|
|
this.teams = tf2service.TFTeam.map(t => {
|
|
return {id: tf2service.TFTeam.indexOf(t), name: t}
|
|
})
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
}
|
|
|
|
prepareMap(serverMap: MatExpansionPanel) {
|
|
this.allow_processing = serverMap.hideToggle;
|
|
if (this.canShow) return;
|
|
|
|
this.http.head(this.generateUrl()).subscribe(
|
|
() => {
|
|
console.log(`Map overlay ${this.server?.map} found!`)
|
|
this.http.get(this.generateUrl('cfg')).subscribe(
|
|
(config) => {
|
|
console.log(`Config to map ${this.server?.map} found!`)
|
|
this.canShow = true;
|
|
this.createMap(config, [[0,0],[2160,3840]]);
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
|
|
private createMap(config: MapOverlayConfig|any, bounds: LatLngBoundsLiteral) {
|
|
this.config = config;
|
|
this.map = L.map(this.server.name+'_map', {crs: L.CRS.Simple, minZoom:-2, zoom: 0, center: [config.y,config.x]});
|
|
L.imageOverlay(this.generateUrl(), bounds).addTo(this.map)
|
|
of(this.server).subscribe(
|
|
(server) => {console.log("ii")}
|
|
)
|
|
//L.marker(this.getRektPos(player)).addTo(this.map)
|
|
}
|
|
|
|
private generateUrl(ext: string = "jpg") {
|
|
// @ts-ignore
|
|
let map = this.server.map.split("workshop/").pop().split(".ugc").shift()
|
|
return `https://tf2.pblr-nyk.pro/site_content/images/maps/${map}.${ext}`
|
|
}
|
|
|
|
private getRektPos(player: Player) {
|
|
const x = this.config.x + (player.pos[0] / this.config.hu);
|
|
const y = this.config.y + (player.pos[1] / this.config.hu);
|
|
return new LatLng(y, x);
|
|
}
|
|
|
|
//это пиздец какой кастыль А ВОТ А ВЬЮЮЮЮЮ А ТАМ....
|
|
updatePlayerPos(player:Player) {
|
|
if (!this.map) return;
|
|
if (!this.allow_processing) return;
|
|
|
|
const ids = Object.keys(this.markers);
|
|
const id: string = `${player.id}`;
|
|
|
|
if (ids.indexOf(id) != -1) {
|
|
this.markers[id].marker.setLatLng(this.getRektPos(player));
|
|
this.markers[id].marker.setIcon(this.getPlayerEmblem(player))
|
|
|
|
this.markers[id].player = player;
|
|
} else {
|
|
this.markers[id] = {
|
|
marker: L.marker(this.getRektPos(player)),
|
|
player: player,
|
|
hidden_via_team: false,
|
|
hidden_via_class: false,
|
|
hidden_via_player: false
|
|
};
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].marker.setIcon(this.getPlayerEmblem(player));
|
|
}
|
|
|
|
//проверяем фильтр выбора команды
|
|
switch (this.teams_select) {
|
|
case 0: {
|
|
if (this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_team = false;
|
|
}
|
|
break;
|
|
}
|
|
default: {
|
|
if (this.markers[id].player.team == this.teams_select && this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_team = false;
|
|
}
|
|
|
|
if (this.markers[id].player.team != this.teams_select && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.remove();
|
|
this.markers[id].hidden_via_team = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
//проверяем фильтр класса
|
|
switch (this.classes_select) {
|
|
case 0: {
|
|
if (this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_class = false;
|
|
}
|
|
break;
|
|
}
|
|
default: {
|
|
if (this.markers[id].player.clz == this.classes_select && this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_class = false;
|
|
}
|
|
|
|
if (this.markers[id].player.clz != this.classes_select && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
|
|
this.markers[id].marker.remove();
|
|
this.markers[id].hidden_via_class = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
//проверяем челикса по имени
|
|
switch (this.player_select.length) {
|
|
case 0: {
|
|
if (this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_player = false;
|
|
}
|
|
break;
|
|
}
|
|
default: {
|
|
if (this.player_select.indexOf(id) != -1 && this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
|
|
this.markers[id].marker.addTo(this.map);
|
|
this.markers[id].hidden_via_player = false;
|
|
}
|
|
|
|
if (this.player_select.indexOf(id) == -1 && !this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
|
|
this.markers[id].marker.remove();
|
|
this.markers[id].hidden_via_player = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
private getPlayerEmblem(player: Player): L.Icon {
|
|
const c = Player.getClassName(player.clz);
|
|
const t = Player.getTeamName(player.team);
|
|
if (c == null || t == null) {
|
|
return new L.Icon({iconUrl: "assets/images/emblems/unknown/Unk_emblem_UNK.png", className: 'pm_icon'});
|
|
}
|
|
return new L.Icon({iconUrl: `assets/images/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`, className: 'pm_icon'});
|
|
}
|
|
}
|
|
|