From 35afa28e448f0a6e51344a983cb239ce385a4452 Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Thu, 1 May 2025 18:31:37 -0400
Subject: [PATCH] a more-obvious spectator link

---
 app/[gameID]/page.tsx     | 14 +++++++++++++-
 components/CopyButton.tsx |  8 +++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
index d7709da..27ea591 100644
--- a/app/[gameID]/page.tsx
+++ b/app/[gameID]/page.tsx
@@ -3,11 +3,14 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
+import { Eye } from 'lucide-react';
 
-import Settings from '@/components/Settings';
 import Card from '@/components/Card';
+import CopyButton from '@/components/CopyButton';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
+import Settings from '@/components/Settings';
+
 import { cardMap, layout } from '@/constants/tarokka';
 
 import type { GameUpdate, ClientUpdate } from '@/types';
@@ -88,6 +91,15 @@ export default function GamePage() {
 		<NotFound />
 	) : cards ? (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
+			{isDM && (
+				<CopyButton
+					copy={`${location.origin}/${gameData.spectatorID}`}
+					tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
+					Icon={Eye}
+					className={`fixed top-4 left-4 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 cursor-pointer`}
+				/>
+			)}
+
 			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
 			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
 				{Array.from({ length: 9 })
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 0e59990..ec8b679 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -1,13 +1,14 @@
 'use client';
 
-import { useState } from 'react';
-import { Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
+import { ForwardRefExoticComponent, RefAttributes, useState } from 'react';
+import { LucideProps, Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
 
 import ToolTip from '@/components/ToolTip';
 
 type CopyButtonProps = {
 	title?: string;
 	copy: string;
+	Icon?: ForwardRefExoticComponent<Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>>;
 	tooltip?: string | string[];
 	className?: string;
 };
@@ -15,6 +16,7 @@ type CopyButtonProps = {
 export default function CopyButton({
 	title,
 	copy,
+	Icon = CopyIcon,
 	tooltip = ['Copy', 'Copied'],
 	className,
 }: CopyButtonProps) {
@@ -44,7 +46,7 @@ export default function CopyButton({
 					{copied ? (
 						<CheckIcon className="ml-auto" size={16} />
 					) : (
-						<CopyIcon className="ml-auto" size={16} />
+						<Icon className="ml-auto" size={16} />
 					)}
 				</div>
 			</ToolTip>