layers as pre-stretched tiles #74 #111

server/scripts/modules/radar-tiles.mjs

@@ -0,0 +1,129 @@
+import {
+	pixelToFile, modTile,
+} from './radar-utils.mjs';
+import { RADAR_FINAL_SIZE, TILE_SIZE } from './radar-constants.mjs';
+import { elemForEach } from './utils/elem.mjs';
+
+// 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]
+	// tile 0 gets special treatment, it's placement is the basis for all downstream calculations
+	const t0Source = modTile(sourceXY.x, sourceXY.y);
+	const t0Width = TILE_SIZE.x - t0Source.x;
+	const t0Height = TILE_SIZE.y - t0Source.y;
+	const t0FinalSize = { x: t0Width, y: t0Height };
+
+	// these will all be used again for the overlay, calculate them once here
+	const mapCoordinates = [];
+	// t[0]
+	mapCoordinates.push({
+		sx: t0Source.x,
+		sw: t0Width,
+		dx: 0,
+		dw: t0FinalSize.x,
+
+		sy: t0Source.y,
+		sh: t0Height,
+		dy: 0,
+		dh: t0FinalSize.y,
+	});
+	// t[1]
+	mapCoordinates.push({
+		sx: 0,
+		sw: TILE_SIZE.x - t0Width,
+		dx: t0FinalSize.x,
+		dw: TILE_SIZE.x - t0Width,
+
+		sy: t0Source.y,
+		sh: t0Height,
+		dy: 0,
+		dh: t0FinalSize.y,
+	});
+	// t[2]
+	mapCoordinates.push({
+		sx: t0Source.x,
+		sw: t0Width,
+		dx: 0,
+		dw: t0FinalSize.x,
+
+		sy: 0,
+		sh: TILE_SIZE.y - t0Height,
+		dy: t0FinalSize.y,
+		dh: TILE_SIZE.y - t0Height,
+	});
+	// t[3]
+	mapCoordinates.push({
+		sx: 0,
+		sw: TILE_SIZE.x - t0Width,
+		dx: t0FinalSize.x,
+		dw: TILE_SIZE.x - t0Width,
+
+		sy: 0,
+		sh: TILE_SIZE.y - t0Height,
+		dy: t0FinalSize.y,
+		dh: TILE_SIZE.y - t0Height,
+	});
+
+	// determine which tiles are used
+	const usedTiles = [
+		true,
+		mapCoordinates[1].dx < RADAR_FINAL_SIZE.width,
+		mapCoordinates[2].dy < RADAR_FINAL_SIZE.height,
+		mapCoordinates[2].dy < RADAR_FINAL_SIZE.height && mapCoordinates[1].dx < RADAR_FINAL_SIZE.width,
+	];
+
+	// helper function for populating tiles
+	const populateTile = (tileName) => (elem, index) => {
+		// check if the tile is used
+		if (!usedTiles[index]) return;
+
+		// set the image source and size
+		elem.src = `/images/maps/radar/${tileName}-${baseMapTiles[index]}.webp`;
+		elem.width = TILE_SIZE.x;
+		elem.height = TILE_SIZE.y;
+	};
+
+	// 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 tileShift = modTile(sourceXY.x, sourceXY.y);
+	const mapTileContainer = document.querySelector(`#${elemIdFull} .map-tiles`);
+	mapTileContainer.style.top = `${-tileShift.y}px`;
+	mapTileContainer.style.left = `${-tileShift.x}px`;
+	const overlayTileContainer = document.querySelector(`#${elemIdFull} .overlay-tiles`);
+	overlayTileContainer.style.top = `${-tileShift.y}px`;
+	overlayTileContainer.style.left = `${-tileShift.x}px`;
+
+	// return some useful data
+	return {
+		usedTiles,
+		baseMapTiles,
+	};
+};
+
+export default setTiles;