Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 4x 4x 4x 4x 4x 4x 4x | import type { Tile } from '@/components/GameCanvas/GameCanvas.types';
import { ref, type Ref } from 'vue';
import { useThrottledDraw } from './useThrottledDraw';
export function useMouseTileHover(
canvasRef: Ref<HTMLCanvasElement | null>,
tiles: Ref<Tile[]>,
tileSize: Ref<number>,
getMousePosition: (e: MouseEvent | TouchEvent) => { x: number; y: number }
) {
const hoveredTileId = ref<number | null>(null);
const mouseX = ref(0);
const mouseY = ref(0);
const { triggerDraw } = useThrottledDraw(canvasRef, tiles, mouseX, mouseY, hoveredTileId, tileSize);
function handleMouseMove(e: MouseEvent | TouchEvent) {
const { x, y } = getMousePosition(e);
mouseX.value = x;
mouseY.value = y;
const hovered = tiles.value.find(
(tile) => x >= tile.x && x <= tile.x + tileSize.value && y >= tile.y && y <= tile.y + tileSize.value && !tile.matched && !tile.flipped
);
hoveredTileId.value = hovered?.id ?? null;
if (canvasRef.value) {
canvasRef.value.style.cursor = hoveredTileId.value !== null ? 'pointer' : 'default';
}
triggerDraw();
}
return {
hoveredTileId,
mouseX,
mouseY,
handleMouseMove,
};
}
|