gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

animate Settings and Notes

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-24 11:24:15 -04:00
parent 3d3cb7a45e
commit 1a4789af4c
4 changed files with 68 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[gameID]/page.tsx
View File

@@ -106,7 +106,7 @@ export default function GamePage() {
</div> </div>
))} ))}
</div> </div>
{cards.every(({ flipped }) => flipped) && <Notes gameData={gameData} />} <Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
</main> </main>
) : null; ) : null;
} }

2
components/CopyButton.tsx
View File

@@ -34,7 +34,7 @@ export default function CopyButton({
Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip; Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip;
return ( return (
<button onClick={handleCopy} className={`transition-all cursor-pointer ${className}`}> <button onClick={handleCopy} className={`cursor-pointer ${className}`}>
<ToolTip content={ttContent} className="w-full"> <ToolTip content={ttContent} className="w-full">
<div className="flex items-center gap-2 w-full text-sm font-medium"> <div className="flex items-center gap-2 w-full text-sm font-medium">
{title} {title}

85
components/Notes.tsx
View File

@@ -12,27 +12,15 @@ import { GameUpdate } from '@/types';
type NotesProps = { type NotesProps = {
gameData: GameUpdate; gameData: GameUpdate;
show: boolean;
}; };
export default function Notes({ gameData: { dmID, cards, settings } }: NotesProps) { export default function Notes({ gameData: { dmID, cards, settings }, show }: NotesProps) {
const isDM = !!dmID; const isDM = !!dmID;
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const gameDummy = { const notes: (string[] | undefined)[] = useMemo(
dmID: '',
spectatorID: '',
cards: [],
settings: {
positionBack: false,
positionFront: false,
prophecy: false,
notes: false,
cardStyle: 'color',
},
};
const notes = useMemo(
() => () =>
Array.from({ length: 9 }) Array.from({ length: 9 })
.map((_cell: unknown, index: number) => cards[cardMap[index]]) .map((_cell: unknown, index: number) => cards[cardMap[index]])
@@ -47,39 +35,44 @@ export default function Notes({ gameData: { dmID, cards, settings } }: NotesProp
[settings], [settings],
); );
return isDM || settings.notes ? ( const showNotes = show && open && (isDM || settings.notes);
<div className="fixed bottom-4 right-4 z-50">
{!open && (
<button
className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer"
onClick={() => setOpen((prev) => !prev)}
>
<ScrollText className="w-5 h-5" />
</button>
)}
{open && ( return (
<Scrim onClick={() => setOpen((prev) => !prev)}> <div
<div className="fixed bottom-4 right-4 w-[33vw] h-[67vh] text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 space-y-2"> className={`fixed bottom-4 right-4 z-50 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
<CopyButton >
copy={notes.map((note) => note!.join('\n')).join('\n\n')} <button
className="absolute top-2 right-2 p-2 bg-black/30 hover:bg-black/50 rounded-full text-gray-200 hover:text-white" className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
/> onClick={() => setOpen((prev) => !prev)}
<div className="h-full overflow-scroll p-6"> >
{notes.map((note, index) => ( <ScrollText className="w-5 h-5" />
<div key={index}> </button>
<div className="flex flex-col gap-2">
{note!.map((blurb, index) => ( <Scrim
<p key={index}>{blurb}</p> onClick={() => setOpen((prev) => !prev)}
))} className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
</div> >
{index < notes.length - 1 && <hr className="my-3 border-gray-300" />} <div
className={`fixed bottom-4 right-4 transition-all duration-250 text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`}
>
<CopyButton
copy={notes.map((note) => note!.join('\n')).join('\n\n')}
className="absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full text-gray-300 hover:text-white"
/>
<div className="h-full overflow-scroll p-6 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> </div>
))} {index < notes.length - 1 && <hr className="my-3 border-gray-300" />}
</div> </div>
))}
</div> </div>
</Scrim> </div>
)} </Scrim>
</div> </div>
) : null; );
} }

50
components/Settings.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { Settings as Gear, X } from 'lucide-react'; import { Settings as Gear } from 'lucide-react';
import CopyButton from '@/components/CopyButton'; import CopyButton from '@/components/CopyButton';
import Scrim from '@/components/Scrim'; import Scrim from '@/components/Scrim';
@@ -78,29 +78,33 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
</fieldset> </fieldset>
); );
return open ? ( return (
<Scrim onClick={() => setOpen((prev) => !prev)}> <div className={`fixed top-4 right-4 z-50`}>
<div className="fixed top-4 right-4 text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2"> <Scrim
<CopyButton onClick={() => setOpen((prev) => !prev)}
title="Copy DM link" className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
copy={`${location.origin}/${gameData.dmID}`} >
tooltip={`${location.origin}/${gameData.dmID}`} <div
className="flex flex-row content-between w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow" className={`fixed top-4 right-4 flex flex-col items-center justify-center text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[300px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
/> >
<CopyButton <CopyButton
title="Copy Spectator link" title="Copy DM link"
copy={`${location.origin}/${gameData.spectatorID}`} copy={`${location.origin}/${gameData.dmID}`}
tooltip={`${location.origin}/${gameData.spectatorID}`} tooltip={`${location.origin}/${gameData.dmID}`}
className="flex flex-row content-between w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow" className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
/> />
<Permissions /> <CopyButton
<CardStyle /> title="Copy Spectator link"
</div> copy={`${location.origin}/${gameData.spectatorID}`}
</Scrim> tooltip={`${location.origin}/${gameData.spectatorID}`}
) : ( className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
<div className="fixed top-4 right-4 z-50"> />
<Permissions />
<CardStyle />
</div>
</Scrim>
<button <button
className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer" className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)} onClick={() => setOpen((prev) => !prev)}
> >
<Gear className="w-5 h-5" /> <Gear className="w-5 h-5" />