jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add share pin

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-16 10:05:08 -07:00
commit 1078ece85c
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
5 changed files with 318 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/Landing.tsx
View file

@ -67,6 +67,12 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
const [pin, setPin] = useState(initialPin || '');
const [name, setName] = useState('');
useEffect(() => {
if (initialPin) {
setPin(initialPin);
}
}, [initialPin]);
const modalParam = searchParams.get('modal');
const libraryOpen = modalParam === 'library';
const importOpen = modalParam === 'import';

30
components/Lobby.tsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import React, { useState } from 'react';
import { Player } from '../types';
import { motion, AnimatePresence } from 'framer-motion';
import { Sparkles, User, X } from 'lucide-react';
import { Sparkles, User, X, Link, Check } from 'lucide-react';
import { PlayerAvatar } from './PlayerAvatar';
import toast from 'react-hot-toast';
interface LobbyProps {
quizTitle: string;
@ -20,14 +21,35 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
const hostPlayer = players.find(p => p.id === 'host');
const realPlayers = players.filter(p => p.id !== 'host');
const currentPlayer = currentPlayerId ? players.find(p => p.id === currentPlayerId) : null;
const [linkCopied, setLinkCopied] = useState(false);
const copyJoinLink = async () => {
if (!gamePin) return;
const joinUrl = `${window.location.origin}/play/${gamePin}`;
await navigator.clipboard.writeText(joinUrl);
setLinkCopied(true);
toast.success('Join link copied!');
setTimeout(() => setLinkCopied(false), 2000);
};
return (
<div className="flex flex-col h-screen p-4 md:p-6 overflow-hidden">
<header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-4 md:p-6 rounded-2xl md:rounded-[2rem] backdrop-blur-md mb-4 md:mb-8 gap-3 md:gap-6 border-4 border-white/20 shadow-xl shrink-0">
<div className="flex flex-col items-center md:items-start">
<span className="text-white/80 font-bold uppercase tracking-widest text-xs md:text-sm mb-1">Game PIN</span>
<div className="text-4xl md:text-6xl font-black bg-white text-theme-primary px-6 md:px-8 py-1 md:py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
{gamePin}
<div className="flex items-center gap-2">
<div className="text-4xl md:text-6xl font-black bg-white text-theme-primary px-6 md:px-8 py-1 md:py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
{gamePin}
</div>
{isHost && (
<button
onClick={copyJoinLink}
className="bg-white/20 hover:bg-white/30 p-3 rounded-full transition-all active:scale-95"
title="Copy join link"
>
{linkCopied ? <Check size={24} className="text-green-400" /> : <Link size={24} />}
</button>
)}
</div>
</div>