Content from Dark Alleys and Twisted Paths #78
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { useMemo } from "react"; | ||
| import { Popover, Switch, Transition } from "@headlessui/react"; | ||
| import { useTranslation } from "next-i18next"; | ||
| import BookIcon from "@heroicons/react/20/solid/BookOpenIcon"; | ||
| import { useBookStore } from "@/lib/books"; | ||
|
|
||
| export function BookSelector() { | ||
| const { t } = useTranslation(); | ||
| const {enabledBooks, toggleEnabledBook} = useBookStore(); | ||
|
|
||
| const ThemeIcon = useMemo(() => { | ||
| return BookIcon; | ||
| }); | ||
|
|
||
| return ( | ||
| <Popover as="div" horizontal="true"> | ||
| <Popover.Button | ||
| className="flex p-2 items-center justify-center shadow-md shadow-black/5 ring-1 bg-stone-800 ring-inset ring-white/5" | ||
| aria-label={t("theme-switcher") as string} | ||
| > | ||
| <ThemeIcon className="block h-5 w-5 fill-stone-400" /> | ||
| </Popover.Button> | ||
|
|
||
| <Transition | ||
| enter="transition duration-200 ease-out" | ||
| enterFrom="transform opacity-0" | ||
| enterTo="transform opacity-100" | ||
| leave="transition duration-200 ease-out" | ||
| leaveFrom="transform opacity-100" | ||
| leaveTo="transform opacity-0" | ||
| > | ||
| <Popover.Panel | ||
| className="absolute top-full mt-0 w-72 right-0 text-sm font-medium shadow-md shadow-black/5 ring-1 bg-stone-900 ring-white/5" | ||
| > | ||
| <> | ||
| <h3 className="font-serif font-bold text-center p-2">Additional content</h3> | ||
| {enabledBooks.map( (book, index) => ( | ||
| <div className="text-stone-400 p-2" key={book[0]}> | ||
| <Switch | ||
| checked={book[2]} | ||
| onChange={ () => toggleEnabledBook(index) } | ||
| className={(book[2] ? 'bg-amber-500' : 'bg-amber-900') + | ||
| " relative inline-flex h-4 w-8 items-center rounded-full"}> | ||
| {({checked}) => ( | ||
| <> | ||
| <span | ||
| className={`${ | ||
| checked ? 'translate-x-4' : 'translate-x-1' | ||
| } translate-x-1 inline-block h-3 w-3 transform rounded-full bg-white transition`}> | ||
| </span> | ||
| </> | ||
| )} | ||
| </Switch> | ||
| <span className="w-fit p-2">{book[1]}</span> | ||
| </div> | ||
| ))} | ||
| </> | ||
| </Popover.Panel> | ||
| </Transition> | ||
| </Popover> | ||
| ); | ||
|
|
||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,79 @@ | ||
| import CompendiumTitle from "./compendium-title"; | ||
| import { RadioGroup } from '@headlessui/react' | ||
| import { useBookStore, isSourceEnabled, getVV } from "@/lib/books"; | ||
|
|
||
| export default function VaultHeader({ | ||
| primaryLabel, | ||
| secondaryLabel, | ||
| versions = null, | ||
| variants = null | ||
| }: { | ||
| primaryLabel: string; | ||
| secondaryLabel: string; | ||
| versions: any; | ||
| variants: any; | ||
| }) { | ||
|
|
||
| const bookStore = useBookStore((state) => state); // everything in the store can affect the render! | ||
| const getVersion = () => { | ||
| // this is not a pure getter - it also makes sure the store has an entry for the current page | ||
| let currentVersion = getVV(bookStore,"version"); | ||
| if(currentVersion) // it's possible the sourcebook containing the version is no longer enabled | ||
| { | ||
| const matchingVersionObj = versions.filter((version) => version.name == currentVersion); | ||
| if (matchingVersionObj && matchingVersionObj[0].source && !isSourceEnabled(bookStore, matchingVersionObj[0].source)) | ||
| currentVersion = null; | ||
| } | ||
| if(!currentVersion) | ||
| { | ||
| bookStore.setDocumentVV(primaryLabel,"version",versions[0].name); | ||
| return versions[0].name; | ||
| } | ||
| return currentVersion; | ||
| }; | ||
| const hasMultipleOptions = () => { | ||
| const options = versions.filter( (version) => | ||
| !version.source || isSourceEnabled(bookStore,version.source)) | ||
| return options.length > 1; | ||
| } | ||
| bookStore.setCurrentDocument(primaryLabel); | ||
| return ( | ||
| <header className="not-prose"> | ||
| <div className="flex flex-row justify-between"> | ||
| <div> | ||
| <CompendiumTitle>{primaryLabel}</CompendiumTitle> | ||
| <p className="my-0 font-serif font-medium italic text-black/50 dark:text-stone-400"> | ||
| {secondaryLabel} | ||
| </p> | ||
| </div> | ||
| {versions && ( | ||
| <RadioGroup value={getVersion()} onChange={(value)=>bookStore.setDocumentVV(primaryLabel,"version",value)} | ||
| as="div" className="max-w-[80%]" | ||
| > | ||
| <div className="flex-row justify-end"> | ||
| {hasMultipleOptions() && versions.map((version) => { | ||
| if(version.source && !isSourceEnabled(bookStore, version.source)) | ||
| { | ||
| return null; | ||
| } | ||
| return ( | ||
| <RadioGroup.Option key={version.name} value={version.name} | ||
| as="div" className="inline-block"> | ||
| {({active, checked}) => ( | ||
| <div className={(checked? | ||
| 'bg-amber-500 text-black border-amber-500': | ||
| 'bg-white/5 border-black hover:border-amber-500')+ | ||
| ' py-0.5 px-2 border-2 border-solid'}> | ||
| {version.name} | ||
| </div> | ||
| )} | ||
| </RadioGroup.Option> | ||
| )} | ||
| )} | ||
| </div> | ||
| </RadioGroup> | ||
| )} | ||
| </div> | ||
| </header> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These may end up collapsed into a single property.
The original design was that "version" is the rework of a class, while "variant" is a selectable option that heavily modifies its features (in particular, sorcerer bloodlines and specialist wizard in DATP).
One benefit of keeping them separate would be displaying the variant selector somewhere more appropriate, e.g. next to the bloodline section for sorcerer.