buttons to copy DM/Spectator links

app/[gameID]/page.tsx

@@ -5,15 +5,20 @@ import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
 
 import Card from '@/components/Card';
+import CopyButton from '@/components/CopyButton';
 import { cardMap, layout } from '@/constants/tarokka';
 
-import type { GameUpdate, ClientUpdate, TarokkaGameCard } from '@/types';
+import type { GameUpdate, ClientUpdate } from '@/types';
 
 export default function GamePage() {
 	const { gameID: gameIDParam } = useParams();
 
 	const [gameID, setGameID] = useState('');
-	const [cards, setCards] = useState<TarokkaGameCard[]>([]);
+	const [{ dmID, spectatorID, cards }, setGameData] = useState<GameUpdate>({
+		dmID: '',
+		spectatorID: '',
+		cards: [],
+	});
 
 	useEffect(() => {
 		if (gameIDParam) {
@@ -27,12 +32,12 @@ export default function GamePage() {
 
 			socket.on('init', (data: GameUpdate) => {
 				console.log('init', data);
-				setCards(data.cards);
+				setGameData(data);
 			});
 
 			socket.on('card-flipped', (data: GameUpdate) => {
 				console.log('>>>', data);
-				setCards(data.cards);
+				setGameData(data);
 			});
 		}
 
@@ -58,8 +63,14 @@ export default function GamePage() {
 	// high deck cards: bottom and center
 	const arrangeCards = (_cell: any, index: number) => cards[cardMap[index]];
 
-	return cards.length ? (
+	return cards ? (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
+			<div className="absolute top-4 left-4 flex flex-col gap-2">
+				{dmID && <CopyButton title="DM link" copy={`${location.origin}/${dmID}`} />}
+				{spectatorID && (
+					<CopyButton title="Spectator link" copy={`${location.origin}/${spectatorID}`} />
+				)}
+			</div>
 			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
 				{Array.from({ length: 9 })
 					.map(arrangeCards)

components/CopyButton.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy as CopyIcon } from 'lucide-react';
+
+type CopyButtonProps = {
+	title: string;
+	copy: string;
+};
+
+export default function CopyButton({ title, copy }: CopyButtonProps) {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(copy);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		} catch (err) {
+			console.error('Failed to copy!', err);
+		}
+	};
+
+	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>
+	);
+}

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.1.0",
 			"dependencies": {
 				"cross-env": "^7.0.3",
+				"lucide-react": "^0.488.0",
 				"next": "latest",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
@@ -4575,6 +4576,15 @@
 				"loose-envify": "cli.js"
 			}
 		},
+		"node_modules/lucide-react": {
+			"version": "0.488.0",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.488.0.tgz",
+			"integrity": "sha512-ronlL0MyKut4CEzBY/ai2ZpKPxyWO4jUqdAkm2GNK5Zn3Rj+swDz+3lvyAUXN0PNqPKIX6XM9Xadwz/skLs/pQ==",
+			"license": "ISC",
+			"peerDependencies": {
+				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/make-error": {
 			"version": "1.3.6",
 			"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",

package.json

@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"cross-env": "^7.0.3",
+		"lucide-react": "^0.488.0",
 		"next": "latest",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",