reanimate Switches

app/[gameID]/page.tsx

@@ -7,7 +7,7 @@ import { useAppContext } from '@/app/AppContext';
 import CardSelect from '@/components/CardSelect';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
-import Settings from '@/components/Settings';
+import Settings from '@/components/Settings/index';
 import { SpectatorLink } from '@/components/SpectatorLink';
 import TarokkaGrid from '@/components/TarokkaGrid';
 

components/Settings.tsx

@@ -1,144 +0,0 @@
-'use client';
-
-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 { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
-import type { CardStyle, LocalSettings } from '@/types';
-
-const cinzel = Cinzel_Decorative({
-	variable: '--font-cinzel',
-	subsets: ['latin'],
-	weight: '400',
-});
-
-const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
-
-export default function Settings() {
-	const [open, setOpen] = useState(false);
-	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
-
-	const togglePermission = (key: keyof LocalSettings) => {
-		if (LOCAL_SETTINGS.includes(key)) {
-			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
-		} else if (isDM) {
-			emitSettings({
-				...gameData,
-				settings: {
-					...gameData.settings,
-					[key]: !gameData.settings[key],
-				},
-			});
-		}
-	};
-
-	const tuneRadio = (cardStyle: CardStyle) => {
-		emitSettings({
-			...gameData,
-			settings: {
-				...gameData.settings,
-				cardStyle,
-			},
-		});
-	};
-
-	const Icon = () => (
-		<button
-			className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
-			onClick={() => setOpen((prev) => !prev)}
-		>
-			<Gear className="w-5 h-5" />
-		</button>
-	);
-
-	const Links = () => (
-		<>
-			{isDM && (
-				<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-slate-700 hover:bg-slate-600 hover:text-yellow-300 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-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
-			/>
-		</>
-	);
-
-	const Permissions = () => (
-		<>
-			{Object.entries(settings)
-				.filter(([_key, value]) => typeof value === 'boolean')
-				.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
-				.map(([key, value]) => (
-					<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
-				))}
-		</>
-	);
-
-	const CardStyle = () =>
-		isDM ? (
-			<fieldset className="flex flex-col w-full">
-				<div className="text-xs my-1">Card style:</div>
-				<div className="inline-flex overflow-hidden rounded-md w-full">
-					{cardStyleOptions.map((option, index) => (
-						<label
-							key={option}
-							className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
-                    ${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
-                    ${index === 0 ? 'rounded-l-md' : ''}
-                    ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
-                    ${index !== 0 && 'border-l border-gray-600'}
-                    border border-yellow-500 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
-                  `}
-						>
-							<input
-								type="radio"
-								name="cardStyle"
-								value={option}
-								checked={settings.cardStyle === option}
-								onChange={() => tuneRadio(option)}
-								className="sr-only"
-							/>
-							{option}
-						</label>
-					))}
-				</div>
-			</fieldset>
-		) : null;
-
-	return (
-		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
-			<Scrim
-				clickAction={() => 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-evenly bg-slate-800 text-yellow-400 rounded-lg border border-yellow-400 py-3 px-4 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[350px]' : 'opacity-0 w-0 h-0'}`}
-				>
-					<Links />
-					<Permissions />
-					<CardStyle />
-					<span className="w-full flex flex-row justify-evenly">
-						<GitHubButton className="h-[35px] w-[125px]" />
-						<BuyMeACoffee className="h-[35px] w-[125px]" />
-					</span>
-				</div>
-			</Scrim>
-			<Icon />
-		</div>
-	);
-}

components/Settings/CardStyle.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import type { CardStyle } from '@/types';
+
+const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
+
+export default function CardStyle() {
+	const { gameData, isDM, settings, emitSettings } = useAppContext();
+
+	const tuneRadio = (cardStyle: CardStyle) => {
+		emitSettings({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				cardStyle,
+			},
+		});
+	};
+
+	return isDM ? (
+		<fieldset className="flex flex-col w-full">
+			<div className="text-xs my-1">Card style:</div>
+			<div className="inline-flex overflow-hidden rounded-md w-full">
+				{cardStyleOptions.map((option, index) => (
+					<label
+						key={option}
+						className={`
+							cursor-pointer
+							w-full px-4 py-2
+							text-sm font-medium
+							border border-yellow-500
+							flex justify-center items-center
+							transition hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
+							${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
+							${index === 0 ? 'rounded-l-md' : ''}
+							${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
+							${index !== 0 && 'border-l border-gray-600'}
+						`}
+					>
+						<input
+							type="radio"
+							name="cardStyle"
+							value={option}
+							checked={settings.cardStyle === option}
+							onChange={() => tuneRadio(option)}
+							className="sr-only"
+						/>
+						{option}
+					</label>
+				))}
+			</div>
+		</fieldset>
+	) : null;
+}

components/Settings/ExternalLinks.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import BuyMeACoffee from '@/components/BuyMeACoffee';
+import GitHubButton from '@/components/GitHubButton';
+
+export default function CardStyle() {
+	const { isDM } = useAppContext();
+
+	return (
+		<span className={`w-full flex flex-row ${isDM ? 'justify-evenly' : 'justify-between'}`}>
+			<GitHubButton className="h-[35px] w-[125px]" />
+			<BuyMeACoffee className="h-[35px] w-[125px]" />
+		</span>
+	);
+}

components/Settings/GameLinks.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import CopyButton from '@/components/CopyButton';
+
+export default function Links() {
+	const { gameData, isDM } = useAppContext();
+
+	return (
+		<>
+			{isDM && (
+				<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-slate-700 hover:bg-slate-600 hover:text-yellow-300 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-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
+			/>
+		</>
+	);
+}

components/Settings/Permissions.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import Switch from '@/components/Switch';
+import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
+
+export default function Permissions() {
+	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
+
+	const togglePermission = (key: string) => {
+		if (LOCAL_SETTINGS.includes(key)) {
+			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+		} else if (isDM) {
+			emitSettings({
+				...gameData,
+				settings: {
+					...gameData.settings,
+					[key]: !gameData.settings[key],
+				},
+			});
+		}
+	};
+
+	return (
+		<>
+			{Object.entries(settings)
+				.filter(([_key, value]) => typeof value === 'boolean')
+				.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
+				.map(([key, value]) => (
+					<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
+				))}
+		</>
+	);
+}

components/Settings/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { Settings as Gear } from 'lucide-react';
+import { Cinzel_Decorative } from 'next/font/google';
+
+import { useAppContext } from '@/app/AppContext';
+import Scrim from '@/components/Scrim';
+
+import CardStyle from './CardStyle';
+import ExternalLinks from './ExternalLinks';
+import GameLinks from './GameLinks';
+import Permissions from './Permissions';
+
+const cinzel = Cinzel_Decorative({
+	variable: '--font-cinzel',
+	subsets: ['latin'],
+	weight: '400',
+});
+
+export default function Settings() {
+	const [open, setOpen] = useState(false);
+	const { isDM } = useAppContext();
+
+	return (
+		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
+			<Scrim
+				clickAction={() => 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-evenly
+						bg-slate-800 text-yellow-400
+						rounded-lg border border-yellow-400
+						h-full py-3 px-4
+						transition-all duration-250
+						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[175px]'}` : 'opacity-0 w-0 max-h-0'}
+					`}
+				>
+					<GameLinks />
+					<Permissions />
+					<CardStyle />
+					<ExternalLinks />
+				</div>
+			</Scrim>
+			<button
+				className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
+				onClick={() => setOpen((prev) => !prev)}
+			>
+				<Gear className="w-5 h-5" />
+			</button>
+		</div>
+	);
+}

components/Switch.tsx

@@ -1,25 +1,41 @@
+import type { ChangeEventHandler } from 'react';
+
 export interface SwitchProps {
 	label: string;
 	value: boolean;
-	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	toggleAction: ChangeEventHandler<HTMLInputElement>;
 }
 
+const nonInitialCaps = /(?!^)([A-Z])/g;
+
 export default function Switch({ label, value, toggleAction }: SwitchProps) {
 	return (
 		<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
-			<span className="text-sm capitalize">{label}</span>
+			<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
-				<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
+				<input
-				<div
+					id={`switch-${label}`}
-					className={`block w-8 h-4 rounded-full transition ${
+					type="checkbox"
-						value ? 'bg-slate-500' : 'bg-slate-600'
+					checked={value}
-					}`}
+					onChange={toggleAction}
+					className="sr-only peer"
 				/>
 				<div
-					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
+					className={`
-            ${value ? 'translate-x-4 scale-110' : 'scale-95'}
+						block w-8 h-4 rounded-full
-            ${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
+						transition-colors duration-200 ease-in
+						bg-slate-600 peer-checked:bg-slate-500
+					`}
+				/>
+				<div
+					className={`
+						absolute top-[2px] left-[2px]
+						w-3 h-3 rounded-full
+						transition-all duration-250 ease-out
+						translate-x-0 scale-95 bg-yellow-500
+						peer-checked:translate-x-4 peer-checked:scale-110 peer-checked:bg-yellow-400
+					`}
 				/>
 			</div>
 		</label>

hooks/useSocket.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { socket } from '@/socket';
 import type { GameUpdate, Tilt } from '@/types';
 
@@ -9,11 +9,15 @@ interface UseSocketProps {
 }
 
 export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps) {
+	const [connect, setConnect] = useState(1);
+	const [disconnected, setDisconnected] = useState(true);
+
 	useEffect(() => {
 		if (gameID) {
 			socket.emit('join', gameID);
 
 			socket.on('init', (data: GameUpdate) => {
+				setDisconnected(false);
 				setGameData(data);
 			});
 
@@ -31,14 +35,20 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 			socket.on('flip-error', (error) => {
 				console.error('Error:', error);
 			});
+
+			socket.on('disconnect', () => {
+				setDisconnected(true);
+			});
 		}
 
 		return () => {
 			socket.removeAllListeners();
 		};
-	}, [gameID]);
+	}, [gameID, connect]);
 
 	const emitFlip = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
@@ -46,6 +56,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitSettings = (gameData: GameUpdate) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('settings', {
 			gameID,
 			gameData,
@@ -53,6 +65,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitRedraw = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
@@ -60,6 +74,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitSelect = (cardIndex: number, cardID: string) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('select', {
 			gameID,
 			cardIndex,
@@ -68,6 +84,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitTilt = (cardIndex: number, tilt: Tilt) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('tilt', {
 			cardIndex,
 			tilt,