elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve share button: mobile-friendly Web Share API, icon button, fallback clipboard

Browse Source
This commit is contained in:
Hördle Bot
2025-11-22 19:39:32 +01:00
parent 328c8fe98a
commit 58e9b4fa60
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/Game.tsx
View File

@@ -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);
}
};