diff --git a/src/components/PairCards.css b/src/components/PairCards.css index 66593de..5627b8f 100644 --- a/src/components/PairCards.css +++ b/src/components/PairCards.css @@ -215,6 +215,12 @@ flex: 1; } +/* Clickable sentence — tap to play audio */ +.pair-sentence-clickable { + cursor: pointer; + user-select: none; +} + /* Word chips inside sentences — underline italic style */ .pair-word-chip { display: inline; diff --git a/src/components/PairSentenceCard.jsx b/src/components/PairSentenceCard.jsx index 770edff..95e4270 100644 --- a/src/components/PairSentenceCard.jsx +++ b/src/components/PairSentenceCard.jsx @@ -1,5 +1,6 @@ import { useState, useRef } from 'react' import confetti from 'canvas-confetti' +import usePairAudio from '../hooks/usePairAudio' import './PairCards.css' function triggerConfetti() { @@ -112,6 +113,8 @@ export default function PairSentenceCard({ card, onComplete }) { const hint = stmt?.[`sentence_${native}`] || null const pic = card.picture?.url + const { play, playing } = usePairAudio(stmt?.audio_url) + const isWord = activeChip && activeChip.type === 'word' const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length @@ -129,7 +132,9 @@ export default function PairSentenceCard({ card, onComplete }) { setTimeout(() => onComplete('correct'), 900) } - function handleTTS() { + function handlePlay() { + if (play()) { setUnlocked(true); return } + // Fallback: Browser-TTS, falls kein Audio-File vorhanden if (!window.speechSynthesis || !sentence) return window.speechSynthesis.cancel() const utt = new SpeechSynthesisUtterance(toPlainText(sentence)) @@ -178,7 +183,8 @@ export default function PairSentenceCard({ card, onComplete }) {
+
{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
{hint && ( @@ -196,8 +202,8 @@ export default function PairSentenceCard({ card, onComplete }) {