<script lang="ts">
	import TestCard from '$lib/TestCard.svelte';

	let x = $state(-1);
	let y = $state(-1);
	let leftButton = $state(false);
	let rightButton = $state(false);

	function onMouseMove(ev: MouseEvent) {
		x = ev.x;
		y = ev.y;
	}

	function onMouseDown(ev: MouseEvent) {
		if (ev.button === 0) {
			leftButton = true;
		} else if (ev.button === 2) {
			rightButton = true;
		}
		ev.preventDefault();
	}

	function onMouseUp(ev: MouseEvent) {
		if (ev.button === 0) {
			leftButton = false;
		} else if (ev.button === 2) {
			rightButton = false;
		}
		ev.preventDefault();
	}
</script>

<svelte:body
	onmousemove={onMouseMove}
	onmousedown={onMouseDown}
	onmouseup={onMouseUp}
	oncontextmenu={(ev) => {
		ev.preventDefault();
		return false;
	}}
/>

<div class="background">
	<TestCard bg />
</div>

<div class="indicator" style="--x: {x}px; --y: {y}px">
	<div class="x"></div>
	<div class="y"></div>
	<div class="click left" class:pressed={leftButton}></div>
	<div class="click right" class:pressed={rightButton}></div>
</div>

<style>
	.background {
		opacity: 0.33;
	}

	.indicator {
		position: absolute;
		top: 0;
		left: 0;

		overflow: hidden;
		width: 100vw;
		height: 100vh;

		& .x,
		& .y {
			position: absolute;
			background: white;
		}

		& .x {
			height: 100vh;
			width: 1px;
			top: 0;
			left: var(--x);
		}

		& .y {
			height: 1px;
			width: 100vw;
			top: var(--y);
			left: 0;
		}

		& .click {
			position: absolute;
			top: var(--y);
			left: var(--x);
			transform: translate(-50%, -50%);

			width: 3rem;
			height: 3rem;
			border-radius: 50%;

			opacity: 0;

			&.left {
				background: red;
			}

			&.right {
				background: yellow;
			}

			&.pressed {
				opacity: 0.5;
				transition: none;
			}

			transition: opacity 1s ease-out;
		}
	}
</style>
