added export button

sergio222-dev · Aug 14, 2024 · 2ddb00b · 2ddb00b
1 parent 56439d8
commit 2ddb00b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 16 deletions.
diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
@@ -26,10 +26,17 @@ const ICONS: Record<IconName, (props: SVGProps<SVGElement>) => JSXOutput> = {
       <path
         d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8l0-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5l0 3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20-.1-.1s0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5l0 3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2l0-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>
     </svg>
-  )
+  ),
+  'copy':  (props: SVGProps<SVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 448 512">
+      <path
+        d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/>
+    </svg>
+  ),
 }
 
-type IconName = 'art' | 'close' | 'menu' | 'heart';
+type IconName = 'art' | 'close' | 'menu' | 'heart' | 'copy';
 
 interface IconProps extends SVGProps<SVGElement> {
   name: IconName;

diff --git a/src/features/createDeck/components/CreateForm.tsx b/src/features/createDeck/components/CreateForm.tsx
@@ -1,9 +1,11 @@
 import { $, component$, useContext, useSignal } from '@builder.io/qwik';
 import { useLocation, useNavigate }             from "@builder.io/qwik-city";
 import { Button }                               from "~/components/button";
+import { Icon }                                 from "~/components/icons/Icon";
 import { Switch }                               from '~/components/switch/Switch';
 import { Text }                                 from '~/components/text';
 import { DeckCreationContext }                  from '~/stores/deckCreationContext';
+import { parseToText }                          from "~/utils/parser";
 
 export const CreateForm = component$(() => {
   const buttonDisabled = useSignal(false);
@@ -38,20 +40,25 @@ export const CreateForm = component$(() => {
         <Text value={deckStore.deckData.description} placeholder="Description" class="w-full" type="text"
               onInput$={handleDescriptionName}/>
       </div>
-      <Button
-        class="bg-primary ring-2 ring-pink-800 p-4 disabled:opacity-50 disabled:cursor-not-allowed"
-        disabled={buttonDisabled.value}
-        onClick$={$(async () => {
-          buttonDisabled.value = true;
-          const result         = await deckStore.createDeck();
-          buttonDisabled.value = false;
+      <div class="flex items-center gap-2">
+        <Button
+          class="bg-primary ring-2 ring-pink-800 p-4 disabled:opacity-50 disabled:cursor-not-allowed"
+          disabled={buttonDisabled.value}
+          onClick$={$(async () => {
+            buttonDisabled.value = true;
+            const result         = await deckStore.createDeck();
+            buttonDisabled.value = false;
 
-          if (location.params['id'] === '' && result > 0) {
-            void navigation(`/decks/create/${result}`);
-          }
-        })}
-      >Create Deck
-      </Button>
+            if (location.params['id'] === '' && result > 0) {
+              void navigation(`/decks/create/${result}`);
+            }
+          })}
+        >Create Deck
+        </Button>
+        <Button class="active:ring-2 ring-red-600" onClick$={() => navigator.clipboard.writeText(parseToText(deckStore.deckData))}>
+          <Icon name="copy" width={24} height={24} class="fill-primary"/>
+        </Button>
+      </div>
       <button
         class="hidden hover:bg-pink-800 bg-white opacity-50 hover:opacity-100 hover:text-white ring-2 ring-pink-800 fixed bottom-[1%] right-[1%] p-4 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={buttonDisabled.value}

diff --git a/src/features/preview/Preview.tsx b/src/features/preview/Preview.tsx
@@ -1,7 +1,10 @@
 import { component$, useComputed$ }      from "@builder.io/qwik";
+import { Button }                        from "~/components/button";
+import { Icon }                          from "~/components/icons/Icon";
 import { CardDeckInfoPreview }           from "~/features/preview/components/CardDeckInfoPreview";
 import { usePublicDeckLoader }           from "~/providers/loaders/decks";
 import { costCalculator, getColorLever } from "~/utils/costCalculator";
+import { parseToText }                   from "~/utils/parser";
 
 export const PreviewDeck = component$(() => {
   const deck = usePublicDeckLoader();
@@ -24,7 +27,15 @@ export const PreviewDeck = component$(() => {
     <div>
       {!deck.value && <div>Loading...</div>}
       <div class="flex flex-col items-center justify-center">
-        <h1 class="text-3xl">{deck.value?.name}</h1>
+        <div class="flex gap-2 items-center">
+          <h1 class="text-3xl">
+            {deck.value?.name}
+          </h1>
+          <Button class="active:ring-2 ring-red-600"
+                  onClick$={() => deck.value && navigator.clipboard.writeText(parseToText(deck.value))}>
+            <Icon name="copy" width={24} height={24} class="fill-primary"/>
+          </Button>
+        </div>
         <p>Presupuesto: <span style={{ color: colorLevelDeck.value }}> {costLevelDeck.value}</span></p>
       </div>
 

diff --git a/src/utils/parser.ts b/src/utils/parser.ts
@@ -0,0 +1,49 @@
+import type { DeckState } from "~/models/Deck";
+
+export function parseToText(deck: DeckState) {
+
+  // calculate total of main deck
+
+ const realmTotal = Object.entries(deck.masterDeck)
+    .map(([, c]) => c)
+    .reduce((acc, c) => acc + c.quantity, 0);
+
+ const treasureTotal = Object.entries(deck.treasureDeck)
+    .map(([, c]) => c)
+    .reduce((acc, c) => acc + c.quantity, 0);
+
+ const sideTotal = Object.entries(deck.sideDeck)
+    .map(([, c]) => c)
+    .reduce((acc, c) => acc + c.quantity, 0);
+
+  let text = `
+  Reino: (total: ${realmTotal})
+  `;
+
+  Object.entries(deck.masterDeck).forEach(([, card]) => {
+    text += `${card.name} x${card.quantity}
+    `
+  });
+
+  text += `
+  
+  Bóveda: (total: ${treasureTotal})
+  `;
+
+  Object.entries(deck.treasureDeck).forEach(([, card]) => {
+    text += `${card.name} x${card.quantity}
+    `
+  });
+
+  text += `
+  
+  Side Deck: (total: ${sideTotal})
+  `
+
+  Object.entries(deck.sideDeck).forEach(([, card]) => {
+    text += `${card.name} x${card.quantity}
+    `
+  });
+
+  return text;
+}