diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx index 7d88390..9ea32ba 100644 --- a/frontend/src/components/GameCard.tsx +++ b/frontend/src/components/GameCard.tsx @@ -1,9 +1,20 @@ +import { useState } from "react"; import { Link } from "react-router-dom"; import { Game } from "../api/games"; export default function GameCard({ game }: { game: Game }) { const created = new Date(game.created_at).toLocaleString("de-DE"); + const [copied, setCopied] = useState(false); + + async function handleCopyLink(e: React.MouseEvent) { + e.preventDefault(); + e.stopPropagation(); + const link = `${window.location.origin}/games/${game.id}?code=${game.participation_code}`; + await navigator.clipboard.writeText(link); + setCopied(true); + setTimeout(() => setCopied(false), 1500); + } return ( )} {game.participation_code && ( - + + + {copied && Kopiert!} + )}
{game.description}
diff --git a/frontend/src/pages/GameSession.tsx b/frontend/src/pages/GameSession.tsx index 35d69b0..47961ee 100644 --- a/frontend/src/pages/GameSession.tsx +++ b/frontend/src/pages/GameSession.tsx @@ -1,5 +1,5 @@ import { FormEvent, useEffect, useState } from "react"; -import { Link, useParams } from "react-router-dom"; +import { Link, useParams, useSearchParams } from "react-router-dom"; import { listCharacters, Character } from "../api/characters"; import { Game, getFullMessages, getGame, getRecentMessages, joinGame, Message } from "../api/games"; @@ -9,6 +9,7 @@ import { useGameSocket } from "../hooks/useGameSocket"; export default function GameSession() { const { gameId } = useParams<{ gameId: string }>(); + const [searchParams] = useSearchParams(); const [game, setGame] = useState