feat(study): Typing-Karten + Levenshtein-Match-Logik

CardRenderer für typing ist nicht mehr Placeholder. Web-Vorbild:
TypingView.svelte + cards-domain/typing.ts.

Typing.swift (Sources/Core/Domain/):
- check(input:answer:aliases:) → TypingMatch (correct/close/wrong)
- Normalisierung: trim + lowercase + NFD-Decomp + Combining-Marks
  strippen (Diakritika: ä → a)
- Aliases-Support (Komma-getrennt aus card.fields["aliases"])
- Levenshtein-Threshold max(1, floor(len * 0.2)) → "close"

TypingCardView (Features/Study/):
- TextField mit Auto-Focus 0.15s nach onAppear, Return = Submit
- Submit-Button mit Return-Symbol + primary background
- Nach Submit: Badge (✓ Richtig / ≈ Fast / ✗ Falsch) + User-
  Eingabe in „…" Quotes + Divider + erwartete Antwort
- Haptic-Feedback: heavy bei correct, light bei close/wrong
- Reset on card.id change

TypingTests: 8 Tests für check() — exact, case+whitespace,
NFD-Umlauts, aliases, Levenshtein-close (Berln → Berlin),
empty-input, sowie Levenshtein-Helper-Sanity.

Build 8 → 9. 43 Tests grün (war 35).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-13 17:39:39 +02:00
parent 8b1dd5158f
commit 505aa9db19
5 changed files with 323 additions and 4 deletions

View file

@ -31,7 +31,7 @@ struct CardRenderer: View {
case .multipleChoice:
MultipleChoiceCardView(card: card, isFlipped: isFlipped)
case .typing:
placeholderView
TypingCardView(card: card, isFlipped: isFlipped)
}
}
.padding(24)

View file

@ -0,0 +1,187 @@
import SwiftUI
/// Typing-Karten-View: User tippt Antwort, drückt Submit Match-Badge
/// (correct/close/wrong) + User-Eingabe + erwartete Antwort.
///
/// Web-Vorbild: `cards/apps/web/src/lib/components/TypingView.svelte`.
/// Match-Logik in `Typing.check(input:answer:aliases:)` portiert aus
/// `cards/packages/cards-domain/src/typing.ts`.
///
/// Beim Flip vom Parent setzt sich `submitted` synthetisch falls
/// User nicht selbst tippt und nur "Antwort anzeigen" benutzt, kommen
/// trotzdem korrekte Antwort und manuelle Bewertung über die RatingBar.
struct TypingCardView: View {
let card: ReviewCard
let isFlipped: Bool
@State private var input: String = ""
@State private var submitted: Bool = false
@State private var result: TypingMatch?
@FocusState private var inputFocused: Bool
private var answer: String { card.fields["answer"] ?? "" }
private var aliases: String? { card.fields["aliases"] }
var body: some View {
VStack(alignment: .leading, spacing: 16) {
text(card.fields["front"] ?? "")
.font(.title3)
.foregroundStyle(CardsTheme.foreground)
if submitted || isFlipped {
resultView
} else {
inputRow
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.onChange(of: isFlipped) { _, flipped in
// Falls der User über die generische RatingBar auf "Antwort
// anzeigen" tippt ohne zu raten, springen wir trotzdem in
// den Result-Modus mit "wrong" als Default-Match (nicht
// bewertet).
if flipped, !submitted {
result = nil
submitted = true
}
}
.onChange(of: card.id) { _, _ in
input = ""
submitted = false
result = nil
}
}
// MARK: - Input
private var inputRow: some View {
HStack(spacing: 8) {
TextField("Antwort eingeben …", text: $input)
.textFieldStyle(.plain)
.focused($inputFocused)
.padding(.vertical, 10)
.padding(.horizontal, 12)
.background(CardsTheme.surface, in: RoundedRectangle(cornerRadius: 8, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 8, style: .continuous)
.stroke(inputFocused ? CardsTheme.primary : CardsTheme.border, lineWidth: 1)
)
.autocorrectionDisabled()
#if os(iOS)
.textInputAutocapitalization(.never)
#endif
.onSubmit { submit() }
Button {
submit()
} label: {
Image(systemName: "return")
.font(.title3)
.frame(width: 44, height: 44)
.background(CardsTheme.primary, in: RoundedRectangle(cornerRadius: 8, style: .continuous))
.foregroundStyle(CardsTheme.primaryForeground)
}
.buttonStyle(.plain)
.disabled(input.trimmingCharacters(in: .whitespaces).isEmpty)
}
.onAppear {
// SwiftUI's Focus-State braucht einen Tick nach onAppear
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
inputFocused = true
}
}
}
// MARK: - Result
@ViewBuilder
private var resultView: some View {
if let result {
HStack(spacing: 8) {
Text(badgeLabel(for: result))
.font(.caption.weight(.semibold))
.padding(.horizontal, 10)
.padding(.vertical, 4)
.background(badgeBackground(for: result), in: Capsule())
.foregroundStyle(badgeForeground(for: result))
if !input.isEmpty {
Text("\(input)")
.font(.caption)
.foregroundStyle(CardsTheme.mutedForeground)
.lineLimit(1)
}
Spacer(minLength: 0)
}
}
Divider().background(CardsTheme.border)
Text(answer)
.font(.title3.weight(.medium))
.foregroundStyle(CardsTheme.foreground)
if result == nil, !submitted {
// unwahrscheinlich erreicht, aber als Sicherheits-Branch
EmptyView()
}
}
// MARK: - Logic
private func submit() {
guard !submitted else { return }
let trimmed = input.trimmingCharacters(in: .whitespaces)
guard !trimmed.isEmpty else { return }
inputFocused = false
result = Typing.check(input: trimmed, answer: answer, aliases: aliases)
submitted = true
triggerHaptic()
}
private func triggerHaptic() {
#if canImport(UIKit)
let style: UIImpactFeedbackGenerator.FeedbackStyle =
result == .correct ? .heavy : .light
UIImpactFeedbackGenerator(style: style).impactOccurred()
#endif
}
private func badgeLabel(for result: TypingMatch) -> String {
switch result {
case .correct: "✓ Richtig"
case .close: "≈ Fast"
case .wrong: "✗ Falsch"
}
}
private func badgeBackground(for result: TypingMatch) -> Color {
switch result {
case .correct: CardsTheme.success.opacity(0.18)
case .close: CardsTheme.warning.opacity(0.18)
case .wrong: CardsTheme.error.opacity(0.18)
}
}
private func badgeForeground(for result: TypingMatch) -> Color {
switch result {
case .correct: CardsTheme.success
case .close: CardsTheme.warning
case .wrong: CardsTheme.error
}
}
private func text(_ markdown: String) -> some View {
let attributed = (try? AttributedString(
markdown: markdown,
options: AttributedString.MarkdownParsingOptions(
interpretedSyntax: .inlineOnlyPreservingWhitespace
)
)) ?? AttributedString(markdown)
return Text(attributed)
.multilineTextAlignment(.leading)
}
}
#if canImport(UIKit)
import UIKit
#endif