99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import { CircleX, ScrollText } from 'lucide-react';
|
|
|
|
import { useAppContext } from '@/app/AppContext';
|
|
import CopyButton from '@/components/CopyButton';
|
|
import Scrim from '@/components/Scrim';
|
|
import { getCardInfo } from '@/tools';
|
|
import { cardMap, layout } from '@/constants/tarokka';
|
|
|
|
export default function Notes() {
|
|
const { gameData } = useAppContext();
|
|
const { dmID, cards, settings } = gameData;
|
|
|
|
const isDM = !!dmID;
|
|
const show = cards.every(({ flipped }) => flipped);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const notes: (string[] | undefined)[] = useMemo(
|
|
() =>
|
|
Array.from({ length: 9 })
|
|
.map((_cell: unknown, index: number) => cards[cardMap[index]])
|
|
.map((card, index) =>
|
|
card ? getCardInfo(card, layout[cardMap[index]], isDM, settings) : null,
|
|
)
|
|
.map(
|
|
(_cell: unknown, index: number, cards) =>
|
|
cards[Object.keys(cardMap).find((key) => cardMap[key] === index) || 0],
|
|
)
|
|
.filter((truthy) => truthy),
|
|
[cards, isDM, settings],
|
|
);
|
|
|
|
const showNotes = show && open && (isDM || settings.notes);
|
|
|
|
return (
|
|
<div
|
|
className={`fixed bottom-4 right-4 z-25 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
|
|
>
|
|
<button
|
|
className={`text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] p-2 transition-all duration-250 cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<ScrollText className="w-5 h-5" />
|
|
</button>
|
|
|
|
<Scrim
|
|
clickAction={() => setOpen((prev) => !prev)}
|
|
className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
|
|
>
|
|
<div
|
|
className={`
|
|
fixed bottom-4 right-4
|
|
transition-all duration-250
|
|
bg-slate-800
|
|
border border-yellow-400 rounded-lg
|
|
${showNotes ? 'sm:w-[50vw] sm:h-[67vh] w-[80vw] h-[80vh]' : 'w-0 h-0'}
|
|
`}
|
|
>
|
|
<CopyButton
|
|
copy={notes.map((note) => note!.join('\n')).join('\n\n')}
|
|
className={`
|
|
absolute top-2 right-2
|
|
cursor-pointer p-2
|
|
transition-all duration-250
|
|
text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
|
|
`}
|
|
/>
|
|
<div className="text-yellow-400 h-full overflow-scroll p-8 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
|
|
{notes.map((note, index) => (
|
|
<div key={index}>
|
|
<div className="flex flex-col gap-2">
|
|
{note!.map((blurb, index) => (
|
|
<p key={index}>{blurb}</p>
|
|
))}
|
|
</div>
|
|
{index < notes.length - 1 && <hr className="my-3 border-yellow-400" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<button
|
|
className={`
|
|
fixed bottom-4 right-4
|
|
cursor-pointer p-2
|
|
transition-all duration-250
|
|
text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
|
|
`}
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<CircleX className="w-5 h-5" />
|
|
</button>
|
|
</Scrim>
|
|
</div>
|
|
);
|
|
}
|