diff --git a/angular.json b/angular.json index 954d3c0..97eb90d 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,8 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "node_modules/leaflet/dist/leaflet.css" ], "scripts": [] }, diff --git a/package-lock.json b/package-lock.json index ae70d18..918baa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "@types/leaflet": "^1.9.17", + "leaflet": "^1.9.4", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -3338,6 +3340,12 @@ "@types/send": "*" } }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "license": "MIT" + }, "node_modules/@types/http-errors": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", @@ -3369,6 +3377,15 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/leaflet": { + "version": "1.9.17", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.17.tgz", + "integrity": "sha512-IJ4K6t7I3Fh5qXbQ1uwL3CFVbCi6haW9+53oLWgdKlLP7EaS21byWFJxxqOx9y8I0AP0actXSJLVMbyvxhkUTA==", + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", @@ -8067,6 +8084,12 @@ "node": ">= 8" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/less": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz", diff --git a/package.json b/package.json index cfe29df..3e372bd 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "@types/leaflet": "^1.9.17", + "leaflet": "^1.9.4", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -37,4 +39,4 @@ "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.7.2" } -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 179a7f7..1b623ab 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -54,12 +54,14 @@ import {MessageSearchTable} from "./pages/messages-page/message-search-table"; import {BanlistSearchTable} from "./pages/banlist-page/banlist-search-table"; import {FilterMatChipActiveBan} from "./pages/internal-components/search-filters/ban/FilterMatChipActiveBan"; import {FilterMatChipAdmins} from "./pages/internal-components/search-filters/ban/FilterMatChipAdmins"; +import {LivetimeServerMap} from "./pages/servers-page/livetime-server-map"; registerLocaleData(localeRu, "ru") @NgModule({ declarations: [ AppComponent, + LivetimeServerMap, //pages MainPageComponent, ServersPageComponent, diff --git a/src/app/pages/servers-page/livetime-server-map.ts b/src/app/pages/servers-page/livetime-server-map.ts new file mode 100644 index 0000000..00d8572 --- /dev/null +++ b/src/app/pages/servers-page/livetime-server-map.ts @@ -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: ` +
+ +
+ ` +}) +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); + } + } +} diff --git a/src/app/pages/servers-page/servers-page.component.html b/src/app/pages/servers-page/servers-page.component.html index 8fc0ead..b42f348 100644 --- a/src/app/pages/servers-page/servers-page.component.html +++ b/src/app/pages/servers-page/servers-page.component.html @@ -68,6 +68,16 @@ из воркшопа + + + + Посмотреть игроков на карте + + + + + +