Frontend Angular

Structure du frontend Angular, modules, composants, services, navigation, état et conventions utilisées dans l'application Web.

Structure et routing Angular

Structure principale

Le frontend Angular se trouve dans uniksimFrontEnd/. Le dossier principal est src/app/.

Module racine

src/app/app.module.ts centralise actuellement :

Familles de routes

Point à connaître

Le routing n’est pas dans un app-routing.module.ts séparé : il est défini directement avec RouterModule.forRoot(...) dans app.module.ts.

Services Angular et communication avec l’API

Vue d’ensemble

Le frontend ne doit pas appeler le backend directement depuis chaque composant. La logique partagée est regroupée dans uniksimFrontEnd/src/app/service/, avec plusieurs familles spécialisées.

Flux standard

sequenceDiagram
    participant P as Page / Component
    participant S as Service Angular
    participant I as AuthInterceptor
    participant C as Controller NestJS
    participant B as Service backend

    P->>S: Action utilisateur
    S->>I: Requête HttpClient
    I->>I: Ajoute / gère auth
    I->>C: HTTP
    C->>B: Logique métier
    B-->>C: Résultat
    C-->>S: Réponse
    S-->>P: État / données UI

Auth

service/auth/ contient :

Accès aux données et APIs

service/requestAndData/ contient les services historiques de communication et de données :

Avant de créer un nouveau service HTTP générique, vérifier si l’appel appartient déjà à l’un de ces services ou à un service fonctionnel plus spécifique.

Support

service/support/ sépare le support en trois responsabilités :

Notifications

service/notifications/ contient notamment :

Présence et WebPanel

Choisir où placer une nouvelle logique

flowchart TD
    NEW[Nouvelle logique frontend] --> SHARED{Utilisée par plusieurs pages ?}
    SHARED -- Non --> PAGE[La garder près de la Page / Component]
    SHARED -- Oui --> DOMAIN{Sous-système existant ?}
    DOMAIN -- Auth --> AUTH[service/auth]
    DOMAIN -- Support --> SUP[service/support]
    DOMAIN -- Notifications --> NOTIF[service/notifications]
    DOMAIN -- Présence --> PRES[service/presence]
    DOMAIN -- Données / API générique --> DATA[service/requestAndData]
    DOMAIN -- Autre --> NEWSVC[Nouveau service spécialisé]

Points d’attention

Temps réel du compte et transport partagé — septembre 2026

service/realtime/realtime-socket.ts centralise connexion JWT, événements observables, reconnexion et acknowledgements. service/account/account-socket.service.ts utilise /account pour présence, télémétrie consentie, jeu actif et notification.created. service/support/support-socket.service.ts utilise /support pour messages, tickets et typing, et restaure la conversation active à la reconnexion. Les composants de support et de présence admin consomment le service du compte pour les signaux de présence.

AccountSocketService joue le son et émet la notification; AppComponent la transmet à UserNotificationService.upsert(). Les modèles sont séparés dans Models/Notification.ts, Presence.ts et Support.ts; les constantes communes vivent dans realtime.constants.ts et account.constants.ts. Voir Support temps réel.

Pages, composants et structure UI

Vue d’ensemble

Le frontend sépare globalement les écrans complets, les composants réutilisables et les popups. Cette page sert de guide pour savoir où ajouter ou modifier une interface.

Structure UI

flowchart TD
    APP[AppModule] --> ROUTES[RouterModule.forRoot]
    ROUTES --> PAGES[Pages]
    PAGES --> COMP[Components]
    PAGES --> POP[Popup]
    PAGES --> SERVICES[Services Angular]
    COMP --> SERVICES

Pages

src/app/Pages/ contient les écrans routables ou les grosses vues fonctionnelles. Les dossiers actuellement présents incluent notamment :

Components

src/app/Components/ contient les composants destinés à être utilisés par d’autres vues. On y trouve notamment CommunicationOverlay et WebPanel.

