import { onMount } from 'svelte';

import { fade } from 'svelte/transition';

const resolution = 42;

let seal;

let pointer;

$: isFound =

seal &&

pointer &&

seal.column === pointer.column &&

seal.row === pointer.row;

function raise(_, { delay = 0, duration = 1000 }) {

return {

delay,

duration,

css: (t) => `transform: translateY(${resolution * (1 - t)}px)`,

};

}

function getCoords() {

const { width, height } = document.body.getBoundingClientRect();

const columns = Math.floor(width / resolution);

const rows = Math.floor(height / resolution);

const column = Math.floor(Math.random() * columns);

const row = Math.floor(Math.random() * (rows - 1) + 1);

return { column, row };

}

function handleSearch({ pageX, pageY }) {

if (isFound) return;