teletilt (#3)

- Context
- sync _tilts_ between participants
- shiny cards
- reconnect clients
- updates Settings
- re-animate Switches

Co-authored-by: Gavin McDonald <gavinmcdoh@gmail.com>
Reviewed-on: #3

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({ className }: { className?: string }) {
+	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 ${className}`}>
+			<div className="text-xs ml-1 mb-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
+							cursor-pointer
+							w-full px-3 py-2
+							text-xs font-medium
+							border border-yellow-500
+							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,13 @@
+'use client';
+
+import BuyMeACoffee from '@/components/BuyMeACoffee';
+import GitHubButton from '@/components/GitHubButton';
+
+export default function CardStyle({ className }: { className?: string }) {
+	return (
+		<span className={`w-full flex flex-row justify-between ${className}`}>
+			<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({ className }: { className?: string }) {
+	const { gameData, isDM } = useAppContext();
+
+	return (
+		<div className={`w-full flex flex-col justify-between gap-2 ${className}`}>
+			{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"
+			/>
+		</div>
+	);
+}

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,62 @@
+'use client';
+
+import { useState } from 'react';
+import { CircleX, 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-between
+						bg-slate-800 text-yellow-400
+						rounded-lg border border-yellow-400
+						h-full p-8
+						transition-all duration-250
+						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[425px]' : 'w-[325px] max-h-[200px]'}` : 'opacity-0 w-0 max-h-0'}
+					`}
+				>
+					<GameLinks />
+					<Permissions />
+					<CardStyle />
+					<ExternalLinks />
+				</div>
+				<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={() => setOpen((prev) => !prev)}
+				>
+					<CircleX className="w-5 h-5" />
+				</button>
+			</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`}
+				onClick={() => setOpen((prev) => !prev)}
+			>
+				<Gear className="w-5 h-5" />
+			</button>
+		</div>
+	);
+}