mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-21 11:09:30 -07:00
@@ -29,28 +29,33 @@ const setTiles = (data) => {
|
|||||||
|
|
||||||
// determine the basemap images needed
|
// determine the basemap images needed
|
||||||
const baseMapTiles = [
|
const baseMapTiles = [
|
||||||
pixelToFile(sourceXY.x, sourceXY.y),
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y),
|
||||||
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y),
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y),
|
||||||
pixelToFile(sourceXY.x, sourceXY.y + TILE_SIZE.y),
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y),
|
||||||
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y + TILE_SIZE.y),
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y),
|
||||||
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y),
|
||||||
|
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y),
|
||||||
];
|
];
|
||||||
|
|
||||||
// do some calculations
|
// 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
|
// 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[0] T[1] T[2]
|
||||||
// T[2] T[3]
|
// T[3] T[4] T[5]
|
||||||
|
|
||||||
// calculate the shift of tile 0 (upper left)
|
// calculate the shift of tile 0 (upper left)
|
||||||
const tileShift = modTile(sourceXY.x, sourceXY.y);
|
const tileShift = modTile(sourceXY.x, sourceXY.y);
|
||||||
|
|
||||||
// determine which tiles are used
|
// determine which tiles are used
|
||||||
|
const secondRow = TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width;
|
||||||
const usedTiles = [
|
const usedTiles = [
|
||||||
true,
|
true,
|
||||||
TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
|
TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
|
||||||
TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width,
|
TILE_SIZE.x - (tileShift.x * 2) < RADAR_FINAL_SIZE().width,
|
||||||
|
secondRow,
|
||||||
];
|
];
|
||||||
// if we need t[1] and t[2] then we also need t[3]
|
// second row is a copy of the first row when in use
|
||||||
usedTiles.push(usedTiles[1] && usedTiles[2]);
|
// calculate T[4] and T[5]
|
||||||
|
usedTiles.push(secondRow && usedTiles[1], secondRow && usedTiles[2]);
|
||||||
|
|
||||||
// helper function for populating tiles
|
// helper function for populating tiles
|
||||||
const populateTile = (tileName) => (elem, index) => {
|
const populateTile = (tileName) => (elem, index) => {
|
||||||
|
|||||||
@@ -111,7 +111,7 @@
|
|||||||
|
|
||||||
.tiles {
|
.tiles {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1400px;
|
width: 2040px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
2
server/styles/ws.min.css
vendored
2
server/styles/ws.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
<div class="main radar can-enhance">
|
<div class="main radar can-enhance">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="map-tiles tiles"><img /><img /><img /><img /></div>
|
<div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /></div>
|
||||||
<div class="scroll-area">
|
<div class="scroll-area">
|
||||||
<div class="frame template">
|
<div class="frame template">
|
||||||
<div class="map">
|
<div class="map">
|
||||||
@@ -40,6 +40,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay-tiles tiles"><img /><img /><img /><img /></div>
|
<div class="overlay-tiles tiles"><img /><img /><img /><img /><img /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user