Nous allons maintenant détailler l’écran du maître du jeu (MJ) et son implémentation grâce à Angular.

Pour rappel, l’écran du MJ permettra d’afficher la scène en cours et de piloter l’écran des joueurs qui sera lui-même affiché sur un écran visible de tous les joueurs de la partie.

Modèle

Le modèle objet est composé des classes suivantes :

La classe Player qui contient à la fois la définition métier d’un joueur ainsi que quelques champs qui serviront à l’affichage.

J’attire votre attention sur cette partie de la classe qui gère le fond de l’affichage d’un objet :

if (backgroundImage === undefined) { 
  this.Color = color; 
  this.BackgroundColor = backgroundColor; 
  this.DefaultBackgroundImage = ''; 
} else { 
  this.DefaultBackgroundImage = backgroundImage; 
} 

Soit l’objet n’a pas d’image et on définit une couleur de fond, soit l’objet a une image que l’on lie à la propriété DefaultBackgroundImage.

On positionne également l’objet au centre de l’écran par défaut :

this.X = 0; 
this.Y = 0; 

On utilisera aussi certaines propriétés CSS dans l’affichage :

CssClass: string = 'player-box';
Transition: string = 'all 1.5s ease'; 

La classe QueueMessage est la description du contenu des messages envoyés à la messagerie applicative RabbitMQ.

export class QueueMessage { 
  MessageType: ActionEnum; 
  Target: Player; 
  RawData: any; 
} 

Le champ MessageType peut avoir les valeurs de l’énumération suivante et définira l’action que veut réaliser le MJ :

export enum ActionEnum{ 
  CLEAR_PLAYERS, 
  ADD_PLAYER, 
  MOVE_PLAYER, 
  SFX_ON, 
  VFX_ON, 
  FX_OFF, 
  SET_TO_DEFAULT_COLOR, 
  SET_BACKGROUND, 
  REMOVE_PLAYER, 
  SET_VISIBILITY, 
  MANAGE_COLOR 
} 

Le champ Target est le joueur ciblé, il faudra faire attention à vérifier sa nullité ou non pour agir de façon globale ou sur un seul joueur.

Nous nous laissons la liberté de mettre ce que nous désirons dans le champ RawData qui devra contenir les paramètres nécessaires à la réalisation de l’action sélectionnée.

Nous avons donc une enveloppe pour réaliser nos actions.

La classe Guid nous permet de générer un Guid pour identifier de façon unique chaque élément de la scène.

La classe Asset est une image d’une ressource à afficher (sfx,vfx,etc…).

export class Asset { 
  Name: string; 
  UiName: string; 
  Url: string; 
} 

La propriété UiName permet d’avoir un nom raccourci pour les affichages avec un espace alloué limité.

La classe AssetFile permet d’encapsuler tous les assets d’un même type, par exemple tous les sfxs, en un seul objet :

export class AssetFile { 
  BaseUrl: string; 
  Assets: Asset[] = []; 
  constructor() {} 
} 

C’est très pratique pour parcourir tous les backgrounds afin de remplir une liste déroulante.

Syntaxe spécifique à Angular

Nous lions nos méthodes à la vue principalement grâce aux propriété click, mouseup et touchend (pour prendre en compte les écrans tactiles).

Afin d’imposer un style CSS issu d’une information de notre modèle objet, nous utilisons la syntaxe [style.la-propriete-css-a-changer], par exemple pour la propriété CSS background-image :

<div class="boundary" [style.background-image]="'url(' + BaseBackgroundsUrl + SelectedBackground + ')'"> 

Nous utilisons aussi la syntaxe Angular de base comme *ngIf, *ngFor et la syntaxe moustache que nous n’allons pas détailler ici.

Flex

Pour ajuster la disposition de nos pages, nous utilisons Flex et notamment :

display: flex; 
flex-direction: column; 
justify-content: center;
align-content: center; 

Module externe

Ce qui a rendu ce projet possible est le module externe @angular/cdk/drag-drop et notamment l’utilisation de l’attribut cdkDragBoundary pour définir une zone de glisser/déposer ainsi que l’attribut cdkDrag pour identifier les éléments susceptibles d’être déplacés dans cette zone.

Vous trouverez des exemples et de la documentation sur ce module à l’adresse : https://material.angular.io/cdk/drag-drop/overview

Nous verrons dans l’article suivant comment construire notre écran destiné aux joueurs.