feat: persönlichere Profilseite + iOS-App-Setup
Profil: Begrüßung in Zielsprache, Kategorie-Punkte-Übersicht, ruhigerer Header (kein rotierender Avatar/Online-Dot), Notch-Fix und kompaktere Aktivitäts-Heatmap. Außerdem Capacitor-iOS-Projekt und diverse Auth/Feed/Audio-Verbesserungen aus dem Premium-Redesign. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
6
.gitignore
vendored
6
.gitignore
vendored
@@ -4,3 +4,9 @@ dist/
|
|||||||
.env.local
|
.env.local
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.claude/
|
.claude/
|
||||||
|
|
||||||
|
# iOS build artifacts (Capacitor)
|
||||||
|
ios/build/
|
||||||
|
ios/App/Pods/
|
||||||
|
ios/App/output/
|
||||||
|
ios/DerivedData/
|
||||||
|
|||||||
64
CLAUDE.md
Normal file
64
CLAUDE.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev # Vite dev server (default http://localhost:5173)
|
||||||
|
npm run build # Production build → dist/
|
||||||
|
npm run preview # Serve the built dist/ locally
|
||||||
|
```
|
||||||
|
|
||||||
|
There is **no test runner and no linter** configured — `package.json` only defines `dev`, `build`, `preview`. Don't suggest `npm test`/`npm run lint`.
|
||||||
|
|
||||||
|
Deployment is a two-stage Docker build (`Dockerfile`): Node builds `dist/`, then it's served by nginx (`nginx.conf`) with SPA fallback (`try_files … /index.html`).
|
||||||
|
|
||||||
|
## Environment
|
||||||
|
|
||||||
|
`VITE_API_URL` (in `.env` / `.env.production`) points at the backend. It's the **only** runtime config — every API call in `src/api/directus.js` reads `import.meta.env.VITE_API_URL`. `.env` is gitignored.
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
React 19 + Vite SPA, **no router package**. There are no DB cards/feed entries fetched directly — the app talks to a custom backend, not Directus directly (see below).
|
||||||
|
|
||||||
|
**Routing** is `useState`-based in `src/App.jsx`: a `PAGES` map (`feed`/`game`/`pro`/`profil`) swaps the active page component, driven by `BottomNav`. `Game` and `Pro` are placeholders.
|
||||||
|
|
||||||
|
**Auth gating:** `App.jsx` renders `<AuthScreen />` unless the user has `username`, `language_native_id`, and `language_target_id`. `AuthContext` (`src/context/AuthContext.jsx`) holds the JWT (localStorage key **`hejyou_token`**), calls `getMe()` on mount, and clears the token on failure. Registration is two steps: `RegisterStep1` (email+password) → `RegisterStep2` (username + native/target language).
|
||||||
|
|
||||||
|
### The API client is misnamed
|
||||||
|
|
||||||
|
`src/api/directus.js` is **not** a Directus client anymore — the module name is kept "aus historischen Gründen". It is a thin fetch wrapper around a **custom backend (snakkimo-API)** exposing `/auth/*` endpoints:
|
||||||
|
|
||||||
|
| Function | Endpoint | Notes |
|
||||||
|
|---|---|---|
|
||||||
|
| `login` / `registerUser` | `POST /auth/login`, `/auth/register` | return `{ token, userId, needsProfile }` |
|
||||||
|
| `getMe` | `GET /auth/me` | basis for auth check + progress (EP/streak/level) |
|
||||||
|
| `checkUsername` | `GET /auth/check-username` | |
|
||||||
|
| `createProfile` | `POST /auth/profile` | username + native/target lang |
|
||||||
|
| `getLanguageOptions` | `GET /auth/languages` | merged with local `LANG_META` (flag + Web Speech code) |
|
||||||
|
| `getFeedPairs` | `GET /auth/feed?lang=&limit=` | returns "pairs", the feed unit |
|
||||||
|
| `saveProgress` | `POST /auth/progress` | books EP/streak, returns updated `total_ep` |
|
||||||
|
|
||||||
|
Several content functions (`getWords`, `getQuestions`, `getActiveLearningPair`, `assetUrl`, …) are **stubs** returning empty/null — content endpoints are not built yet. Don't assume they fetch anything.
|
||||||
|
|
||||||
|
### Feed = "pairs" → cards
|
||||||
|
|
||||||
|
`src/pages/Feed.jsx` fetches an array of *pairs* and maps each to one card by its `answer_type`:
|
||||||
|
|
||||||
|
| `answer_type` | Component | Points (`POINTS` map) |
|
||||||
|
|---|---|---|
|
||||||
|
| `text` | `PairSentenceCard` | 2 |
|
||||||
|
| `yes_no` | `PairYesNoCard` | 2 |
|
||||||
|
| `word` | `PairWordCard` | 3 |
|
||||||
|
| `question` | `PairWordCard` | 3 |
|
||||||
|
|
||||||
|
On completion, `handleComplete` adds the pair id to a local `done` set (cards are hidden, not removed) and POSTs to `saveProgress`. Target language comes from `user.language_target_short` (fallback `de`).
|
||||||
|
|
||||||
|
The **`Pair*` cards** (`PairSentenceCard`, `PairYesNoCard`, `PairWordCard`) are the live card components. The other card files (`NewWord*`, `ImagePick/ImageQuiz`, `AudioQuiz`, `LetterOrder`, `SentenceFill`, `LanguageParentCard`) are an **earlier card model** not wired into the current feed — check `Feed.jsx` before assuming a component is in use.
|
||||||
|
|
||||||
|
Several cards use the browser **Web Speech API** (`SpeechRecognition` / `speechSynthesis`) for the `speak`/`listen` flow; `src/utils/confetti.js` wraps `canvas-confetti` for correct-answer feedback.
|
||||||
|
|
||||||
|
## `knowledge/directus_struktur.md`
|
||||||
|
|
||||||
|
A detailed reference for the **backend data model** (collections, fields, relations) and the original app concept. Useful for understanding the domain and DB schema, but note it predates the custom-backend migration: its "Frontend API-Funktionen" table describes **direct Directus calls that no longer exist** — trust `src/api/directus.js` for the actual frontend contract.
|
||||||
200
FUNKTIONSUEBERSICHT.md
Normal file
200
FUNKTIONSUEBERSICHT.md
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
# Funktionsübersicht — Snakkimo iOS-App
|
||||||
|
|
||||||
|
> **Zweck:** Vollständige Liste aller Funktionen der **iOS-App** (Endnutzer-App) zur Funktionsüberprüfung durch das Team.
|
||||||
|
> Jede Funktion hat eine **Soll-Beschreibung** (so muss es sich verhalten) und eine abhakbare Checkbox.
|
||||||
|
> Backend-/Admin-Tools (CMT, Content-Pipeline) sind **nicht** Teil dieses Dokuments.
|
||||||
|
|
||||||
|
**Technischer Rahmen**
|
||||||
|
- iOS-App = **Capacitor-Wrapper** um eine React-19/Vite-Single-Page-App (`webDir: dist`).
|
||||||
|
- Bundle-ID: `com.hyggecraftery.hejyou` · App-Name (iOS-Homescreen): **Snakkimo**.
|
||||||
|
- Alle Inhalte/Logins kommen live vom Backend (`VITE_API_URL`) — **es gibt keinen Offline-Modus**, ohne Netz funktioniert die App nicht.
|
||||||
|
- Aktiv unterstützte Sprachen: **Deutsch 🇩🇪, Englisch 🇬🇧, Schwedisch 🇸🇪**.
|
||||||
|
|
||||||
|
> ⚠️ **Branding-Inkonsistenz (für QA wichtig):** Auf dem Login-Screen steht **„HejYou"**, der iOS-App-Name ist **„Snakkimo"**, der Browser-/Webview-Titel ist **„Language App"**. Bitte als bekannten Punkt behandeln, nicht als neuen Bug.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Allgemeiner Rahmen
|
||||||
|
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 1.1 | App-Start / Ladezustand | Beim Start erscheint ein Spinner, bis Profil geladen ist. | ☐ |
|
||||||
|
| 1.2 | Auth-Gating | Ohne gültiges Profil (Username + Mutter- + Zielsprache) erscheint immer der Auth-Screen. | ☐ |
|
||||||
|
| 1.3 | Session-Persistenz | Login bleibt nach App-Neustart erhalten (Token in `localStorage: hejyou_token`). | ☐ |
|
||||||
|
| 1.4 | Auto-Logout bei ungültigem Token | Ist der Token abgelaufen/ungültig, wird er verworfen und der Auth-Screen erscheint. | ☐ |
|
||||||
|
| 1.5 | Untere Navigation (BottomNav) | 4 Tabs: **Feed · Game · Pro · Profil**. Aktiver Tab ist hervorgehoben. | ☐ |
|
||||||
|
| 1.6 | Seitenwechsel-Animation | Beim Tab-Wechsel spielt eine kurze Einblend-Animation (`page-enter`). | ☐ |
|
||||||
|
| 1.7 | Safe-Area / Notch | Layout respektiert iPhone-Notch/Home-Indicator (`viewport-fit=cover`). | ☐ |
|
||||||
|
| 1.8 | Design/Theme | Warmes Creme-/Gold-Design, durchgängige Schrift- und Farb-Tokens. | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Onboarding & Authentifizierung
|
||||||
|
|
||||||
|
### 2.1 Login (Tab „Anmelden")
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 2.1.1 | Login/Register-Umschalter | Oben umschaltbar zwischen „Anmelden" und „Registrieren"; letzte Wahl wird gemerkt (`hejyou_last_mode`). | ☐ |
|
||||||
|
| 2.1.2 | Eingabe E-Mail + Passwort | Beide Felder Pflicht; leeres Feld → Fehlermeldung „Bitte E-Mail und Passwort eingeben.". | ☐ |
|
||||||
|
| 2.1.3 | Erfolgreicher Login | Token wird gespeichert, Profil geladen, App öffnet den Feed. | ☐ |
|
||||||
|
| 2.1.4 | Falsche Zugangsdaten | Fehlermeldung vom Server wird angezeigt (z. B. „Invalid credentials"). | ☐ |
|
||||||
|
| 2.1.5 | Login eines Accounts ohne Profil | Springt direkt in **Profil-Schritt (Step 2)** statt in den Feed. | ☐ |
|
||||||
|
| 2.1.6 | Lade-Status | Button zeigt „Anmelden…" und ist während des Requests deaktiviert. | ☐ |
|
||||||
|
|
||||||
|
### 2.2 Registrierung — Schritt 1 (E-Mail + Passwort)
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 2.2.1 | Schritt-Anzeige | Zeigt Fortschrittspunkte „Schritt 1 von 2". | ☐ |
|
||||||
|
| 2.2.2 | Passwort-Mindestlänge | Passwort < 8 Zeichen → „Passwort muss mindestens 8 Zeichen haben.". | ☐ |
|
||||||
|
| 2.2.3 | E-Mail bereits vergeben | Server-Fehler „Email already registered" wird angezeigt. | ☐ |
|
||||||
|
| 2.2.4 | Erfolg | Weiter zu Schritt 2 (Profil). | ☐ |
|
||||||
|
|
||||||
|
### 2.3 Registrierung — Schritt 2 (Profil)
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 2.3.1 | Username-Regeln | 3–20 Zeichen, nur Buchstaben/Zahlen/Unterstrich; Verstoß → klare Fehlermeldung. | ☐ |
|
||||||
|
| 2.3.2 | Username-Verfügbarkeit | Vergebener Username → „Dieser Username ist bereits vergeben.". | ☐ |
|
||||||
|
| 2.3.3 | Muttersprache wählen | Dropdown mit Flaggen + Sprachnamen (vom Server geladen). | ☐ |
|
||||||
|
| 2.3.4 | Zielsprache wählen | Dropdown; **die gewählte Muttersprache ist hier ausgeblendet**. | ☐ |
|
||||||
|
| 2.3.5 | Gleiche Sprachen verhindern | Mutter- = Zielsprache → „… dürfen nicht gleich sein.". | ☐ |
|
||||||
|
| 2.3.6 | Profil anlegen | Bei Erfolg: Token persistiert, Profil geladen, Erfolgs-Screen erscheint. | ☐ |
|
||||||
|
| 2.3.7 | Sprachen-Ladefehler | Können Sprachen nicht geladen werden, ist der Button deaktiviert + Hinweis. | ☐ |
|
||||||
|
|
||||||
|
### 2.4 Erfolgs-Screen & Logout
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 2.4.1 | Willkommens-Screen | Nach Registrierung: „Willkommen, {Username}!" mit Häkchen-Icon. | ☐ |
|
||||||
|
| 2.4.2 | Logout | Über das Logout-Icon im Profil; Token wird gelöscht, zurück zum Auth-Screen. | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Feed (Kernbereich „Lernen")
|
||||||
|
|
||||||
|
### 3.1 Feed-Grundgerüst
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 3.1.1 | Karten laden | Beim Öffnen werden bis zu 20 Lernkarten in der **Zielsprache** geladen. | ☐ |
|
||||||
|
| 3.1.2 | EP-Abzeichen oben | Zeigt Fortschritts-Ring (Tagesziel-%), Gesamt-EP und „X/Y heute". | ☐ |
|
||||||
|
| 3.1.3 | Karte abschließen | Nach Lösen verschwindet die Karte aus der Liste (bis App-Neustart). | ☐ |
|
||||||
|
| 3.1.4 | Fortschritt speichern | Jede gelöste Karte sendet EP/Richtig-Falsch an den Server (EP/Streak aktualisiert sich). | ☐ |
|
||||||
|
| 3.1.5 | Ladezustand | „Lade Karten…" während des Ladens. | ☐ |
|
||||||
|
| 3.1.6 | Leerer Feed | Keine Inhalte → „Noch keine Inhalte verfügbar.". | ☐ |
|
||||||
|
| 3.1.7 | Alles gelöst | Alle Karten erledigt → „Super! Alle Karten abgeschlossen. 🎉". | ☐ |
|
||||||
|
|
||||||
|
### 3.2 Gemeinsame Karten-Mechaniken (alle Kartentypen)
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 3.2.1 | Bild | Jede Karte zeigt oben ein Bild (Platzhalter 🖼️, falls keins). | ☐ |
|
||||||
|
| 3.2.2 | Satz vorlesen (Audio) | Tippen auf den Satz **oder** den Lautsprecher-Button spielt echtes Audio. | ☐ |
|
||||||
|
| 3.2.3 | Verlangsamtes Audio | Audio wird bewusst in **0,7-facher Geschwindigkeit** abgespielt. | ☐ |
|
||||||
|
| 3.2.4 | Nur ein Audio gleichzeitig | Startet man ein neues Audio, stoppt das vorherige. | ☐ |
|
||||||
|
| 3.2.5 | Karaoke-Hervorhebung | Während des Vorlesens wird das **aktuell gesprochene Wort** im Satz hervorgehoben. | ☐ |
|
||||||
|
| 3.2.6 | Wort-Chip antippen | Markiertes Wort antippen → zugehöriges **Label-Abzeichen auf dem Bild**. | ☐ |
|
||||||
|
| 3.2.7 | Objekt-Chip antippen | Objekt-Wort antippen → **Bildregion umrandet**, Rest abgedunkelt, Label sichtbar. | ☐ |
|
||||||
|
| 3.2.8 | Objekt-Sync beim Vorlesen | Wird ein Objekt-Wort vorgelesen, wird seine Bildregion (nur Umriss) live hervorgehoben. | ☐ |
|
||||||
|
| 3.2.9 | Übersetzungs-Hinweis | Unter dem Satz steht die Übersetzung in der Muttersprache (Hint). | ☐ |
|
||||||
|
| 3.2.10 | Defensive Token-Anzeige | Unaufgelöste Pipeline-Tokens (`⟦PHn:wort⟧`) werden als reines Wort angezeigt, nicht roh. | ☐ |
|
||||||
|
|
||||||
|
### 3.3 Kartentyp „Satz / Lesen" (PairSentenceCard, `text`) — **2 EP**
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 3.3.1 | „Verstanden" gesperrt | Button ist gesperrt, bis man **entweder** vorgelesen **oder** übersetzt hat. | ☐ |
|
||||||
|
| 3.3.2 | Halten-zum-Übersetzen | Übersetzungs-Button **2 Sekunden halten** → Übersetzung blendet ein, Button entsperrt. | ☐ |
|
||||||
|
| 3.3.3 | Halte-Fortschrittsring | Während des Haltens läuft ein Ring 2 s lang voll. | ☐ |
|
||||||
|
| 3.3.4 | TTS-Fallback | Existiert kein Audio-File, wird per Browser-Sprachsynthese vorgelesen (de/en/sv). | ☐ |
|
||||||
|
| 3.3.5 | Vokabel-Chips | Im Satz markierte Vokabeln werden als separate Chips gelistet. | ☐ |
|
||||||
|
| 3.3.6 | Abschluss | „Verstanden" → Konfetti, Karte zählt als richtig (2 EP). | ☐ |
|
||||||
|
|
||||||
|
### 3.4 Kartentyp „Ja/Nein" (PairYesNoCard, `yes_no`) — **2 EP**
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 3.4.1 | Zwei Antwort-Buttons | „✗ Nein" und „✓ Ja". | ☐ |
|
||||||
|
| 3.4.2 | Auswertung | Antwort wird gegen die korrekte Lösung des Satzes geprüft. | ☐ |
|
||||||
|
| 3.4.3 | Richtig | Konfetti + „✓ Richtig!" (2 EP). | ☐ |
|
||||||
|
| 3.4.4 | Falsch | „✗ Die Antwort war: Ja/Nein"; richtige/falsche Buttons farblich markiert. | ☐ |
|
||||||
|
| 3.4.5 | Mehrfachklick-Schutz | Nach Beantwortung sind die Buttons gesperrt. | ☐ |
|
||||||
|
|
||||||
|
### 3.5 Kartentyp „Wort wählen" (PairWordCard, `word` & `question`) — **3 EP**
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 3.5.1 | Frage + Bild + Audio | Zeigt Frage-Satz, Bild und Vorlesen wie alle Karten. | ☐ |
|
||||||
|
| 3.5.2 | Wort-Optionen | Mischung aus richtigen + falschen Wörtern, zufällig gemischt. | ☐ |
|
||||||
|
| 3.5.3 | Mehrfachauswahl | Mehrere Optionen an-/abwählbar, dann „Bestätigen". | ☐ |
|
||||||
|
| 3.5.4 | „Bestätigen" gesperrt | Solange nichts gewählt ist, ist „Bestätigen" gesperrt. | ☐ |
|
||||||
|
| 3.5.5 | Auswertung | **Richtig**, wenn nur richtige Wörter gewählt sind (Teilauswahl der richtigen erlaubt, **kein** falsches dabei). | ☐ |
|
||||||
|
| 3.5.6 | Feedback richtig/falsch | Richtig → Konfetti + „✓ Richtig!"; falsch → „✗ Richtig wären: …". | ☐ |
|
||||||
|
| 3.5.7 | Übersetzungs-Hinweis | Nach Bestätigen werden bei richtigen Optionen die muttersprachlichen Hints gezeigt. | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Game (Tab „Game")
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 4.1 | Platzhalter-Screen | Zeigt **„Bald verfügbar"**-Karte „Spielend lernen" mit Teaser-Punkten. | ☐ |
|
||||||
|
| 4.2 | Keine Funktion | Es gibt **noch keine** spielbare Funktion (bewusst Platzhalter, kein Bug). | ☐ |
|
||||||
|
|
||||||
|
## 5. Pro (Tab „Pro")
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 5.1 | Platzhalter-Screen | Zeigt **„Bald verfügbar"**-Karte „Snakkimo Pro" mit Teaser-Punkten. | ☐ |
|
||||||
|
| 5.2 | Keine Kauf-/Abo-Funktion | Es gibt **noch keine** Bezahl-/Abo-Funktion (bewusst Platzhalter, kein Bug). | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Profil (Tab „Profil")
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 6.1 | Avatar + Initialen | Kreis mit den ersten 2 Buchstaben des Usernamens, Online-Punkt. | ☐ |
|
||||||
|
| 6.2 | Level-Abzeichen | Sechseck mit Level-Zahl (**Level = Gesamt-EP ÷ 500**, abgerundet). | ☐ |
|
||||||
|
| 6.3 | Name + Handle | Anzeigename und „@username". | ☐ |
|
||||||
|
| 6.4 | Streak-Anzeige | „🔥 X Tage Streak", wenn Streak > 0. | ☐ |
|
||||||
|
| 6.5 | Tagesziel-Karte | Ring mit Tagesziel-%, „heutige EP / Ziel", Restwert-Hinweis bzw. „Geschafft 🎉". | ☐ |
|
||||||
|
| 6.6 | Fortschritts-Karte | Zielsprache (Flagge+Name), Gesamt-EP, XP-Balken, Level-Pille, „EP bis Level X+1". | ☐ |
|
||||||
|
| 6.7 | Wochen-Aktivität | Balkendiagramm der letzten 7 Tage (heutiger Tag markiert). | ☐ |
|
||||||
|
| 6.8 | Aktivitäts-Kalender | Heatmap der letzten 12 Wochen (Farbintensität nach EP/Tag). | ☐ |
|
||||||
|
| 6.9 | Eckdaten-Kacheln | „Karten geübt", „Genauigkeit %", „Tage Streak". | ☐ |
|
||||||
|
| 6.10 | Fähigkeiten-Radar | Radar-Chart **Vokabular / Lesen / Verständnis** (Genauigkeit je Skill). | ☐ |
|
||||||
|
| 6.11 | Leerzustand Skills | Ohne Daten: „Leg los — deine Stärken erscheinen, sobald du Karten löst.". | ☐ |
|
||||||
|
| 6.12 | Tracking-Hinweis | Ist die Statistik (noch) nicht verfügbar: dezenter Hinweis „… komm morgen wieder! 🌱". | ☐ |
|
||||||
|
| 6.13 | Logout | Abmelde-Button oben rechts (siehe 2.4.2). | ☐ |
|
||||||
|
|
||||||
|
> **Mapping Skills:** Vokabular = Kartentypen `word` + `question`; Lesen = `text`; Verständnis = `yes_no`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. iOS-spezifische Prüfpunkte
|
||||||
|
| # | Funktion | Soll-Verhalten | OK |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 7.1 | App-Icon & Name | Auf dem Homescreen erscheint **„Snakkimo"**. | ☐ |
|
||||||
|
| 7.2 | Start ohne Netz | Ohne Internet lädt nichts (Login/Feed schlagen fehl) — Verhalten dokumentieren. | ☐ |
|
||||||
|
| 7.3 | Audio-Wiedergabe iOS | Vorlesen funktioniert auch im iOS-WebView (Touch löst Audio aus). | ☐ |
|
||||||
|
| 7.4 | Touch-Halten (Übersetzen) | 2-Sekunden-Halten funktioniert per Touch (nicht nur Maus). | ☐ |
|
||||||
|
| 7.5 | Scrollen | Auth- und Profil-Screens lassen sich vollständig scrollen, ohne „Gummiband"-Leaks. | ☐ |
|
||||||
|
| 7.6 | Safe-Area / Statusleiste | Kein Inhalt liegt unter Notch/Statusleiste oder Home-Indicator. | ☐ |
|
||||||
|
| 7.7 | Hintergrund/Wiederkehr | App nach Hintergrund zurückholen → Session noch aktiv, Feed nutzbar. | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Bekannte Einschränkungen / Auffälligkeiten (für QA, kein Bug-Report nötig)
|
||||||
|
- **Game & Pro** sind reine „Bald verfügbar"-Platzhalter.
|
||||||
|
- **Kein Offline-Modus** — App braucht durchgehend Verbindung zum Backend.
|
||||||
|
- **Feed-Wiederholung:** Bereits gelöste Karten verschwinden nur lokal; nach App-Neustart können dieselben Karten erneut erscheinen (keine Spaced-Repetition-Logik in der App).
|
||||||
|
- **Branding uneinheitlich:** „HejYou" (Login) vs. „Snakkimo" (App-Name) vs. „Language App" (Webview-Titel).
|
||||||
|
- **Nur 3 Sprachen** (de/en/sv) auswählbar.
|
||||||
|
- **Inhaltsmenge begrenzt:** Der Feed kann bei intensivem Üben schnell leer sein („Alle Karten abgeschlossen").
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Kompakte Test-Checkliste (Smoke-Test, ~10 Min)
|
||||||
|
- [ ] Registrierung (neue E-Mail) → Profil anlegen → landet im Feed
|
||||||
|
- [ ] Logout → erneuter Login → Feed
|
||||||
|
- [ ] Login bleibt nach App-Neustart bestehen
|
||||||
|
- [ ] Feed: Satz-Karte vorlesen (Audio + Karaoke-Highlight)
|
||||||
|
- [ ] Feed: Wort-Chip antippen → Bild-Label; Objekt-Chip → Bildregion umrandet
|
||||||
|
- [ ] Feed: „Verstanden"-Karte über 2-Sek-Halten entsperren und lösen
|
||||||
|
- [ ] Feed: Ja/Nein-Karte richtig + falsch testen (Konfetti / korrekte Lösung)
|
||||||
|
- [ ] Feed: Wort-Wahl-Karte mit Mehrfachauswahl lösen
|
||||||
|
- [ ] EP-Abzeichen oben steigt nach Lösen einer Karte
|
||||||
|
- [ ] Profil: EP/Level, Streak, Wochen-Balken, Heatmap, Radar werden angezeigt
|
||||||
|
- [ ] Game-Tab & Pro-Tab zeigen „Bald verfügbar"
|
||||||
|
- [ ] iOS: Safe-Area korrekt, Touch-Halten & Audio funktionieren
|
||||||
5
capacitor.config.json
Normal file
5
capacitor.config.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"appId": "com.hyggecraftery.snakkimo",
|
||||||
|
"appName": "Snakkimo",
|
||||||
|
"webDir": "dist"
|
||||||
|
}
|
||||||
@@ -2,8 +2,8 @@
|
|||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
<title>Language App</title>
|
<title>Snakkimo</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
13
ios/.gitignore
vendored
Normal file
13
ios/.gitignore
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
App/build
|
||||||
|
App/Pods
|
||||||
|
App/output
|
||||||
|
App/App/public
|
||||||
|
DerivedData
|
||||||
|
xcuserdata
|
||||||
|
|
||||||
|
# Cordova plugins for Capacitor
|
||||||
|
capacitor-cordova-ios-plugins
|
||||||
|
|
||||||
|
# Generated Config files
|
||||||
|
App/App/capacitor.config.json
|
||||||
|
App/App/config.xml
|
||||||
378
ios/App/App.xcodeproj/project.pbxproj
Normal file
378
ios/App/App.xcodeproj/project.pbxproj
Normal file
@@ -0,0 +1,378 @@
|
|||||||
|
// !$*UTF8*$!
|
||||||
|
{
|
||||||
|
archiveVersion = 1;
|
||||||
|
classes = {
|
||||||
|
};
|
||||||
|
objectVersion = 60;
|
||||||
|
objects = {
|
||||||
|
|
||||||
|
/* Begin PBXBuildFile section */
|
||||||
|
2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
|
||||||
|
4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */ = {isa = PBXBuildFile; productRef = 4D22ABE82AF431CB00220026 /* CapApp-SPM */; };
|
||||||
|
50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
|
||||||
|
504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
|
||||||
|
504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
|
||||||
|
504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
|
||||||
|
504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
|
||||||
|
50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
|
||||||
|
/* End PBXBuildFile section */
|
||||||
|
|
||||||
|
/* Begin PBXFileReference section */
|
||||||
|
2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
|
||||||
|
50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
|
||||||
|
504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
|
||||||
|
504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
|
||||||
|
504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
|
||||||
|
504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
|
||||||
|
504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
|
||||||
|
504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
|
||||||
|
50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
|
||||||
|
958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
|
||||||
|
/* End PBXFileReference section */
|
||||||
|
|
||||||
|
/* Begin PBXFrameworksBuildPhase section */
|
||||||
|
504EC3011FED79650016851F /* Frameworks */ = {
|
||||||
|
isa = PBXFrameworksBuildPhase;
|
||||||
|
buildActionMask = 2147483647;
|
||||||
|
files = (
|
||||||
|
4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */,
|
||||||
|
);
|
||||||
|
runOnlyForDeploymentPostprocessing = 0;
|
||||||
|
};
|
||||||
|
/* End PBXFrameworksBuildPhase section */
|
||||||
|
|
||||||
|
/* Begin PBXGroup section */
|
||||||
|
504EC2FB1FED79650016851F = {
|
||||||
|
isa = PBXGroup;
|
||||||
|
children = (
|
||||||
|
958DCC722DB07C7200EA8C5F /* debug.xcconfig */,
|
||||||
|
504EC3061FED79650016851F /* App */,
|
||||||
|
504EC3051FED79650016851F /* Products */,
|
||||||
|
);
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
|
504EC3051FED79650016851F /* Products */ = {
|
||||||
|
isa = PBXGroup;
|
||||||
|
children = (
|
||||||
|
504EC3041FED79650016851F /* App.app */,
|
||||||
|
);
|
||||||
|
name = Products;
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
|
504EC3061FED79650016851F /* App */ = {
|
||||||
|
isa = PBXGroup;
|
||||||
|
children = (
|
||||||
|
50379B222058CBB4000EE86E /* capacitor.config.json */,
|
||||||
|
504EC3071FED79650016851F /* AppDelegate.swift */,
|
||||||
|
504EC30B1FED79650016851F /* Main.storyboard */,
|
||||||
|
504EC30E1FED79650016851F /* Assets.xcassets */,
|
||||||
|
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
|
||||||
|
504EC3131FED79650016851F /* Info.plist */,
|
||||||
|
2FAD9762203C412B000D30F8 /* config.xml */,
|
||||||
|
50B271D01FEDC1A000F3C39B /* public */,
|
||||||
|
);
|
||||||
|
path = App;
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
|
/* End PBXGroup section */
|
||||||
|
|
||||||
|
/* Begin PBXNativeTarget section */
|
||||||
|
504EC3031FED79650016851F /* App */ = {
|
||||||
|
isa = PBXNativeTarget;
|
||||||
|
buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
|
||||||
|
buildPhases = (
|
||||||
|
504EC3001FED79650016851F /* Sources */,
|
||||||
|
504EC3011FED79650016851F /* Frameworks */,
|
||||||
|
504EC3021FED79650016851F /* Resources */,
|
||||||
|
);
|
||||||
|
buildRules = (
|
||||||
|
);
|
||||||
|
dependencies = (
|
||||||
|
);
|
||||||
|
name = App;
|
||||||
|
packageProductDependencies = (
|
||||||
|
4D22ABE82AF431CB00220026 /* CapApp-SPM */,
|
||||||
|
);
|
||||||
|
productName = App;
|
||||||
|
productReference = 504EC3041FED79650016851F /* App.app */;
|
||||||
|
productType = "com.apple.product-type.application";
|
||||||
|
};
|
||||||
|
/* End PBXNativeTarget section */
|
||||||
|
|
||||||
|
/* Begin PBXProject section */
|
||||||
|
504EC2FC1FED79650016851F /* Project object */ = {
|
||||||
|
isa = PBXProject;
|
||||||
|
attributes = {
|
||||||
|
LastSwiftUpdateCheck = 0920;
|
||||||
|
LastUpgradeCheck = 0920;
|
||||||
|
TargetAttributes = {
|
||||||
|
504EC3031FED79650016851F = {
|
||||||
|
CreatedOnToolsVersion = 9.2;
|
||||||
|
LastSwiftMigration = 1100;
|
||||||
|
ProvisioningStyle = Automatic;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
|
||||||
|
compatibilityVersion = "Xcode 8.0";
|
||||||
|
developmentRegion = en;
|
||||||
|
hasScannedForEncodings = 0;
|
||||||
|
knownRegions = (
|
||||||
|
en,
|
||||||
|
Base,
|
||||||
|
);
|
||||||
|
mainGroup = 504EC2FB1FED79650016851F;
|
||||||
|
packageReferences = (
|
||||||
|
D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */,
|
||||||
|
);
|
||||||
|
productRefGroup = 504EC3051FED79650016851F /* Products */;
|
||||||
|
projectDirPath = "";
|
||||||
|
projectRoot = "";
|
||||||
|
targets = (
|
||||||
|
504EC3031FED79650016851F /* App */,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
/* End PBXProject section */
|
||||||
|
|
||||||
|
/* Begin PBXResourcesBuildPhase section */
|
||||||
|
504EC3021FED79650016851F /* Resources */ = {
|
||||||
|
isa = PBXResourcesBuildPhase;
|
||||||
|
buildActionMask = 2147483647;
|
||||||
|
files = (
|
||||||
|
504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
|
||||||
|
50B271D11FEDC1A000F3C39B /* public in Resources */,
|
||||||
|
504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
|
||||||
|
50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
|
||||||
|
504EC30D1FED79650016851F /* Main.storyboard in Resources */,
|
||||||
|
2FAD9763203C412B000D30F8 /* config.xml in Resources */,
|
||||||
|
);
|
||||||
|
runOnlyForDeploymentPostprocessing = 0;
|
||||||
|
};
|
||||||
|
/* End PBXResourcesBuildPhase section */
|
||||||
|
|
||||||
|
/* Begin PBXSourcesBuildPhase section */
|
||||||
|
504EC3001FED79650016851F /* Sources */ = {
|
||||||
|
isa = PBXSourcesBuildPhase;
|
||||||
|
buildActionMask = 2147483647;
|
||||||
|
files = (
|
||||||
|
504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
|
||||||
|
);
|
||||||
|
runOnlyForDeploymentPostprocessing = 0;
|
||||||
|
};
|
||||||
|
/* End PBXSourcesBuildPhase section */
|
||||||
|
|
||||||
|
/* Begin PBXVariantGroup section */
|
||||||
|
504EC30B1FED79650016851F /* Main.storyboard */ = {
|
||||||
|
isa = PBXVariantGroup;
|
||||||
|
children = (
|
||||||
|
504EC30C1FED79650016851F /* Base */,
|
||||||
|
);
|
||||||
|
name = Main.storyboard;
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
|
504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
|
||||||
|
isa = PBXVariantGroup;
|
||||||
|
children = (
|
||||||
|
504EC3111FED79650016851F /* Base */,
|
||||||
|
);
|
||||||
|
name = LaunchScreen.storyboard;
|
||||||
|
sourceTree = "<group>";
|
||||||
|
};
|
||||||
|
/* End PBXVariantGroup section */
|
||||||
|
|
||||||
|
/* Begin XCBuildConfiguration section */
|
||||||
|
504EC3141FED79650016851F /* Debug */ = {
|
||||||
|
isa = XCBuildConfiguration;
|
||||||
|
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
||||||
|
buildSettings = {
|
||||||
|
ALWAYS_SEARCH_USER_PATHS = NO;
|
||||||
|
CLANG_ANALYZER_NONNULL = YES;
|
||||||
|
CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
|
||||||
|
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
|
||||||
|
CLANG_CXX_LIBRARY = "libc++";
|
||||||
|
CLANG_ENABLE_MODULES = YES;
|
||||||
|
CLANG_ENABLE_OBJC_ARC = YES;
|
||||||
|
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
|
||||||
|
CLANG_WARN_BOOL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_COMMA = YES;
|
||||||
|
CLANG_WARN_CONSTANT_CONVERSION = YES;
|
||||||
|
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
|
||||||
|
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
|
||||||
|
CLANG_WARN_EMPTY_BODY = YES;
|
||||||
|
CLANG_WARN_ENUM_CONVERSION = YES;
|
||||||
|
CLANG_WARN_INFINITE_RECURSION = YES;
|
||||||
|
CLANG_WARN_INT_CONVERSION = YES;
|
||||||
|
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
|
||||||
|
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
|
||||||
|
CLANG_WARN_STRICT_PROTOTYPES = YES;
|
||||||
|
CLANG_WARN_SUSPICIOUS_MOVE = YES;
|
||||||
|
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
|
||||||
|
CLANG_WARN_UNREACHABLE_CODE = YES;
|
||||||
|
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
|
||||||
|
CODE_SIGN_IDENTITY = "iPhone Developer";
|
||||||
|
COPY_PHASE_STRIP = NO;
|
||||||
|
DEBUG_INFORMATION_FORMAT = dwarf;
|
||||||
|
ENABLE_STRICT_OBJC_MSGSEND = YES;
|
||||||
|
ENABLE_TESTABILITY = YES;
|
||||||
|
GCC_C_LANGUAGE_STANDARD = gnu11;
|
||||||
|
GCC_DYNAMIC_NO_PIC = NO;
|
||||||
|
GCC_NO_COMMON_BLOCKS = YES;
|
||||||
|
GCC_OPTIMIZATION_LEVEL = 0;
|
||||||
|
GCC_PREPROCESSOR_DEFINITIONS = (
|
||||||
|
"DEBUG=1",
|
||||||
|
"$(inherited)",
|
||||||
|
);
|
||||||
|
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
|
||||||
|
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
|
||||||
|
GCC_WARN_UNDECLARED_SELECTOR = YES;
|
||||||
|
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||||
|
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||||
|
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||||
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
|
MTL_ENABLE_DEBUG_INFO = YES;
|
||||||
|
ONLY_ACTIVE_ARCH = YES;
|
||||||
|
SDKROOT = iphoneos;
|
||||||
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||||
|
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
|
||||||
|
};
|
||||||
|
name = Debug;
|
||||||
|
};
|
||||||
|
504EC3151FED79650016851F /* Release */ = {
|
||||||
|
isa = XCBuildConfiguration;
|
||||||
|
buildSettings = {
|
||||||
|
ALWAYS_SEARCH_USER_PATHS = NO;
|
||||||
|
CLANG_ANALYZER_NONNULL = YES;
|
||||||
|
CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
|
||||||
|
CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
|
||||||
|
CLANG_CXX_LIBRARY = "libc++";
|
||||||
|
CLANG_ENABLE_MODULES = YES;
|
||||||
|
CLANG_ENABLE_OBJC_ARC = YES;
|
||||||
|
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
|
||||||
|
CLANG_WARN_BOOL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_COMMA = YES;
|
||||||
|
CLANG_WARN_CONSTANT_CONVERSION = YES;
|
||||||
|
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
|
||||||
|
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
|
||||||
|
CLANG_WARN_EMPTY_BODY = YES;
|
||||||
|
CLANG_WARN_ENUM_CONVERSION = YES;
|
||||||
|
CLANG_WARN_INFINITE_RECURSION = YES;
|
||||||
|
CLANG_WARN_INT_CONVERSION = YES;
|
||||||
|
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
|
||||||
|
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
|
||||||
|
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
|
||||||
|
CLANG_WARN_STRICT_PROTOTYPES = YES;
|
||||||
|
CLANG_WARN_SUSPICIOUS_MOVE = YES;
|
||||||
|
CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
|
||||||
|
CLANG_WARN_UNREACHABLE_CODE = YES;
|
||||||
|
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
|
||||||
|
CODE_SIGN_IDENTITY = "iPhone Developer";
|
||||||
|
COPY_PHASE_STRIP = NO;
|
||||||
|
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
|
||||||
|
ENABLE_NS_ASSERTIONS = NO;
|
||||||
|
ENABLE_STRICT_OBJC_MSGSEND = YES;
|
||||||
|
GCC_C_LANGUAGE_STANDARD = gnu11;
|
||||||
|
GCC_NO_COMMON_BLOCKS = YES;
|
||||||
|
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
|
||||||
|
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
|
||||||
|
GCC_WARN_UNDECLARED_SELECTOR = YES;
|
||||||
|
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||||
|
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||||
|
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||||
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
|
MTL_ENABLE_DEBUG_INFO = NO;
|
||||||
|
SDKROOT = iphoneos;
|
||||||
|
SWIFT_COMPILATION_MODE = wholemodule;
|
||||||
|
SWIFT_OPTIMIZATION_LEVEL = "-O";
|
||||||
|
VALIDATE_PRODUCT = YES;
|
||||||
|
};
|
||||||
|
name = Release;
|
||||||
|
};
|
||||||
|
504EC3171FED79650016851F /* Debug */ = {
|
||||||
|
isa = XCBuildConfiguration;
|
||||||
|
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
||||||
|
buildSettings = {
|
||||||
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
|
CODE_SIGN_STYLE = Automatic;
|
||||||
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
|
DEVELOPMENT_TEAM = LKA5KKQKHY;
|
||||||
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
|
LD_RUNPATH_SEARCH_PATHS = (
|
||||||
|
"$(inherited)",
|
||||||
|
"@executable_path/Frameworks",
|
||||||
|
);
|
||||||
|
MARKETING_VERSION = 1.0;
|
||||||
|
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||||
|
PRODUCT_BUNDLE_IDENTIFIER = com.hyggecraftery.snakkimo;
|
||||||
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||||
|
SWIFT_VERSION = 5.0;
|
||||||
|
TARGETED_DEVICE_FAMILY = "1,2";
|
||||||
|
};
|
||||||
|
name = Debug;
|
||||||
|
};
|
||||||
|
504EC3181FED79650016851F /* Release */ = {
|
||||||
|
isa = XCBuildConfiguration;
|
||||||
|
buildSettings = {
|
||||||
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
|
CODE_SIGN_STYLE = Automatic;
|
||||||
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
|
DEVELOPMENT_TEAM = LKA5KKQKHY;
|
||||||
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
|
LD_RUNPATH_SEARCH_PATHS = (
|
||||||
|
"$(inherited)",
|
||||||
|
"@executable_path/Frameworks",
|
||||||
|
);
|
||||||
|
MARKETING_VERSION = 1.0;
|
||||||
|
PRODUCT_BUNDLE_IDENTIFIER = com.hyggecraftery.snakkimo;
|
||||||
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||||
|
SWIFT_VERSION = 5.0;
|
||||||
|
TARGETED_DEVICE_FAMILY = "1,2";
|
||||||
|
};
|
||||||
|
name = Release;
|
||||||
|
};
|
||||||
|
/* End XCBuildConfiguration section */
|
||||||
|
|
||||||
|
/* Begin XCConfigurationList section */
|
||||||
|
504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
|
||||||
|
isa = XCConfigurationList;
|
||||||
|
buildConfigurations = (
|
||||||
|
504EC3141FED79650016851F /* Debug */,
|
||||||
|
504EC3151FED79650016851F /* Release */,
|
||||||
|
);
|
||||||
|
defaultConfigurationIsVisible = 0;
|
||||||
|
defaultConfigurationName = Release;
|
||||||
|
};
|
||||||
|
504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
|
||||||
|
isa = XCConfigurationList;
|
||||||
|
buildConfigurations = (
|
||||||
|
504EC3171FED79650016851F /* Debug */,
|
||||||
|
504EC3181FED79650016851F /* Release */,
|
||||||
|
);
|
||||||
|
defaultConfigurationIsVisible = 0;
|
||||||
|
defaultConfigurationName = Release;
|
||||||
|
};
|
||||||
|
/* End XCConfigurationList section */
|
||||||
|
|
||||||
|
/* Begin XCLocalSwiftPackageReference section */
|
||||||
|
D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */ = {
|
||||||
|
isa = XCLocalSwiftPackageReference;
|
||||||
|
relativePath = "CapApp-SPM";
|
||||||
|
};
|
||||||
|
/* End XCLocalSwiftPackageReference section */
|
||||||
|
|
||||||
|
/* Begin XCSwiftPackageProductDependency section */
|
||||||
|
4D22ABE82AF431CB00220026 /* CapApp-SPM */ = {
|
||||||
|
isa = XCSwiftPackageProductDependency;
|
||||||
|
package = D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */;
|
||||||
|
productName = "CapApp-SPM";
|
||||||
|
};
|
||||||
|
/* End XCSwiftPackageProductDependency section */
|
||||||
|
};
|
||||||
|
rootObject = 504EC2FC1FED79650016851F /* Project object */;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||||
|
<plist version="1.0">
|
||||||
|
<dict>
|
||||||
|
<key>IDEDidComputeMac32BitWarning</key>
|
||||||
|
<true/>
|
||||||
|
</dict>
|
||||||
|
</plist>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"originHash" : "ba02264f6d4c613de9cfd9120fa05cc1e61acacc858cb62d0cb6cb68ef052757",
|
||||||
|
"pins" : [
|
||||||
|
{
|
||||||
|
"identity" : "capacitor-swift-pm",
|
||||||
|
"kind" : "remoteSourceControl",
|
||||||
|
"location" : "https://github.com/ionic-team/capacitor-swift-pm.git",
|
||||||
|
"state" : {
|
||||||
|
"revision" : "44ae2505f54a80c5e559533950886d0644fc2fca",
|
||||||
|
"version" : "8.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"version" : 3
|
||||||
|
}
|
||||||
49
ios/App/App/AppDelegate.swift
Normal file
49
ios/App/App/AppDelegate.swift
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import UIKit
|
||||||
|
import Capacitor
|
||||||
|
|
||||||
|
@UIApplicationMain
|
||||||
|
class AppDelegate: UIResponder, UIApplicationDelegate {
|
||||||
|
|
||||||
|
var window: UIWindow?
|
||||||
|
|
||||||
|
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
|
||||||
|
// Override point for customization after application launch.
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
func applicationWillResignActive(_ application: UIApplication) {
|
||||||
|
// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
|
||||||
|
// Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
|
||||||
|
}
|
||||||
|
|
||||||
|
func applicationDidEnterBackground(_ application: UIApplication) {
|
||||||
|
// Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
|
||||||
|
// If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
|
||||||
|
}
|
||||||
|
|
||||||
|
func applicationWillEnterForeground(_ application: UIApplication) {
|
||||||
|
// Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
|
||||||
|
}
|
||||||
|
|
||||||
|
func applicationDidBecomeActive(_ application: UIApplication) {
|
||||||
|
// Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
|
||||||
|
}
|
||||||
|
|
||||||
|
func applicationWillTerminate(_ application: UIApplication) {
|
||||||
|
// Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
|
||||||
|
}
|
||||||
|
|
||||||
|
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
|
||||||
|
// Called when the app was launched with a url. Feel free to add additional processing here,
|
||||||
|
// but if you want the App API to support tracking app url opens, make sure to keep this call
|
||||||
|
return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
|
||||||
|
}
|
||||||
|
|
||||||
|
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
|
||||||
|
// Called when the app was launched with an activity, including Universal Links.
|
||||||
|
// Feel free to add additional processing here, but if you want the App API to support
|
||||||
|
// tracking app url opens, make sure to keep this call
|
||||||
|
return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
14
ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
Normal file
14
ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"images" : [
|
||||||
|
{
|
||||||
|
"filename" : "AppIcon-512@2x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"platform" : "ios",
|
||||||
|
"size" : "1024x1024"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"info" : {
|
||||||
|
"author" : "xcode",
|
||||||
|
"version" : 1
|
||||||
|
}
|
||||||
|
}
|
||||||
6
ios/App/App/Assets.xcassets/Contents.json
Normal file
6
ios/App/App/Assets.xcassets/Contents.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"info" : {
|
||||||
|
"version" : 1,
|
||||||
|
"author" : "xcode"
|
||||||
|
}
|
||||||
|
}
|
||||||
23
ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
vendored
Normal file
23
ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"images" : [
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"filename" : "splash-2732x2732-2.png",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"filename" : "splash-2732x2732-1.png",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"filename" : "splash-2732x2732.png",
|
||||||
|
"scale" : "3x"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"info" : {
|
||||||
|
"version" : 1,
|
||||||
|
"author" : "xcode"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
vendored
Normal file
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
vendored
Normal file
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
vendored
Normal file
BIN
ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
32
ios/App/App/Base.lproj/LaunchScreen.storyboard
Normal file
32
ios/App/App/Base.lproj/LaunchScreen.storyboard
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
|
||||||
|
<device id="retina4_7" orientation="portrait" appearance="light"/>
|
||||||
|
<dependencies>
|
||||||
|
<deployment identifier="iOS"/>
|
||||||
|
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
|
||||||
|
<capability name="System colors in document resources" minToolsVersion="11.0"/>
|
||||||
|
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
|
||||||
|
</dependencies>
|
||||||
|
<scenes>
|
||||||
|
<!--View Controller-->
|
||||||
|
<scene sceneID="EHf-IW-A2E">
|
||||||
|
<objects>
|
||||||
|
<viewController id="01J-lp-oVM" sceneMemberID="viewController">
|
||||||
|
<imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
|
||||||
|
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
|
||||||
|
<autoresizingMask key="autoresizingMask"/>
|
||||||
|
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
|
||||||
|
</imageView>
|
||||||
|
</viewController>
|
||||||
|
<placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
|
||||||
|
</objects>
|
||||||
|
<point key="canvasLocation" x="53" y="375"/>
|
||||||
|
</scene>
|
||||||
|
</scenes>
|
||||||
|
<resources>
|
||||||
|
<image name="Splash" width="1366" height="1366"/>
|
||||||
|
<systemColor name="systemBackgroundColor">
|
||||||
|
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
|
||||||
|
</systemColor>
|
||||||
|
</resources>
|
||||||
|
</document>
|
||||||
19
ios/App/App/Base.lproj/Main.storyboard
Normal file
19
ios/App/App/Base.lproj/Main.storyboard
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
|
||||||
|
<device id="retina4_7" orientation="portrait">
|
||||||
|
<adaptation id="fullscreen"/>
|
||||||
|
</device>
|
||||||
|
<dependencies>
|
||||||
|
<deployment identifier="iOS"/>
|
||||||
|
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
|
||||||
|
</dependencies>
|
||||||
|
<scenes>
|
||||||
|
<!--Bridge View Controller-->
|
||||||
|
<scene sceneID="tne-QT-ifu">
|
||||||
|
<objects>
|
||||||
|
<viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
|
||||||
|
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
|
||||||
|
</objects>
|
||||||
|
</scene>
|
||||||
|
</scenes>
|
||||||
|
</document>
|
||||||
51
ios/App/App/Info.plist
Normal file
51
ios/App/App/Info.plist
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||||
|
<plist version="1.0">
|
||||||
|
<dict>
|
||||||
|
<key>CAPACITOR_DEBUG</key>
|
||||||
|
<string>$(CAPACITOR_DEBUG)</string>
|
||||||
|
<key>CFBundleDevelopmentRegion</key>
|
||||||
|
<string>en</string>
|
||||||
|
<key>CFBundleDisplayName</key>
|
||||||
|
<string>Snakkimo</string>
|
||||||
|
<key>CFBundleExecutable</key>
|
||||||
|
<string>$(EXECUTABLE_NAME)</string>
|
||||||
|
<key>CFBundleIdentifier</key>
|
||||||
|
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
|
||||||
|
<key>CFBundleInfoDictionaryVersion</key>
|
||||||
|
<string>6.0</string>
|
||||||
|
<key>CFBundleName</key>
|
||||||
|
<string>$(PRODUCT_NAME)</string>
|
||||||
|
<key>CFBundlePackageType</key>
|
||||||
|
<string>APPL</string>
|
||||||
|
<key>CFBundleShortVersionString</key>
|
||||||
|
<string>$(MARKETING_VERSION)</string>
|
||||||
|
<key>CFBundleVersion</key>
|
||||||
|
<string>$(CURRENT_PROJECT_VERSION)</string>
|
||||||
|
<key>LSRequiresIPhoneOS</key>
|
||||||
|
<true/>
|
||||||
|
<key>UILaunchStoryboardName</key>
|
||||||
|
<string>LaunchScreen</string>
|
||||||
|
<key>UIMainStoryboardFile</key>
|
||||||
|
<string>Main</string>
|
||||||
|
<key>UIRequiredDeviceCapabilities</key>
|
||||||
|
<array>
|
||||||
|
<string>armv7</string>
|
||||||
|
</array>
|
||||||
|
<key>UISupportedInterfaceOrientations</key>
|
||||||
|
<array>
|
||||||
|
<string>UIInterfaceOrientationPortrait</string>
|
||||||
|
<string>UIInterfaceOrientationLandscapeLeft</string>
|
||||||
|
<string>UIInterfaceOrientationLandscapeRight</string>
|
||||||
|
</array>
|
||||||
|
<key>UISupportedInterfaceOrientations~ipad</key>
|
||||||
|
<array>
|
||||||
|
<string>UIInterfaceOrientationPortrait</string>
|
||||||
|
<string>UIInterfaceOrientationPortraitUpsideDown</string>
|
||||||
|
<string>UIInterfaceOrientationLandscapeLeft</string>
|
||||||
|
<string>UIInterfaceOrientationLandscapeRight</string>
|
||||||
|
</array>
|
||||||
|
<key>UIViewControllerBasedStatusBarAppearance</key>
|
||||||
|
<true/>
|
||||||
|
</dict>
|
||||||
|
</plist>
|
||||||
9
ios/App/CapApp-SPM/.gitignore
vendored
Normal file
9
ios/App/CapApp-SPM/.gitignore
vendored
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
.DS_Store
|
||||||
|
/.build
|
||||||
|
/Packages
|
||||||
|
/*.xcodeproj
|
||||||
|
xcuserdata/
|
||||||
|
DerivedData/
|
||||||
|
.swiftpm/config/registries.json
|
||||||
|
.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
|
||||||
|
.netrc
|
||||||
25
ios/App/CapApp-SPM/Package.swift
Normal file
25
ios/App/CapApp-SPM/Package.swift
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
// swift-tools-version: 5.9
|
||||||
|
import PackageDescription
|
||||||
|
|
||||||
|
// DO NOT MODIFY THIS FILE - managed by Capacitor CLI commands
|
||||||
|
let package = Package(
|
||||||
|
name: "CapApp-SPM",
|
||||||
|
platforms: [.iOS(.v15)],
|
||||||
|
products: [
|
||||||
|
.library(
|
||||||
|
name: "CapApp-SPM",
|
||||||
|
targets: ["CapApp-SPM"])
|
||||||
|
],
|
||||||
|
dependencies: [
|
||||||
|
.package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.4.0")
|
||||||
|
],
|
||||||
|
targets: [
|
||||||
|
.target(
|
||||||
|
name: "CapApp-SPM",
|
||||||
|
dependencies: [
|
||||||
|
.product(name: "Capacitor", package: "capacitor-swift-pm"),
|
||||||
|
.product(name: "Cordova", package: "capacitor-swift-pm")
|
||||||
|
]
|
||||||
|
)
|
||||||
|
]
|
||||||
|
)
|
||||||
5
ios/App/CapApp-SPM/README.md
Normal file
5
ios/App/CapApp-SPM/README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# CapApp-SPM
|
||||||
|
|
||||||
|
This package is used to host SPM dependencies for your Capacitor project
|
||||||
|
|
||||||
|
Do not modify the contents of it or there may be unintended consequences.
|
||||||
1
ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift
Normal file
1
ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift
Normal file
@@ -0,0 +1 @@
|
|||||||
|
public let isCapacitorApp = true
|
||||||
1
ios/debug.xcconfig
Normal file
1
ios/debug.xcconfig
Normal file
@@ -0,0 +1 @@
|
|||||||
|
CAPACITOR_DEBUG = true
|
||||||
1049
package-lock.json
generated
1049
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1 +1 @@
|
|||||||
{"name":"language-app","version":"1.0.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"canvas-confetti":"^1.9.4","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.4","vite":"^6.3.1"}}
|
{"name":"snakkimo","version":"1.0.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"@capacitor/cli":"^8.4.0","@capacitor/core":"^8.4.0","@capacitor/ios":"^8.4.0","canvas-confetti":"^1.9.4","capacitor-secure-storage-plugin":"^0.13.0","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.4","vite":"^6.3.1"}}
|
||||||
776
setup_auth.mjs
Normal file
776
setup_auth.mjs
Normal file
@@ -0,0 +1,776 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// Führe aus: node setup_auth.js
|
||||||
|
// Im Verzeichnis: /Users/tim/Documents/GitTea/Language
|
||||||
|
|
||||||
|
import { writeFileSync, mkdirSync } from 'fs'
|
||||||
|
import { join } from 'path'
|
||||||
|
|
||||||
|
const ROOT = '/Users/tim/Documents/GitTea/Language'
|
||||||
|
|
||||||
|
const files = {
|
||||||
|
// ─── .env (falls noch nicht vorhanden) ───────────────────
|
||||||
|
'.env': `VITE_DIRECTUS_URL=https://db.hejyou.com
|
||||||
|
VITE_DIRECTUS_TOKEN=j6YyjhoFidnU3cI3MSrcgTXqO3t2wbZG
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── API Service ─────────────────────────────────────────
|
||||||
|
'src/api/directus.js': `const BASE = import.meta.env.VITE_DIRECTUS_URL
|
||||||
|
const TOKEN = import.meta.env.VITE_DIRECTUS_TOKEN
|
||||||
|
|
||||||
|
const headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': \`Bearer \${TOKEN}\`,
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function login(email, password) {
|
||||||
|
const res = await fetch(\`\${BASE}/auth/login\`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
})
|
||||||
|
const data = await res.json()
|
||||||
|
if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Login fehlgeschlagen.')
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getMe(userToken) {
|
||||||
|
const res = await fetch(
|
||||||
|
\`\${BASE}/users/me?fields=id,username,language_native,language_target\`,
|
||||||
|
{ headers: { 'Authorization': \`Bearer \${userToken}\` } }
|
||||||
|
)
|
||||||
|
const data = await res.json()
|
||||||
|
if (!res.ok) throw new Error('Profil konnte nicht geladen werden.')
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function registerUser(email, password) {
|
||||||
|
const res = await fetch(\`\${BASE}/users\`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
})
|
||||||
|
const data = await res.json()
|
||||||
|
if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Registrierung fehlgeschlagen.')
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function checkUsername(username) {
|
||||||
|
const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '')
|
||||||
|
const res = await fetch(
|
||||||
|
\`\${BASE}/items/users_language?filter[username_lowercases][_eq]=\${encodeURIComponent(clean)}&fields=id&limit=1\`,
|
||||||
|
{ headers }
|
||||||
|
)
|
||||||
|
const data = await res.json()
|
||||||
|
return data.data?.length === 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createProfile({ userId, username, nativeLang, targetLang, userToken }) {
|
||||||
|
const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '')
|
||||||
|
const authHeaders = userToken
|
||||||
|
? { 'Content-Type': 'application/json', 'Authorization': \`Bearer \${userToken}\` }
|
||||||
|
: headers
|
||||||
|
|
||||||
|
const profileRes = await fetch(\`\${BASE}/items/users_language\`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify({ username_public: username, username_lowercases: clean, status: 'published' }),
|
||||||
|
})
|
||||||
|
const profileData = await profileRes.json()
|
||||||
|
if (!profileRes.ok) throw new Error(profileData.errors?.[0]?.message || 'Profil konnte nicht erstellt werden.')
|
||||||
|
const profileId = profileData.data.id
|
||||||
|
|
||||||
|
await fetch(\`\${BASE}/users/\${userId}\`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: authHeaders,
|
||||||
|
body: JSON.stringify({ username: profileId, language_native: nativeLang, language_target: targetLang }),
|
||||||
|
})
|
||||||
|
|
||||||
|
await fetch(\`\${BASE}/items/users_language/\${profileId}\`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify({ user: userId }),
|
||||||
|
})
|
||||||
|
|
||||||
|
await fetch(\`\${BASE}/items/learning_pairs\`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify({
|
||||||
|
user: profileId,
|
||||||
|
language_from: nativeLang,
|
||||||
|
language_to: targetLang,
|
||||||
|
active: true,
|
||||||
|
current_level: 1,
|
||||||
|
points: 0,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
return profileId
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LANGUAGE_OPTIONS = [
|
||||||
|
{ id: '88053026-3d7e-4799-b10d-67187f7c1709', label: 'Deutsch', flag: '🇩🇪' },
|
||||||
|
{ id: '99fbaa9d-3cac-48cb-a5e2-dcb320e913e4', label: 'Englisch', flag: '🇬🇧' },
|
||||||
|
{ id: '25350b32-e9ab-4fec-946e-c0f11eff70dd', label: 'Schwedisch', flag: '🇸🇪' },
|
||||||
|
]
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Auth Context ─────────────────────────────────────────
|
||||||
|
'src/context/AuthContext.jsx': `import { createContext, useContext, useState, useEffect } from 'react'
|
||||||
|
import { getMe } from '../api/directus'
|
||||||
|
|
||||||
|
const AuthContext = createContext(null)
|
||||||
|
|
||||||
|
export function AuthProvider({ children }) {
|
||||||
|
const [token, setToken] = useState(() => localStorage.getItem('hejyou_token'))
|
||||||
|
const [user, setUser] = useState(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!token) { setLoading(false); return }
|
||||||
|
getMe(token)
|
||||||
|
.then(setUser)
|
||||||
|
.catch(() => { localStorage.removeItem('hejyou_token'); setToken(null) })
|
||||||
|
.finally(() => setLoading(false))
|
||||||
|
}, [token])
|
||||||
|
|
||||||
|
const saveToken = (t) => {
|
||||||
|
localStorage.setItem('hejyou_token', t)
|
||||||
|
setToken(t)
|
||||||
|
}
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
localStorage.removeItem('hejyou_token')
|
||||||
|
setToken(null)
|
||||||
|
setUser(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={{ token, user, setUser, saveToken, logout, loading }}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAuth = () => useContext(AuthContext)
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── UI Components ────────────────────────────────────────
|
||||||
|
'src/components/auth/ui.jsx': `import { useState } from 'react'
|
||||||
|
import styles from './auth.module.css'
|
||||||
|
|
||||||
|
export function FormGroup({ label, children }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
{label && <label className={styles.label}>{label}</label>}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Input({ className, ...props }) {
|
||||||
|
return <input className={styles.input} {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Select({ children, ...props }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.selectWrap}>
|
||||||
|
<select className={styles.input} {...props}>{children}</select>
|
||||||
|
<div className={styles.selectArrow} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Button({ loading, children, ...props }) {
|
||||||
|
return (
|
||||||
|
<button className={styles.btn} {...props}>
|
||||||
|
{children}
|
||||||
|
{loading && <span className={styles.spinner} />}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Alert({ message }) {
|
||||||
|
if (!message) return null
|
||||||
|
return <div className={styles.alert}>{message}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StepDots({ current, total }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.stepDots}>
|
||||||
|
{Array.from({ length: total }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={styles.stepDot}
|
||||||
|
style={{ background: i === current ? 'var(--accent)' : 'var(--border)', width: i === current ? '18px' : '6px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span className={styles.stepLabel}>Schritt {current + 1} von {total}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Auth CSS Module ──────────────────────────────────────
|
||||||
|
'src/components/auth/auth.module.css': `:root {
|
||||||
|
--bg: #F5F0E8;
|
||||||
|
--surface: #FFFCF7;
|
||||||
|
--border: #E2DAD0;
|
||||||
|
--text: #2C2520;
|
||||||
|
--muted: #9A8F85;
|
||||||
|
--accent: #5C7A5E;
|
||||||
|
--accent-lt: #EAF0EA;
|
||||||
|
--danger: #C0544A;
|
||||||
|
--danger-lt: #FBF0EF;
|
||||||
|
--radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formGroup { margin-bottom: 16px; }
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--muted);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--bg);
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text);
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
.input:focus {
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 3px rgba(92,122,94,0.12);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectWrap { position: relative; }
|
||||||
|
.selectArrow {
|
||||||
|
position: absolute;
|
||||||
|
right: 14px; top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-top: 6px solid var(--muted);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.selectWrap .input { padding-right: 36px; cursor: pointer; }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 13px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: background 0.2s, transform 0.1s;
|
||||||
|
}
|
||||||
|
.btn:hover { background: #4a6650; }
|
||||||
|
.btn:active { transform: scale(0.98); }
|
||||||
|
.btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 14px; height: 14px;
|
||||||
|
border: 2px solid rgba(255,255,255,0.35);
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
background: var(--danger-lt);
|
||||||
|
border: 1px solid #EBCBC8;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--danger);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDots {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.stepDot {
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
.stepLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Login Form ───────────────────────────────────────────
|
||||||
|
'src/components/auth/LoginForm.jsx': `import { useState } from 'react'
|
||||||
|
import { login, getMe } from '../../api/directus'
|
||||||
|
import { useAuth } from '../../context/AuthContext'
|
||||||
|
import { FormGroup, Input, Button, Alert } from './ui'
|
||||||
|
|
||||||
|
export default function LoginForm({ onNeedsProfile }) {
|
||||||
|
const { saveToken, setUser } = useAuth()
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [pw, setPw] = useState('')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return }
|
||||||
|
setError('')
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const { access_token } = await login(email, pw)
|
||||||
|
saveToken(access_token)
|
||||||
|
const me = await getMe(access_token)
|
||||||
|
setUser(me)
|
||||||
|
if (!me.username || !me.language_native || !me.language_target) {
|
||||||
|
onNeedsProfile(me.id, access_token)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<Alert message={error} />
|
||||||
|
<FormGroup label="E-Mail">
|
||||||
|
<Input type="email" placeholder="deine@email.de" value={email}
|
||||||
|
onChange={e => setEmail(e.target.value)} autoComplete="email" autoFocus />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup label="Passwort">
|
||||||
|
<Input type="password" placeholder="••••••••" value={pw}
|
||||||
|
onChange={e => setPw(e.target.value)} autoComplete="current-password" />
|
||||||
|
</FormGroup>
|
||||||
|
<Button type="submit" loading={loading} disabled={loading}>
|
||||||
|
{loading ? 'Anmelden…' : 'Anmelden'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Register Step 1 ──────────────────────────────────────
|
||||||
|
'src/components/auth/RegisterStep1.jsx': `import { useState } from 'react'
|
||||||
|
import { registerUser, login } from '../../api/directus'
|
||||||
|
import { useAuth } from '../../context/AuthContext'
|
||||||
|
import { FormGroup, Input, Button, Alert, StepDots } from './ui'
|
||||||
|
|
||||||
|
export default function RegisterStep1({ onSuccess }) {
|
||||||
|
const { saveToken } = useAuth()
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [pw, setPw] = useState('')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return }
|
||||||
|
if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return }
|
||||||
|
setError('')
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const newUser = await registerUser(email, pw)
|
||||||
|
const { access_token } = await login(email, pw)
|
||||||
|
saveToken(access_token)
|
||||||
|
onSuccess(newUser.id, access_token)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<StepDots current={0} total={2} />
|
||||||
|
<Alert message={error} />
|
||||||
|
<FormGroup label="E-Mail">
|
||||||
|
<Input type="email" placeholder="deine@email.de" value={email}
|
||||||
|
onChange={e => setEmail(e.target.value)} autoComplete="email" autoFocus />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup label="Passwort">
|
||||||
|
<Input type="password" placeholder="Mindestens 8 Zeichen" value={pw}
|
||||||
|
onChange={e => setPw(e.target.value)} autoComplete="new-password" />
|
||||||
|
</FormGroup>
|
||||||
|
<Button type="submit" loading={loading} disabled={loading}>
|
||||||
|
{loading ? 'Weiter…' : 'Weiter'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Register Step 2 ──────────────────────────────────────
|
||||||
|
'src/components/auth/RegisterStep2.jsx': `import { useState, useRef, useCallback } from 'react'
|
||||||
|
import { checkUsername, createProfile, LANGUAGE_OPTIONS } from '../../api/directus'
|
||||||
|
import { useAuth } from '../../context/AuthContext'
|
||||||
|
import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui'
|
||||||
|
import styles from './auth.module.css'
|
||||||
|
|
||||||
|
export default function RegisterStep2({ userId, userToken, onSuccess }) {
|
||||||
|
const { setUser } = useAuth()
|
||||||
|
const [username, setUsername] = useState('')
|
||||||
|
const [nativeLang, setNativeLang] = useState('')
|
||||||
|
const [targetLang, setTargetLang] = useState('')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [usernameState, setUsernameState] = useState('idle')
|
||||||
|
const debounceRef = useRef(null)
|
||||||
|
|
||||||
|
const handleUsernameChange = useCallback((val) => {
|
||||||
|
setUsername(val)
|
||||||
|
setUsernameState('idle')
|
||||||
|
clearTimeout(debounceRef.current)
|
||||||
|
if (val.length < 3) return
|
||||||
|
setUsernameState('checking')
|
||||||
|
debounceRef.current = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const available = await checkUsername(val)
|
||||||
|
setUsernameState(available ? 'available' : 'taken')
|
||||||
|
} catch { setUsernameState('idle') }
|
||||||
|
}, 450)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
if (!username) { setError('Bitte einen Username wählen.'); return }
|
||||||
|
if (usernameState !== 'available') { setError('Bitte einen verfügbaren Username wählen.'); return }
|
||||||
|
if (!nativeLang) { setError('Bitte Muttersprache wählen.'); return }
|
||||||
|
if (!targetLang) { setError('Bitte Zielsprache wählen.'); return }
|
||||||
|
if (nativeLang === targetLang) { setError('Mutter- und Zielsprache dürfen nicht gleich sein.'); return }
|
||||||
|
setError('')
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
await createProfile({ userId, username, nativeLang, targetLang, userToken })
|
||||||
|
setUser(prev => ({ ...prev, username: true, language_native: nativeLang, language_target: targetLang }))
|
||||||
|
onSuccess(username)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusColor = { idle: 'var(--muted)', checking: 'var(--muted)', available: 'var(--accent)', taken: 'var(--danger)' }
|
||||||
|
const statusText = { idle: '', checking: '…', available: '✓ verfügbar', taken: '✕ vergeben' }
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<StepDots current={1} total={2} />
|
||||||
|
<Alert message={error} />
|
||||||
|
<FormGroup label="Username">
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<Input type="text" placeholder="dein_username" value={username}
|
||||||
|
onChange={e => handleUsernameChange(e.target.value)}
|
||||||
|
autoComplete="off" autoFocus style={{ paddingRight: '110px' }} />
|
||||||
|
{usernameState !== 'idle' && (
|
||||||
|
<span style={{
|
||||||
|
position: 'absolute', right: '12px', top: '50%',
|
||||||
|
transform: 'translateY(-50%)', fontSize: '12px', fontWeight: 500,
|
||||||
|
color: statusColor[usernameState], whiteSpace: 'nowrap',
|
||||||
|
}}>
|
||||||
|
{statusText[usernameState]}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup label="Muttersprache">
|
||||||
|
<Select value={nativeLang} onChange={e => setNativeLang(e.target.value)}>
|
||||||
|
<option value="">Bitte wählen…</option>
|
||||||
|
{LANGUAGE_OPTIONS.map(l => <option key={l.id} value={l.id}>{l.flag} {l.label}</option>)}
|
||||||
|
</Select>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup label="Ich möchte lernen">
|
||||||
|
<Select value={targetLang} onChange={e => setTargetLang(e.target.value)}>
|
||||||
|
<option value="">Bitte wählen…</option>
|
||||||
|
{LANGUAGE_OPTIONS.filter(l => l.id !== nativeLang).map(l => <option key={l.id} value={l.id}>{l.flag} {l.label}</option>)}
|
||||||
|
</Select>
|
||||||
|
</FormGroup>
|
||||||
|
<Button type="submit" loading={loading}
|
||||||
|
disabled={loading || usernameState === 'taken' || usernameState === 'checking'}>
|
||||||
|
{loading ? 'Speichere…' : 'Profil erstellen'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── Auth Screen ──────────────────────────────────────────
|
||||||
|
'src/components/auth/AuthScreen.jsx': `import { useState } from 'react'
|
||||||
|
import LoginForm from './LoginForm'
|
||||||
|
import RegisterStep1 from './RegisterStep1'
|
||||||
|
import RegisterStep2 from './RegisterStep2'
|
||||||
|
import styles from './AuthScreen.module.css'
|
||||||
|
|
||||||
|
function Brand() {
|
||||||
|
return (
|
||||||
|
<div className={styles.brand}>
|
||||||
|
<div className={styles.brandMark}>
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M8 12q2-5 4-4t4 4-4 4-4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 className={styles.brandTitle}>HejYou</h1>
|
||||||
|
<p className={styles.brandSub}>Sprachen lernen wie ein Kind</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ModeToggle({ mode, onChange }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.toggle}>
|
||||||
|
{['login', 'register'].map(m => (
|
||||||
|
<button key={m} onClick={() => onChange(m)}
|
||||||
|
className={mode === m ? \`\${styles.toggleBtn} \${styles.toggleBtnActive}\` : styles.toggleBtn}>
|
||||||
|
{m === 'login' ? 'Anmelden' : 'Registrieren'}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SuccessScreen({ username }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.success}>
|
||||||
|
<div className={styles.successCheck}>
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<polyline points="20 6 9 17 4 12" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<strong className={styles.successTitle}>Willkommen{username ? \`, \${username}\` : ''}!</strong>
|
||||||
|
<p className={styles.successSub}>Dein Abenteuer beginnt jetzt.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AuthScreen() {
|
||||||
|
const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login')
|
||||||
|
const [step, setStep] = useState('main')
|
||||||
|
const [pendingUserId, setPendingUserId] = useState(null)
|
||||||
|
const [pendingToken, setPendingToken] = useState(null)
|
||||||
|
const [successName, setSuccessName] = useState('')
|
||||||
|
const [showToggle, setShowToggle] = useState(true)
|
||||||
|
|
||||||
|
const handleModeChange = (m) => {
|
||||||
|
setMode(m)
|
||||||
|
localStorage.setItem('hejyou_last_mode', m)
|
||||||
|
setStep('main')
|
||||||
|
setShowToggle(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNeedsProfile = (userId, token) => {
|
||||||
|
setPendingUserId(userId); setPendingToken(token)
|
||||||
|
setShowToggle(false); setStep('profile')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.page}>
|
||||||
|
<div className={styles.card}>
|
||||||
|
<Brand />
|
||||||
|
{showToggle && step === 'main' && <ModeToggle mode={mode} onChange={handleModeChange} />}
|
||||||
|
{step === 'main' && mode === 'login' && <LoginForm onNeedsProfile={handleNeedsProfile} />}
|
||||||
|
{step === 'main' && mode === 'register' && <RegisterStep1 onSuccess={(id, t) => handleNeedsProfile(id, t)} />}
|
||||||
|
{step === 'profile' && <RegisterStep2 userId={pendingUserId} userToken={pendingToken} onSuccess={(name) => { setSuccessName(name); setStep('success') }} />}
|
||||||
|
{step === 'success' && <SuccessScreen username={successName} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── AuthScreen CSS Module ────────────────────────────────
|
||||||
|
'src/components/auth/AuthScreen.module.css': `.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
background: var(--bg, #F5F0E8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--surface, #FFFCF7);
|
||||||
|
border: 1px solid var(--border, #E2DAD0);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 48px 44px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
box-shadow: 0 2px 40px rgba(44,37,32,0.06);
|
||||||
|
animation: fadeUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand { text-align: center; margin-bottom: 36px; }
|
||||||
|
.brandMark {
|
||||||
|
width: 48px; height: 48px;
|
||||||
|
background: var(--accent, #5C7A5E);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 14px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.brandTitle {
|
||||||
|
font-family: 'Lora', serif;
|
||||||
|
font-size: 22px; font-weight: 500;
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
color: var(--text, #2C2520);
|
||||||
|
}
|
||||||
|
.brandSub { font-size: 13px; color: var(--muted, #9A8F85); margin-top: 4px; }
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: flex;
|
||||||
|
background: var(--bg, #F5F0E8);
|
||||||
|
border: 1px solid var(--border, #E2DAD0);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 3px; gap: 3px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.toggleBtn {
|
||||||
|
flex: 1; padding: 8px;
|
||||||
|
border: none; border-radius: 8px;
|
||||||
|
background: transparent;
|
||||||
|
font-family: 'DM Sans', sans-serif;
|
||||||
|
font-size: 13px; font-weight: 500;
|
||||||
|
color: var(--muted, #9A8F85);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.toggleBtnActive {
|
||||||
|
background: var(--surface, #FFFCF7);
|
||||||
|
color: var(--text, #2C2520);
|
||||||
|
box-shadow: 0 1px 4px rgba(44,37,32,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.success { text-align: center; padding: 24px 0; }
|
||||||
|
.successCheck {
|
||||||
|
width: 52px; height: 52px;
|
||||||
|
background: var(--accent-lt, #EAF0EA);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin: 0 auto 16px;
|
||||||
|
}
|
||||||
|
.successTitle {
|
||||||
|
font-family: 'Lora', serif;
|
||||||
|
font-size: 18px;
|
||||||
|
display: block; margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.successSub { font-size: 14px; color: var(--muted, #9A8F85); }
|
||||||
|
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: none; }
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
// ─── App.jsx (ersetzt bestehende) ─────────────────────────
|
||||||
|
'src/App.jsx': `import { AuthProvider, useAuth } from './context/AuthContext'
|
||||||
|
import AuthScreen from './components/auth/AuthScreen'
|
||||||
|
|
||||||
|
function AppContent() {
|
||||||
|
const { user, loading, logout } = useAuth()
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<div style={{
|
||||||
|
width: '32px', height: '32px',
|
||||||
|
border: '2px solid #E2DAD0',
|
||||||
|
borderTopColor: '#5C7A5E',
|
||||||
|
borderRadius: '50%',
|
||||||
|
animation: 'spin 0.7s linear infinite',
|
||||||
|
}} />
|
||||||
|
<style>{\`@keyframes spin { to { transform: rotate(360deg); } }\`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nicht eingeloggt oder Profil unvollständig → Auth Screen
|
||||||
|
if (!user || !user.username || !user.language_native || !user.language_target) {
|
||||||
|
return <AuthScreen />
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Eingeloggt → hier kommt dein bestehender App-Content ──
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* TODO: Deine bestehenden Pages/Routes hier einbauen */}
|
||||||
|
<p style={{ padding: 32, fontFamily: 'sans-serif' }}>
|
||||||
|
Eingeloggt ✓ — hier kommt der Feed.
|
||||||
|
<button onClick={logout} style={{ marginLeft: 16, cursor: 'pointer' }}>Logout</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<AppContent />
|
||||||
|
</AuthProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}
|
||||||
|
|
||||||
|
// Erstelle alle Verzeichnisse und schreibe Dateien
|
||||||
|
const dirs = new Set()
|
||||||
|
for (const path of Object.keys(files)) {
|
||||||
|
const parts = path.split('/')
|
||||||
|
for (let i = 1; i < parts.length; i++) {
|
||||||
|
dirs.add(join(ROOT, ...parts.slice(0, i)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const dir of dirs) {
|
||||||
|
try { mkdirSync(dir, { recursive: true }) } catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let written = 0
|
||||||
|
for (const [path, content] of Object.entries(files)) {
|
||||||
|
const fullPath = join(ROOT, path)
|
||||||
|
// .env nur schreiben wenn noch nicht vorhanden
|
||||||
|
if (path === '.env') {
|
||||||
|
try {
|
||||||
|
const existing = await import('fs').then(m => m.readFileSync(fullPath, 'utf8'))
|
||||||
|
console.log('⏭ .env bereits vorhanden – übersprungen')
|
||||||
|
continue
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
writeFileSync(fullPath, content, 'utf8')
|
||||||
|
console.log(`✓ ${path}`)
|
||||||
|
written++
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(\`\nFertig! \${written} Dateien geschrieben.\`)
|
||||||
|
console.log('\nJetzt starten:')
|
||||||
|
console.log(' npm install (falls neue Abhängigkeiten fehlen)')
|
||||||
|
console.log(' npm run dev')
|
||||||
@@ -15,7 +15,7 @@ function AppContent() {
|
|||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
|
<div style={{ height: '100%', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
|
||||||
<div className="app-spinner" />
|
<div className="app-spinner" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -80,9 +80,11 @@ export function langById(id, options) {
|
|||||||
|
|
||||||
// ── Feed ──────────────────────────────────────────────────────────────────────
|
// ── Feed ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
export async function getFeedPairs(userToken, lang = 'de', limit = 20) {
|
export async function getFeedPairs(userToken, lang = 'de', limit = 20, exclude = []) {
|
||||||
|
const params = new URLSearchParams({ lang, limit: String(limit) })
|
||||||
|
if (exclude.length) params.set('exclude', exclude.join(','))
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`${BASE}/auth/feed?lang=${encodeURIComponent(lang)}&limit=${limit}`,
|
`${BASE}/auth/feed?${params}`,
|
||||||
{ headers: auth(userToken) }
|
{ headers: auth(userToken) }
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
|
|||||||
34
src/assets/logo.svg
Normal file
34
src/assets/logo.svg
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" role="img">
|
||||||
|
<title>Snakkimo Logo</title>
|
||||||
|
<desc>Offenes Buch mit wachsendem Blatt und Sonne, in den App-Farben</desc>
|
||||||
|
<rect width="1024" height="1024" fill="#EDE0CE"/>
|
||||||
|
|
||||||
|
<path d="M220 400
|
||||||
|
C140 440 130 540 130 620
|
||||||
|
C130 740 230 800 380 810
|
||||||
|
L644 810
|
||||||
|
C794 800 894 740 894 620
|
||||||
|
C894 540 884 440 804 400"
|
||||||
|
fill="none" stroke="#7A5C3A" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<g fill="none" stroke="#5C3D22" stroke-width="12" stroke-linecap="round">
|
||||||
|
<path d="M500 800 C460 680 380 540 260 430"/>
|
||||||
|
<path d="M524 800 C580 680 680 540 800 430"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g>
|
||||||
|
<path d="M512 800
|
||||||
|
C560 620 680 380 820 200
|
||||||
|
C840 380 800 580 700 720
|
||||||
|
C640 790 560 800 512 800 Z" fill="#C4A85A"/>
|
||||||
|
<path d="M520 780 C580 620 700 400 820 220"
|
||||||
|
fill="none" stroke="#7A5C3A" stroke-width="14" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g stroke="#C4A85A" stroke-width="22" stroke-linecap="round">
|
||||||
|
<line x1="840" y1="30" x2="840" y2="75"/>
|
||||||
|
<line x1="790" y1="45" x2="815" y2="82"/>
|
||||||
|
<line x1="895" y1="50" x2="872" y2="88"/>
|
||||||
|
<line x1="945" y1="95" x2="908" y2="118"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,6 +1,9 @@
|
|||||||
import { useState, useRef } from 'react'
|
import { useState, useRef, useMemo } from 'react'
|
||||||
import confetti from 'canvas-confetti'
|
import confetti from 'canvas-confetti'
|
||||||
import usePairAudio from '../hooks/usePairAudio'
|
import usePairAudio from '../hooks/usePairAudio'
|
||||||
|
import SelectionOverlay from './SelectionOverlay'
|
||||||
|
import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
|
||||||
|
import { speak } from '../utils/speak'
|
||||||
import './PairCards.css'
|
import './PairCards.css'
|
||||||
|
|
||||||
function triggerConfetti() {
|
function triggerConfetti() {
|
||||||
@@ -14,42 +17,6 @@ function triggerConfetti() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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" />
|
|
||||||
{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.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={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>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
||||||
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
||||||
if (!sentence) return null
|
if (!sentence) return null
|
||||||
@@ -87,16 +54,7 @@ function extractVocab(sentence) {
|
|||||||
.map(m => ({ label: m[1], id: m[2] }))
|
.map(m => ({ label: m[1], id: m[2] }))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Strip placeholders to plain text for TTS
|
|
||||||
function toPlainText(sentence) {
|
|
||||||
if (!sentence) return ''
|
|
||||||
return sentence
|
|
||||||
.replace(/\{\{([^.]+)\.[wo]:[0-9a-f-]{36}\}\}/g, '$1')
|
|
||||||
.replace(/[⟦〚]PH\d+:([^⟧〛]*)[⟧〛]/g, '$1')
|
|
||||||
}
|
|
||||||
|
|
||||||
const LANG_LABELS = { sv: 'Svenska', en: 'English', de: 'Deutsch' }
|
const LANG_LABELS = { sv: 'Svenska', en: 'English', de: 'Deutsch' }
|
||||||
const LANG_TTS = { sv: 'sv-SE', en: 'en-US', de: 'de-DE' }
|
|
||||||
|
|
||||||
// Circumference of r=16 circle ≈ 100.53
|
// Circumference of r=16 circle ≈ 100.53
|
||||||
const RING_C = 2 * Math.PI * 16
|
const RING_C = 2 * Math.PI * 16
|
||||||
@@ -117,7 +75,17 @@ export default function PairSentenceCard({ card, onComplete }) {
|
|||||||
const hint = stmt?.[`sentence_${native}`] || null
|
const hint = stmt?.[`sentence_${native}`] || null
|
||||||
const pic = card.picture?.url
|
const pic = card.picture?.url
|
||||||
|
|
||||||
const { play, playing } = usePairAudio(stmt?.audio_url)
|
const { play, playing, currentTime } = usePairAudio(stmt?.audio_url)
|
||||||
|
|
||||||
|
// Karaoke: aktives Chip aus den Audio-Timestamps ableiten, solange vorgelesen wird.
|
||||||
|
const timings = useMemo(
|
||||||
|
() => buildChipTimings(sentence, stmt?.audio_alignment),
|
||||||
|
[sentence, stmt?.audio_alignment],
|
||||||
|
)
|
||||||
|
const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
|
||||||
|
const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
|
||||||
|
? { id: audioChipId, ...card.placeholders[audioChipId] }
|
||||||
|
: null
|
||||||
|
|
||||||
const isWord = activeChip && activeChip.type === 'word'
|
const isWord = activeChip && activeChip.type === 'word'
|
||||||
const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length
|
const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length
|
||||||
@@ -129,7 +97,7 @@ export default function PairSentenceCard({ card, onComplete }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleConfirm() {
|
function handleConfirm() {
|
||||||
if (!unlocked) return
|
if (done || !unlocked) return
|
||||||
setDone(true)
|
setDone(true)
|
||||||
setActiveChip(null)
|
setActiveChip(null)
|
||||||
triggerConfetti()
|
triggerConfetti()
|
||||||
@@ -137,15 +105,10 @@ export default function PairSentenceCard({ card, onComplete }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handlePlay() {
|
function handlePlay() {
|
||||||
|
// play() liefert false, wenn kein Audio-File da ist ODER es nicht geladen
|
||||||
|
// werden konnte → stiller TTS-Fallback.
|
||||||
if (play()) { setUnlocked(true); return }
|
if (play()) { setUnlocked(true); return }
|
||||||
// Fallback: Browser-TTS, falls kein Audio-File vorhanden
|
if (speak(sentence, lang)) setUnlocked(true)
|
||||||
if (!window.speechSynthesis || !sentence) return
|
|
||||||
window.speechSynthesis.cancel()
|
|
||||||
const utt = new SpeechSynthesisUtterance(toPlainText(sentence))
|
|
||||||
utt.lang = LANG_TTS[lang] || 'de-DE'
|
|
||||||
utt.rate = 0.9
|
|
||||||
window.speechSynthesis.speak(utt)
|
|
||||||
setUnlocked(true)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function startHold() {
|
function startHold() {
|
||||||
@@ -179,6 +142,7 @@ export default function PairSentenceCard({ card, onComplete }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isObject && <SelectionOverlay chip={activeChip} />}
|
{isObject && <SelectionOverlay chip={activeChip} />}
|
||||||
|
{!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
||||||
@@ -189,7 +153,7 @@ export default function PairSentenceCard({ card, onComplete }) {
|
|||||||
<div className="pair-sentence-text">
|
<div className="pair-sentence-text">
|
||||||
<p className="pair-sentence pair-sentence-clickable" onClick={handlePlay}
|
<p className="pair-sentence pair-sentence-clickable" onClick={handlePlay}
|
||||||
style={{ opacity: showTranslation ? 0 : 1, transition: 'opacity 0.18s', margin: 0 }}>
|
style={{ opacity: showTranslation ? 0 : 1, transition: 'opacity 0.18s', margin: 0 }}>
|
||||||
{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
|
{resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
|
||||||
</p>
|
</p>
|
||||||
{hint && (
|
{hint && (
|
||||||
<p className="pair-sentence" style={{
|
<p className="pair-sentence" style={{
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import { useState, useMemo } from 'react'
|
import { useState, useMemo } from 'react'
|
||||||
import confetti from 'canvas-confetti'
|
import confetti from 'canvas-confetti'
|
||||||
import usePairAudio from '../hooks/usePairAudio'
|
import usePairAudio from '../hooks/usePairAudio'
|
||||||
|
import SelectionOverlay from './SelectionOverlay'
|
||||||
|
import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
|
||||||
|
import { speak } from '../utils/speak'
|
||||||
import './PairCards.css'
|
import './PairCards.css'
|
||||||
|
|
||||||
function triggerConfetti() {
|
function triggerConfetti() {
|
||||||
@@ -14,42 +17,6 @@ function triggerConfetti() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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" />
|
|
||||||
{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.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={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>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
||||||
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
||||||
if (!sentence) return null
|
if (!sentence) return null
|
||||||
@@ -106,7 +73,17 @@ export default function PairWordCard({ card, onComplete }) {
|
|||||||
const hint = q?.[`sentence_${native}`] || null
|
const hint = q?.[`sentence_${native}`] || null
|
||||||
const pic = card.picture?.url
|
const pic = card.picture?.url
|
||||||
|
|
||||||
const { play, playing } = usePairAudio(q?.audio_url)
|
const { play, playing, currentTime } = usePairAudio(q?.audio_url)
|
||||||
|
|
||||||
|
// Karaoke: aktives Chip aus den Audio-Timestamps der Frage ableiten.
|
||||||
|
const timings = useMemo(
|
||||||
|
() => buildChipTimings(sentence, q?.audio_alignment),
|
||||||
|
[sentence, q?.audio_alignment],
|
||||||
|
)
|
||||||
|
const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
|
||||||
|
const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
|
||||||
|
? { id: audioChipId, ...card.placeholders[audioChipId] }
|
||||||
|
: null
|
||||||
|
|
||||||
const options = useMemo(() => {
|
const options = useMemo(() => {
|
||||||
const pos = (stmt?.positive_words || []).map(w => ({ ...w, correct: true }))
|
const pos = (stmt?.positive_words || []).map(w => ({ ...w, correct: true }))
|
||||||
@@ -118,6 +95,11 @@ export default function PairWordCard({ card, onComplete }) {
|
|||||||
setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
|
setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Audio-File abspielen; bei fehlendem/nicht ladbarem File still auf TTS zurückfallen.
|
||||||
|
function handlePlay() {
|
||||||
|
if (!play()) speak(sentence, lang)
|
||||||
|
}
|
||||||
|
|
||||||
function handleSelect(opt) {
|
function handleSelect(opt) {
|
||||||
if (confirmed) return
|
if (confirmed) return
|
||||||
setSelectedIds(prev => {
|
setSelectedIds(prev => {
|
||||||
@@ -156,14 +138,15 @@ export default function PairWordCard({ card, onComplete }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isObject && <SelectionOverlay chip={activeChip} />}
|
{isObject && <SelectionOverlay chip={activeChip} />}
|
||||||
|
{!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
||||||
|
|
||||||
<div className="pair-sentence-row">
|
<div className="pair-sentence-row">
|
||||||
<div className="pair-sentence-text">
|
<div className="pair-sentence-text">
|
||||||
<p className="pair-question pair-sentence-clickable" onClick={() => play()}>
|
<p className="pair-question pair-sentence-clickable" onClick={handlePlay}>
|
||||||
{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
|
{resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
|
||||||
</p>
|
</p>
|
||||||
{hint && !confirmed && (
|
{hint && !confirmed && (
|
||||||
<p className="pair-hint">
|
<p className="pair-hint">
|
||||||
@@ -171,7 +154,7 @@ export default function PairWordCard({ card, onComplete }) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={() => play()} title="Vorlesen">
|
<button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={handlePlay} title="Vorlesen">
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import { useState } from 'react'
|
import { useState, useMemo } from 'react'
|
||||||
import confetti from 'canvas-confetti'
|
import confetti from 'canvas-confetti'
|
||||||
import usePairAudio from '../hooks/usePairAudio'
|
import usePairAudio from '../hooks/usePairAudio'
|
||||||
|
import SelectionOverlay from './SelectionOverlay'
|
||||||
|
import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
|
||||||
|
import { speak } from '../utils/speak'
|
||||||
import './PairCards.css'
|
import './PairCards.css'
|
||||||
|
|
||||||
function triggerConfetti() {
|
function triggerConfetti() {
|
||||||
@@ -14,42 +17,6 @@ function triggerConfetti() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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" />
|
|
||||||
{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.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={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>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
|
||||||
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
function resolveSentence(sentence, placeholders, onChipClick, activeId) {
|
||||||
if (!sentence) return null
|
if (!sentence) return null
|
||||||
@@ -94,12 +61,27 @@ export default function PairYesNoCard({ card, onComplete }) {
|
|||||||
const sentence = q?.[`sentence_${lang}`] || q?.sentence_de
|
const sentence = q?.[`sentence_${lang}`] || q?.sentence_de
|
||||||
const hint = q?.[`sentence_${native}`] || null
|
const hint = q?.[`sentence_${native}`] || null
|
||||||
|
|
||||||
const { play, playing } = usePairAudio(q?.audio_url)
|
const { play, playing, currentTime } = usePairAudio(q?.audio_url)
|
||||||
|
|
||||||
|
// Karaoke: aktives Chip aus den Audio-Timestamps der Frage ableiten.
|
||||||
|
const timings = useMemo(
|
||||||
|
() => buildChipTimings(sentence, q?.audio_alignment),
|
||||||
|
[sentence, q?.audio_alignment],
|
||||||
|
)
|
||||||
|
const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
|
||||||
|
const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
|
||||||
|
? { id: audioChipId, ...card.placeholders[audioChipId] }
|
||||||
|
: null
|
||||||
|
|
||||||
function handleChipClick(id, entry) {
|
function handleChipClick(id, entry) {
|
||||||
setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
|
setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Audio-File abspielen; bei fehlendem/nicht ladbarem File still auf TTS zurückfallen.
|
||||||
|
function handlePlay() {
|
||||||
|
if (!play()) speak(sentence, lang)
|
||||||
|
}
|
||||||
|
|
||||||
function handleAnswer(answer) {
|
function handleAnswer(answer) {
|
||||||
if (result) return
|
if (result) return
|
||||||
setActiveChip(null)
|
setActiveChip(null)
|
||||||
@@ -127,6 +109,7 @@ export default function PairYesNoCard({ card, onComplete }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isObject && <SelectionOverlay chip={activeChip} />}
|
{isObject && <SelectionOverlay chip={activeChip} />}
|
||||||
|
{!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
<div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
|
||||||
@@ -134,7 +117,7 @@ export default function PairYesNoCard({ card, onComplete }) {
|
|||||||
<div className="pair-sentence-row">
|
<div className="pair-sentence-row">
|
||||||
<div className="pair-sentence-text">
|
<div className="pair-sentence-text">
|
||||||
<p className="pair-question pair-sentence-clickable" onClick={() => play()}>
|
<p className="pair-question pair-sentence-clickable" onClick={() => play()}>
|
||||||
{resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
|
{resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
|
||||||
</p>
|
</p>
|
||||||
{hint && !result && (
|
{hint && !result && (
|
||||||
<p className="pair-hint">
|
<p className="pair-hint">
|
||||||
@@ -142,7 +125,7 @@ export default function PairYesNoCard({ card, onComplete }) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={() => play()} title="Vorlesen">
|
<button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={handlePlay} title="Vorlesen">
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
||||||
|
|||||||
42
src/components/SelectionOverlay.jsx
Normal file
42
src/components/SelectionOverlay.jsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
// Bildregion-Overlay für Objekt-Chips.
|
||||||
|
// Standard: Rest des Bildes verdunkeln + Region umranden + Label (Klick-Highlight).
|
||||||
|
// outlineOnly: nur die Region umranden, kein Verdunkeln, kein Label (Karaoke-Vorlesen).
|
||||||
|
export default function SelectionOverlay({ chip, outlineOnly = false }) {
|
||||||
|
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">
|
||||||
|
{!outlineOnly && (
|
||||||
|
<>
|
||||||
|
<defs>
|
||||||
|
<mask id={maskId}>
|
||||||
|
<rect width="100" height="100" fill="white" />
|
||||||
|
{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.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" />
|
||||||
|
))}
|
||||||
|
{!outlineOnly && label && (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -16,14 +16,14 @@ const css = `
|
|||||||
`
|
`
|
||||||
|
|
||||||
export default function AuthScreen() {
|
export default function AuthScreen() {
|
||||||
const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login')
|
const [mode, setMode] = useState(() => localStorage.getItem('snakkimo_last_mode') || 'login')
|
||||||
const [step, setStep] = useState('main')
|
const [step, setStep] = useState('main')
|
||||||
const [pendingUserId, setPendingUserId] = useState(null)
|
const [pendingUserId, setPendingUserId] = useState(null)
|
||||||
const [pendingToken, setPendingToken] = useState(null)
|
const [pendingToken, setPendingToken] = useState(null)
|
||||||
const [successName, setSuccessName] = useState('')
|
const [successName, setSuccessName] = useState('')
|
||||||
|
|
||||||
const handleModeChange = (m) => {
|
const handleModeChange = (m) => {
|
||||||
setMode(m); localStorage.setItem('hejyou_last_mode', m); setStep('main')
|
setMode(m); localStorage.setItem('snakkimo_last_mode', m); setStep('main')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleNeedsProfile = (userId, token) => {
|
const handleNeedsProfile = (userId, token) => {
|
||||||
@@ -33,7 +33,7 @@ export default function AuthScreen() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<style>{css}</style>
|
<style>{css}</style>
|
||||||
<div className="auth-root" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', background: 'var(--bg)' }}>
|
<div className="auth-root" style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', background: 'var(--bg)' }}>
|
||||||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '24px', padding: '48px 44px', width: '100%', maxWidth: '420px', boxShadow: '0 2px 40px rgba(44,37,32,0.06)', animation: 'fadeUp 0.3s ease' }}>
|
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '24px', padding: '48px 44px', width: '100%', maxWidth: '420px', boxShadow: '0 2px 40px rgba(44,37,32,0.06)', animation: 'fadeUp 0.3s ease' }}>
|
||||||
|
|
||||||
{/* Brand */}
|
{/* Brand */}
|
||||||
@@ -43,7 +43,7 @@ export default function AuthScreen() {
|
|||||||
<circle cx="12" cy="12" r="10"/><path d="M8 12q2-5 4-4t4 4-4 4-4-4"/>
|
<circle cx="12" cy="12" r="10"/><path d="M8 12q2-5 4-4t4 4-4 4-4-4"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h1 style={{ fontFamily: 'var(--font-display)', fontSize: '22px', fontWeight: 500, letterSpacing: '-0.3px', color: 'var(--text)' }}>HejYou</h1>
|
<h1 style={{ fontFamily: 'var(--font-display)', fontSize: '22px', fontWeight: 500, letterSpacing: '-0.3px', color: 'var(--text)' }}>Snakkimo</h1>
|
||||||
<p style={{ fontSize: '13px', color: 'var(--muted)', marginTop: '4px' }}>Sprachen lernen wie ein Kind</p>
|
<p style={{ fontSize: '13px', color: 'var(--muted)', marginTop: '4px' }}>Sprachen lernen wie ein Kind</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react'
|
import { useState, useRef } from 'react'
|
||||||
import { login, getMe } from '../../api/directus'
|
import { login, getMe } from '../../api/directus'
|
||||||
import { useAuth } from '../../context/AuthContext'
|
import { useAuth } from '../../context/AuthContext'
|
||||||
import { FormGroup, Input, Button, Alert } from './ui'
|
import { FormGroup, Input, Button, Alert } from './ui'
|
||||||
@@ -9,10 +9,13 @@ export default function LoginForm({ onNeedsProfile }) {
|
|||||||
const [pw, setPw] = useState('')
|
const [pw, setPw] = useState('')
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e?.preventDefault()
|
e?.preventDefault()
|
||||||
|
if (submittingRef.current) return
|
||||||
if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return }
|
if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return }
|
||||||
|
submittingRef.current = true
|
||||||
setError(''); setLoading(true)
|
setError(''); setLoading(true)
|
||||||
try {
|
try {
|
||||||
const result = await login(email, pw)
|
const result = await login(email, pw)
|
||||||
@@ -27,6 +30,7 @@ export default function LoginForm({ onNeedsProfile }) {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message)
|
setError(err.message)
|
||||||
} finally {
|
} finally {
|
||||||
|
submittingRef.current = false
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react'
|
import { useState, useRef } from 'react'
|
||||||
import { registerUser } from '../../api/directus'
|
import { registerUser } from '../../api/directus'
|
||||||
import { FormGroup, Input, Button, Alert, StepDots } from './ui'
|
import { FormGroup, Input, Button, Alert, StepDots } from './ui'
|
||||||
|
|
||||||
@@ -7,11 +7,14 @@ export default function RegisterStep1({ onSuccess }) {
|
|||||||
const [pw, setPw] = useState('')
|
const [pw, setPw] = useState('')
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e?.preventDefault()
|
e?.preventDefault()
|
||||||
|
if (submittingRef.current) return
|
||||||
if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return }
|
if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return }
|
||||||
if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return }
|
if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return }
|
||||||
|
submittingRef.current = true
|
||||||
setError(''); setLoading(true)
|
setError(''); setLoading(true)
|
||||||
try {
|
try {
|
||||||
const { token, userId } = await registerUser(email, pw)
|
const { token, userId } = await registerUser(email, pw)
|
||||||
@@ -19,6 +22,7 @@ export default function RegisterStep1({ onSuccess }) {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message)
|
setError(err.message)
|
||||||
} finally {
|
} finally {
|
||||||
|
submittingRef.current = false
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect, useRef } from 'react'
|
||||||
import { checkUsername, createProfile, getLanguageOptions, getMe } from '../../api/directus'
|
import { checkUsername, createProfile, getLanguageOptions, getMe } from '../../api/directus'
|
||||||
import { useAuth } from '../../context/AuthContext'
|
import { useAuth } from '../../context/AuthContext'
|
||||||
import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui'
|
import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui'
|
||||||
@@ -11,6 +11,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
|
|||||||
const [languages, setLanguages] = useState([])
|
const [languages, setLanguages] = useState([])
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getLanguageOptions()
|
getLanguageOptions()
|
||||||
@@ -20,6 +21,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
|
|||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e?.preventDefault()
|
e?.preventDefault()
|
||||||
|
if (submittingRef.current) return
|
||||||
if (!username || !nativeLang || !targetLang) {
|
if (!username || !nativeLang || !targetLang) {
|
||||||
setError('Bitte alle Felder ausfüllen.'); return
|
setError('Bitte alle Felder ausfüllen.'); return
|
||||||
}
|
}
|
||||||
@@ -29,6 +31,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
|
|||||||
if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) {
|
if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) {
|
||||||
setError('Username: 3–20 Zeichen, nur Buchstaben, Zahlen und _'); return
|
setError('Username: 3–20 Zeichen, nur Buchstaben, Zahlen und _'); return
|
||||||
}
|
}
|
||||||
|
submittingRef.current = true
|
||||||
setError(''); setLoading(true)
|
setError(''); setLoading(true)
|
||||||
try {
|
try {
|
||||||
const available = await checkUsername(username, userToken)
|
const available = await checkUsername(username, userToken)
|
||||||
@@ -44,6 +47,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message)
|
setError(err.message)
|
||||||
} finally {
|
} finally {
|
||||||
|
submittingRef.current = false
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,35 @@
|
|||||||
import { createContext, useContext, useState, useEffect } from 'react'
|
import { createContext, useContext, useState, useEffect } from 'react'
|
||||||
import { getMe } from '../api/directus'
|
import { getMe } from '../api/directus'
|
||||||
|
import { getStoredToken, setStoredToken, clearStoredToken } from '../utils/secureToken'
|
||||||
|
|
||||||
const AuthContext = createContext(null)
|
const AuthContext = createContext(null)
|
||||||
|
|
||||||
export function AuthProvider({ children }) {
|
export function AuthProvider({ children }) {
|
||||||
const [token, setToken] = useState(() => localStorage.getItem('hejyou_token'))
|
const [token, setToken] = useState(null)
|
||||||
const [user, setUser] = useState(null)
|
const [user, setUser] = useState(null)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [bootstrapped, setBootstrapped] = useState(false)
|
||||||
|
|
||||||
|
// Token einmalig aus dem sicheren Speicher laden (inkl. Migration aus localStorage).
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
getStoredToken()
|
||||||
|
.then(setToken)
|
||||||
|
.catch(() => setToken(null))
|
||||||
|
.finally(() => setBootstrapped(true))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Profil laden, sobald der Token bekannt ist.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!bootstrapped) return
|
||||||
if (!token) { setLoading(false); return }
|
if (!token) { setLoading(false); return }
|
||||||
getMe(token)
|
getMe(token)
|
||||||
.then(setUser)
|
.then(setUser)
|
||||||
.catch(() => { localStorage.removeItem('hejyou_token'); setToken(null) })
|
.catch(() => { clearStoredToken(); setToken(null) })
|
||||||
.finally(() => setLoading(false))
|
.finally(() => setLoading(false))
|
||||||
}, [token])
|
}, [token, bootstrapped])
|
||||||
|
|
||||||
const saveToken = (t) => { localStorage.setItem('hejyou_token', t); setToken(t) }
|
const saveToken = async (t) => { await setStoredToken(t); setToken(t) }
|
||||||
const logout = () => { localStorage.removeItem('hejyou_token'); setToken(null); setUser(null) }
|
const logout = async () => { await clearStoredToken(); setToken(null); setUser(null) }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{ token, user, setUser, saveToken, logout, loading }}>
|
<AuthContext.Provider value={{ token, user, setUser, saveToken, logout, loading }}>
|
||||||
|
|||||||
@@ -3,25 +3,55 @@ import { useEffect, useRef, useState } from 'react'
|
|||||||
// Nur eine Stimme gleichzeitig im Feed
|
// Nur eine Stimme gleichzeitig im Feed
|
||||||
let currentAudio = null
|
let currentAudio = null
|
||||||
|
|
||||||
|
// Reines Vorlesen wird gedrosselt (User-Wunsch). Pitch bleibt durch den
|
||||||
|
// Browser-Default `preservesPitch` erhalten.
|
||||||
|
const PLAYBACK_RATE = 0.7
|
||||||
|
|
||||||
export default function usePairAudio(url) {
|
export default function usePairAudio(url) {
|
||||||
const audioRef = useRef(null)
|
const audioRef = useRef(null)
|
||||||
|
const rafRef = useRef(null)
|
||||||
|
const failedRef = useRef(false)
|
||||||
const [playing, setPlaying] = useState(false)
|
const [playing, setPlaying] = useState(false)
|
||||||
|
const [currentTime, setCurrentTime] = useState(0)
|
||||||
|
const [failed, setFailed] = useState(false)
|
||||||
|
const markFailed = () => { failedRef.current = true; setFailed(true) }
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!url) { audioRef.current = null; return }
|
if (!url) { audioRef.current = null; return }
|
||||||
|
failedRef.current = false
|
||||||
|
setFailed(false)
|
||||||
const audio = new Audio(url)
|
const audio = new Audio(url)
|
||||||
audio.preload = 'auto'
|
audio.preload = 'auto'
|
||||||
const onPlay = () => setPlaying(true)
|
audio.playbackRate = PLAYBACK_RATE
|
||||||
const onStop = () => setPlaying(false)
|
|
||||||
|
// currentTime ~30fps mitschreiben, solange das Audio läuft (für Karaoke-Sync).
|
||||||
|
let lastTick = 0
|
||||||
|
const tick = (ts) => {
|
||||||
|
if (ts - lastTick >= 33) { lastTick = ts; setCurrentTime(audio.currentTime) }
|
||||||
|
rafRef.current = requestAnimationFrame(tick)
|
||||||
|
}
|
||||||
|
const stopLoop = () => {
|
||||||
|
if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null }
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPlay = () => { setPlaying(true); stopLoop(); rafRef.current = requestAnimationFrame(tick) }
|
||||||
|
const onStop = () => { setPlaying(false); stopLoop(); setCurrentTime(audio.currentTime) }
|
||||||
|
const onEnded = () => { setPlaying(false); stopLoop(); setCurrentTime(0) }
|
||||||
|
// Netz-/Decode-Fehler eines vorhandenen Files → File gilt als nicht abspielbar,
|
||||||
|
// damit play() den TTS-Fallback der Karte greifen lässt.
|
||||||
|
const onError = () => { setPlaying(false); stopLoop(); markFailed() }
|
||||||
audio.addEventListener('play', onPlay)
|
audio.addEventListener('play', onPlay)
|
||||||
audio.addEventListener('pause', onStop)
|
audio.addEventListener('pause', onStop)
|
||||||
audio.addEventListener('ended', onStop)
|
audio.addEventListener('ended', onEnded)
|
||||||
|
audio.addEventListener('error', onError)
|
||||||
audioRef.current = audio
|
audioRef.current = audio
|
||||||
return () => {
|
return () => {
|
||||||
|
stopLoop()
|
||||||
audio.pause()
|
audio.pause()
|
||||||
audio.removeEventListener('play', onPlay)
|
audio.removeEventListener('play', onPlay)
|
||||||
audio.removeEventListener('pause', onStop)
|
audio.removeEventListener('pause', onStop)
|
||||||
audio.removeEventListener('ended', onStop)
|
audio.removeEventListener('ended', onEnded)
|
||||||
|
audio.removeEventListener('error', onError)
|
||||||
if (currentAudio === audio) currentAudio = null
|
if (currentAudio === audio) currentAudio = null
|
||||||
audio.src = ''
|
audio.src = ''
|
||||||
audioRef.current = null
|
audioRef.current = null
|
||||||
@@ -30,13 +60,16 @@ export default function usePairAudio(url) {
|
|||||||
|
|
||||||
function play() {
|
function play() {
|
||||||
const audio = audioRef.current
|
const audio = audioRef.current
|
||||||
if (!audio) return false
|
if (!audio || failedRef.current) return false
|
||||||
if (currentAudio && currentAudio !== audio) currentAudio.pause()
|
if (currentAudio && currentAudio !== audio) currentAudio.pause()
|
||||||
currentAudio = audio
|
currentAudio = audio
|
||||||
audio.currentTime = 0
|
audio.currentTime = 0
|
||||||
audio.play().catch(() => {})
|
audio.playbackRate = PLAYBACK_RATE
|
||||||
|
// AbortError = von einem pause() unterbrochen (harmlos); echte Quell-/Decode-Fehler
|
||||||
|
// markieren das File als nicht abspielbar → Karte fällt auf TTS zurück.
|
||||||
|
audio.play().catch((err) => { if (err?.name !== 'AbortError') markFailed() })
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
return { play, playing }
|
return { play, playing, currentTime, failed }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,12 +67,25 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-ui);
|
font-family: var(--font-ui);
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overscroll-behavior: none;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
|||||||
@@ -2,15 +2,17 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overscroll-behavior: contain;
|
||||||
scroll-snap-type: y mandatory;
|
scroll-snap-type: y mandatory;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-slot {
|
.feed-slot {
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: center;
|
||||||
min-height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: var(--sp-4) var(--sp-5);
|
padding: var(--sp-4) var(--sp-5);
|
||||||
padding-bottom: var(--sp-5);
|
padding-bottom: var(--sp-5);
|
||||||
@@ -26,6 +28,12 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Trigger für Infinite Scroll – unsichtbar, kein eigener Snap-Punkt. */
|
||||||
|
.feed-sentinel {
|
||||||
|
height: 1px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* EP-Badge + Tagesziel-Ring */
|
/* EP-Badge + Tagesziel-Ring */
|
||||||
.ep-badge {
|
.ep-badge {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState, useRef, useCallback } from 'react'
|
||||||
import './Feed.css'
|
import './Feed.css'
|
||||||
import { useAuth } from '../context/AuthContext'
|
import { useAuth } from '../context/AuthContext'
|
||||||
import { getFeedPairs, saveProgress, getUserProgress, getStats } from '../api/directus'
|
import { getFeedPairs, saveProgress, getUserProgress, getStats } from '../api/directus'
|
||||||
@@ -9,6 +9,7 @@ import PairWordCard from '../components/PairWordCard'
|
|||||||
|
|
||||||
// Points per answer_type
|
// Points per answer_type
|
||||||
const POINTS = { text: 2, yes_no: 2, word: 3, question: 3 }
|
const POINTS = { text: 2, yes_no: 2, word: 3, question: 3 }
|
||||||
|
const PAGE_SIZE = 20
|
||||||
|
|
||||||
function buildCard(pair) {
|
function buildCard(pair) {
|
||||||
return {
|
return {
|
||||||
@@ -24,18 +25,29 @@ export default function Feed() {
|
|||||||
const [done, setDone] = useState(new Set())
|
const [done, setDone] = useState(new Set())
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [empty, setEmpty] = useState(false)
|
const [empty, setEmpty] = useState(false)
|
||||||
|
const [loadingMore, setLoadingMore] = useState(false)
|
||||||
|
const [exhausted, setExhausted] = useState(false)
|
||||||
const [totalEp, setTotalEp] = useState(null)
|
const [totalEp, setTotalEp] = useState(null)
|
||||||
const [daily, setDaily] = useState(null) // { ep, daily_goal_ep } – wenn /auth/stats verfügbar
|
const [daily, setDaily] = useState(null) // { ep, daily_goal_ep } – wenn /auth/stats verfügbar
|
||||||
|
|
||||||
|
// Refs für den Nachlade-Pfad: Re-Entrancy-Schutz + immer aktuelle Kartenliste
|
||||||
|
// (Closure im IntersectionObserver wäre sonst veraltet).
|
||||||
|
const loadingMoreRef = useRef(false)
|
||||||
|
const exhaustedRef = useRef(false)
|
||||||
|
const cardsRef = useRef(cards)
|
||||||
|
cardsRef.current = cards
|
||||||
|
const sentinelRef = useRef(null)
|
||||||
|
|
||||||
// Target language from user profile, fall back to 'de'
|
// Target language from user profile, fall back to 'de'
|
||||||
const lang = user?.language_target_short || 'de'
|
const lang = user?.language_target_short || 'de'
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getFeedPairs(token, lang, 20)
|
getFeedPairs(token, lang, PAGE_SIZE)
|
||||||
.then(pairs => {
|
.then(pairs => {
|
||||||
const built = pairs.map(buildCard)
|
const built = pairs.map(buildCard)
|
||||||
setCards(built)
|
setCards(built)
|
||||||
setEmpty(built.length === 0)
|
setEmpty(built.length === 0)
|
||||||
|
if (built.length < PAGE_SIZE) { exhaustedRef.current = true; setExhausted(true) }
|
||||||
})
|
})
|
||||||
.catch(err => { console.error('Feed load error', err); setEmpty(true) })
|
.catch(err => { console.error('Feed load error', err); setEmpty(true) })
|
||||||
.finally(() => setLoading(false))
|
.finally(() => setLoading(false))
|
||||||
@@ -51,6 +63,41 @@ export default function Feed() {
|
|||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
}, [token])
|
}, [token])
|
||||||
|
|
||||||
|
// Weitere Karten nachladen: schon geladene (inkl. erledigte) Pair-IDs ausschließen.
|
||||||
|
// Leere Antwort → Server hat keine weiteren Karten → erschöpft.
|
||||||
|
const loadMore = useCallback(async () => {
|
||||||
|
if (loadingMoreRef.current || exhaustedRef.current) return
|
||||||
|
loadingMoreRef.current = true
|
||||||
|
setLoadingMore(true)
|
||||||
|
try {
|
||||||
|
const known = new Set(cardsRef.current.map(c => c.meta.pairId))
|
||||||
|
const pairs = await getFeedPairs(token, lang, PAGE_SIZE, [...known])
|
||||||
|
const fresh = pairs.filter(p => !known.has(p.id)).map(buildCard)
|
||||||
|
if (fresh.length) setCards(prev => [...prev, ...fresh])
|
||||||
|
if (!fresh.length || pairs.length < PAGE_SIZE) { exhaustedRef.current = true; setExhausted(true) }
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Feed loadMore error', err)
|
||||||
|
} finally {
|
||||||
|
loadingMoreRef.current = false
|
||||||
|
setLoadingMore(false)
|
||||||
|
}
|
||||||
|
}, [token, lang])
|
||||||
|
|
||||||
|
// Infinite Scroll: lädt nach, sobald der Sentinel in die Nähe des Sichtbereichs kommt.
|
||||||
|
// Großzügiger rootMargin, weil scroll-snap-mandatory einen winzigen End-Sentinel
|
||||||
|
// sonst schwer erreichbar macht.
|
||||||
|
useEffect(() => {
|
||||||
|
if (loading || exhausted) return
|
||||||
|
const el = sentinelRef.current
|
||||||
|
if (!el) return
|
||||||
|
const io = new IntersectionObserver(
|
||||||
|
(entries) => { if (entries[0].isIntersecting) loadMore() },
|
||||||
|
{ root: el.closest('.feed'), rootMargin: '300px' },
|
||||||
|
)
|
||||||
|
io.observe(el)
|
||||||
|
return () => io.disconnect()
|
||||||
|
}, [loading, exhausted, loadMore])
|
||||||
|
|
||||||
function handleComplete(item, result) {
|
function handleComplete(item, result) {
|
||||||
setDone(prev => new Set([...prev, item.meta.pairId]))
|
setDone(prev => new Set([...prev, item.meta.pairId]))
|
||||||
const correct = result === 'correct'
|
const correct = result === 'correct'
|
||||||
@@ -77,14 +124,10 @@ export default function Feed() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (empty || visible.length === 0) {
|
if (empty) {
|
||||||
return (
|
return (
|
||||||
<div className="feed page-enter">
|
<div className="feed page-enter">
|
||||||
<div className="feed-empty">
|
<div className="feed-empty">Noch keine Inhalte verfügbar.</div>
|
||||||
{cards.length === 0
|
|
||||||
? 'Noch keine Inhalte verfügbar.'
|
|
||||||
: 'Super! Alle Karten abgeschlossen. 🎉'}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -119,6 +162,11 @@ export default function Feed() {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
{/* Nachlade-Bereich */}
|
||||||
|
{!exhausted && <div ref={sentinelRef} className="feed-sentinel" aria-hidden="true" />}
|
||||||
|
{loadingMore && <div className="feed-empty">Lade weitere Karten…</div>}
|
||||||
|
{exhausted && <div className="feed-empty">Super! Alle Karten abgeschlossen. 🎉</div>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,14 @@
|
|||||||
.profil {
|
.profil {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
padding: 0 var(--sp-4) var(--sp-6);
|
padding: env(safe-area-inset-top) var(--sp-4) var(--sp-6);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profil-logout {
|
.profil-logout {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: calc(env(safe-area-inset-top) + 20px);
|
||||||
right: 4px;
|
right: 4px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -37,11 +37,9 @@
|
|||||||
.avatar-ring {
|
.avatar-ring {
|
||||||
width: 64px; height: 64px;
|
width: 64px; height: 64px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: conic-gradient(from 0deg, var(--bg), var(--gold), var(--accent), var(--border), var(--bg));
|
background: var(--border-soft);
|
||||||
animation: spin-ring 6s linear infinite;
|
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
@keyframes spin-ring { to { transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
.avatar-inner {
|
.avatar-inner {
|
||||||
width: 100%; height: 100%;
|
width: 100%; height: 100%;
|
||||||
@@ -59,26 +57,6 @@
|
|||||||
font-size: 18px; font-weight: 800; color: #F5EFE6; letter-spacing: 1px;
|
font-size: 18px; font-weight: 800; color: #F5EFE6; letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.online-dot {
|
|
||||||
position: absolute; bottom: 2px; right: 2px;
|
|
||||||
width: 11px; height: 11px;
|
|
||||||
background: var(--success);
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid var(--bg);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.online-dot::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute; inset: -4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid var(--success);
|
|
||||||
animation: pulse-ring 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse-ring {
|
|
||||||
0% { opacity: 0.6; transform: scale(0.8); }
|
|
||||||
100% { opacity: 0; transform: scale(1.8); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-level-badge {
|
.avatar-level-badge {
|
||||||
position: absolute; top: -4px; right: -6px; z-index: 3;
|
position: absolute; top: -4px; right: -6px; z-index: 3;
|
||||||
filter: drop-shadow(0 1px 3px rgba(74, 55, 40, 0.3));
|
filter: drop-shadow(0 1px 3px rgba(74, 55, 40, 0.3));
|
||||||
@@ -86,7 +64,7 @@
|
|||||||
|
|
||||||
.profil-info { display: flex; flex-direction: column; gap: 2px; }
|
.profil-info { display: flex; flex-direction: column; gap: 2px; }
|
||||||
.profil-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
|
.profil-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
|
||||||
.profil-handle { font-size: 12px; color: var(--accent); }
|
.profil-learning { font-size: 12px; color: var(--text-muted); font-weight: 600; }
|
||||||
.profil-streak { font-size: 12px; color: #C4853A; margin-top: 4px; font-weight: 700; }
|
.profil-streak { font-size: 12px; color: #C4853A; margin-top: 4px; font-weight: 700; }
|
||||||
|
|
||||||
/* ── Cards ──────────────────────────────────────────────────── */
|
/* ── Cards ──────────────────────────────────────────────────── */
|
||||||
@@ -148,14 +126,13 @@
|
|||||||
.weekbar-label { font-size: 10px; font-weight: 700; color: var(--text-soft); }
|
.weekbar-label { font-size: 10px; font-weight: 700; color: var(--text-soft); }
|
||||||
.weekbar-label.today { color: var(--accent); }
|
.weekbar-label.today { color: var(--accent); }
|
||||||
|
|
||||||
/* ── Heatmap ── */
|
/* ── Heatmap (kompakt) ── */
|
||||||
.heatmap { display: flex; gap: 4px; justify-content: space-between; }
|
.heatmap { display: flex; gap: 3px; justify-content: center; }
|
||||||
.heatmap-col { display: flex; flex-direction: column; gap: 4px; flex: 1; }
|
.heatmap-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
|
||||||
.heatmap-cell {
|
.heatmap-cell {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 13px; height: 13px;
|
||||||
aspect-ratio: 1 / 1;
|
border-radius: 2px;
|
||||||
border-radius: 3px;
|
|
||||||
background: var(--surface-sunk);
|
background: var(--surface-sunk);
|
||||||
}
|
}
|
||||||
.heatmap-cell.lvl-0 { background: var(--surface-sunk); }
|
.heatmap-cell.lvl-0 { background: var(--surface-sunk); }
|
||||||
@@ -171,6 +148,16 @@
|
|||||||
}
|
}
|
||||||
.heatmap-legend .heatmap-cell { width: 11px; height: 11px; }
|
.heatmap-legend .heatmap-cell { width: 11px; height: 11px; }
|
||||||
|
|
||||||
|
/* ── Kategorien ── */
|
||||||
|
.cat-list { display: flex; flex-direction: column; gap: var(--sp-3); }
|
||||||
|
.cat-row { display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
.cat-head { display: flex; align-items: center; gap: var(--sp-2); }
|
||||||
|
.cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
||||||
|
.cat-label { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
|
||||||
|
.cat-points { font-size: 12px; font-weight: 800; color: var(--accent); }
|
||||||
|
.cat-bar { height: 6px; width: 100%; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
|
||||||
|
.cat-bar-fill { height: 100%; border-radius: var(--r-pill); transition: width 0.6s var(--ease); }
|
||||||
|
|
||||||
/* ── Eckdaten ── */
|
/* ── Eckdaten ── */
|
||||||
.stat-grid { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
|
.stat-grid { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
|
||||||
.stat-tile {
|
.stat-tile {
|
||||||
|
|||||||
@@ -4,6 +4,9 @@ import { useAuth } from '../context/AuthContext'
|
|||||||
import { getProfilData, getStats, getLanguageOptions, langById } from '../api/directus'
|
import { getProfilData, getStats, getLanguageOptions, langById } from '../api/directus'
|
||||||
import ProgressRing from '../components/ProgressRing'
|
import ProgressRing from '../components/ProgressRing'
|
||||||
|
|
||||||
|
// Erdige Palette für die Kategorie-Dots/Balken (harmoniert mit dem Profil-Theme)
|
||||||
|
const CAT_COLORS = ['#C4A85A', '#7A5C3A', '#3D7055', '#B5732E', '#5B7DB1', '#9C5A8A']
|
||||||
|
|
||||||
function LogoutButton() {
|
function LogoutButton() {
|
||||||
const { logout } = useAuth()
|
const { logout } = useAuth()
|
||||||
return (
|
return (
|
||||||
@@ -142,6 +145,7 @@ export default function Profil() {
|
|||||||
|
|
||||||
const displayName = profil?.username || user?.username || '…'
|
const displayName = profil?.username || user?.username || '…'
|
||||||
const initials = displayName.slice(0, 2).toUpperCase()
|
const initials = displayName.slice(0, 2).toUpperCase()
|
||||||
|
const greeting = profil?.language_target_greeting || 'Hallo'
|
||||||
const points = profil?.total_ep ?? user?.total_ep ?? 0
|
const points = profil?.total_ep ?? user?.total_ep ?? 0
|
||||||
const level = profil?.level ?? Math.floor(points / 500)
|
const level = profil?.level ?? Math.floor(points / 500)
|
||||||
const epIntoLevel = points - level * 500
|
const epIntoLevel = points - level * 500
|
||||||
@@ -160,6 +164,8 @@ export default function Profil() {
|
|||||||
const skills = stats?.skills || []
|
const skills = stats?.skills || []
|
||||||
const hasSkillData = skills.some(s => s.seen > 0)
|
const hasSkillData = skills.some(s => s.seen > 0)
|
||||||
const accuracyPct = totals ? Math.round((totals.accuracy || 0) * 100) : null
|
const accuracyPct = totals ? Math.round((totals.accuracy || 0) * 100) : null
|
||||||
|
const categories = stats?.categories || []
|
||||||
|
const maxCatPoints = Math.max(1, ...categories.map(c => c.points))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="profil page-enter">
|
<div className="profil page-enter">
|
||||||
@@ -171,7 +177,6 @@ export default function Profil() {
|
|||||||
<div className="avatar-ring">
|
<div className="avatar-ring">
|
||||||
<div className="avatar-inner"><div className="avatar">{initials}</div></div>
|
<div className="avatar-inner"><div className="avatar">{initials}</div></div>
|
||||||
</div>
|
</div>
|
||||||
<span className="online-dot" />
|
|
||||||
<div className="avatar-level-badge">
|
<div className="avatar-level-badge">
|
||||||
<svg viewBox="0 0 48 54" width="28" height="32">
|
<svg viewBox="0 0 48 54" width="28" height="32">
|
||||||
<defs>
|
<defs>
|
||||||
@@ -185,8 +190,8 @@ export default function Profil() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="profil-info">
|
<div className="profil-info">
|
||||||
<h2 className="profil-name">{displayName}</h2>
|
<h2 className="profil-name">{greeting}, {displayName}</h2>
|
||||||
<p className="profil-handle">@{displayName.toLowerCase()}</p>
|
<p className="profil-learning">lernt {langLabel}</p>
|
||||||
{streak > 0 && (
|
{streak > 0 && (
|
||||||
<p className="profil-streak">🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak</p>
|
<p className="profil-streak">🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak</p>
|
||||||
)}
|
)}
|
||||||
@@ -230,6 +235,35 @@ export default function Profil() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ── Kategorien (Punkte je Thema) ── */}
|
||||||
|
{stats && (
|
||||||
|
<div className="card">
|
||||||
|
<p className="card-title">KATEGORIEN</p>
|
||||||
|
{categories.length ? (
|
||||||
|
<div className="cat-list">
|
||||||
|
{categories.map((c, i) => {
|
||||||
|
const color = CAT_COLORS[i % CAT_COLORS.length]
|
||||||
|
return (
|
||||||
|
<div key={c.id} className="cat-row">
|
||||||
|
<div className="cat-head">
|
||||||
|
<span className="cat-dot" style={{ background: color }} />
|
||||||
|
<span className="cat-label">{c.label || 'Allgemein'}</span>
|
||||||
|
<span className="cat-points">{c.points} P</span>
|
||||||
|
</div>
|
||||||
|
<div className="cat-bar">
|
||||||
|
<div className="cat-bar-fill"
|
||||||
|
style={{ width: `${Math.round((c.points / maxCatPoints) * 100)}%`, background: color }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="skills-empty">Sammle Punkte — deine Themen erscheinen hier.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ── Streak-Kalender ── */}
|
{/* ── Streak-Kalender ── */}
|
||||||
{stats && (
|
{stats && (
|
||||||
<div className="card">
|
<div className="card">
|
||||||
|
|||||||
48
src/utils/chipTimings.js
Normal file
48
src/utils/chipTimings.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
// Karaoke-Timing: aus dem Satz + ElevenLabs-`alignment` pro Wort-/Objekt-Chip
|
||||||
|
// ein Zeitfenster (Medienzeit in Sekunden) berechnen, damit beim Vorlesen das
|
||||||
|
// gerade gesprochene Chip markiert werden kann.
|
||||||
|
//
|
||||||
|
// alignment-Format (ElevenLabs /with-timestamps):
|
||||||
|
// { characters: string[],
|
||||||
|
// character_start_times_seconds: number[],
|
||||||
|
// character_end_times_seconds: number[] }
|
||||||
|
// `characters.join('')` entspricht dem vertonten Klartext (Platzhalter durch Labels ersetzt).
|
||||||
|
|
||||||
|
const CHIP_RE = /\{\{([^.]+)\.(w|o):([0-9a-f-]{36})\}\}/g
|
||||||
|
|
||||||
|
// Liefert [{ id, label, start, end }] – ein Eintrag pro Chip-Vorkommen im Satz.
|
||||||
|
export function buildChipTimings(sentence, alignment) {
|
||||||
|
if (!sentence || !alignment) return []
|
||||||
|
const chars = alignment.characters
|
||||||
|
const starts = alignment.character_start_times_seconds
|
||||||
|
const ends = alignment.character_end_times_seconds
|
||||||
|
if (!Array.isArray(chars) || !Array.isArray(starts) || !Array.isArray(ends) || !chars.length) return []
|
||||||
|
|
||||||
|
const plain = chars.join('')
|
||||||
|
// Satz in derselben Reihenfolge nach Chip-Tokens absuchen; Labels sequenziell
|
||||||
|
// im Klartext lokalisieren (toleriert kleine Whitespace-Unterschiede).
|
||||||
|
const timings = []
|
||||||
|
let cursor = 0
|
||||||
|
for (const m of sentence.matchAll(CHIP_RE)) {
|
||||||
|
const label = m[1]
|
||||||
|
const id = m[3]
|
||||||
|
const startIdx = plain.indexOf(label, cursor)
|
||||||
|
if (startIdx === -1) continue
|
||||||
|
const endIdx = startIdx + label.length - 1
|
||||||
|
cursor = endIdx + 1
|
||||||
|
const start = starts[startIdx]
|
||||||
|
const end = ends[Math.min(endIdx, ends.length - 1)]
|
||||||
|
if (typeof start !== 'number' || typeof end !== 'number') continue
|
||||||
|
timings.push({ id, label, start, end })
|
||||||
|
}
|
||||||
|
return timings
|
||||||
|
}
|
||||||
|
|
||||||
|
// Id des Chips, dessen Zeitfenster t (Sekunden) enthält – sonst null.
|
||||||
|
export function activeChipIdAt(timings, t) {
|
||||||
|
if (!timings?.length || typeof t !== 'number') return null
|
||||||
|
for (const c of timings) {
|
||||||
|
if (t >= c.start && t < c.end) return c.id
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
40
src/utils/secureToken.js
Normal file
40
src/utils/secureToken.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
// Sicherer Token-Speicher: iOS-Keychain (nativ, nicht aus dem WebView lesbar),
|
||||||
|
// im Browser-Dev fällt das Plugin auf localStorage zurück.
|
||||||
|
import { SecureStoragePlugin } from 'capacitor-secure-storage-plugin'
|
||||||
|
|
||||||
|
const KEY = 'snakkimo_token'
|
||||||
|
const LEGACY_LS_KEY = 'hejyou_token' // Alt-Token aus der localStorage-Ära
|
||||||
|
|
||||||
|
// get() wirft, wenn der Key fehlt → als "kein Token" behandeln.
|
||||||
|
async function rawGet() {
|
||||||
|
try {
|
||||||
|
const { value } = await SecureStoragePlugin.get({ key: KEY })
|
||||||
|
return value || null
|
||||||
|
} catch {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setStoredToken(token) {
|
||||||
|
await SecureStoragePlugin.set({ key: KEY, value: token })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function clearStoredToken() {
|
||||||
|
try { await SecureStoragePlugin.remove({ key: KEY }) } catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token aus dem sicheren Speicher lesen. Migriert dabei einmalig einen evtl. noch
|
||||||
|
// in localStorage liegenden Alt-Token, damit eingeloggte Nutzer eingeloggt bleiben.
|
||||||
|
export async function getStoredToken() {
|
||||||
|
const existing = await rawGet()
|
||||||
|
if (existing) return existing
|
||||||
|
try {
|
||||||
|
const legacy = localStorage.getItem(LEGACY_LS_KEY)
|
||||||
|
if (legacy) {
|
||||||
|
await setStoredToken(legacy)
|
||||||
|
localStorage.removeItem(LEGACY_LS_KEY)
|
||||||
|
return legacy
|
||||||
|
}
|
||||||
|
} catch { /* localStorage nicht verfügbar – ignorieren */ }
|
||||||
|
return null
|
||||||
|
}
|
||||||
23
src/utils/speak.js
Normal file
23
src/utils/speak.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
// Browser-TTS-Fallback fürs Vorlesen, wenn kein (ladbares) Audio-File vorhanden ist.
|
||||||
|
|
||||||
|
const LANG_TTS = { sv: 'sv-SE', en: 'en-US', de: 'de-DE' }
|
||||||
|
|
||||||
|
// {{label.w/o:uuid}} und ⟦PHn:wort⟧-Tokens auf reinen Text reduzieren.
|
||||||
|
export function toPlainText(sentence) {
|
||||||
|
if (!sentence) return ''
|
||||||
|
return sentence
|
||||||
|
.replace(/\{\{([^.]+)\.[wo]:[0-9a-f-]{36}\}\}/g, '$1')
|
||||||
|
.replace(/[⟦〚]PH\d+:([^⟧〛]*)[⟧〛]/g, '$1')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Liest den Satz per SpeechSynthesis vor. Gibt true zurück, wenn tatsächlich
|
||||||
|
// vorgelesen wurde (für Karten, die daran ein Unlock koppeln).
|
||||||
|
export function speak(sentence, lang) {
|
||||||
|
if (!window.speechSynthesis || !sentence) return false
|
||||||
|
window.speechSynthesis.cancel()
|
||||||
|
const utt = new SpeechSynthesisUtterance(toPlainText(sentence))
|
||||||
|
utt.lang = LANG_TTS[lang] || 'de-DE'
|
||||||
|
utt.rate = 0.7
|
||||||
|
window.speechSynthesis.speak(utt)
|
||||||
|
return true
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user