mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Testing base dialog at layout level using svelte component.
This commit is contained in:
Bradley Shellnut
parent
1a330b8ffe
commit
8aa2fd3c2d
6 changed files with 228 additions and 53 deletions
67
src/lib/components/dialog/DefaultDialog.svelte
Normal file
67
src/lib/components/dialog/DefaultDialog.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Default Dialog</DialogTitle>
|
||||
<DialogDescription>Dialog Description</DialogDescription>
|
||||
|
||||
<div class="dialog-footer" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/lib/components/dialog/RemoveCollectionDialog.svelte
Normal file
82
src/lib/components/dialog/RemoveCollectionDialog.svelte
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { removeFromCollection } from '$root/lib/util/manipulateCollection';
|
||||
|
||||
function removeGame() {
|
||||
if ($boredState?.dialog?.additionalData) {
|
||||
removeFromCollection($boredState?.dialog?.additionalData);
|
||||
}
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Remove from collection</DialogTitle>
|
||||
<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button on:click={removeGame}>Remove</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,19 @@
|
|||
import type { BoredStore } from '$lib/types';
|
||||
import type { BoredStore, Dialog } from '$lib/types';
|
||||
import { writable } from 'svelte/store';
|
||||
import DefaultDialog from '../components/dialog/DefaultDialog.svelte';
|
||||
// import { BoredStore } from '$lib/types';
|
||||
|
||||
// Custom store
|
||||
const state = () => {
|
||||
const { subscribe, set, update } = writable<BoredStore>({ loading: false });
|
||||
|
||||
// function remove(id: string) {
|
||||
// update((store) => {
|
||||
// const newStore = store.filter((item: GameType) => item.id !== id);
|
||||
// return [...newStore];
|
||||
// });
|
||||
// }
|
||||
|
||||
// function removeAll() {
|
||||
// update(() => {
|
||||
// return [];
|
||||
// });
|
||||
// }
|
||||
const initialDialog: Dialog = {
|
||||
isOpen: false,
|
||||
content: DefaultDialog
|
||||
}
|
||||
const initial = { loading: false, dialog: initialDialog }
|
||||
const { subscribe, set, update } = writable<BoredStore>(initial);
|
||||
|
||||
function clear() {
|
||||
set({ loading: false });
|
||||
set(initial);
|
||||
}
|
||||
|
||||
return { subscribe, set, update, clear };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
import type { SvelteComponent } from "svelte";
|
||||
|
||||
export type Dialog = {
|
||||
isOpen: boolean;
|
||||
content?: typeof SvelteComponent;
|
||||
additionalData?: SavedGameType | GameType;
|
||||
}
|
||||
|
||||
export type BoredStore = {
|
||||
loading: boolean;
|
||||
dialog: Dialog;
|
||||
};
|
||||
|
||||
export enum ToastType {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { navigating } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
import Header from '$lib/components/header/Header.svelte';
|
||||
|
|
@ -25,6 +26,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
|
||||
if (browser) {
|
||||
let collectionEmpty = $collectionStore.length === 0 || false;
|
||||
console.log('collectionEmpty', collectionEmpty);
|
||||
|
|
@ -74,6 +77,13 @@
|
|||
<div class="background" />
|
||||
</Portal>
|
||||
{/if}
|
||||
{#if isOpen}
|
||||
<div class="container">
|
||||
<div transition:fade>
|
||||
<svelte:component this={$boredState?.dialog?.content} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<Toast />
|
||||
</Transition>
|
||||
|
||||
|
|
@ -140,4 +150,47 @@
|
|||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dialog-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background-color: rgb(0 0 0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import Game from '$lib/components/game/index.svelte';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import type { GameType, SavedGameType } from '$root/lib/types';
|
||||
import { removeFromCollection } from '$root/lib/util/manipulateCollection';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||
|
||||
let isOpen: boolean = false;
|
||||
let gameToRemove: GameType | SavedGameType;
|
||||
|
|
@ -22,12 +17,10 @@
|
|||
function handleRemoveGame(event: RemoveGameEvent) {
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
isOpen = true;
|
||||
}
|
||||
|
||||
function removeGame() {
|
||||
removeFromCollection(gameToRemove);
|
||||
isOpen = false;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -48,28 +41,6 @@
|
|||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if isOpen}
|
||||
<div class="container">
|
||||
<div transition:fade>
|
||||
<Dialog open={isOpen} on:close={() => (isOpen = false)} static>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Remove from collection</DialogTitle>
|
||||
<DialogDescription
|
||||
>Are you sure you want to remove from your collection?</DialogDescription
|
||||
>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button on:click={() => removeGame()}>Remove</button>
|
||||
<button on:click={() => (isOpen = false)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
h1 {
|
||||
|
|
@ -94,7 +65,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
/* .dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
|
|
@ -135,7 +106,7 @@
|
|||
z-index: 100;
|
||||
background-color: rgb(0 0 0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
} */
|
||||
|
||||
/*
|
||||
.container > .button {
|
||||
|
|
|
|||
Loading…
Reference in a new issue