import {useEffect, useRef, useState} from 'react'; import {useClient} from '@/react/context/client.js'; import {useEcs} from '@/react/context/ecs.js'; import useRect from '@/react/hooks/use-rect.js'; import styles from './tiles.module.css'; export default function Tiles({eventsChannel}) { const client = useClient(); const wrapperRef = useRef(); const imageRef = useRef(); const imageRect = useRect(imageRef); const [indices, setIndices] = useState([]); const [selection, setSelection] = useState({x: 0, y: 0, w: 1, h: 1}); const [moveStart, setMoveStart] = useState(); const [layer, setLayer] = useState(0); const [brush, setBrush] = useState(0); const [stamp, setStamp] = useState([]); const [ecs] = useEcs(); useEffect(() => { if (!ecs) { return false; } const master = ecs.get(1); if (!master) { return false; } const {TileLayers} = master; const {area, tileSize} = TileLayers.layer(0); function onClick({x, y}) { const at = { x: Math.floor(x / tileSize.x), y: Math.floor(y / tileSize.y), }; if (at.x < 0 || at.y < 0 || at.x >= area.x || at.y >= area.y) { return; } client.send({ type: 'AdminAction', payload: { type: 'paint', value: { brush, layer, stamp: { at, data: stamp, }, }, }, }); } eventsChannel.addListener('click', onClick); return () => { eventsChannel.removeListener('click', onClick); }; }); if (!ecs) { return false; } const master = ecs.get(1); if (!master) { return false; } const {TileLayers} = master; const {sourceJson, tileSize} = TileLayers.layer(0); const {w, h} = sourceJson.meta.size; const factor = (imageRect?.width ?? 1) / w; const wt = w / tileSize.x; return (
Sel:
{' {'}
{selection.x}{', '}
{selection.y}{', '}
{selection.w}{', '}
{selection.h}
{'}'}
Idx:
{' ['}
{indices.join(', ')}
{']'}