Zoom: {{ zoom }}
-Center lat: {{ center.lat }} Center long: {{ center.lng }}
\ No newline at end of file + [leafletOptions]="options"> + + + + \ No newline at end of file diff --git a/src/app/pages/config/map/map.component.ts b/src/app/pages/config/map/map.component.ts index d1dca20..a3f7de1 100644 --- a/src/app/pages/config/map/map.component.ts +++ b/src/app/pages/config/map/map.component.ts @@ -1,8 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { CRS, LatLng, latLng, LatLngBounds, latLngBounds, Rectangle, tileLayer } from "leaflet"; +import { Circle, CRS, ImageOverlay, LatLng, LatLngBounds, Rectangle } from "leaflet"; import { Server } from "../../../server"; +import { IslandInstanceModel } from "../../../models/atlasData/island-instance.model"; +import * as L from 'leaflet'; +import 'leaflet-imageoverlay-rotated'; -const SIZE_SCALE = 100_000; +const RADIAN_RATIO = Math.PI / 180; @Component({ selector: 'app-map', @@ -13,16 +16,20 @@ export class MapComponent implements OnInit { options = { crs: CRS.Simple, - zoom: 0, + zoom: -16, maxBounds: undefined, maxBoundsViscosity: 0.5, center: undefined, - layers: [] + layers: [], + minZoom: -16, }; - center: LatLng; - zoom: number; - layers = []; + serverLayers = []; + islandLayers = []; + discoveryLayers = []; + + maxX: number; + maxY: number; constructor(private server: Server) { } @@ -30,28 +37,83 @@ export class MapComponent implements OnInit { ngOnInit() { // all in Y X format. Also, upside down! (0,0 is bottom left instead of top left) // Also, due to insanely large sizes, divide by 100_000 - const maxX = (this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsX) / SIZE_SCALE; - const maxY = (this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsY) / SIZE_SCALE; - const northEast = new LatLng(0, maxX); - const southWest = new LatLng(maxY, 0); + this.maxX = this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsX; + this.maxY = this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsY; + const northEast = new LatLng(0, this.maxX); + const southWest = new LatLng(this.maxY, 0); this.options.maxBounds = new LatLngBounds(southWest, northEast); this.options.center = new LatLng(0, 0); - this.options.layers[0] = new Rectangle(this.options.maxBounds, { - color: '#3c3c00', - weight: 5, - fillColor: 'lightblue', - fill: true - }); + this.options.layers.push(new ImageOverlay('./assets/server-grid-editor/WaterTiles/instinctworld-autoscaling.png', this.options.maxBounds)); - this.server.serverGrid.servers.forEach(i => { - const servMinX = (this.server.serverGrid.gridSize * i.gridX) / SIZE_SCALE; - const servMaxX = servMinX + (this.server.serverGrid.gridSize / SIZE_SCALE); - const servMinY = (this.server.serverGrid.gridSize * i.gridY) / SIZE_SCALE; - const servMaxY = servMinY + (this.server.serverGrid.gridSize / SIZE_SCALE); + this.server.serverGrid.servers.forEach(s => { + // Server Layer + const servMinX = this.server.serverGrid.gridSize * s.gridX; + const servMaxX = servMinX + this.server.serverGrid.gridSize; + const servMinY = this.server.serverGrid.gridSize * s.gridY; + const servMaxY = servMinY + this.server.serverGrid.gridSize; const servNE = new LatLng(servMinY, servMaxX); const servSW = new LatLng(servMaxY, servMinX); const servBounds = new LatLngBounds(servSW, servNE); - this.layers.push(new Rectangle(servBounds,{color: 'pink', weight: 5})); + this.serverLayers.push(new Rectangle(servBounds,{color: 'black', weight: 1})); + + s.islandInstances.forEach(i => { + const imgUrl = './assets/server-grid-editor/' + this.server.islands[i.name].imagePath.substring(2); + const islandLocation = this.islandToImageRotation(i); + this.islandLayers.push(L.imageOverlay.rotated(imgUrl, islandLocation[0], islandLocation[1], islandLocation[2])); + }); + + s.discoZones.forEach(d => { + if (d.ManualVolumeName !== undefined) return; + const imgUrl = './assets/server-grid-editor/Resources/discoZoneBox.png'; + const discoLocation = this.discoveryZoneToImageRotation(d); + this.discoveryLayers.push(L.imageOverlay.rotated(imgUrl, discoLocation[0], discoLocation[1], discoLocation[2])); + }); }) } + + gridCoordinateToMapLatLng(gridX: number, gridY: number): LatLng { + // Need to invert gridY for the Latitude. + const newY = this.maxY - gridY; + return new LatLng(newY, gridX); + } + + islandToImageRotation(island: IslandInstanceModel): LatLng[] { + return this.gridCoordinateToImageRotation(island.worldX, island.worldY, island.rotation, island.islandWidth, island.islandHeight); + } + + discoveryZoneToImageRotation(disco): LatLng[] { + return this.gridCoordinateToImageRotation(disco.worldX, disco.worldY, disco.rotation, disco.sizeX, disco.sizeY); + } + + gridCoordinateToImageRotation(worldX, worldY, rotation, width, height): LatLng[] { + const halfWidth = width / 2; + const halfHeight = height / 2; + + const radians = (rotation + 90) * RADIAN_RATIO; + + const cosR = Math.cos(radians); + const sinR = Math.sin(radians); + + // https://gamedev.stackexchange.com/questions/86755/how-to-calculate-corner-positions-marks-of-a-rotated-tilted-rectangle + // Rotate any point around + // Nx = x * cos(a) - y * sin(a) + // Ny = x * sin(a) + y * cos(a) + + // REMEMBER everything is upside down + // Top Left -1, 1 + const topLeftX = worldX + (-halfWidth * cosR) - (halfHeight * sinR); + const topLeftY = worldY + (-halfWidth * sinR) + (halfHeight * cosR); + // Bottom Left -1, -1 BUT mirrored for some reason so 1, 1 + const botLeftX = worldX + (halfWidth * cosR) - (halfHeight * sinR); + const botLeftY = worldY + (halfWidth * sinR) + (halfHeight * cosR); + // Top Right 1, 1 BUT mirrored for some reason so -1, -1 + const topRightX = worldX + (-halfWidth * cosR) - (-halfHeight * sinR); + const topRightY = worldY + (-halfWidth * sinR) + (-halfHeight * cosR); + + return [ + this.gridCoordinateToMapLatLng(topLeftX, topLeftY), + this.gridCoordinateToMapLatLng(topRightX, topRightY), + this.gridCoordinateToMapLatLng(botLeftX, botLeftY) + ]; + } } diff --git a/src/app/pages/config/servers/discovery-zone/discovery-zone.component.html b/src/app/pages/config/servers/discovery-zone/discovery-zone.component.html new file mode 100644 index 0000000..fb62b8a --- /dev/null +++ b/src/app/pages/config/servers/discovery-zone/discovery-zone.component.html @@ -0,0 +1,55 @@ +{{ discovery.sizeX }} by {{ discovery.sizeY }} by {{ discovery.sizeZ }}
+Manual Volumes are either specific points on a map, or a particular 'discovery' available in a + cell. For example, certain Forests and Pools on an island are discovery zones in the official + server. Also the Powerstone locations are a discovery point, however the names for these aren't tied + to a specific island.
+When a player enters the area of the 'Volume' or otherwise triggers it (in the case of Powerstones), + the discovery zone will be unlocked. This happens whether the player is on land, gliding, or + swimming. This only happens with these Manual Volume Discoveries - Normal discovery zones require + you to set foot on the area.
+If the Zone size (under general settings) is set to 0 for XYZ, then no shimmer will show around the + discovery. Any other size will show a shimmer of that set size, and location, in game.
+Note as well, the location of a Manual Volume discovery doesnt really matter, however it defaults to + the center of the cell.
+Note that Sublevel settings are sorted in the background
-| Name & Model | ++ | + |
|---|---|---|
|
+ |
+ + | |
|
+ |
+ + | + |
| Name | +Discovery Type | ++ | + |
|---|---|---|---|
| {{ disco.name }} | +{{ disco.bIsManuallyPlaced ? "Location" : "Island" }} | ++ | + |