cursor : hide on active game iframe, restore otherwise closes #64
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
f9dacf0eb8
commit
e73d8de1f3
1 changed files with 8 additions and 2 deletions
|
|
@ -5,6 +5,7 @@
|
||||||
let cursorY = $state(0)
|
let cursorY = $state(0)
|
||||||
let onTarget = $state(false)
|
let onTarget = $state(false)
|
||||||
let onClick = $state(false)
|
let onClick = $state(false)
|
||||||
|
let hidden = $state(false)
|
||||||
let rafId
|
let rafId
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
|
@ -14,7 +15,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseOver = (e) => {
|
const handleMouseOver = (e) => {
|
||||||
onTarget = !!e.target.closest('a, button:not([disabled]), [role="button"]:not([disabled]), [tabindex]')
|
hidden = !!e.target.closest('.iframe-game-container.game-active')
|
||||||
|
onTarget = !hidden && !!e.target.closest('a, button:not([disabled]), [role="button"]:not([disabled]), [tabindex]')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseOut = () => {
|
const handleMouseOut = () => {
|
||||||
|
|
@ -45,7 +47,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={["cursor-wrapper", onTarget && "upon-target", onClick && "is-clicking"]}
|
class={["cursor-wrapper", onTarget && "upon-target", onClick && "is-clicking", hidden && "is-hidden"]}
|
||||||
style="transform: translate({cursorX}px, {cursorY}px)"
|
style="transform: translate({cursorX}px, {cursorY}px)"
|
||||||
>
|
>
|
||||||
<div class="cursor-dot"></div>
|
<div class="cursor-dot"></div>
|
||||||
|
|
@ -101,6 +103,10 @@
|
||||||
height: 21px;
|
height: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cursor-wrapper.is-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.cursor-wrapper {
|
.cursor-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue