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