feat: add simple mouse test
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Tomáš Mládek 2024-02-28 18:29:10 +01:00
parent 1c2e89bb79
commit 1dfcadc8a3
2 changed files with 117 additions and 1 deletions

View file

@ -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>

View file

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