Merge pull request #4 from BradNut/base-dialog

Base dialog
2025-09-08 17:40:22 +00:00 · 2022-09-01 00:19:11 -05:00 · 2022-09-01 00:19:11 -05:00 · 2ea35940e7
commit 2ea35940e7
parent 1a330b8ffe bc59d64f7c
9 changed files with 223 additions and 197 deletions
--- a/src/lib/components/dialog/DefaultDialog.svelte
+++ b/src/lib/components/dialog/DefaultDialog.svelte
@ -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>
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@ -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: 50%;
+    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>
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@ -73,12 +73,9 @@
    background-color: var(--color-btn-primary-active);
  }

-  /* :global(.icon) {
-    width: 24px;
-    height: 24px;
-  } */
-
  .game-container {
+    /* display: grid; */
+    /* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
    display: flex;
    flex-wrap: wrap;

@ -107,5 +104,9 @@
        padding: 0.25rem;
      }
    }
+
+    .btn {
+      max-height: 50px;
+    }
  }
 </style>
--- a/src/lib/stores/boredState.ts
+++ b/src/lib/stores/boredState.ts
@ -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 };
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@ -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 {
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -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,11 @@
      <div class="background" />
    </Portal>
  {/if}
+  {#if isOpen}
+    <div class="container">
+      <svelte:component this={$boredState?.dialog?.content} />
+    </div>
+  {/if}
  <Toast />
 </Transition>

@ -140,4 +148,12 @@
      padding: 40px 0;
    }
  }
+
+  :global(.dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: rgb(0 0 0);
+    opacity: 0.8;
+  }
 </style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,19 +1,12 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
+  import type { GameType, SavedGameType } from '$root/lib/types';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+  import { boredState } from '$root/lib/stores/boredState';
+  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
  import Game from '$lib/components/game/index.svelte';
  import TextSearch from '$lib/components/search/textSearch/index.svelte';
  import RandomSearch from '$lib/components/search/random/index.svelte';
  import Random from '$lib/components/random/index.svelte';
-  import { gameStore } from '$lib/stores/gameSearchStore';
-  import { boredState } from '$root/lib/stores/boredState';
-  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
-  import type { GameType, SavedGameType } from '$root/lib/types';

  async function handleSearch(event: SubmitEvent) {
    boredState.update((n) => ({ ...n, loading: true }));
@ -41,17 +34,15 @@
  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>

 <svelte:head>
-  <title>Bored Game</title>
+  <title>Bored Game | Home</title>
 </svelte:head>

 <h1>Search Boardgames!</h1>
@ -76,28 +67,6 @@
    </div>
  </div>
 {/if}
-{#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">
  .games {
@ -132,47 +101,4 @@
      grid-template-columns: 1fr 1fr;
    }
  }
-
-  .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>
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@ -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 {
@ -89,58 +60,8 @@
      grid-template-columns: 1fr 1fr;
    }

-    @media (max-width: 650px) {
+    @media (max-width: 550px) {
      grid-template-columns: 1fr;
    }
  }
-
-  .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;
-  }
-
-  /* 
-  .container > .button {
-    display: grid;
-    justify-content: center;
-    background-color: var(--primary);
-  } */
 </style>
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@ -1,8 +1,4 @@
 <script lang="ts">
-  // throw new Error(
-  //   '@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)'
-  // );
-
  import { fade } from 'svelte/transition';
  import {
    ExternalLinkIcon,
@ -11,12 +7,15 @@
    PlusCircleIcon,
    PlusIcon
  } from '@rgossiaux/svelte-heroicons/outline';
-  import { collectionStore } from '$lib/stores/collectionStore';
  import type { GameType, SavedGameType } from '$lib/types';
-  import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+  import { collectionStore } from '$lib/stores/collectionStore';
+  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+  import { addToCollection } from '$lib/util/manipulateCollection';
  import type { PageData } from './$types';
+  import { boredState } from '$root/lib/stores/boredState';

  $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
+
  export let data: PageData;
  export let game: GameType = data?.game;
  console.log('page game', game);
@ -29,6 +28,13 @@
    firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
  }
  console.log('firstParagraphEnd', firstParagraphEnd);
+
+  function removeGame() {
+    boredState.update((n) => ({
+      ...n,
+      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
+    }));
+  }
 </script>

 <svelte:head>
@ -59,7 +65,7 @@
      >Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
    >
    {#if existsInCollection}
-      <button class="btn" type="button" on:click={() => removeFromCollection(game)}
+      <button class="btn" type="button" on:click={() => removeGame()}
        >Remove from collection <MinusCircleIcon width="24" height="24" /></button
      >
    {:else}
@ -141,4 +147,9 @@
    gap: 1.5rem;
    margin: 1rem;
  }
+
+  .with-icon {
+    display: flex;
+    place-items: center;
+  }
 </style>