animate Settings and Notes
This commit is contained in:
Gavin McDonald
@@ -106,7 +106,7 @@ export default function GamePage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{cards.every(({ flipped }) => flipped) && <Notes gameData={gameData} />}
|
||||
<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
|
||||
</main>
|
||||
) : null;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function CopyButton({
|
||||
Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip;
|
||||
|
||||
return (
|
||||
<button onClick={handleCopy} className={`transition-all cursor-pointer ${className}`}>
|
||||
<button onClick={handleCopy} className={`cursor-pointer ${className}`}>
|
||||
<ToolTip content={ttContent} className="w-full">
|
||||
<div className="flex items-center gap-2 w-full text-sm font-medium">
|
||||
{title}
|
||||
|
||||
@@ -12,27 +12,15 @@ import { GameUpdate } from '@/types';
|
||||
|
||||
type NotesProps = {
|
||||
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 [open, setOpen] = useState(false);
|
||||
|
||||
const gameDummy = {
|
||||
dmID: '',
|
||||
spectatorID: '',
|
||||
cards: [],
|
||||
settings: {
|
||||
positionBack: false,
|
||||
positionFront: false,
|
||||
prophecy: false,
|
||||
notes: false,
|
||||
cardStyle: 'color',
|
||||
},
|
||||
};
|
||||
|
||||
const notes = useMemo(
|
||||
const notes: (string[] | undefined)[] = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 9 })
|
||||
.map((_cell: unknown, index: number) => cards[cardMap[index]])
|
||||
@@ -47,39 +35,44 @@ export default function Notes({ gameData: { dmID, cards, settings } }: NotesProp
|
||||
[settings],
|
||||
);
|
||||
|
||||
return 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>
|
||||
)}
|
||||
const showNotes = show && open && (isDM || settings.notes);
|
||||
|
||||
{open && (
|
||||
<Scrim onClick={() => setOpen((prev) => !prev)}>
|
||||
<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">
|
||||
<CopyButton
|
||||
copy={notes.map((note) => note!.join('\n')).join('\n\n')}
|
||||
className="absolute top-2 right-2 p-2 bg-black/30 hover:bg-black/50 rounded-full text-gray-200 hover:text-white"
|
||||
/>
|
||||
<div className="h-full overflow-scroll p-6">
|
||||
{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-gray-300" />}
|
||||
return (
|
||||
<div
|
||||
className={`fixed bottom-4 right-4 z-50 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
|
||||
>
|
||||
<button
|
||||
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)}
|
||||
>
|
||||
<ScrollText className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<Scrim
|
||||
onClick={() => 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 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>
|
||||
</Scrim>
|
||||
)}
|
||||
</div>
|
||||
</Scrim>
|
||||
</div>
|
||||
) : null;
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
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 Scrim from '@/components/Scrim';
|
||||
@@ -78,29 +78,33 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
|
||||
</fieldset>
|
||||
);
|
||||
|
||||
return open ? (
|
||||
<Scrim onClick={() => setOpen((prev) => !prev)}>
|
||||
<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">
|
||||
<CopyButton
|
||||
title="Copy DM link"
|
||||
copy={`${location.origin}/${gameData.dmID}`}
|
||||
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"
|
||||
/>
|
||||
<CopyButton
|
||||
title="Copy Spectator link"
|
||||
copy={`${location.origin}/${gameData.spectatorID}`}
|
||||
tooltip={`${location.origin}/${gameData.spectatorID}`}
|
||||
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"
|
||||
/>
|
||||
<Permissions />
|
||||
<CardStyle />
|
||||
</div>
|
||||
</Scrim>
|
||||
) : (
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
return (
|
||||
<div className={`fixed top-4 right-4 z-50`}>
|
||||
<Scrim
|
||||
onClick={() => setOpen((prev) => !prev)}
|
||||
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
|
||||
>
|
||||
<div
|
||||
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
|
||||
title="Copy DM link"
|
||||
copy={`${location.origin}/${gameData.dmID}`}
|
||||
tooltip={`${location.origin}/${gameData.dmID}`}
|
||||
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"
|
||||
/>
|
||||
<CopyButton
|
||||
title="Copy Spectator link"
|
||||
copy={`${location.origin}/${gameData.spectatorID}`}
|
||||
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"
|
||||
/>
|
||||
<Permissions />
|
||||
<CardStyle />
|
||||
</div>
|
||||
</Scrim>
|
||||
<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)}
|
||||
>
|
||||
<Gear className="w-5 h-5" />
|
||||
|
||||
Reference in New Issue
Block a user