L’ECRAN DES JOUEURS

Nous allons maintenant détailler l’écran destiné aux joueurs et son implémentation grâce à Angular.

Pour rappel, l’écran des joueurs recevra des informations provenant de l’écran du MJ et réagira en conséquence, il est en lecture seule.

Attention : l’écran des joueurs reprend le CSS de l’écran du MJ en adaptant les valeurs numériques par rapport au ratio de taille entre l’affichage de l’écran du MJ et celui de l’écran des joueurs. Cela permettra de déplacer les éléments de façon cohérente entre les deux affichages tout en prenant en compte que l’affichage du MJ contiendra également le menu d’action que les joueurs ne voient pas sur leur écran.

Nous avons ajouté trois balises <audio> avec des identifiants différents afin de pouvoir jouer trois sons simultanément.

Nous avons également ajouté une balise <video> qui permettra de lire une vidéo faisant office de scène cinématique pour des passages importants du scénario par exemple. Cette partie ne sera pas détaillée mais la méthode playVideoTrailer contenue dans le code source vous permettra de lire vos vidéos sans souci.

D’autres éléments particuliers de CSS sont utilisés comme le box-shadow afin d’ajouter une ombre portée à un élément et -moz-border-radius / -webkit-border-radius / border-radius qui permettent d’arrondir les angles d’un élément.

La propriété translate est également fondamentale pour reproduire le glissement enregistré sur l’écran du MJ afin de le reproduire sur l’écran des joueurs.

[style.transform]="'translate(' + currentPlayer.X + 'px, ' + currentPlayer.Y + 'px)'" 
[style.transition]="currentPlayer.Transition" 

La combinaison des propriétés CSS transform et transition permet de créer l’illusion du déplacement d’un élément dans l’écran des joueurs.

Attention : Ce déplacement est linéaire, si le MJ fait une courbe en un seul geste, l’élément graphique sur l’écran des joueurs se fera en ligne droite de la position de départ à la position finale.

N’hésitez pas à jouer avec les propriétés CSS comme visibility ainsi qu’avec l’attribut ngStyle quand les propriétés CSS ne suffisent pas ou si vous avez un message d’erreur concernant la sécurité de l’injection de CSS.

COMMUNICATION

Nous allons maintenant relier l’écran du MJ à l’écran des joueurs.

Pour cela nous allons utiliser le module @stomp/ng2-stompjs et paramétrer légèrement le tout avec le fichier my-rx-stomp.config.ts.

Modifiez le fichier my-rx-stomp.config.ts en remplissant les informations de votre RabbitMQ :

// Which server? 
brokerURL: 'ws://{L ADRESSE IP DE VOTRE FILE RABBITMQ}:{LE PORT DE VOTRE RABBITMQ}/ws' , 
// Headers 
// Typical keys: login, passcode, host 
connectHeaders: { 
  login: 'VOTRE IDENTIFIANT RABBITMQ', 
  passcode: 'VOTRE MOT DE PASSE RABBITMQ' 
  }, 

Dans app.module.ts n’oubliez pas de faire l’import suivant :

import { InjectableRxStompConfig, RxStompService, rxStompServiceFactory } from '@stomp/ng2-stompjs'; 
import { myRxStompConfig } from './my-rx-stomp.config'; 

Et d’ajouter le provider :

providers: [{ 
  provide: InjectableRxStompConfig, 
  useValue: myRxStompConfig 
 }, 
 { 
  provide: RxStompService, 
  useFactory: rxStompServiceFactory, 
  deps: [InjectableRxStompConfig] 
}], 

Une fois fait, vous pouvez aller dans l’écran du MJ et changer le constructeur comme suit :

constructor(private rxStompService: RxStompService, private http: HttpClient) { 

Vous pouvez maintenant à tout moment appeler le service comme suit :

this.rxStompService.publish({ destination: '/topic/mjdr-party-manager-queue', body: JSON.stringify(message) }); 

Si la file RabbitMQ mjdr-party-manager-queue existe, le message sera envoyé.

Il ne nous reste plus qu’à consommer ce message dans notre écran des joueurs.

De la même façon que pour l’écran du MJ, changez le constructeur pour :

constructor(private rxStompService: RxStompService, private http: HttpClient) { 

Puis, dans ce même constructeur ajoutez l’abonnement :

Ainsi, chaque message reçu déclenchera la méthode manageReceivedMessage qui consiste en un switch sur toutes les valeurs possibles de ActionEnum et qui changera notre view-model et donc notre affichage.

Par exemple, si nous voulons changer une lumière HUE, nous pourrons envoyer un message avec l’ActionEnum MANAGE_COLOR qui enverra un message au pont HUE pour illuminer la pièce d’une couleur définie.

De même, si nous voulons jouer un son, nous enverrons l’ActionEnum SFX_ON, qui gèrera le son via la méthode playSfx.

Nous avons maintenant terminé l’explication de notre application dédiée aux jeux de rôles !

Dans le dernier article de cette série, nous verrons les différentes pistes d’améliorations de notre solution.