Boutique

La page Boutique (ShopPage) permet aux utilisateurs d'acheter des éléments cosmétiques (avatars, profils) en utilisant la monnaie virtuelle gagnée en jouant.

ShopPage

Type : ConsumerStatefulWidget
State : _ShopPageState extends ConsumerState(ShopPage)

Propriétés

Méthodes

initState()

Description : Initialise la page et charge le profil utilisateur si nécessaire.
Actions : Appelle _loadUserProfileIfNeeded()
Retour : void

_loadUserProfileIfNeeded()

Description : Charge le profil utilisateur si pas déjà chargé.
Retour : Future

bool _isPurchased(String itemId)

Description : Vérifie si un article a déjà été acheté.
Paramètres :

• itemId : ID de l'article

Retour : bool (true si acheté)

bool _canAfford(int itemPrice)

Description : Vérifie si l'utilisateur a suffisamment de monnaie virtuelle.
Paramètres :

• itemPrice : Prix de l'article

Retour : bool (true si suffisant)

_onPurchaseAttempt(ShopItemEntity item)

Description : Gère la tentative d'achat d'un article.
Paramètres :

• item : Article à acheter

Flux :

1. Vérifie les fonds via shopNotifier.checkFunds()
2. Affiche le popup de confirmation ou de fonds insuffisants
3. Met à jour l'état de chargement

Retour : Future

void _closeInsufficientFundsPopup()

Description : Ferme le popup de fonds insuffisants.
Retour : void

void _closeConfirmPurchasePopup()

Description : Ferme le popup de confirmation d'achat.
Retour : void

_confirmPurchase()

Description : Confirme et effectue l'achat de l'article sélectionné.
Flux :

1. Appelle shopNotifier.purchaseItem()
2. Recharge le profil utilisateur en cas de succès
3. Affiche un message d'erreur en cas d'échec

Retour : Future

void _goBack()

Description : Retourne à la page d'accueil.
Navigation : AppRoutes.home.path
Retour : void

Widget _buildHeader(...)

Description : Construit l'en-tête de la page avec titre, bouton retour, aide et solde.
Retour : Widget

Widget _buildBackButton(...)

Description : Construit le bouton de retour (coin supérieur gauche).
Retour : Widget

Widget _buildUserBalance(int balance, bool isTheme2)

Description : Construit l'affichage du solde de monnaie virtuelle.
Paramètres :

• balance : Solde actuel
• isTheme2 : Si le thème 2 est actif

Retour : Widget

Widget _buildLoadingOverlay()

Description : Construit l'overlay de chargement pendant les transactions.
Retour : Widget

Widget _buildShopGrid()

Description : Construit la grille des articles de la boutique avec layout personnalisé.
Layout :

• 5 colonnes au total
• Articles 1-3 : Grandes cartes (2 rangées)
• Articles 4-7 : Petites cartes empilées (2x2)

Retour : Widget

Éléments visuels

En-tête

• Bouton Retour : Flèche + texte "RETOUR" (coin supérieur gauche)
• Titre : "BOUTIQUE" centré
• Bouton Aide : Icône d'aide à gauche du titre
• Solde utilisateur : Icône de monnaie + montant (coin supérieur droit)

Grille d'articles

• Layout adaptatif : 5 colonnes avec gaps de 16px
• Grandes cartes : Articles premium (colonnes 1-3)
• Petites cartes : Articles standard (colonnes 4-5, empilées)

États des cartes

• Disponible : Bouton "ACHETER" actif
• Fonds insuffisants : Bouton "ACHETER" désactivé, indicateur rouge
• Déjà acheté : Badge "POSSÉDÉ", bouton désactivé

Popups

• Fonds insuffisants : Message d'erreur + bouton "OK"
• Confirmation d'achat : Message de confirmation + boutons "OUI" / "NON"
• Overlay de chargement : Spinner + texte "CHARGEMENT..."

Composants utilisés

ShopItemWidget

Widget affichant un article de la boutique.

Propriétés

OneButtonPopup

Popup modal avec un seul bouton.

Propriétés

TwoButtonPopup

Popup modal avec deux boutons (confirmation/annulation).

Propriétés

UserProfileWidget

Widget de profil utilisateur.

ChatboxWidget

Widget de chat flottant.

HelpButtonWidget

Bouton d'aide contextuelle.

HelpPopupWidget

Popup d'aide avec contenu Markdown.

Providers utilisés

shopNotifierProvider

Type : StateNotifierProvider(ShopNotifier, ShopState)

Provider gérant l'état de la boutique.

ShopState

ShopNotifier - Méthodes

checkFunds(String idToken, String itemId)

Description : Vérifie si l'utilisateur a suffisamment de fonds pour acheter un article.
Paramètres :

• idToken : Token d'authentification Firebase
• itemId : ID de l'article

Retour : Future(FundsCheckResult?) (canAfford: bool)

purchaseItem(String idToken, String itemId)

Description : Effectue l'achat d'un article.
Paramètres :

• idToken : Token d'authentification Firebase
• itemId : ID de l'article

Retour : Future(PurchaseResult?) (success: bool, message: String, newBalance: int?)

userProfileProvider

Type : Provider(UserProfileEntity?)

Provider fournissant le profil utilisateur actuel.

UserProfileEntity

userNotifierProvider

Type : StateNotifierProvider(UserNotifier, UserState)

Provider gérant le profil utilisateur.

translationProvider

Type : Provider(TranslationWrapper)

Provider pour la gestion de l'internationalisation.

themeNotifierProvider

Type : StateNotifierProvider(ThemeNotifier, ThemeState)

Provider gérant le thème actif.

helpPopupProvider

Type : StateNotifierProvider(HelpPopupNotifier, HelpPopupState)

Provider gérant le popup d'aide.

Articles de la boutique

Les articles sont définis dans shopItems (fichier shop_item_model.dart) et incluent :

Types d'articles

1. Avatar Cyberpunk

   • ID: avatar_cyberpunk
   • Prix: 500 coins
   • Type: Avatar

2. Avatar Neon

   • ID: avatar_neon
   • Prix: 750 coins
   • Type: Avatar

3. Avatar Futuriste

   • ID: avatar_futuristic
   • Prix: 1000 coins
   • Type: Avatar

4. Profil Bronze

   • ID: profile_bronze
   • Prix: 300 coins
   • Type: Profil

5. Profil Argent

   • ID: profile_silver
   • Prix: 600 coins
   • Type: Profil

6. Profil Or

   • ID: profile_gold
   • Prix: 900 coins
   • Type: Profil

7. Profil Diamant

   • ID: profile_diamond
   • Prix: 1500 coins
   • Type: Profil

Use Cases

L'architecture Clean utilise les use cases suivants :

• CheckFundsUseCase : Vérifier les fonds disponibles
• PurchaseItemUseCase : Acheter un article

Navigation

• Retour : AppRoutes.home.path → HomePage
• Aide complète : AppRoutes.help.path → HelpPage

Validation et gestion d'erreurs

Messages d'erreur

• Fonds insuffisants : "Vous n'avez pas assez de monnaie virtuelle pour acheter cet article."
• Échec d'achat : Message spécifique du serveur ou "L'achat a échoué"
• Déjà acheté : L'article ne peut pas être acheté à nouveau

Flux d'achat

1. Clic sur "ACHETER"
2. Vérification des fonds via API
3. Si suffisant → Popup de confirmation
4. Confirmation → Achat via API
5. Succès → Rechargement du profil + mise à jour de l'affichage
6. Échec → Affichage de l'erreur