diff --git a/components/Game.tsx b/components/Game.tsx index 466e88a..bc5b69e 100644 --- a/components/Game.tsx +++ b/components/Game.tsx @@ -28,7 +28,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max const { gameState, statistics, addGuess } = useGameState(genre, maxAttempts); const [hasWon, setHasWon] = useState(false); const [hasLost, setHasLost] = useState(false); - const [shareText, setShareText] = useState('Share Result'); + const [shareText, setShareText] = useState('🔗 Share'); const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null); const [isProcessingGuess, setIsProcessingGuess] = useState(false); @@ -89,7 +89,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max const unlockedSeconds = unlockSteps[Math.min(gameState.guesses.length, unlockSteps.length - 1)]; - const handleShare = () => { + const handleShare = async () => { let emojiGrid = ''; const totalGuesses = maxAttempts; @@ -124,24 +124,33 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max const text = `Hördle #${dailyPuzzle.id}\n${genreText}\n${speaker}${emojiGrid}\n\n#Hördle #Music\n\n${shareUrl}`; - // Fallback method for copying to clipboard - const textarea = document.createElement('textarea'); - textarea.value = text; - textarea.style.position = 'fixed'; - textarea.style.opacity = '0'; - document.body.appendChild(textarea); - textarea.select(); + // Try native Web Share API first (mobile-friendly) + if (navigator.share) { + try { + await navigator.share({ + title: `Hördle #${dailyPuzzle.id}`, + text: text, + }); + setShareText('✓ Shared!'); + setTimeout(() => setShareText('🔗 Share'), 2000); + return; + } catch (err) { + // User cancelled or error - fall through to clipboard + if ((err as Error).name !== 'AbortError') { + console.error('Share failed:', err); + } + } + } + // Fallback: Copy to clipboard try { - document.execCommand('copy'); - setShareText('Copied!'); - setTimeout(() => setShareText('Share Result'), 2000); + await navigator.clipboard.writeText(text); + setShareText('✓ Copied!'); + setTimeout(() => setShareText('🔗 Share'), 2000); } catch (err) { - console.error('Failed to copy:', err); - setShareText('Copy failed'); - setTimeout(() => setShareText('Share Result'), 2000); - } finally { - document.body.removeChild(textarea); + console.error('Clipboard failed:', err); + setShareText('✗ Failed'); + setTimeout(() => setShareText('🔗 Share'), 2000); } };