e76be7ee78
Profile (3 Iterationen):
- app/profile/index.tsx + components/profile/* (Header, StatsBar, Approved,
Streak, UrgeStats, Demographics, DigaMissionBanner)
- echte Live-Daten via useMe-Hook (Avatar/Nickname/Plan/Email/Provider-Pill)
- Demographics mit echten Inputs (TextInput + Bottom-Sheet-Selects),
debounced auto-save, Pro-Trial-Reward-Banner, Mikro-Why-Texte
- Approved Domains als plain integer (KEIN Plan-Slot/Cap)
- Friendly Hint-Text statt Progress-Bar (alignSelf:'stretch' Pattern)
- StatsBar zentriert mit 3 prominenten Cards (vertikale Dividers)
- Cooldown-Timeline als Liste mit 1px-Rail
- ApprovedDomainsList: Collapse-Chevron rechts in Title-Row (Pattern-Fix)
- Eigene vs fremde Profile-Ansicht streng getrennt (DSGVO/Anonymität)
Header-Dropdown (kein 3-Punkte-Icon):
- Avatar als Trigger im AppHeader (User-Wunsch)
- Custom-Modal beide Plattformen, Card-Style
- SOS prominent oben (nur Wort 'SOS' rot, Tagline 'wir sind für dich da' klein darunter)
- Profile/Settings/Games/Debug(__DEV__)/Logout
- Logout neutral (nicht rot — Recovery-tonal)
- AppHeader: neue showBack + title Props für Sub-Routes
Routes (Stub bis Phase C):
- app/profile/[userId].tsx — anonym (nur public-Stats)
- app/settings.tsx — Coming-Soon-Skeleton
- app/games.tsx — Standalone Games-Page mit GameCard-Grid
- app/debug.tsx — __DEV__-only
Game-Picker (Migration aus Nuxt):
- components/games/{GameCard, StarRating, GameRatingStars}
- 2x2 Grid, 56pt SVG-Icons (inline aus components/urge/gameSvgs.ts)
- Live-Backend /api/games/ratings (silent-fail)
- Re-use UrgeGames.tsx ohne TTS/Cooldown-Loop
UI-Pattern-Fixes (alle aus screenshot-User-Feedback 2026-05-07):
- Snake-Bug (food-pellet React-18-StrictMode-Reducer-double-call) gefixt
- Snake-Buttons platform-native (iOS-blue / Android-ripple)
- Tetris-Margins (16px paddingHorizontal)
- PostCard-Buttons Apple-44pt-Hit-Area (Image-Select, Image-Remove,
Cancel, Share-Pill — via hitSlop)
- ProfileHeader Demographics-Hint: alignSelf:'stretch' Pattern
- ApprovedDomainsList Collapse: Title flex:1 + Chevron rechts
- ProtectionDetailsSheet FAQ-Items: alignSelf:'stretch' defensive
- AppHeader Back-Button: neue showBack-Prop + chevron-back
Memory + Plan-Docs:
- 17 Memory-Files dokumentieren System-Wissen + Patterns
- ops/{CUTOVER, UI_MIGRATION, PROFILE_PAGE, WEBHOOK, GAMES_1V1,
RELEASE_READINESS, TESTING_STATE, MAESTRO_HOSTING}_*.md
Backend bleibt unverändert (Tier-LLM + Nickname + sort:latency
sind seit gestern deployed).
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
// RN-Port der Vue-Card aus apps/rebreak/app/components/urge/UrgeGamePicker.vue
|
|
// 2x2-Grid-Kachel mit SVG-Icon (56x56), Titel, descKey und Star-Rating.
|
|
import { View, Text, Pressable } from 'react-native';
|
|
import { SvgXml } from 'react-native-svg';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { GameRatingStars } from './GameRatingStars';
|
|
import type { GameType } from '../urge/UrgeGames';
|
|
|
|
export interface GameCardProps {
|
|
id: GameType;
|
|
svg: string;
|
|
titleKey: string;
|
|
descKey: string;
|
|
avgStars: number;
|
|
count: number;
|
|
onPress: (id: GameType) => void;
|
|
}
|
|
|
|
export function GameCard({
|
|
id,
|
|
svg,
|
|
titleKey,
|
|
descKey,
|
|
avgStars,
|
|
count,
|
|
onPress,
|
|
}: GameCardProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Pressable
|
|
onPress={() => onPress(id)}
|
|
style={({ pressed }) => ({
|
|
width: '100%',
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
borderColor: '#e5e7eb',
|
|
backgroundColor: pressed ? '#f0f9ff' : '#fafafa',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 18,
|
|
paddingHorizontal: 12,
|
|
gap: 12,
|
|
transform: [{ scale: pressed ? 0.97 : 1 }],
|
|
})}
|
|
>
|
|
<SvgXml xml={svg} width={56} height={56} />
|
|
<View style={{ alignItems: 'center', gap: 2 }}>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#0a0a0a',
|
|
fontSize: 15,
|
|
}}
|
|
>
|
|
{t(titleKey)}
|
|
</Text>
|
|
<Text
|
|
numberOfLines={2}
|
|
style={{
|
|
textAlign: 'center',
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#737373',
|
|
fontSize: 11,
|
|
lineHeight: 14,
|
|
minHeight: 28,
|
|
paddingHorizontal: 4,
|
|
}}
|
|
>
|
|
{t(descKey)}
|
|
</Text>
|
|
<View style={{ marginTop: 4 }}>
|
|
<GameRatingStars avg={avgStars} count={count} />
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|