Interface graphique

2.1.1. Informations sur les joueurs

La partie de l'interface présentant les informations sur les joueurs montre, pour chacun d'entre eux :

• sa couleur, au moyen d'un petit disque coloré,
• son nom,
• le nombre de points qu'il a obtenu jusqu'à présent dans la partie,
• ses occupants (hutte et pions).

La figure ci-dessous montre un exemple de cette partie de l'interface.

Les joueurs sont présentés dans l'ordre de jeu, qui est toujours l'ordre des couleurs utilisé jusqu'à présent — à savoir rouge, bleu, vert, jaune et violet — et le joueur courant est entouré.

Pour distinguer les occupants qu'un joueur possède encore en mains de ceux qu'il a posé sur le plateau, l'opacité des icônes correspondant à ces derniers est de 0.1 uniquement. En d'autres termes, ces icônes sont transparentes à 90%, et donc à peine visibles.

On admet que les icônes correspondant aux éventuels occupants placés sur le plateau sont toujours celles qui se trouvent le plus à droite. Par exemple, si un joueur a actuellement deux pions placés sur le plateau, ce sont toujours les deux icônes des pions les plus à droite de sa ligne qui sont (quasi) transparentes.

2.1.2. Tableau d'affichage

2.1.3. Tas de tuiles, et tuile à poser

Les deux tas de tuiles — celui des tuiles normales à gauche, celui des tuiles menhir à droite — sont représentés par une image du dos d'une tuile du type correspondant, au-dessus de laquelle est affiché le nombre de tuiles restant dans le tas. En dessous, la face de la tuile à placer est visible, comme on peut le voir dans la figure ci-dessous.

Lorsque le joueur courant peut placer ou reprendre un occupant, l'image de la tuile à placer est recouverte d'un texte d'instruction. La figure ci-dessous montre par exemple celui qui apparaît lorsqu'un occupant peut être placé.

Comme le texte l'indique, en cliquant sur lui le joueur courant a la possibilité de déclarer qu'il ne désire pas poser (ou reprendre) un occupant.

3.1.1. Conseils de programmation

Image tile56 = new Image("/512/56.jpg");

3.2.1. Graphe de scène

Le graphe de scène créé par la méthode create est présenté à la figure 8 ci-dessous.

Sur cette image, chaque rectangle blanc représente un nœud JavaFX, et certains d'entre eux sont accompagnés d'annotations colorées qui donnent :

• en vert, les feuilles de style à attacher au nœud en plaçant leur nom dans la liste retournée par getStylesheets,
• en rouge, l'identité des nœuds, à définir au moyen de la méthode setId,
• en bleu, les classes de style à associer au nœud en plaçant leur nom dans la liste retournée par getStyleClass.

À la racine du graphe de scène — au sommet de l'image — se trouve une instance de VBox dont le but est de contenir, et d'aligner verticalement, les éléments graphiques correspondant aux différents joueurs. À chaque joueur correspond une instance de TextFlow qui contient tous les éléments graphiques et textuels donnant les informations le concernant, à savoir :

• une instance de Circle d'un rayon de 5 unités, colorée avec la couleur du joueur,
• une instance de Text dont le texte est constitué d'une espace (pour séparer le disque coloré du nom), du nom du joueur, d'une espace, d'un deux-points, de son nombre de points actuel et d'un retour à la ligne (\n), par exemple :
  Dalia : 5 points,
• trois instances de SVGPath montrant les huttes du joueur,
• une instance de Text dont le texte est une chaîne composée de 3 espaces, qui sert à séparer visuellement les huttes des pions,
• cinq instances de SVGPath montrant les pions du joueur.

Toutes les instances de TextFlow représentant un joueur doivent avoir la classe de style player attachée à elles. Une seule d'entre elles, celle qui correspond au joueur courant, doit en plus avoir la classe de style current attachée à elle — c'est la raison pour laquelle cette classe de style apparaît en bleu clair sur la figure 8.

3.2.2. Conseils de programmation

1. Joueurs participant à une partie
   

   Pour construire le graphe de scène, la méthode create doit savoir quels joueurs participent à la partie. Pour cela, elle peut simplement parcourir la liste des joueurs de l'état de la partie (observable) qu'elle a reçu. On peut supposer que cette liste est déjà valide au moment de l'appel à create, correctement triée, et constante pour le reste de la partie.

