@wasto/cms-components 1.5.10

package/src/components/challenge/BadgesModal.tsx

@@ -0,0 +1,166 @@
+import type { ReactNode } from "react";
+import { Dimensions, Modal, ScrollView, StyleSheet, View, Text } from "react-native";
+import { Image } from "expo-image";
+import { Lock, XIcon } from "lucide-react-native";
+import { AcquiredBadge } from "../../hooks/useChallenges";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { NavButton } from "../nav-button/NavButton";
+import { Badge, useBadges } from "../../hooks/useBadges";
+import { useColumns } from "../../hooks/useColumns";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type BadgesModalProps = {
+    visible: boolean;
+    acquiredBadges: AcquiredBadge[];
+    onClose: () => void;
+};
+
+type BadgeWithRequired = Badge & { isAcquired: boolean };
+
+export function BadgesModal({
+    visible,
+    acquiredBadges,
+    onClose,
+}: BadgesModalProps): ReactNode {
+    const { badges } = useBadges();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const bottomInset = useSafeAreaPadding(["bottom"]);
+
+    const rowsBadges = useColumns<BadgeWithRequired>(
+        badges.map((i) => ({
+            ...i,
+            isAcquired: acquiredBadges.findIndex((b) => b.badgeId === i.id) !== -1,
+        })),
+    );
+
+    return (
+        <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
+            <View style={[styles.modal, themedStyles.modal]}>
+                <View style={topInset}>
+                    <View style={styles.header}>
+                        <Title text="Tous les badges" level="2" />
+                        <NavButton icon={XIcon} onPress={onClose} />
+                    </View>
+                </View>
+                <View style={[styles.listWrap, bottomInset]}>
+                    <ScrollView bounces={false} contentContainerStyle={styles.body}>
+                        {rowsBadges.map((row, index) => (
+                            <View key={index.toString()} style={styles.badgesRow}>
+                                {row.map((badge, bIndex) =>
+                                    badge ? (
+                                        <View key={badge.id} style={styles.badge}>
+                                            <View style={styles.badgeImageWrap}>
+                                                <Image
+                                                    source={badge.imageUrl}
+                                                    style={[
+                                                        styles.badgeImage,
+                                                        themedStyles.badgeImage,
+                                                        !badge.isAcquired && styles.badgeImageLocked,
+                                                    ]}
+                                                    contentFit="cover"
+                                                />
+                                                {!badge.isAcquired ? (
+                                                    <View style={styles.lockOverlay} pointerEvents="none">
+                                                        <View
+                                                            style={[
+                                                                styles.lockBtn,
+                                                                {
+                                                                    backgroundColor: theme.colors.primary,
+                                                                    borderRadius: t.radii.pill,
+                                                                },
+                                                            ]}
+                                                        >
+                                                            <Lock
+                                                                size={18}
+                                                                color={theme.colors.onPrimary}
+                                                            />
+                                                        </View>
+                                                    </View>
+                                                ) : null}
+                                            </View>
+                                            <Text style={themedStyles.badgeTitle}>{badge.name}</Text>
+                                        </View>
+                                    ) : (
+                                        <View key={bIndex.toString()} style={styles.badge} />
+                                    ),
+                                )}
+                            </View>
+                        ))}
+                    </ScrollView>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        modal: {
+            backgroundColor: theme.colors.background,
+        },
+        badgeImage: {
+            borderRadius: theme.radius,
+        },
+        badgeTitle: {
+            color: theme.colors.onBackground,
+        },
+    });
+
+const styles = StyleSheet.create({
+    modal: {
+        height: Dimensions.get("screen").height,
+    },
+    header: {
+        padding: 20,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    listWrap: {
+        flex: 1,
+    },
+    body: {
+        padding: 20,
+        flexGrow: 1,
+        gap: 10,
+    },
+    badgesRow: {
+        flexDirection: "row",
+        gap: 10,
+    },
+    badge: {
+        flex: 1,
+        gap: 5,
+    },
+    badgeImageWrap: {
+        width: "100%",
+        aspectRatio: 3 / 4,
+        position: "relative",
+    },
+    badgeImage: {
+        width: "100%",
+        height: "100%",
+    },
+    badgeImageLocked: {
+        opacity: 0.35,
+    },
+    lockOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    lockBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/src/components/challenge/Challenge.tsx

@@ -0,0 +1,380 @@
+import { useState, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    Modal,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { Award, Percent, Play, Trophy, Zap } from "lucide-react-native";
+import { useChallenges } from "../../hooks/useChallenges";
+import { useBadges } from "../../hooks/useBadges";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { Badges } from "./Badges";
+import { BadgesModal } from "./BadgesModal";
+import { ChallengesModal } from "./ChallengesModal";
+import { ChallengeModal } from "./ChallengeModal";
+import type { ChallengeWithProgress } from "../../hooks/useChallenges";
+
+export type ChallengeProps = {};
+
+function isChallengeComplete(c: ChallengeWithProgress) {
+    return !!c.progression?.badge;
+}
+
+function progressLabel(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) {
+        return isChallengeComplete(c) ? "1/1" : "0/1";
+    }
+    const done = series.filter((s) => s.progression).length;
+    return `${done}/${series.length}`;
+}
+
+function progressRatio(c: ChallengeWithProgress) {
+    const series = c.series ?? [];
+    if (series.length === 0) return isChallengeComplete(c) ? 1 : 0;
+    return series.filter((s) => s.progression).length / series.length;
+}
+
+export function Challenge({}: ChallengeProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { challenges, acquiredBadges, isLoading, error } = useChallenges();
+    const { badges } = useBadges();
+    const [displayChallenges, setDisplayChallenges] = useState(false);
+    const [displayAllBadges, setDisplayAllBadges] = useState(false);
+    const [activeChallenge, setActiveChallenge] = useState<ChallengeWithProgress | null>(null);
+
+    const completedCount = challenges.filter(isChallengeComplete).length;
+    const totalChallenges = challenges.length;
+    const totalBadges = badges.length > 0 ? badges.length : acquiredBadges.length;
+    const challengeScores = challenges
+        .map((c) => c.progression?.score)
+        .filter((s): s is number => typeof s === "number");
+    const successPct =
+        challengeScores.length > 0
+            ? Math.round(
+                  challengeScores.reduce((sum, score) => sum + score, 0) /
+                      challengeScores.length,
+              )
+            : 0;
+
+    if (isLoading && !challenges.length) {
+        return (
+            <View style={styles.stateBox}>
+                <ActivityIndicator color={theme.colors.primary} />
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.stateBox}>
+                <Text style={{ color: theme.colors.error }}>{error}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <View style={styles.section}>
+                <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>STATISTIQUES</Text>
+                <View style={[styles.statsCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
+                    <StatCell
+                        icon={<Zap size={16} color="#fff" />}
+                        value={String(completedCount)}
+                        suffix={`/${totalChallenges}`}
+                        label="Défis terminés"
+                        color={theme.colors.primary}
+                    />
+                    <StatCell
+                        icon={<Award size={16} color="#fff" />}
+                        value={String(acquiredBadges.length)}
+                        suffix={`/${totalBadges}`}
+                        label="badge obtenue"
+                        color={theme.colors.primary}
+                    />
+                    <StatCell
+                        icon={<Percent size={16} color="#fff" />}
+                        value={String(successPct)}
+                        suffix="%"
+                        label="pourcent de réussite"
+                        color={theme.colors.primary}
+                    />
+                </View>
+            </View>
+
+            <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>LES BADGES</Text>
+                    <Pressable onPress={() => setDisplayAllBadges(true)}>
+                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
+                            Tous les badges ›
+                        </Text>
+                    </Pressable>
+                </View>
+                <Badges badges={acquiredBadges} />
+            </View>
+
+            <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                    <Text style={[styles.sectionLabel, { color: t.colors.muted }]}>
+                        TOUS LES DÉFIS
+                    </Text>
+                    <Pressable onPress={() => setDisplayChallenges(true)}>
+                        <Text style={{ color: theme.colors.primary, fontWeight: "700" }}>
+                            Voir tout ›
+                        </Text>
+                    </Pressable>
+                </View>
+                <View style={[styles.listCard, cardStyle(theme), { borderRadius: t.radii.lg }]}>
+                    {challenges.length === 0 ? (
+                        <Text style={[styles.empty, { color: t.colors.muted }]}>
+                            Aucun défi disponible
+                        </Text>
+                    ) : (
+                        challenges.map((c, index) => {
+                            const done = isChallengeComplete(c);
+                            const ratio = progressRatio(c);
+                            return (
+                                <Pressable
+                                    key={c.id}
+                                    onPress={() => setActiveChallenge(c)}
+                                    style={[
+                                        styles.challengeRow,
+                                        index < challenges.length - 1 && {
+                                            borderBottomWidth: StyleSheet.hairlineWidth,
+                                            borderBottomColor: theme.colors.border,
+                                        },
+                                    ]}
+                                >
+                                    <View style={styles.challengeMain}>
+                                        <Text
+                                            style={[
+                                                styles.challengeTitle,
+                                                { color: theme.colors.onSurface },
+                                            ]}
+                                            numberOfLines={2}
+                                        >
+                                            {c.name}
+                                        </Text>
+                                        <View
+                                            style={[
+                                                styles.track,
+                                                {
+                                                    backgroundColor: theme.colors.border,
+                                                    borderRadius: t.radii.pill,
+                                                },
+                                            ]}
+                                        >
+                                            <View
+                                                style={[
+                                                    styles.fill,
+                                                    {
+                                                        width: `${Math.round(ratio * 100)}%`,
+                                                        backgroundColor: done
+                                                            ? theme.colors.success
+                                                            : theme.colors.primary,
+                                                        borderRadius: t.radii.pill,
+                                                    },
+                                                ]}
+                                            >
+                                                    <Text
+                                                        style={[
+                                                            styles.fillLabel,
+                                                            {
+                                                                color: done
+                                                                    ? theme.colors.onSuccess
+                                                                    : theme.colors.onPrimary,
+                                                            },
+                                                        ]}
+                                                    >
+                                                        {progressLabel(c)}
+                                                    </Text>
+                                            </View>
+                                        </View>
+                                    </View>
+                                    <View
+                                        style={[
+                                            styles.actionBtn,
+                                            {
+                                                backgroundColor: done
+                                                    ? theme.colors.success
+                                                    : theme.colors.primary,
+                                                borderRadius: t.radii.pill,
+                                            },
+                                        ]}
+                                    >
+                                        {done ? (
+                                            <Trophy size={18} color={theme.colors.onSuccess} />
+                                        ) : (
+                                            <Play size={18} color={theme.colors.onPrimary} fill={theme.colors.onPrimary} />
+                                        )}
+                                    </View>
+                                </Pressable>
+                            );
+                        })
+                    )}
+                </View>
+            </View>
+
+            <ChallengesModal
+                visible={displayChallenges}
+                challenges={challenges}
+                onClose={() => setDisplayChallenges(false)}
+            />
+            <BadgesModal
+                visible={displayAllBadges}
+                acquiredBadges={acquiredBadges}
+                onClose={() => setDisplayAllBadges(false)}
+            />
+            <Modal
+                visible={!!activeChallenge}
+                animationType="slide"
+                onRequestClose={() => setActiveChallenge(null)}
+            >
+                {activeChallenge ? (
+                    <ChallengeModal
+                        challenge={activeChallenge}
+                        onClose={() => setActiveChallenge(null)}
+                    />
+                ) : null}
+            </Modal>
+        </>
+    );
+}
+
+function StatCell({
+    icon,
+    value,
+    suffix,
+    label,
+    color,
+}: {
+    icon: React.ReactNode;
+    value: string;
+    suffix?: string;
+    label: string;
+    color: string;
+}) {
+    return (
+        <View style={styles.statCell}>
+            <View style={[styles.statIcon, { backgroundColor: color }]}>{icon}</View>
+            <View style={styles.statValueRow}>
+                <Text style={styles.statValue}>{value}</Text>
+                {suffix ? <Text style={styles.statSuffix}>{suffix}</Text> : null}
+            </View>
+            <Text style={styles.statLabel}>{label}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    stateBox: {
+        minHeight: 120,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    section: {
+        gap: 10,
+        marginBottom: 20,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    sectionLabel: {
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    statsCard: {
+        flexDirection: "row",
+        padding: SPACE.stack,
+        gap: 8,
+    },
+    statCell: {
+        flex: 1,
+        alignItems: "center",
+        gap: 6,
+        padding: 8,
+    },
+    statIcon: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        borderRadius: SPACE.iconHit / 2,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    statValue: {
+        fontSize: 22,
+        fontWeight: "800",
+    },
+    statValueRow: {
+        flexDirection: "row",
+        alignItems: "baseline",
+        justifyContent: "center",
+        flexWrap: "wrap",
+    },
+    statSuffix: {
+        fontSize: 11,
+        fontWeight: "700",
+        opacity: 0.65,
+        marginLeft: 1,
+    },
+    statLabel: {
+        fontSize: 11,
+        textAlign: "center",
+        opacity: 0.65,
+    },
+    listCard: {
+        overflow: "hidden",
+        paddingHorizontal: SPACE.cardPad,
+        gap: 6,
+    },
+    empty: {
+        padding: 24,
+        textAlign: "center",
+    },
+    challengeRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 14,
+    },
+    challengeMain: {
+        flex: 1,
+        gap: 12,
+    },
+    challengeTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+    },
+    track: {
+        height: 16,
+        overflow: "hidden",
+        justifyContent: "center",
+    },
+    fill: {
+        height: "100%",
+        minWidth: 40,
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    fillLabel: {
+        fontSize: 11,
+        fontWeight: "700",
+        textAlign: "center",
+    },
+    actionBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});