Projet Pokémon TCG IHM

Contexte du projet

Projet réalisé dans le cadre de la SAE S2.01 du BUT Informatique à l'IUT Montpellier-Sète. Ce projet constitue la phase 2 du projet Pokémon TCG et se concentre exclusivement sur l'implémentation de l'interface graphique en JavaFX pour le jeu de cartes Pokémon.

La logique métier du jeu a été fournie et considérée comme encapsulée, l'objectif étant de créer une IHM complète et ergonomique permettant d'interagir avec cette mécanique de jeu.

Architecture et Organisation

Diagramme de classes du projet Pokémon TCG

Diagramme de classes illustrant la séparation entre les vues JavaFX et la logique métier.

Le projet s'articule autour d'une architecture MVC adaptée à JavaFX, avec une séparation claire entre :

Le paquetage mecanique : logique métier encapsulée (non modifiable)
Le paquetage vues : ensemble des composants d'interface graphique développés
Les interfaces façades (IJeu, IJoueur, IPokemon, etc.) : permettant la communication avec la logique métier

Développement chronologique

Phase 1 : Fondations de l'interface

20-27 mai

VueCarte : Composant réutilisable pour afficher une carte avec système d'image dynamique
VuePokemon : Composant complexe héritant de StackPane pour superposer les éléments (carte, énergies, PV)
Écouteur sur les énergies attachées au Pokémon
Architecture responsable avec refactorisation de placerBanc()

Phase 2 : Gestion des joueurs et interactions

27 mai - 3 juin

VueChoixJoueurs : Fenêtre initiale pour la saisie des noms des joueurs
VueAdversaire : Affichage de la zone adverse avec FXML dédié et bindings
Intégration dans VueDuJeu avec gestion de l'affichage côté adversaire

Phase 3 : Amélioration de l'expérience utilisateur

7-11 juin

Système de cache d'images : Classe ImageCache pour réduire la latence de chargement
Responsive design : Méthode creerBindingCarte() pour adaptation dynamique des tailles
Optimisation significative des performances

Phase 4 : Interactions avancées

11-12 juin

Vue d'ensemble du plateau de jeu avec gestion du banc, du Pokémon actif et des énergies.

VueAdversaire interactive : Boutons cliquables sur les Pokémons adverses
Affichage des énergies : Icônes d'énergies avec placement intelligent et taille adaptative
Visibilité conditionnelle : Masquage automatique des Pokémons KO
Système d'attaques : Boutons d'attaque et mécaniques de clic sur les énergies

Phase 5 : Fonctionnalités avancées et polish

14 juin

Focus sur le système de preview : affichage agrandi de la carte survolée (Lanturn).

Système de preview : Affichage agrandi des cartes au survol
Gestion des piles : VueTas pour pioche et défausse
Écran de fin de partie : VueResultats avec affichage du gagnant
Design complètement responsive

Principes techniques mis en œuvre

Patterns et Architecture

Composant auto-contrôlé : Chaque vue est à la fois un composant graphique et son propre contrôleur
Façade : Interfaces (IJeu, IJoueur, IPokemon) pour communiquer avec la logique métier
Réutilisabilité : Composants modulaires (VueCarte, VuePokemon, VueTas)

JavaFX avancé

Properties et Bindings : Liaison bidirectionnelle pour la réactivité
ChangeListeners : Actualisation automatique selon l'état du jeu
FXML : Séparation structure visuelle / logique
CSS : Stylisation et masquage conditionnel

Optimisations

Cache d'images : Réduction drastique de la latence
Responsive design : Bindings dynamiques pour toutes les tailles d'écran
Gestion mémoire : Réutilisation des composants existants

Contribution Individuelle

Au sein du binôme, j'ai particulièrement travaillé sur les briques fondamentales de l'affichage des cartes et la structure globale de l'interface :

Composants & Visuel

VuePokemon : Implémentation de la classe gérant l'affichage composite d'un Pokémon (Carte + États + Dégâts) via un StackPane.
Système d'Énergies : Développement de la logique d'affichage et de placement dynamique des icônes d'énergie sur les cartes (getIconeEnergie).
VueResultats : Création de l'interface de fin de partie.

Architecture & Logique

Refactor VueDuJeu : Migration de la vue principale vers un StackPane pour gérer les superpositions (z-index) des différents écrans.
Intégration : Développement des constructeurs de VueCarte et méthodes utilitaires pour la manipulation des images.
Debug : Résolution des problèmes de redimensionnement et de superposition des éléments graphiques.

Résultat final

Écran de victoire affiché dynamiquement via un écouteur de propriété à la fin de la partie.

L'interface graphique développée permet une expérience de jeu complète et fluide :

✅ Affichage clair des zones de jeu des deux joueurs
✅ Interactions intuitives (clic sur cartes, énergies, boutons d'action)
✅ Feedback visuel immédiat (preview de cartes, masquage des KO)
✅ Interface entièrement responsive s'adaptant à la taille de l'écran
✅ Gestion complète du cycle de jeu (début, déroulement, fin de partie)

Bilan : Ce projet illustre la maîtrise des concepts avancés de JavaFX (bindings, listeners, FXML) ainsi que la capacité à architecturer une application IHM complexe en respectant les principes de séparation des responsabilités et de réutilisabilité du code.