116 lines
1.8 KiB
Svelte
116 lines
1.8 KiB
Svelte
<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>
|