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 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 [shift, setShift] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1); const [zoom, setZoom] = useState(1);
@ -31,7 +33,19 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
}; };
var tiledLayer: any[] = []; 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 ( return (
<IonContent fullscreen={true}> <IonContent fullscreen={true}>
@ -51,6 +65,18 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
shift={shift} shift={shift}
zoom={zoom} zoom={zoom}
layers={[ layers={[
{
key: 'background',
content: (
<rect
x='0'
y='0'
width={boardSize}
height={boardSize}
fill='red'
/>
),
},
{ key: 'tiles', content: tiledLayer }, { key: 'tiles', content: tiledLayer },
{ key: 'circle', content: <circle cx='50' cy='50' r='50' /> }, { 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); const [mouseState, setMouseState] = useState(initialMouseState);
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState)); // console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
console.log( // console.log(
'MouseHandler, shift: ' + // 'MouseHandler, shift: ' +
JSON.stringify(props.shift) + // JSON.stringify(props.shift) +
', zoom:' + // ', zoom:' +
props.zoom // props.zoom
); // );
const genericHandler = (event: any) => { const genericHandler = (event: any) => {
console.log(`Log - Event: ${event.type}`); // console.log(`Log - Event: ${event.type}`);
if (event.pageX !== undefined) { // if (event.pageX !== undefined) {
console.log( // console.log(
`Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}` // `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
); // );
console.log( // console.log(
`mouseState: ' ${JSON.stringify(mouseState)} (+${ // `mouseState: ' ${JSON.stringify(mouseState)} (+${
Date.now() - mouseState.timestamp // Date.now() - mouseState.timestamp
}ms) ` // }ms) `
); // );
return; // return;
} //}
}; };
const mouseLeaveHandler = (event: any) => { const mouseLeaveHandler = (event: any) => {
@ -70,12 +70,12 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
const mouseMoveHandler = (event: any) => { const mouseMoveHandler = (event: any) => {
if (mouseState.down && Date.now() - mouseState.timestamp > 5) { if (mouseState.down && Date.now() - mouseState.timestamp > 5) {
genericHandler(event); genericHandler(event);
console.log( //console.log(
`dispatch ${JSON.stringify({ // `dispatch ${JSON.stringify({
x: event.pageX - mouseState.starting.x, // x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y, // y: event.pageY - mouseState.starting.y,
})}` // })}`
); // );
props.addShift({ props.addShift({
x: event.pageX - mouseState.starting.x, x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y, y: event.pageY - mouseState.starting.y,
@ -120,7 +120,8 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
}; };
return ( return (
<div className='handler' <div
className='handler'
onMouseDown={mouseDownHandler} onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler} onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler} 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 { interface TileProperties {
href: string; href: string;
@ -8,6 +8,7 @@ interface TileProperties {
} }
const Tile: react.FC<TileProperties> = (props: TileProperties) => { const Tile: react.FC<TileProperties> = (props: TileProperties) => {
console.log(`Rendering <Tile/>`);
const g = useRef<SVGGElement>(null); const g = useRef<SVGGElement>(null);
const timeout = (ms: number) => { const timeout = (ms: number) => {
@ -40,13 +41,20 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
g.current?.replaceChildren(svgImage); g.current?.replaceChildren(svgImage);
}; };
loadImage(); loadImage();
}); }, []);
return ( // const children = useMemo(
<> // () => (
// <>
// <g ref={g} transform={`translate(${props.x},${props.y})`} />
// </>
// ),
// []
// );
return <>
<g ref={g} transform={`translate(${props.x},${props.y})`} /> <g ref={g} transform={`translate(${props.x},${props.y})`} />
</> </>;
);
}; };
export default Tile; export default Tile;