58 lines
1.5 KiB
Svelte
58 lines
1.5 KiB
Svelte
<div class="h-full mx-4 md:mx-auto flex justify-center items-center flex-col">
|
|
<h1 class="my-3 h1 text-center">Blackbird Chess</h1>
|
|
|
|
{#if typeof globalvars.user == 'undefined' }
|
|
{#each alertsvar as alert, i}
|
|
<aside class="alert {alert.class} mb-3">
|
|
<!-- 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}
|
|
<div class="card variant-ringed p-4 m-4 w-full md:w-1/2 2xl:w-3/12 text-token">
|
|
<slot />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.alert {
|
|
&.error {
|
|
@apply variant-filled-error;
|
|
}
|
|
&.warning {
|
|
@apply variant-filled-warning;
|
|
}
|
|
&.success {
|
|
@apply variant-filled-success;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="js">
|
|
import {alerts, globalstore} from "$lib/stores.js";
|
|
|
|
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;
|
|
});
|
|
|
|
globalstore.subscribe(value => {
|
|
globalvars = value;
|
|
});
|
|
</script> |