Un élément devrait devenir un composant partagé lorsqu’il possède une responsabilité UI autonome ou qu’il est utilisé par plusieurs pages.

Popup

src/app/Popup/ regroupe les interfaces modales. Lorsqu’une interaction est temporaire et ne mérite pas une route complète, vérifier d’abord si elle appartient à cette couche.

Routing

Le routing est centralisé directement dans src/app/app.module.ts avec RouterModule.forRoot(...). Il n’existe pas de app-routing.module.ts séparé.

Les routes sont regroupées par niveau d’accès : publiques, utilisateur, utilisateur Uniksim, admin et true admin. Voir Structure et routing Angular pour la liste détaillée.

Créer une nouvelle vue

flowchart LR
    NEED[Nouvelle interface] --> ROUTE{Doit avoir une URL ?}
    ROUTE -- Oui --> PAGE[Nouvelle Page]
    PAGE --> APP[Ajouter déclaration + route dans app.module.ts]
    ROUTE -- Non --> REUSE{Réutilisable ?}
    REUSE -- Oui --> COMPONENT[Component]
    REUSE -- Non --> POPUP{Interaction modale ?}
    POPUP -- Oui --> P[Popup]
    POPUP -- Non --> LOCAL[Composant local à la page]

Conventions pratiques

Panel Web — interface superposée au jeu et intégration Unity

Le panel au-dessus du jeu

Le panel Web donne accès au support UnikBot et au centre de notifications pendant que le jeu Unity WebGL reste affiché. Angular dessine la barre d'outils et les fenêtres au-dessus du canvas Unity. L'utilisateur ouvre une vue, l'utilise puis la ferme pour retrouver le jeu.

Le composant app-web-panel est monté dans AppComponent, à côté du router-outlet. Il est partagé avec les autres pages du site. Dans le jeu, il reçoit la classe game-panel-host, qui adapte sa disposition à la barre d'outils.

Barre d'outils en jeu

La barre game-tools-rail apparaît lorsque l'utilisateur est authentifié, que la route est /game, /demo, /alpha, /alpha2 ou /demoLive, et que WebPanelService.isGameReady vaut true.

AppComponent.openGamePanel() appelle WebPanelService.toggle() : cliquer une seconde fois sur la vue active la ferme; choisir l'autre bouton change de vue.

État partagé et cycle d'ouverture

WebPanelService conserve la vue active dans un BehaviorSubject. activePanel$ informe le composant du changement et currentPanel expose sa valeur courante. Une seule vue est active à la fois.

Valeur interne Vue affichée
null Panel fermé.
notifications Centre de notifications.
chat Support Web UnikBot : app-page-support en mode compact.

open(panel) sélectionne une vue, toggle(panel) alterne ouverture et fermeture, et close() remet la sélection à null. La touche Échap et le bouton de fermeture appellent close().

Intégration avec Unity WebGL

PageWebglComponent héberge #unity-canvas et charge le build Unity. À son initialisation, il appelle setGameReady(false). Son listener window:uniksim:game-ready passe ensuite l'état à true au prochain requestAnimationFrame, ce qui rend la barre disponible.

Le composant du panel écoute aussi window:uniksim:open-panel. Le champ detail accepte une chaîne ou un objet avec panel. Seules les valeurs notifications et chat sont reconnues. Cette entrée permet à un appelant de demander l'ouverture sans changer la route Angular.

window.dispatchEvent(new CustomEvent('uniksim:open-panel', {
  detail: { panel: 'notifications' }
}));

Dans la branche Game refactor_notifications, MainControlStudent.Start() et l’initialisation de MainControlTeacher appellent WebGameReadyBridge.Notify(). En build WebGL, ce bridge appelle NotifyWebGameReady() dans Assets/Src/Plugins/javaLib.jslib, qui émet uniksim:game-ready. Angular reçoit cet événement et affiche les outils. Dans l’éditeur Unity, le bridge écrit seulement un log.

