setting to disable tilt

2025-07-01 09:21:41 -04:00
parent 1dbe6b7ec0
commit 6b3ab9a54e
6 changed files with 164 additions and 107 deletions
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -10,7 +10,9 @@ import CopyButton from '@/components/CopyButton';
 import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
-import { CardStyle } from '@/types';
+
+import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
+import type { CardStyle, LocalSettings } from '@/types';

 const cinzel = Cinzel_Decorative({
 	variable: '--font-cinzel',
@@ -22,19 +24,20 @@ const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];

 export default function Settings() {
 	const [open, setOpen] = useState(false);
-	const { gameData, emitSettings } = useAppContext();
+	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();

-	const { dmID } = gameData;
-	const isDM = !!dmID;
-
-	const togglePermission = (key: string) => {
-		emitSettings({
-			...gameData,
-			settings: {
-				...gameData.settings,
-				[key]: !gameData.settings[key],
-			},
-		});
+	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) => {
@@ -47,14 +50,25 @@ export default function Settings() {
 		});
 	};

+	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 = () => (
 		<>
-			<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"
-			/>
+			{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}`}
@@ -66,45 +80,47 @@ export default function Settings() {

 	const Permissions = () => (
 		<>
-			{Object.entries(gameData.settings)
+			{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 = () => (
-		<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
-                    ${gameData.settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
+	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={gameData.settings.cardStyle === option}
-							onChange={() => tuneRadio(option)}
-							className="sr-only"
-						/>
-						{option}
-					</label>
-				))}
-			</div>
-		</fieldset>
-	);
+						>
+							<input
+								type="radio"
+								name="cardStyle"
+								value={option}
+								checked={settings.cardStyle === option}
+								onChange={() => tuneRadio(option)}
+								className="sr-only"
+							/>
+							{option}
+						</label>
+					))}
+				</div>
+			</fieldset>
+		) : null;

-	return isDM ? (
+	return (
 		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
 			<Scrim
 				clickAction={() => setOpen((prev) => !prev)}
@@ -122,12 +138,7 @@ export default function Settings() {
 					</span>
 				</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>
+			<Icon />
 		</div>
-	) : null;
+	);
 }
--- a/components/TiltCard.tsx
+++ b/components/TiltCard.tsx
@@ -12,37 +12,45 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
-	const { gameData, setTilt } = useAppContext();
+	const {
+		gameData,
+		settings: { tilt },
+		setTilt,
+	} = useAppContext();

 	useEffect(() => {
 		const card = cardRef.current;
 		if (!card) return;

-		const tilt = gameData.tilts[cardIndex];
-		if (!tilt) {
-			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-			return;
+		if (tilt) {
+			const tilt = gameData.tilts[cardIndex];
+			if (!tilt) {
+				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				return;
+			}
+
+			const tilted = tilt.filter(({ rotateX, rotateY }) => rotateX || rotateY);
+
+			const { totalX, totalY } = tilted.reduce(
+				({ totalX, totalY }, { rotateX, rotateY }) => ({
+					totalX: totalX + rotateX,
+					totalY: totalY + rotateY,
+				}),
+				{ totalX: 0, totalY: 0 },
+			);
+
+			const rotateX = totalX / tilted.length;
+			const rotateY = totalY / tilted.length;
+
+			if (rotateX || rotateY) {
+				card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+			} else {
+				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+			}
+		} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
+			card.style.transform = 'rotateX(0deg) rotateY(0deg)';
 		}
-
-		const tilted = tilt.filter(({ rotateX, rotateY }) => rotateX || rotateY);
-
-		const { totalX, totalY } = tilted.reduce(
-			({ totalX, totalY }, { rotateX, rotateY }) => ({
-				totalX: totalX + rotateX,
-				totalY: totalY + rotateY,
-			}),
-			{ totalX: 0, totalY: 0 },
-		);
-
-		const rotateX = totalX / tilted.length;
-		const rotateY = totalY / tilted.length;
-
-		if (rotateX || rotateY) {
-			card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-		} else {
-			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-		}
-	}, [gameData]);
+	}, [tilt, gameData]);

 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;
@@ -68,7 +76,11 @@ export default function TiltCard({
 	};

 	return (
-		<div className={`${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+		<div
+			className={`${className}`}
+			onMouseMove={tilt ? handleMouseMove : undefined}
+			onMouseLeave={handleMouseLeave}
+		>
 			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
 				{children}
 			</div>