adjustable settings

components/Card.tsx

@@ -1,11 +1,10 @@
 'use client';
-import { useRef, useState } from 'react';
 
 import ToolTip from '@/components/ToolTip';
 import tarokkaCards from '@/constants/tarokkaCards';
 import getCardInfo from '@/tools/getCardInfo';
 
-import { Layout, TarokkaGameCard } from '@/types';
+import { Layout, Settings, TarokkaGameCard } from '@/types';
 
 const cardBack = tarokkaCards.find((card) => card.back)!;
 
@@ -13,11 +12,12 @@ type CardProps = {
 	dm: boolean;
 	card: TarokkaGameCard;
 	position: Layout;
+	settings: Settings;
 	flipAction: () => void;
 };
 
-export default function Card({ dm, card, position, flipAction }: CardProps) {
-	const { aria, card: cardName, description, flipped, url } = card;
+export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
+	const { aria, flipped, url } = card;
 
 	const handleClick = () => {
 		if (dm) {
@@ -26,9 +26,9 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 	};
 
 	const getTooltip = () => {
-		const text = getCardInfo(card, position, dm);
+		const text = getCardInfo(card, position, dm, settings);
 
-		return (
+		return text.length ? (
 			<>
 				{text.map((t, i) => (
 					<div key={i}>
@@ -37,7 +37,7 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 					</div>
 				))}
 			</>
-		);
+		) : null;
 	};
 
 	return (
@@ -50,11 +50,7 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
 				>
 					<div className="absolute group inset-0 backface-hidden">
-						<img
-							src={cardBack.url}
-							alt="Card Back"
-							className="rounded-xl rounded border border-gray-500 "
-						/>
+						<img src={cardBack.url} alt="Card Back" className="rounded-lg border border-gray-500" />
 					</div>
 					<div className="absolute group inset-0 backface-hidden rotate-y-180">
 						<img src={url} alt={aria} className="rounded-xl rounded border border-gray-500 " />

components/CopyButton.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { Copy as CopyIcon } from 'lucide-react';
 
+import ToolTip from '@/components/ToolTip';
+
 type CopyButtonProps = {
 	title: string;
 	copy: string;
@@ -22,15 +24,16 @@ export default function CopyButton({ title, copy }: CopyButtonProps) {
 	};
 
 	return (
-		<button
-			onClick={handleCopy}
-			className="px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-xl flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
-		>
-			<div className="flex items-center gap-2 w-full text-sm font-medium">
-				{`${copied ? 'Copied' : 'Copy'} ${title}`}
-				<CopyIcon className="ml-auto" size={16} />
-			</div>
-			<div className="text-xs font-mono opacity-80 break-all">{copy}</div>
-		</button>
+		<ToolTip content={copy}>
+			<button
+				onClick={handleCopy}
+				className="w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
+			>
+				<div className="flex items-center gap-2 w-full text-sm font-medium">
+					{`${copied ? 'Copied' : 'Copy'} ${title}`}
+					<CopyIcon className="ml-auto" size={16} />
+				</div>
+			</button>
+		</ToolTip>
 	);
 }

components/Settings.tsx

@@ -1,41 +1,56 @@
 'use client';
 
 import { useState } from 'react';
-import { Settings as Gear } from 'lucide-react';
+import { Settings as Gear, X } from 'lucide-react';
 
-import { Settings } from '@/types';
+import CopyButton from '@/components/CopyButton';
+import Switch from '@/components/Switch';
+import { GameUpdate } from '@/types';
 
 type PermissionTogglePanelProps = {
-	settings: Settings;
-	changeAction: (updatedSettings: Settings) => void;
+	gameData: GameUpdate;
+	changeAction: (updatedSettings: GameUpdate) => void;
 };
 
 export default function PermissionTogglePanel({
-	settings,
+	gameData,
 	changeAction,
 }: PermissionTogglePanelProps) {
 	const [open, setOpen] = useState(false);
 
 	const togglePermission = (key: string) => {
-		changeAction({ ...settings, [key]: !settings[key] });
+		changeAction({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				[key]: !gameData.settings[key],
+			},
+		});
 	};
 
 	return (
 		<div className="fixed top-4 right-4 z-50">
-			<button
-				className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 shadow"
-				onClick={() => setOpen((prev) => !prev)}
-			>
-				<Gear className="w-5 h-5" />
-			</button>
+			{!open && (
+				<button
+					className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer"
+					onClick={() => setOpen((prev) => !prev)}
+				>
+					<Gear className="w-5 h-5" />
+				</button>
+			)}
 
 			{open && (
-				<div className="mt-2 bg-white border border-gray-300 shadow-lg rounded p-4 space-y-2">
-					{Object.entries(settings).map(([key, value]) => (
-						<label key={key} className="flex items-center justify-between">
-							<span className="text-sm capitalize">{key}</span>
-							<input type="checkbox" checked={value} onChange={() => togglePermission(key)} />
-						</label>
+				<div className="relative text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2">
+					<button
+						className="absolute top-1 right-1 p-1 hover:text-gray-300 cursor-pointer"
+						onClick={() => setOpen((prev) => !prev)}
+					>
+						<X className="w-4 h-4" />
+					</button>
+					<CopyButton title="DM link" copy={`${location.origin}/${gameData.dmID}`} />
+					<CopyButton title="Spectator link" copy={`${location.origin}/${gameData.spectatorID}`} />
+					{Object.entries(gameData.settings).map(([key, value]) => (
+						<Switch label={key} value={value} toggleAction={() => togglePermission(key)} />
 					))}
 				</div>
 			)}

components/Switch.tsx

@@ -0,0 +1,27 @@
+export interface SwitchProps {
+	label: string;
+	value: boolean;
+	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function Switch({ label, value, toggleAction }: SwitchProps) {
+	return (
+		<label className="flex items-center justify-between w-full gap-2 cursor-pointer">
+			<span className="text-sm capitalize">{label}</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" />
+				<div
+					className={`block w-8 h-4 rounded-full transition ${
+						value ? 'bg-gray-500' : 'bg-gray-600'
+					}`}
+				/>
+				<div
+					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition ${
+						value ? 'translate-x-4' : ''
+					} ${value ? 'bg-gray-100' : 'bg-gray-400'}`}
+				/>
+			</div>
+		</label>
+	);
+}

components/ToolTip.tsx

@@ -68,7 +68,7 @@ export default function Tooltip({
 			</div>
 			<div
 				ref={ttRef}
-				className={`fixed w-[25vh] pointer-events-none z-50 text-xs bg-black text-white rounded border border-gray-300 px-2 py-1 transition-opacity duration-250 ${show ? 'opacity-100' : 'opacity-0'}`}
+				className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-black text-white rounded-xl border border-gray-300 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`}
 				style={{
 					top: `${pos.y + offsetY}px`,
 					left: `${pos.x + offsetX}px`,