Skip to content

Commit

Permalink
feat: swich to using the stepper component
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrettOrmsby
BrettOrmsby committed Mar 4, 2024
1 parent 07c8258 commit 65a6e63
Show file tree
Hide file tree
Showing 9 changed files with 944 additions and 1,207 deletions.
1,736 changes: 739 additions & 997 deletions package-lock.json
View file

Large diffs are not rendered by default.

122 changes: 80 additions & 42 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,47 @@
<ToastWrapper />
<SettingsModal />
<AddTagModal />
<SpeedDialMenu v-model="currentTab" />
<main>
<ConfirmDialogTemplate />
<div v-show="currentTab === 'Enter Deck'">
<h1 class="with-greeting">
<img :src="imageUrl" class="logo" />
Hyper Tagger
</h1>
<p class="greeting">
Need to tag your <a href="https://www.moxfield.com/" target="_blank">Moxfield</a> deck?
Want to save time? Don't have a computer with you? Try this!
</p>
<EnterDeck @complete="() => (currentTab = 'Tagger')" />
<HelpSection />
</div>
<div v-show="currentTab === 'Tagger'">
<h1 style="text-align: center">
<img :src="imageUrl" class="logo" />
Hyper Tagger
</h1>
<DeckTagger />
</div>
<h1 class="with-greeting">
<img :src="imageUrl" class="logo" />
Hyper Tagger
</h1>
<p class="greeting">
Need to tag your
<a href="https://www.moxfield.com/" target="_blank">Moxfield</a> deck? Want to save time?
Don't have a computer with you? Try this!
</p>
<Stepper v-model:activeStep="stepperTab" linear>
<StepperPanel header="Enter Deck">
<template #content="{ nextCallback }">
<EnterDeck @complete="nextCallback($event)" />
<HelpSection />
</template>
</StepperPanel>
<StepperPanel header="Tagger">
<template #content="{ prevCallback, nextCallback }">
<DeckTagger />
<div class="button-container">
<Button
label="Back"
severity="secondary"
@click="checkSwitchBackToEnterTab(prevCallback)"
/>
<Button label="Next" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Copy Deck">
<template #content="{ prevCallback }">
<CopyDeck />
<div class="button-container">
<Button label="Back" severity="secondary" @click="prevCallback" />
<Button label="Start Over" @click="startOver" />
</div>
</template>
</StepperPanel>
</Stepper>
</main>
</div>
</template>
Expand All @@ -36,32 +55,50 @@ import SettingsModal from "./components/SettingsModal.vue";
import DeckTagger from "./components/DeckTagger.vue";
import ConfirmDialogTemplate from "./components/ConfirmDialogTemplate.vue";
import ToastWrapper from "./components/ToastWrapper.vue";
import SpeedDialMenu from "./components/SpeedDialMenu.vue";
import AddTagModal from "./components/AddTagModal.vue";
import CopyDeck from "./components/CopyDeck.vue";
import Button from "primevue/button";
import Stepper from "primevue/stepper";
import StepperPanel from "primevue/stepperpanel";
import store from "./lib/store";
import imageUrl from "@/assets/logo.svg";
import { useConfirm } from "primevue/useconfirm";
import { ref, watch } from "vue";
import store from "./lib/store";
import { ref } from "vue";
type Page = "Tagger" | "Enter Deck";
const confirm = useConfirm();
const currentTab = ref<Page>("Enter Deck");
watch(currentTab, (_newValue, oldValue) => {
if (oldValue === "Enter Deck" && store.isDeckEdited) {
confirm.require({
group: "template",
message:
"Your deck was edited but not loaded. Do you want to continue without loading your new deck?",
header: "Warning",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alert-triangle"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
accept: () => {},
reject: () => {
currentTab.value = "Enter Deck";
}
});
const stepperTab = ref(0);
const checkSwitchBackToEnterTab = (change: (event: Event) => void) => {
if (!store.isTagsEdited) {
change(new Event("change"));
return;
}
});
confirm.require({
group: "template",
message: "Are you sure you want to leave. Your changes will not be saved.",
header: "Warning",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alert-triangle"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
accept: () => {
change(new Event("change"));
},
reject: () => {}
});
};
const startOver = () => {
confirm.require({
group: "template",
message: "Are you sure you want to leave. You will not be able to copy your deck.",
header: "Warning",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alert-triangle"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
accept: () => {
stepperTab.value = 0;
console.log(stepperTab.value);
},
reject: () => {}
});
};
</script>

<style scoped>
Expand All @@ -70,14 +107,15 @@ watch(currentTab, (_newValue, oldValue) => {
width: 1em;
vertical-align: middle;
}
.step {
margin-bottom: var(--content-padding);
}
.with-greeting {
margin-bottom: var(--inline-spacing);
}
.greeting {
margin-top: 0;
color: var(--text-color-secondary);
}
.button-container button + button {
margin-left: var(--inline-spacing);
}
</style>
./components/TaggerSpeedDial.vue
69 changes: 69 additions & 0 deletions src/components/CopyDeck.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<span>Deck:</span>
<pre>{{ deckText }}</pre>

<Button label="Copy Deck" iconPos="left" @click="copyDeck" class="copy-button">
<template #icon>
<CopyClipboard class="p-icon p-button-icon p-button-icon-left" />
</template>
</Button>
</template>

<script lang="ts" setup>
import Button from "primevue/button";
import CopyClipboard from "./icons/CopyClipboard.vue";
import store from "@/lib/store";
import { computed } from "vue";
import { useToast } from "primevue/usetoast";
const toast = useToast();
const deckText = computed(() =>
store.deck
.map(
(card) =>
`${card.amount} ${card.name} (${card.set}) ${card.collectorNumber}${
card.isFoil ? " *F*" : ""
}${card.isEtched ? " *E*" : ""}${[
...card.globalTags.map((tag) => " #!" + tag),
...card.deckSpecificTags.map((tag) => " #" + tag)
].join("")}`
)
.join("\n")
);
const copyDeck = async () => {
try {
await navigator.clipboard.writeText(deckText.value);
toast.add({ severity: "success", summary: "Deck Copied", life: 3000 });
} catch (err) {
toast.add({ severity: "error", summary: "Failed To Copy Deck", life: 3000 });
}
};
</script>

<style scoped>
span {
margin-bottom: var(--inline-spacing);
display: block;
}
.copy-button {
margin: var(--content-padding) 0;
display: block;
}
pre {
margin: 0;
overflow: auto;
max-height: 300px;
font-family: var(--font-family);
font-size: 1rem;
color: rgba(255, 255, 255, 0.87);
background: #20262e;
padding: 0.5rem 0.75rem;
border: 1px solid #3f4b5b;
border-radius: 4px;
outline-color: transparent;
}
</style>
42 changes: 39 additions & 3 deletions src/components/DeckTagger.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
<template>
<div class="flex-center">
<Toolbar>
<template #start>
<Button
v-tooltip.top="{ value: 'Settings', showDelay: 1000 }"
@click="() => (store.isSettingsOpened = true)"
severity="secondary"
>
<template #icon>
<SettingsIcon class="p-icon" />
</template>
</Button>
</template>
<template #center>
<p class="card-number">{{ safeCardIndex + 1 }} / {{ filteredDeck.length }}</p>
</template>
<template #end>
<Button
v-tooltip.top="{ value: 'Add Tag', showDelay: 1000 }"
@click="() => (store.isAddTagOpen = true)"
severity="secondary"
>
<template #icon>
<TagsIcon class="p-icon" />
</template>
</Button>
</template>
</Toolbar>
<Message :closable="false" severity="warn" v-if="store.deck.length === 0">
<template #messageicon>
<WarnIcon class="p-icon" style="margin-right: var(--inline-spacing)" />
Expand All @@ -26,7 +53,6 @@
</template>
</Button>
<div class="flex-center">
<p class="card-number">{{ safeCardIndex + 1 }} / {{ filteredDeck.length }}</p>
<CardImage :card="scryfallCard" />
<template v-if="settings.hideTags !== 'global'">
<h2 v-if="settings.hideTags !== 'deckSpecific'">Global</h2>
Expand Down Expand Up @@ -81,10 +107,13 @@
import Button from "primevue/button";
import Message from "primevue/message";
import Tag from "primevue/tag";
import Toolbar from "primevue/toolbar";
import CardImage from "./CardImage.vue";
import WarnIcon from "./icons/WarnIcon.vue";
import PreviousIcon from "./icons/PreviousIcon.vue";
import NextIcon from "./icons/NextIcon.vue";
import SettingsIcon from "./icons/SettingsIcon.vue";
import TagsIcon from "./icons/TagsIcon.vue";
import store, { settings } from "@/lib/store";
import { computed } from "vue";
import type { DeckCard, ScryfallCard } from "@/lib/types";
Expand Down Expand Up @@ -205,14 +234,21 @@ const previous = () => (safeCardIndex.value -= 1);
.p-message {
width: 100%;
}
.p-toolbar {
border-width: 0px;
}
.card-number {
margin: 0;
margin-bottom: var(--inline-spacing);
font-weight: 600;
color: var(--text-color-secondary);
}
.p-toolbar + .p-message {
margin-top: 0;
}
.card-image {
max-width: 100%;
max-height: 500px;
max-height: 400px;
margin-bottom: var(--content-padding);
}
Expand Down
Loading

0 comments on commit 65a6e63

Please sign in to comment.