Fixed tile assembly.

This commit is contained in:
Eric van der Vlist 2022-10-14 17:48:00 +02:00
parent 373e5aab0c
commit 07551a887e
3 changed files with 70 additions and 35 deletions

View File

@ -13,7 +13,9 @@ interface MapProperties {
}
const Map: react.FC<MapProperties> = (props: MapProperties) => {
const boardSize = Math.max(props.width, props.height) * 2;
const nbTiles =
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
const boardSize = nbTiles * 256;
const [shift, setShift] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
@ -31,7 +33,19 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
};
var tiledLayer: any[] = [];
tiledLayer.push(<Tile key='tile' href={fakeTile} x={0} y={0} delay={2000} />);
for (let row = 0; row < nbTiles; row++) {
for (let col = 0; col < nbTiles; col++) {
tiledLayer.push(
<Tile
key={`${row}/${col}`}
href={fakeTile}
x={col * 256}
y={row * 256}
delay={20 * col * row}
/>
);
}
}
return (
<IonContent fullscreen={true}>
@ -51,6 +65,18 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
shift={shift}
zoom={zoom}
layers={[
{
key: 'background',
content: (
<rect
x='0'
y='0'
width={boardSize}
height={boardSize}
fill='red'
/>
),
},
{ key: 'tiles', content: tiledLayer },
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
]}

View File

@ -25,27 +25,27 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
const [mouseState, setMouseState] = useState(initialMouseState);
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
console.log(
'MouseHandler, shift: ' +
JSON.stringify(props.shift) +
', zoom:' +
props.zoom
);
// console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
// console.log(
// 'MouseHandler, shift: ' +
// JSON.stringify(props.shift) +
// ', zoom:' +
// props.zoom
// );
const genericHandler = (event: any) => {
console.log(`Log - Event: ${event.type}`);
if (event.pageX !== undefined) {
console.log(
`Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
);
console.log(
`mouseState: ' ${JSON.stringify(mouseState)} (+${
Date.now() - mouseState.timestamp
}ms) `
);
return;
}
// console.log(`Log - Event: ${event.type}`);
// if (event.pageX !== undefined) {
// console.log(
// `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
// );
// console.log(
// `mouseState: ' ${JSON.stringify(mouseState)} (+${
// Date.now() - mouseState.timestamp
// }ms) `
// );
// return;
//}
};
const mouseLeaveHandler = (event: any) => {
@ -70,12 +70,12 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
const mouseMoveHandler = (event: any) => {
if (mouseState.down && Date.now() - mouseState.timestamp > 5) {
genericHandler(event);
console.log(
`dispatch ${JSON.stringify({
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
})}`
);
//console.log(
// `dispatch ${JSON.stringify({
// x: event.pageX - mouseState.starting.x,
// y: event.pageY - mouseState.starting.y,
// })}`
// );
props.addShift({
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
@ -120,7 +120,8 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
};
return (
<div className='handler'
<div
className='handler'
onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler}

View File

@ -1,4 +1,4 @@
import react, { useEffect, useRef, useState } from 'react';
import react, { useEffect, useMemo, useRef, useState } from 'react';
interface TileProperties {
href: string;
@ -8,6 +8,7 @@ interface TileProperties {
}
const Tile: react.FC<TileProperties> = (props: TileProperties) => {
console.log(`Rendering <Tile/>`);
const g = useRef<SVGGElement>(null);
const timeout = (ms: number) => {
@ -40,13 +41,20 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
g.current?.replaceChildren(svgImage);
};
loadImage();
});
}, []);
return (
<>
<g ref={g} transform={`translate(${props.x},${props.y})`} />
</>
);
// const children = useMemo(
// () => (
// <>
// <g ref={g} transform={`translate(${props.x},${props.y})`} />
// </>
// ),
// []
// );
return <>
<g ref={g} transform={`translate(${props.x},${props.y})`} />
</>;
};
export default Tile;