gsd
2 months ago
6 changed files with 132 additions and 2 deletions
@ -0,0 +1,92 @@ |
|||||
|
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"; |
||||
|
|
||||
|
interface MapOverlayConfig { |
||||
|
x: number; |
||||
|
y: number; |
||||
|
hu: number; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "app-live-time-server-map", |
||||
|
template: ` |
||||
|
<div [id]="server.name+'_map'" style="height: 500px;width: 100%;"> |
||||
|
<p hidden *ngFor="let player of server.players">{{updatePlayerPos(player)}}</p> |
||||
|
</div> |
||||
|
` |
||||
|
}) |
||||
|
export class LivetimeServerMap implements AfterViewInit { |
||||
|
@Input("server") |
||||
|
server!: Server; |
||||
|
map!: L.Map; |
||||
|
canShow: boolean = false; |
||||
|
markers: {[player_id: string]: {marker: L.Marker, player: Player}} = {}; |
||||
|
config: MapOverlayConfig = { |
||||
|
x: 0, y: 0, hu:0 |
||||
|
} |
||||
|
|
||||
|
constructor(private http: HttpClient) { |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
} |
||||
|
|
||||
|
prepareMap() { |
||||
|
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; |
||||
|
|
||||
|
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].player = player; |
||||
|
} else { |
||||
|
this.markers[id] = {marker: L.marker(this.getRektPos(player)), player: player} |
||||
|
this.markers[id].marker.addTo(this.map); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue