78 lines
1.7 KiB
Svelte
78 lines
1.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { spring } from "svelte/motion";
|
||
|
|
import { fade } from "svelte/transition";
|
||
|
|
import type { Writable } from "svelte/store";
|
||
|
|
|
||
|
|
export let visibleNotification: Writable<"none" | "success" | "failure">;
|
||
|
|
let hasAnimationTriggered = false;
|
||
|
|
const revealResultDelayDurationMs = 550;
|
||
|
|
|
||
|
|
const resultSpring = spring(20, {
|
||
|
|
stiffness: 0.1,
|
||
|
|
damping: 0.15,
|
||
|
|
precision: 0.01
|
||
|
|
});
|
||
|
|
|
||
|
|
function triggerAnimation() {
|
||
|
|
hasAnimationTriggered = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
resultSpring.set(0);
|
||
|
|
}, revealResultDelayDurationMs);
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetAnimation() {
|
||
|
|
hasAnimationTriggered = false;
|
||
|
|
resultSpring.set(20);
|
||
|
|
}
|
||
|
|
|
||
|
|
visibleNotification.subscribe((value) => {
|
||
|
|
if (value === "none") {
|
||
|
|
resetAnimation();
|
||
|
|
return;
|
||
|
|
} else if (hasAnimationTriggered) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
triggerAnimation();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="notification">
|
||
|
|
{#if $visibleNotification !== "none"}
|
||
|
|
<div class="notification--success">
|
||
|
|
<p class="notification__prefix" transition:fade={{ duration: 250 }}>
|
||
|
|
Today's Guess:
|
||
|
|
</p>
|
||
|
|
<p
|
||
|
|
class="notification__result"
|
||
|
|
transition:fade={{ duration: 300, delay: revealResultDelayDurationMs }}
|
||
|
|
style="transform: translateY({$resultSpring}px);"
|
||
|
|
>
|
||
|
|
{$visibleNotification === "success" ? "Correct 🎉" : "Incorrect 💔"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style type="text/postcss">
|
||
|
|
.notification {
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification--success {
|
||
|
|
color: var(--colour-dark-grey);
|
||
|
|
padding: 12px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification__prefix {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification__result {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
</style>
|