2. Version observable de l'état de la partie
   

   L'état de la partie est fourni à la méthode create de PlayersUI sous la forme d'une valeur de type ObservableValue<GameState>. Pour mémoire, l'interface ObservableValue de JavaFX correspond à ce que nous avons appelé un sujet (Subject) dans le cours sur le patron Observer.

   La valeur passée à create peut donc être vue comme une espèce de cellule de tableur observable qui contient une valeur de type GameState, qui est l'état actuel de la partie. Le contenu de cette cellule change au cours du jeu, en fonction des règles et des actions effectuées par les joueurs. Tous les éléments de l'interface graphique qui dépendent de l'état de la partie observent donc cette valeur, et se mettent à jour lorsqu'elle change d'une manière qui les affecte.

   La manière évidente de réagir aux changements de cette valeur observable est de lui attacher un auditeur (listener), qui pour mémoire est le terme que JavaFX utilise pour désigner ce que le patron Observer appelle un observateur. Par exemple, pour afficher le joueur courant sur la console chaque fois que l'état de la partie change, on peut ajouter un auditeur à la valeur observable contenant l'état ainsi :

   ObservableValue<GameState> gameStateO = …;
   
   gameStateO.addListener((o, oldState, newState) ->
     System.out.println(newState.currentPlayer()));
   

   Comme cet exemple l'illustre, l'auditeur passé à addListener est généralement spécifié sous la forme d'une lambda qui prend trois arguments : la valeur observable qui a changé (o ci-dessus, qui dans cet exemple sera toujours identique à gameStateO), son ancien contenu (oldState ci-dessus, de type GameState) et son nouveau contenu (newState ci-dessus, de type GameState également).

   L'utilisation d'auditeurs fonctionne, mais JavaFX offre depuis peu une méthode map sur les valeurs observables qui permet souvent d'écrire du code plus simple que celui qu'on obtient avec des auditeurs. Cette méthode map fonctionne de manière similaire à la méthode map des flots (Stream), ce qui n'est pas étonnant sachant qu'une valeur observable, qui change au cours du temps, peut être vue comme le flot de ses valeurs successives ! Par exemple, une valeur observable qui contient successivement les entiers 1, 2 et 3 est très similaire à un flot contenant ces mêmes trois valeurs, dans le même ordre.

   L'exemple plus haut peut être récrit pour utiliser cette méthode map afin d'obtenir, à partir de la valeur observable contenant l'état complet du jeu, une nouvelle valeur observable qui ne contient que le joueur courant. Un auditeur peut ensuite être ajouté sur cette valeur observable « dérivée » :

   ObservableValue<GameState> gameStateO = …;
   
   ObservableValue<PlayerColor> currentPlayerO =
     gameStateO.map(GameState::currentPlayer);
   
   currentPlayerO.addListener((o, oldPlayer, newPlayer) ->
     System.out.println(newPlayer));
   

   Encore une fois, il est important de voir que ce code est très similaire à celui que l'on pourrait écrire pour faire quelque chose de semblable avec un flot de valeurs de type GameState :

   Stream<GameState> gameStateS = …;
   
   Stream<PlayerColor> currentPlayerS =
     gameStateS.map(GameState::currentPlayer);
   
   currentPlayerS.forEach(player ->
     System.out.println(player));
   

   Il est fortement recommandé d'utiliser cette méthode map autant que possible dans ce projet, car elle permet de simplifier énormément le code de l'interface graphique. Comme PlayersUI est la première classe dans laquelle vous devez l'utiliser, quelques indications supplémentaires sont données dans les sections qui suivent.

