admin/app-hejyou
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: card redesign with new placeholder format, confetti & layout

Browse Source 
- New placeholder format {{label.w/o:uuid}} parsed in all card types
- 1:1 image ratio, header below image, section labels (Satz/Frage/Vokabeln)
- Chips styled as underline-italic in sentences
- Vocabulary pill chips (Lora italic, rounded)
- TTS + hold-to-translate buttons in PairSentenceCard
- Confetti on correct answers (canvas-confetti)
- Picture loaded via object_pairs join in feed API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
admin
2026-05-27 13:47:52 +02:00
parent fb71af5f1d
commit b674178771
4 changed files with 395 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/PairWordCard.jsx
View File

@@ -1,39 +1,47 @@
import { useState, useMemo } from 'react'
import confetti from 'canvas-confetti'
import './PairCards.css'
function BboxOverlay({ chip, lang }) {
if (!chip?.bbox) return null
const { x, y, w, h } = chip.bbox
const maskId = `bbmask-${chip.id.slice(0, 8)}`
const label = chip[lang] || chip.de || ''
const labelY = Math.min((y + h + 0.07) * 100, 93)
function triggerConfetti() {
confetti({
particleCount: 90,
spread: 70,
origin: { y: 0.55 },
colors: ['#C4A85A', '#7A5C2E', '#3D7055', '#E8C9A8', '#fff'],
scalar: 0.9,
gravity: 1.1,
})
}
function SelectionOverlay({ chip }) {
const sels = chip?.selections
if (!sels?.length) return null
const maskId = `selmask-${chip.id.slice(0, 8)}`
const label = chip.label || ''
const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
const firstPts = sels[0].points
const xs = firstPts.map(p => p.x * 100)
const ys = firstPts.map(p => p.y * 100)
const cx = (Math.min(...xs) + Math.max(...xs)) / 2
const labelY = Math.min(Math.max(...ys) + 6, 94)
return (
<svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<mask id={maskId}>
<rect width="100" height="100" fill="white" />
<rect x={x*100} y={y*100} width={w*100} height={h*100} fill="black" />
{sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
</mask>
</defs>
<rect width="100" height="100" fill="rgba(0,0,0,0.48)" mask={`url(#${maskId})`} />
<rect
x={x*100} y={y*100} width={w*100} height={h*100}
fill="rgba(255,215,100,0.08)"
stroke="rgba(255,215,100,0.92)"
strokeWidth="1.4"
rx="1.5"
/>
<rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
{sels.map((s, i) => (
<polygon key={i} points={toPoints(s.points)}
fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
strokeWidth="0.8" strokeLinejoin="round" />
))}
{label && (
<text
x={(x + w / 2) * 100}
y={labelY}
textAnchor="middle"
fill="white"
fontSize="5.5"
fontWeight="700"
fontFamily="Nunito, sans-serif"
style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}
>
<text x={cx} y={labelY} textAnchor="middle"
fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
{label}
</text>
)}
@@ -41,20 +49,22 @@ function BboxOverlay({ chip, lang }) {
)
}
function resolveSentence(sentence, placeholders, lang, onChipClick, activeId) {
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
if (!sentence) return null
const parts = sentence.split(/(\{\{[0-9a-f-]{36}\}\})/)
const parts = sentence.split(/(\{\{[^}]+\.[wo]:[0-9a-f-]{36}\}\})/)
return parts.map((part, i) => {
const m = part.match(/^\{\{([0-9a-f-]{36})\}\}$/)
const m = part.match(/^\{\{([^.]+)\.(w|o):([0-9a-f-]{36})\}\}$/)
if (m) {
const id = m[1]
const entry = placeholders?.[id]
const label = entry?.[lang] || entry?.de || '…'
const label = m[1]
const type = m[2] === 'w' ? 'word' : 'object'
const id = m[3]
const entry = placeholders?.[id] || {}
return (
<span
key={i}
className={`pair-word-chip${activeId === id ? ' active' : ''}`}
onClick={e => { e.stopPropagation(); onChipClick?.(id, entry) }}
onClick={e => { e.stopPropagation(); onChipClick?.(id, { label, type, ...entry }) }}
>
{label}
</span>
@@ -80,8 +90,8 @@ export default function PairWordCard({ card, onComplete }) {
const lang = card.lang || 'de'
const native = lang === 'de' ? 'en' : 'de'
const isWord = activeChip && (activeChip.type === 'word' || !activeChip.bbox)
const isObject = activeChip && activeChip.type === 'object' && activeChip.bbox
const isWord = activeChip && activeChip.type === 'word'
const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length
const q = card.question
const stmt = card.positive_statement
@@ -106,16 +116,14 @@ export default function PairWordCard({ card, onComplete }) {
setActiveChip(null)
setPicked(opt)
const r = opt.correct ? 'correct' : 'wrong'
if (opt.correct) triggerConfetti()
setTimeout(() => onComplete(r), 900)
}
return (
<div className="pair-card" onClick={() => setActiveChip(null)}>
<div className="pair-card-header">
<span className="pair-lang-pill">{lang.toUpperCase()}</span>
<span className="pair-points-pill">+{card.meta?.points ?? 3} Pkt</span>
</div>
{/* Image — flush to card top */}
<div className={`pair-image-wrap${isWord ? ' chip-active' : ''}`}>
{pic
? <img src={pic} alt="" className="pair-image" loading="lazy" />
@@ -124,30 +132,35 @@ export default function PairWordCard({ card, onComplete }) {
{isWord && (
<div className="pair-chip-highlight">
<div className="pair-chip-highlight-badge">
<span className="pair-chip-highlight-target">
{activeChip[lang] || activeChip.de || '…'}
</span>
{(activeChip[native] || activeChip.en) && (
<span className="pair-chip-highlight-native">
{activeChip[native] || activeChip.en}
</span>
)}
<span className="pair-chip-highlight-target">{activeChip.label || '…'}</span>
</div>
</div>
)}
{isObject && <BboxOverlay chip={activeChip} lang={lang} native={native} />}
{isObject && <SelectionOverlay chip={activeChip} />}
</div>
{/* Header below image */}
<div className="pair-card-header">
<span className="pair-lang-pill">{lang === 'sv' ? 'Svenska' : lang === 'en' ? 'English' : 'Deutsch'}</span>
<span className="pair-points-pill">
<svg width="13" height="13" viewBox="0 0 24 24" fill="#C4A85A"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+{card.meta?.points ?? 3} Punkte
</span>
</div>
<div className="pair-header-divider" />
<div className="pair-card-body" onClick={e => e.stopPropagation()}>
<p className="pair-section-label">Frage</p>
<p className="pair-question">
{resolveSentence(sentence, card.placeholders, lang, handleChipClick, activeChip?.id)}
{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
</p>
{hint && !picked && (
<p className="pair-hint">
{resolveSentence(hint, card.placeholders, native)}
{resolveSentence(hint, card.placeholders, null, null)}
</p>
)}
<p className="pair-section-label" style={{ marginTop: 14 }}>Antwort</p>
<div className="pair-options">
{options.map((opt) => {
const label = opt[lang] || opt.de || '…'