Objectif

Permettre à l’utilisateur de parcourir visuellement l’ensemble des équipes disponibles et d’obtenir, en un clic, les informations détaillées d’une équipe sélectionnée, de manière claire.

Description

Cet EPIC vise à implémenter une interface utilisateur dynamique permettant d’afficher, faire défiler et consulter les différentes équipes enregistrées dans une base de données. Chaque équipe est représentée sous la forme d’un carrousel interactif, dans lequel les utilisateurs peuvent faire défiler les logos grâce à des flèches directionnelles, puis sélectionner l’équipe de leur choix pour en consulter les détails.

Lorsqu’une équipe est sélectionnée, une section dédiée s’affiche. Elle présente les informations liées à cette équipe : son nom, son logo, ainsi que la liste de ses membres, incluant leur prénom, nom et établissement scolaire d’origine.

Fonctionnalités

• Affichage dynamique des logos des équipes sous forme de carrousel donc les logos des équipes sont présentés dans une structure défilante.
• Possibilité de naviguer dans les équipes via des boutons directionnels ou en appuyant sur leurs logos respectifs donc l’utilisateur peut faire défiler les équipes à l’aide de boutons directionnels ou cliquer directement sur un logo pour accéder à ses détails.
• Affichage détaillé d’une équipe sélectionnée : nom, logo, et liste des joueurs avec informations personnelles.

USER STORIES

User Story 1 : Affichage des équipes

En tant que visiteur, je veux voir l’ensemble des équipes sous forme de carrousel, afin de pouvoir parcourir visuellement toutes les équipes disponibles facilement.

Critères d’acceptation :

• Le carrousel doit être visible dès le chargement de la page.
• Chaque équipe doit être représentée par un logo.
• Le nombre d’équipes affichées doit correspondre aux données récupérées depuis l’API.

User Story 2 : Navigation dans le carrousel

En tant que visiteur, je veux naviguer entre les équipes à l’aide de flèches directionnelles, afin de faire défiler les logos des différentes équipes pour accéder aux informations détaillés de l'équipe.

Critères d’acceptation :

• Les flèches de navigation gauche/droite doivent être visibles.
• Le clic sur une flèche permet de faire défiler les logos dans la bonne direction.
• Le défilement doit faire une boucle (c'est-à-dire, passer de la dernière à la première équipe, et inversement).

User Story 3 : Sélection d’une équipe

En tant que visiteur, je veux pouvoir cliquer sur un logo d’équipe, afin d’accéder aux informations détaillées de cette équipe.

Critères d’acceptation :

• Le clic sur un logo change l’équipe sélectionnée.
• L’équipe sélectionnée est visuellement mise en évidence
• Les informations de l’équipe sélectionnée sont affichées dans la section dédiée.

User Story 4 : Affichage des détails d’une équipe

En tant que visiteur, je veux consulter le nom, le logo et la liste des membres d’une équipe sélectionnée, afin de mieux connaître sa composition.

Critères d’acceptation :

• Le nom et le logo de l’équipe doivent apparaître clairement. Si une équipe n'a pas de logo, un logo par défaut est implémenté
• Tous les membres doivent être listés avec leur prénom, nom et école.
• Les données affichées doivent correspondre exactement à celles de l’équipe sélectionnée.