Skip to content

Commit

Permalink
feat: add the help section
Browse files Browse the repository at this point in the history
  • Loading branch information
BrettOrmsby committed Aug 13, 2023
1 parent d943824 commit d041ca2
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 27 deletions.
57 changes: 30 additions & 27 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,28 @@
<template>
<div>
<Toast>
<template #message="slotProps">
<div
style="display: flex; align-items: center; justify-content: space-between; width: 100%"
>
<CheckIcon
v-if="slotProps.message.severity === 'success'"
class="p-icon p-toast-message-icon"
/>
<WarnIcon
v-else-if="slotProps.message.severity === 'warn'"
class="p-icon p-toast-message-icon"
/>
<XCircleIcon
v-else-if="slotProps.message.severity === 'error'"
class="p-icon p-toast-message-icon"
/>
<p class="p-toast-message-text">{{ slotProps.message.summary }}</p>
</div>
</template>
</Toast>
<ToastWrapper />
<SettingsModal />
<AddTagModal />
<SpeedDialMenu v-model="currentTab" />
<main>
<ConfirmDialogTemplate />
<h1>Hyper Tagger</h1>
<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>
<img :src="imageUrl" class="logo" />
Hyper Tagger
</h1>
<DeckTagger />
</div>
</main>
Expand All @@ -39,15 +31,14 @@

<script lang="ts" setup>
import EnterDeck from "./components/EnterDeck.vue";
import HelpSection from "./components/HelpSection.vue";
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 WarnIcon from "./components/icons/WarnIcon.vue";
import CheckIcon from "./components/icons/CheckIcon.vue";
import XCircleIcon from "./components/icons/XCircleIcon.vue";
import Toast from "primevue/toast";
import imageUrl from "@/assets/logo.svg";
import { useConfirm } from "primevue/useconfirm";
import { ref, watch } from "vue";
import store from "./lib/store";
Expand All @@ -56,7 +47,7 @@ type Page = "Tagger" | "Enter Deck";
const confirm = useConfirm();
const currentTab = ref<Page>("Enter Deck");
watch(currentTab, (newValue, oldValue) => {
watch(currentTab, (_newValue, oldValue) => {
if (oldValue === "Enter Deck" && store.isDeckEdited) {
confirm.require({
group: "template",
Expand All @@ -74,7 +65,19 @@ watch(currentTab, (newValue, oldValue) => {
</script>

<style scoped>
.logo {
height: 1em;
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);
}
</style>
9 changes: 9 additions & 0 deletions src/assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,12 @@ main {
max-width: 700px;
margin: 0 auto;
}

a {
color: var(--primary-color);
transition: 0.1s;
text-decoration: none;
}
a:hover {
color: #56bdff;
}
85 changes: 85 additions & 0 deletions src/components/HelpSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<h2>Help</h2>
<Accordion>
<AccordionTab>
<template #header>
<PenIcon class="icon" />
<span>Load A Deck</span>
</template>
<p>
Go to your deck on Moxfield and click the Edit/Bulk Edit link. Copy the deck to your
clipboard and paste it into the textarea above. Press the load deck button to start loading
the cards. Unless there was an issue with copying the deck from Moxfield, no errors should
occur.
</p>
</AccordionTab>
<AccordionTab>
<template #header>
<SettingsIcon class="icon" />
<span>Settings</span>
</template>
<p>
Enter the settings by clicking the menu button (<MenuIcon />) and selecting the settings
option (<SettingsIcon />).
</p>
<p>The default settings are to hide all tagged cards and show all tags.</p>
<p>
Generally, if you want to tag the deck quickly and not provide multiple tags, you should
hide all tagged cards or, depending on how you tag the deck, hide the globally tagged cards
or deck-specifically tagged cards. If you want to tag the cards with multiple tags, you
should likely show all cards.
</p>
<p>
If you are not using certain tags to tag, you can hide them using the hide global tags or
hide deck-specific tags options.
</p>
</AccordionTab>
<AccordionTab>
<template #header>
<PlusIcon class="icon" />
<span>Add A Tag</span>
</template>
<p>
Click the menu button (<MenuIcon />) and select the add option (<PlusIcon />). To add a tag,
type the tag name into the global or deck-specific section and press <kbd>Enter</kbd> or
<kbd>Return</kbd>. To remove a tag, press the X (<XCircleIcon />) beside the tag.
</p>
</AccordionTab>
<AccordionTab>
<template #header>
<CopyClipboard class="icon" />
<span>Export Deck</span>
</template>
<p>
Click the menu button (<MenuIcon />) and select the copy to clipboard option (<CopyClipboard />).
Then, paste the deck into the Edit/Bulk Edit textarea.
</p>
</AccordionTab>
</Accordion>
</template>

<script lang="ts" setup>
import Accordion from "primevue/accordion";
import AccordionTab from "primevue/accordiontab";
import PenIcon from "./icons/PenIcon.vue";
import SettingsIcon from "./icons/SettingsIcon.vue";
import PlusIcon from "./icons/PlusIcon.vue";
import CopyClipboard from "./icons/CopyClipboard.vue";
import MenuIcon from "./icons/MenuIcon.vue";
import XCircleIcon from "./icons/XCircleIcon.vue";
</script>

<style scoped>
.icon {
margin-right: var(--inline-spacing);
}
svg {
vertical-align: middle;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
</style>
30 changes: 30 additions & 0 deletions src/components/ToastWrapper.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<Toast>
<template #message="slotProps">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
<CheckIcon
v-if="slotProps.message.severity === 'success'"
class="p-icon p-toast-message-icon"
/>
<WarnIcon
v-else-if="slotProps.message.severity === 'warn'"
class="p-icon p-toast-message-icon"
/>
<XCircleIcon
v-else-if="slotProps.message.severity === 'error'"
class="p-icon p-toast-message-icon"
/>
<p class="p-toast-message-text">{{ slotProps.message.summary }}</p>
</div>
</template>
</Toast>
</template>

<script lang="ts" setup>
import WarnIcon from "@/components/icons/WarnIcon.vue";
import CheckIcon from "@/components/icons/CheckIcon.vue";
import XCircleIcon from "@/components/icons/XCircleIcon.vue";
import Toast from "primevue/toast";
</script>

<style scoped></style>

0 comments on commit d041ca2

Please sign in to comment.