more refactoring

components/CardSelect.tsx

@@ -1,41 +1,36 @@
 'use client';
 
 import { CircleX } from 'lucide-react';
+import { useAppContext } from '@/app/AppContext';
 import TarokkaDeck from '@/lib/TarokkaDeck';
 import getURL from '@/tools/getURL';
 
-import { Deck, Settings, TarokkaGameCard } from '@/types';
+import { Deck } from '@/types';
 
 const tarokkaDeck = new TarokkaDeck();
 
 type CardSelectProps = {
-	closeAction: () => void;
-	selectAction: (cardID: string) => void;
-	hand: TarokkaGameCard[];
-	settings: Settings;
-	show: Deck | null;
 	className?: string;
 };
 
-export default function CardSelect({
-	closeAction,
-	selectAction,
-	hand,
-	settings,
-	show,
-	className = '',
-}: CardSelectProps) {
+export default function CardSelect({ className = '' }: CardSelectProps) {
+	const { gameData, select, selectCardIndex, setSelectCardIndex } = useAppContext();
+	const { cards: hand, settings } = gameData;
+
 	const handIDs = hand.map(({ id }) => id);
+	const selectDeck: Deck | null = selectCardIndex >= 0 ? hand[selectCardIndex].deck : null;
+
+	const close = () => setSelectCardIndex(-1);
 
 	const handleClose = (event: React.MouseEvent<HTMLElement>) => {
 		if (event.target === event.currentTarget) {
-			closeAction();
+			close();
 		}
 	};
 
-	if (!show) return null;
+	if (!selectDeck) return null;
 
-	const cards = show === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
+	const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
 
 	return (
 		<div
@@ -44,7 +39,7 @@ export default function CardSelect({
 		>
 			<button
 				className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
-				onClick={closeAction}
+				onClick={close}
 			>
 				<CircleX className="w-6 h-6" />
 			</button>
@@ -58,7 +53,7 @@ export default function CardSelect({
 						<div
 							key={card.id}
 							className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
-							onClick={() => selectAction(card.id)}
+							onClick={() => select(card.id)}
 						>
 							<img
 								src={getURL(card, settings)}

components/Notes.tsx

@@ -3,20 +3,18 @@
 import { useMemo, useState } from 'react';
 import { ScrollText } from 'lucide-react';
 
+import { useAppContext } from '@/app/AppContext';
 import CopyButton from '@/components/CopyButton';
 import Scrim from '@/components/Scrim';
 import getCardInfo from '@/tools/getCardInfo';
 import { cardMap, layout } from '@/constants/tarokka';
 
-import { GameUpdate } from '@/types';
+export default function Notes() {
+	const { gameData } = useAppContext();
+	const { dmID, cards, settings } = gameData;
 
-type NotesProps = {
-	gameData: GameUpdate;
-	show: boolean;
-};
-
-export default function Notes({ gameData: { dmID, cards, settings }, show }: NotesProps) {
 	const isDM = !!dmID;
+	const show = cards.every(({ flipped }) => flipped);
 
 	const [open, setOpen] = useState(false);
 

components/Settings.tsx

@@ -4,12 +4,13 @@ import { useState } from 'react';
 import { Settings as Gear } from 'lucide-react';
 import { Cinzel_Decorative } from 'next/font/google';
 
+import { useAppContext } from '@/app/AppContext';
 import BuyMeACoffee from '@/components/BuyMeACoffee';
 import CopyButton from '@/components/CopyButton';
 import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
-import { CardStyle, GameUpdate } from '@/types';
+import { CardStyle } from '@/types';
 
 const cinzel = Cinzel_Decorative({
 	variable: '--font-cinzel',
@@ -17,18 +18,17 @@ const cinzel = Cinzel_Decorative({
 	weight: '400',
 });
 
-type SettingsProps = {
-	gameData: GameUpdate;
-	changeAction: (updatedSettings: GameUpdate) => void;
-};
-
 const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
 
-export default function Settings({ gameData, changeAction }: SettingsProps) {
+export default function Settings() {
 	const [open, setOpen] = useState(false);
+	const { gameData, handleSettings } = useAppContext();
+
+	const { dmID } = gameData;
+	const isDM = !!dmID;
 
 	const togglePermission = (key: string) => {
-		changeAction({
+		handleSettings({
 			...gameData,
 			settings: {
 				...gameData.settings,
@@ -38,7 +38,7 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 	};
 
 	const tuneRadio = (cardStyle: CardStyle) => {
-		changeAction({
+		handleSettings({
 			...gameData,
 			settings: {
 				...gameData.settings,
@@ -104,7 +104,7 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 		</fieldset>
 	);
 
-	return (
+	return isDM ? (
 		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
 			<Scrim
 				clickAction={() => setOpen((prev) => !prev)}
@@ -129,5 +129,5 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 				<Gear className="w-5 h-5" />
 			</button>
 		</div>
-	);
+	) : null;
 }

components/SpectatorLink.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { Eye } from 'lucide-react';
+import { useAppContext } from '@/app/AppContext';
+import CopyButton from '@/components/CopyButton';
+
+export function SpectatorLink() {
+	const { gameData } = useAppContext();
+
+	return (
+		<CopyButton
+			copy={`${location.origin}/${gameData.spectatorID}`}
+			tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
+			Icon={Eye}
+			className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
+			size={24}
+		/>
+	);
+}