91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import react, { useEffect, useState } from 'react';
|
|
import Tile from './Tile';
|
|
import fakeTile from './FakeTile.svg';
|
|
|
|
interface Point {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface TiledLayerProperties {
|
|
height: number;
|
|
width: number;
|
|
shift: Point;
|
|
zoom: number;
|
|
}
|
|
|
|
const TiledLayer: react.FC<TiledLayerProperties> = (
|
|
props: TiledLayerProperties
|
|
) => {
|
|
const nbTiles =
|
|
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
|
|
|
|
var initialTiledLayer: any[][] = [];
|
|
for (let row = 0; row < nbTiles; row++) {
|
|
let tileRow = [];
|
|
for (let col = 0; col < nbTiles; col++) {
|
|
tileRow.push(<g key={`${row}/${col}`} />);
|
|
}
|
|
initialTiledLayer.push(tileRow);
|
|
}
|
|
|
|
const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
|
|
|
|
useEffect(() => {
|
|
const firstVisibleTiles = {
|
|
x: Math.max(Math.floor(-props.shift.x / 256 / props.zoom), 0),
|
|
y: Math.max(Math.floor(-props.shift.y / 256 / props.zoom), 0),
|
|
};
|
|
|
|
const lastVisibleTiles = {
|
|
x: Math.min(
|
|
Math.ceil(firstVisibleTiles.x + props.width / 256 / props.zoom),
|
|
nbTiles - 1
|
|
),
|
|
y: Math.min(
|
|
Math.ceil(firstVisibleTiles.y + props.height / 256 / props.zoom),
|
|
nbTiles - 1
|
|
),
|
|
};
|
|
console.log(
|
|
`Adding new tiles if needed for ${JSON.stringify(
|
|
firstVisibleTiles
|
|
)}/${JSON.stringify(lastVisibleTiles)}.`
|
|
);
|
|
const newTiledLayer: any[][] = [];
|
|
for (let row = 0; row < nbTiles; row++) {
|
|
let tileRow = [];
|
|
for (let col = 0; col < nbTiles; col++) {
|
|
const key = `${row}/${col}`;
|
|
if (
|
|
tiledLayer[row][col].type === 'g' &&
|
|
row >= firstVisibleTiles.y &&
|
|
row <= lastVisibleTiles.y &&
|
|
col >= firstVisibleTiles.x &&
|
|
col <= lastVisibleTiles.x
|
|
) {
|
|
console.log(`Adding tile ${row}/${col}`);
|
|
tileRow.push(
|
|
<Tile
|
|
key={key}
|
|
href={fakeTile}
|
|
x={col * 256}
|
|
y={row * 256}
|
|
delay={1000}
|
|
/>
|
|
);
|
|
} else {
|
|
tileRow.push(tiledLayer[row][col]);
|
|
}
|
|
}
|
|
newTiledLayer.push(tileRow);
|
|
}
|
|
|
|
setTiledLayer(newTiledLayer);
|
|
}, [props.shift, props.zoom, nbTiles, props.height, props.width]);
|
|
|
|
return <>{tiledLayer}</>;
|
|
};
|
|
|
|
export default TiledLayer;
|