feat: add simple mouse test
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
1c2e89bb79
commit
1dfcadc8a3
2 changed files with 117 additions and 1 deletions
|
@ -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>
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue