Skip to content

Commit

Permalink
Merge pull request #23 from sergio222-dev/develop
Browse files Browse the repository at this point in the history
added export button
sergio222-dev authored Aug 15, 2024
2 parents bffcb18 + 2ddb00b commit ea4591b
Showing 4 changed files with 90 additions and 16 deletions.
11 changes: 9 additions & 2 deletions src/components/icons/Icon.tsx
Original file line number Diff line number Diff line change
@@ -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;
33 changes: 20 additions & 13 deletions src/features/createDeck/components/CreateForm.tsx
Original file line number Diff line number Diff line change
@@ -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}
13 changes: 12 additions & 1 deletion src/features/preview/Preview.tsx
Original file line number Diff line number Diff line change
@@ -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>

49 changes: 49 additions & 0 deletions src/utils/parser.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit ea4591b

Please sign in to comment.