3. Points des joueurs
   

   Dans le but d'afficher, et de garder à jour, les points des joueurs, la méthode create peut utiliser la méthode map en deux temps : tout d'abord pour obtenir une valeur observable contenant une table associant ses points à chaque joueur (obtenue du tableau d'affichage) ; puis pour obtenir de cette valeur observable-là une valeur observable qui contient le texte à afficher dans l'interface. Cette seconde valeur observable peut directement être liée à la propriété textProperty du nœud JavaFX de type Text correspondant au joueur, grâce à la méthode bind, garantissant ainsi la mise à jour automatique du texte !

   Cette idée est résumée dans le squelette de code ci-dessous, dont vous pouvez vous inspirer pour écrire votre méthode create :

   // Valeur observable contenant l'état du jeu
   ObservableValue<GameState> gameStateO = …;
   
   // Valeur observable contenant les points des joueurs
   ObservableValue<Map<PlayerColor, Integer>> pointsO =
     gameStateO.map(…);
   
   for (PlayerColor p: PlayerColor.ALL) {
     // Valeur observable contenant le texte des points
     // du joueur de couleur `p` (p.ex. "Dalia : 5 points")
     ObservableValue<String> pointsTextO =
       pointsO.map(…);
   
     // Nœud JavaFX affichant le nom et les points du joueur
     // de couleur `p` (mis à jour automatiquement !)
     Text pointsText = new Text();
     pointsText.textProperty().bind(pointsTextO);
   
     // …
   }
   

4. Joueur courant
   

   Comme expliqué plus haut, le joueur courant est toujours entouré d'un cadre gris. L'aspect du cadre est défini dans la feuille de style fournie, et il est automatiquement attaché à toute instance de TextFlow qui possède la classe de style current.

   Cela implique que la méthode create doit faire en sorte que, chaque fois que le joueur courant change, la classe de style current soit ajoutée à celles du nœud TextFlow qui représente le nouveau joueur courant, et supprimée de celles des autres nœuds TextFlow.

   Cela peut se faire assez facilement en utilisant tout d'abord la méthode map pour obtenir une valeur observable contenant le joueur courant, puis en lui attachant un auditeur modifiant les classes de style du nœud TextFlow.

5. Occupants placés
   

   Pour faire en sorte que les occupants que chaque joueur a placé sur le plateau soient quasi transparents, il est possible une fois encore d'utiliser la méthode map pour obtenir, pour chaque occupant, une valeur observable valant 1 si cet occupant est dans les mains de l'utilisateur, et 0.1 sinon. Cette valeur observable peut ensuite être directement liée, avec la méthode bind, à la propriété opacity du nœud correspondant à l'icône de l'occupant.

3.3.1. Graphe de scène

3.3.2. Conseils de programmation

1. Affichage des messages
   

   La méthode create doit faire en sorte que, chaque fois que la liste des messages affichés sur le tableau d'affichage change, le graphe de scène change également afin d'incorporer les nouveaux messages — ou, pour être précis, leur représentation graphique.

   Pour ce faire, create peut installer un auditeur sur la valeur observable qu'on lui passe, qui se charge de créer les instances de Text pour les nouveaux messages. Cet auditeur peut faire l'hypothèse que le nouveau nombre de messages est toujours supérieur ou égal à l'ancien, et que l'ancienne liste de message constitue un préfixe de la nouvelle.

   Les instances de Text contenant le texte des messages doivent être configurées de manière à ce que leur largeur ne dépasse pas la largeur d'une grande image de tuile. Cela peut se faire au moyen de la méthode setWrappingWidth à laquelle on passe la constante LARGE_TILE_FIT_SIZE.

   Une fois toutes les nouvelles instances de Text créées, l'auditeur doit faire défiler le panneau de défilement afin que le dernier message soit visible. Il faut pour cela appeler la méthode layout de l'instance de ScrollPane contenant les messages, puis sa méthode setVvalue avec 1, ainsi :

   ScrollPane messageScrollPane = …;
   messageScrollPane.layout();
   messageScrollPane.setVvalue(1);
   

2. Mise en évidence des tuiles
   

   Comme expliqué plus haut, lorsque la souris survole un message du tableau d'affichage et qu'un ensemble non vide d'identités de tuiles lui est associé, ces tuiles doivent être mises en évidence sur le plateau.

   Dans ce but, la méthode create reçoit une propriété JavaFX contenant un ensemble d'entiers, et elle doit faire en sorte que cette propriété contienne l'ensemble des identités des tuiles associé au message actuellement survolé par la souris, s'il y en a un, et un ensemble vide sinon. Le contenu de cette propriété sera utilisé ultérieurement pour mettre les tuiles correspondantes en évidence.

   Pour mémoire, une propriété JavaFX est similaire à une cellule d'un tableur contenant une valeur — par opposition à une cellule contenant une formule. La valeur stockée dans la propriété peut être modifiée au moyen de sa méthode setValue.

   Afin de déterminer quand la souris survole un message, il suffit d'utiliser les méthodes setOnMouseEntered et setOnMouseExited de l'instance de Text représentant le message afin d'installer des gestionnaires d'événements modifiant le contenu de la propriété.

3.4.1. Graphe de scène

Le graphe de scène construit par la méthode create est visible dans la figure ci-dessous.

Afin de garantir que le texte affiché par l'instance de Text qui peut recouvrir la tuile à placer ne soit pas plus large que la tuile qu'il recouvre, sa méthode setWrappingWidth doit être appelée avec une taille égale à 80% de la largeur de la tuile recouverte.

3.4.2. Conseils de programmation