feat: add simple mouse test

src/routes/(fullscreen)/mouse/+page.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import TestCard from '$lib/TestCard.svelte';
+
+	let x = -1;
+	let y = -1;
+	let leftButton = false;
+	let rightButton = 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
+	on:mousemove={onMouseMove}
+	on:mousedown={onMouseDown}
+	on:mouseup={onMouseUp}
+	on:contextmenu={(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>

src/routes/(pages)/+page.svelte

@@ -23,7 +23,7 @@
 			<i class="ti ti-keyboard"></i>
 			{$i18n.t('Keyboard')}
 		</a>
-		<a href="mouse" class="disabled">
+		<a href="mouse">
 			<i class="ti ti-mouse"></i>
 			{$i18n.t('Mouse')}
 		</a>