Animation for Cookie Saving

This commit is contained in:
Neshura 2023-08-28 07:42:02 +02:00
parent c15f96916e
commit 4fe42ca663
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -1,13 +1,22 @@
<script lang="ts"> <script lang="ts">
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import Modal from "$lib/components/Modal.svelte"; import Modal from "$lib/components/Modal.svelte";
import { fade } from "svelte/transition";
export let showSettings: boolean; export let showSettings: boolean;
let showAuthSaved = false; let showAuthSaved = false;
let showFiller = true;
const saveAuth = () => { const saveAuth = () => {
showAuthSaved = true; showAuthSaved = true;
showFiller = false;
setTimeout(function() {
showAuthSaved = false;
setTimeout(function() {
showFiller = true;
}, 200);
}, 2000);
document.cookie = "authToken=" + authToken; document.cookie = "authToken=" + authToken;
} }
@ -41,10 +50,11 @@
<label for="authTokenInput">Auth Token:</label> <label for="authTokenInput">Auth Token:</label>
<input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text"> <input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
{#if showAuthSaved} {#if showAuthSaved}
<p>Saved!</p> <div in:fade={{duration: 200}} out:fade={{duration: 200}}>Saved!</div>
{:else if showFiller}
<br>
<br>
{/if} {/if}
<br>
<br>
<b>Show Game Groups:</b><br> <b>Show Game Groups:</b><br>
<input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br> <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
<input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br> <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>