mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-14 07:39:29 -07:00
92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
import { RADAR_FINAL_SIZE, TILE_SIZE, TILE_COUNT } from './radar-constants.mjs';
|
|
import { elemForEach } from './utils/elem.mjs';
|
|
|
|
// convert a pixel location to a file/tile combination
|
|
const pixelToFile = (xPixel, yPixel) => {
|
|
const xTile = Math.floor(xPixel / TILE_SIZE.x);
|
|
const yTile = Math.floor(yPixel / TILE_SIZE.y);
|
|
if (xTile < 0 || xTile > TILE_COUNT.x || yTile < 0 || yTile > TILE_COUNT.y) return false;
|
|
return `${yTile}-${xTile}`;
|
|
};
|
|
|
|
// convert a pixel location in the overall map to a pixel location on the tile set
|
|
const modTile = (xPixel, yPixel) => {
|
|
// adjust for additional 1 tile when odd
|
|
const x = (Math.floor(xPixel) % (TILE_SIZE.x));
|
|
const y = (Math.floor(yPixel) % (TILE_SIZE.y));
|
|
|
|
return { x, y };
|
|
};
|
|
|
|
// creates the radar background map image and overlay transparency
|
|
// which remain fixed on the page as the radar image changes in layered divs
|
|
// it returns 4 ImageBitmaps that represent the base map, and 4 ImageBitmaps that are the overlay
|
|
// the main thread pushes these ImageBitmaps into the image placeholders on the page
|
|
const setTiles = (data) => {
|
|
const {
|
|
sourceXY,
|
|
elemId,
|
|
} = data;
|
|
const elemIdFull = `${elemId}-html`;
|
|
|
|
// determine the basemap images needed
|
|
const baseMapTiles = [
|
|
pixelToFile(sourceXY.x, sourceXY.y),
|
|
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y),
|
|
pixelToFile(sourceXY.x, sourceXY.y + TILE_SIZE.y),
|
|
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y + TILE_SIZE.y),
|
|
];
|
|
|
|
// do some calculations
|
|
// the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number
|
|
// T[0] T[1]
|
|
// T[2] T[3]
|
|
|
|
// calculate the shift of tile 0 (upper left)
|
|
const tileShift = modTile(sourceXY.x, sourceXY.y);
|
|
|
|
// determine which tiles are used
|
|
const usedTiles = [
|
|
true,
|
|
tileShift.x + TILE_SIZE.x > RADAR_FINAL_SIZE.width,
|
|
tileShift.y + TILE_SIZE.y > RADAR_FINAL_SIZE.height,
|
|
];
|
|
// if we need t[1] and t[2] then we also need t[3]
|
|
usedTiles.push(usedTiles[1] && usedTiles[2]);
|
|
|
|
// helper function for populating tiles
|
|
const populateTile = (tileName) => (elem, index) => {
|
|
// always set the size to flow the images correctly
|
|
elem.width = TILE_SIZE.x;
|
|
elem.height = TILE_SIZE.y;
|
|
|
|
// check if the tile is used
|
|
if (!usedTiles[index]) {
|
|
elem.src = '';
|
|
return;
|
|
}
|
|
|
|
// set the image source and size
|
|
const newSource = `/images/maps/radar/${tileName}-${baseMapTiles[index]}.webp`;
|
|
if (elem.src === newSource) return;
|
|
elem.src = newSource;
|
|
};
|
|
|
|
// populate the map and overlay tiles
|
|
// fill the tiles with the map
|
|
elemForEach(`#${elemIdFull} .map-tiles img`, populateTile('map'));
|
|
elemForEach(`#${elemIdFull} .overlay-tiles img`, populateTile('overlay'));
|
|
|
|
// fill the tiles with the overlay
|
|
// shift the map tile containers
|
|
const mapTileContainer = document.querySelector(`#${elemIdFull} .map-tiles`);
|
|
mapTileContainer.style.top = `${-tileShift.y}px`;
|
|
mapTileContainer.style.left = `${-tileShift.x}px`;
|
|
// and the same for the overlay
|
|
const overlayTileContainer = document.querySelector(`#${elemIdFull} .overlay-tiles`);
|
|
overlayTileContainer.style.top = `${-tileShift.y}px`;
|
|
overlayTileContainer.style.left = `${-tileShift.x}px`;
|
|
};
|
|
|
|
export default setTiles;
|