blackbirdchess-client-web/src/routes/+layout.svelte

<script lang="ts">
	// The ordering of these imports is critical to your app working properly
	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
	import '@skeletonlabs/skeleton/styles/all.css';
    import '$lib/scss/icons.scss'
	// Most of your app wide CSS should be put in this file
	import '../app.postcss';

    import {alerts, globals} from "$lib/stores.js";
    import { autoModeWatcher } from '@skeletonlabs/skeleton';

    let alertsvar;
    let globalvars;

    function closeWarning(e) {
        let index = e.target.dataset.index;
        alerts.update(function (data) {
            data.splice(index, 1)
            return data;
        })
    }
    alerts.subscribe((value) => {
        alertsvar = value;
    });
    globals.subscribe(value => {
        globalvars = value;
    });
</script>
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
{#if typeof globalvars.user !== 'undefined' }
    {#each alertsvar as alert, i}
        <aside class="alert variant-filled-{alert.class}">
            <!-- Icon -->
            <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
            <!-- Message -->
            <p class="alert-message">{alert.text}</p>
            <!-- Actions -->
            <div class="alert-actions">
                <i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
            </div>
        </aside>
    {/each}
{/if}

<slot />