more refactoring

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;
 }