53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import react, { useEffect, useRef, useState } from 'react';
|
|
|
|
interface TileProperties {
|
|
href: string;
|
|
x: number;
|
|
y: number;
|
|
delay?: number;
|
|
}
|
|
|
|
const Tile: react.FC<TileProperties> = (props: TileProperties) => {
|
|
const g = useRef<SVGGElement>(null);
|
|
|
|
const timeout = (ms: number) => {
|
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
};
|
|
|
|
useEffect(() => {
|
|
const loadImage = async () => {
|
|
console.log(`Pre loading: ${JSON.stringify(props.href)}`);
|
|
const image = new Image(256, 256);
|
|
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
|
|
// const image = new SVGImageElement();
|
|
image.loading = 'eager';
|
|
image.setAttribute('href', props.href);
|
|
if (!image.complete) {
|
|
await image.decode();
|
|
}
|
|
if (props.delay !== undefined) {
|
|
await timeout(props.delay);
|
|
}
|
|
const svgImage = document.createElementNS(
|
|
'http://www.w3.org/2000/svg',
|
|
'image'
|
|
) as unknown as SVGImageElement;
|
|
svgImage.setAttribute('width', '256');
|
|
svgImage.setAttribute('height', '256');
|
|
svgImage.setAttribute('href', props.href);
|
|
// svgImage.setAttribute('x', '0');
|
|
// svgImage.setAttribute('y', '0');
|
|
g.current?.replaceChildren(svgImage);
|
|
};
|
|
loadImage();
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<g ref={g} transform={`translate(${props.x},${props.y})`} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Tile;
|