From 1a4789af4c484ffd0afab54394c64540e3abc735 Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Thu, 24 Apr 2025 11:24:15 -0400
Subject: [PATCH] animate Settings and Notes

---
 app/[gameID]/page.tsx     |  2 +-
 components/CopyButton.tsx |  2 +-
 components/Notes.tsx      | 85 ++++++++++++++++++---------------------
 components/Settings.tsx   | 50 ++++++++++++-----------
 4 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
index c69c71e..d7709da 100644
--- a/app/[gameID]/page.tsx
+++ b/app/[gameID]/page.tsx
@@ -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;
 }
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 144c949..6d75865 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -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}
diff --git a/components/Notes.tsx b/components/Notes.tsx
index ee659a0..bd06aea 100644
--- a/components/Notes.tsx
+++ b/components/Notes.tsx
@@ -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;
+	);
 }
diff --git a/components/Settings.tsx b/components/Settings.tsx
index 4d604d4..dcb5329 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -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" />