From ed6fef5ef16ebd0204e2f4f8f6d07898ad6fb158 Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Thu, 3 Jul 2025 09:11:30 -0400 Subject: [PATCH] reanimate Switches --- app/[gameID]/page.tsx | 2 +- components/Settings.tsx | 152 -------------------------- components/Settings/CardStyle.tsx | 55 ++++++++++ components/Settings/ExternalLinks.tsx | 16 +++ components/Settings/GameLinks.tsx | 27 +++++ components/Settings/Permissions.tsx | 34 ++++++ components/Settings/index.tsx | 56 ++++++++++ components/Switch.tsx | 36 ++++-- 8 files changed, 215 insertions(+), 163 deletions(-) delete mode 100644 components/Settings.tsx create mode 100644 components/Settings/CardStyle.tsx create mode 100644 components/Settings/ExternalLinks.tsx create mode 100644 components/Settings/GameLinks.tsx create mode 100644 components/Settings/Permissions.tsx create mode 100644 components/Settings/index.tsx diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx index 1219b3d..d873fda 100644 --- a/app/[gameID]/page.tsx +++ b/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'; diff --git a/components/Settings.tsx b/components/Settings.tsx deleted file mode 100644 index 2cb699b..0000000 --- a/components/Settings.tsx +++ /dev/null @@ -1,152 +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 = () => ( - - ); - - const Links = () => ( - <> - {isDM && ( - - )} - - - ); - - const Permissions = () => ( - <> - {Object.entries(settings) - .filter(([_key, value]) => typeof value === 'boolean') - .filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key)) - .map(([key, value]) => ( - togglePermission(key)} /> - ))} - - ); - - const CardStyle = () => - isDM ? ( -
-
Card style:
-
- {cardStyleOptions.map((option, index) => ( - - ))} -
-
- ) : null; - - return ( -
- setOpen((prev) => !prev)} - className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} - > -
- - - - - - - -
- - -
- ); -} diff --git a/components/Settings/CardStyle.tsx b/components/Settings/CardStyle.tsx new file mode 100644 index 0000000..88d0fe9 --- /dev/null +++ b/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 ? ( +
+
Card style:
+
+ {cardStyleOptions.map((option, index) => ( + + ))} +
+
+ ) : null; +} diff --git a/components/Settings/ExternalLinks.tsx b/components/Settings/ExternalLinks.tsx new file mode 100644 index 0000000..d5aecf1 --- /dev/null +++ b/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 ( + + + + + ); +} diff --git a/components/Settings/GameLinks.tsx b/components/Settings/GameLinks.tsx new file mode 100644 index 0000000..a2d9d9d --- /dev/null +++ b/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 && ( + + )} + + + ); +} diff --git a/components/Settings/Permissions.tsx b/components/Settings/Permissions.tsx new file mode 100644 index 0000000..a95a1a5 --- /dev/null +++ b/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]) => ( + togglePermission(key)} /> + ))} + + ); +} diff --git a/components/Settings/index.tsx b/components/Settings/index.tsx new file mode 100644 index 0000000..6cc8903 --- /dev/null +++ b/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 ( +
+ setOpen((prev) => !prev)} + className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} + > +
+ + + + +
+ + +
+ ); +} diff --git a/components/Switch.tsx b/components/Switch.tsx index 0931631..f43d140 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -1,25 +1,41 @@ +import type { ChangeEventHandler } from 'react'; + export interface SwitchProps { label: string; value: boolean; - toggleAction: (event: React.ChangeEvent) => void; + toggleAction: ChangeEventHandler; } +const nonInitialCaps = /(?!^)([A-Z])/g; + export default function Switch({ label, value, toggleAction }: SwitchProps) { return (