À la destruction de PageWebglComponent, setGameReady(false) masque les outils du jeu. Le composant enregistre aussi le jeu actif avec AccountSocketService.setGamePresence(pid, gameUid) après validation de l'accès, puis appelle clearGamePresence() à la sortie.

Support UnikBot

La vue support embarque PageSupportComponent avec compact=true. Ce mode conserve la présentation du jeu : le composant ne réactive pas l'en-tête et le pied de page du site.

Le support charge la conversation IA et les tickets de l'utilisateur. Il gère le fil sélectionné, les nouveaux messages, les mises à jour de tickets, les indicateurs de saisie et le statut des administrateurs. SupportService porte les appels métier, SupportStateService réconcilie les données et SupportSocketService fournit les événements temps réel.

La fenêtre support utilise un fond assombri cliquable pour fermer le panel. Sur ordinateur, elle peut atteindre 880 × 700 px, dans les limites du viewport. En mode jeu, elle est décalée pour laisser la barre accessible. Sur petit écran, elle occupe presque toute la surface et réserve de l'espace aux outils.

Voir Support temps réel pour les conversations et les transports.

Centre de notifications

La vue notifications est un popover positionné près de la cloche. Sa position est recalculée à l'ouverture, au redimensionnement et au scroll. Sur ordinateur dans le jeu, il apparaît à gauche de la barre. Sa largeur est limitée à 380 px; sa liste défile lorsque le contenu dépasse la hauteur disponible.

La couche externe laisse passer les interactions vers le jeu avec pointer-events: none; la fenêtre réactive ses propres interactions. Un clic hors de la fenêtre et de la cloche ferme la vue.

UserNotificationService partage la liste entre le panel et les compteurs :

Action API Web
Charger la liste GET /notifications
Marquer comme lu POST /notifications/:uid/read avec isRead
Supprimer DELETE /notifications/:uid

La première ouverture charge la liste; le bouton de rafraîchissement permet de la recharger. Le panel affiche les états de chargement, d'erreur avec nouvelle tentative, et de liste vide. Cliquer une notification non lue la marque comme lue; le bouton de suppression retire l'entrée sans déclencher ce clic de lecture.

AccountSocketService.onNotificationCreated$ alimente UserNotificationService.upsert(), qui fusionne les entrées par UID. AppComponent recharge les notifications après reconnexion du compte. Les titres et corps utilisent uniksim.notification_<type>_title et _body, avec un texte par défaut si la traduction manque.

Côté Game, NotificationManager.SaveNotification() délègue à BackEndBase.SaveNotification(), qui envoie POST /saveNotification. L'affichage du panel et sa liste sont gérés côté Web. Voir Notifications et Push pour la réception serveur, l'inbox et le push.

Fichiers à modifier

Fichier Responsabilité
uniksimFrontEnd/src/app/app.component.html, .ts et .scss Montage global, barre en jeu, boutons, compteurs et accès hors jeu.
service/webPanel/web-panel.service.ts Vue active et état de disponibilité du jeu.
Components/WebPanel/WebPanel.component.ts, .html et .scss Ouverture, fermeture, contenu, position et superposition.
Pages/PageWebgl/PageWebgl.component.ts Chargement Unity, disponibilité et cycle du jeu actif.
Pages/PageSupport/ et service/support/ Support embarqué et ses conversations.
service/notifications/user-notification.service.ts Liste, compteur et mutations de notifications.
service/account/account-socket.service.ts Événements du compte et jeu actif.
Game/Assets/Src/Game/Notifications/NotificationManager.cs et Game/Assets/Src/Game/BackEnd/BackEndBase.cs Envoi des notifications depuis Unity.

Vérifier une modification

Sources de cette page : frontend Web de la branche messagerie_fixes et code Game de la branche refactor_notifications, inspecté le 30 septembre 2026.