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

RôleLe etpanel comportementau-dessus actueldu jeu

Le fluxpanel Web donne accès au support UnikBot et au centre de communicationnotifications actuelpendant que le jeu Unity WebGL reste affiché. Angular dessine la barre d'outils et les fenêtres au-dessus du Gamecanvas envoie uniquement des notifications.Unity. L'ancienutilisateur parcoursouvre deune chatvue, nel'utilise doitpuis plusla êtreferme présentépour commeretrouver le fonctionnementjeu.

courant.

Le Cettecomposant pageapp-web-panel regroupeest l'intégrationmonté dans AppComponent, à côté du router-outlet. Il est partagé avec leles backendautres pages du panelsite. Web,Dans le jeu, il reçoit la persistanceclasse desgame-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.

La cloche ouvre le centre de notifications et leuraffiche réceptionson côténombre client.de

notifications non lues.

Le logbookbouton UnikBot ouvre le support et affiche son compteur de messages non lus. La poignée replie ou déplie la barre. Quand elle est repliée, un systèmebadge métierconserve distinct,le avectotal sondes propredeux document,compteurs, sonplafonné historiquevisuellement à 99+. Replier la barre ferme la vue ouverte. Ouvrir une vue redéplie la barre.

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 soncycle évaluation.d'ouverture

Voir

WebPanelService Logbookconserve —la sauvegarde,vue historiqueactive dans un BehaviorSubject. activePanel$ informe le composant du changement et évaluationcurrentPanel dansexpose Commun.sa valeur courante. Une seule vue est active à la fois.

Deux canaux complémentaires

CanalValeur interne	Responsabilité

Vue Points d'entréeaffichée Backend Webnull EnregistrerPanel etfermé. charger les notifications Centre de notifications. /saveNotificationchat 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' }
}));

Ces événements sont les points d'entrée présents dans le frontend inspecté. Le chargement du build et le signal de disponibilité de la barre sont deux étapes distinctes : si la barre n'apparaît pas, vérifier que le build exécuté produit bien le signal attendu.

À 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 /getNotifications/<teacherUid>notifications BrainCloudMarquer RTTcomme Avertir le client connecté de l'arrivée d'une notification.lu new_notificationPOST /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 tempsserveur, réell'inbox complèteet 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/BackEnd/BackEndBase.cs Envoi des notifications depuis Unity.

Vérifier une modification

Entrer dans le jeu : les outils attendent le signal de disponibilité. Ouvrir chaque vue depuis la barre, changer de vue, recliquer le bouton actif, fermer avec Échap et avec la croix. Replier la barre avec une vue ouverte, puis la redéplier; contrôler les compteurs. Contrôler le placement sur ordinateur et petit écran, et les clics qui doivent atteindre le jeu autour du popover. Tester le support intégré, le chargement des donnéesnotifications, persistées.la Unlecture, clientla quisuppression seet connecteune aprèsreconnexion. l'envoiSortir doitdu pouvoirjeu retrouver: ses notifications sans avoir reçuvérifier le messageretrait RTT.des

Envoioutils depuiset Unity

du

jeu Leactif côté compte.

Sources de cette page : code métierlocal appellede Game.NotificationManager.SaveNotification().

NotificationManager.SaveNotification() passe par BackEndBase.SaveNotification(). L'appel utilise l'endpoint Web /saveNotification. Une nouvelle notification peut être signalée au client via new_notification.

Le chemin Web doit être vérifié séparément du chemin Cloud Script. Pour les opérations BrainCloud communes, voir Backend Unity ↔ BrainCloud; pour les listeners, voir RTT, messages et synchronisation.

Chargement et affichage

Le chargement des notifications du professeur passe par /getNotifications/<teacherUid>. Vérifier l'identifiant du destinataire lorsque la liste est vide ou contient des notifications inattendues.

Les données et le rendu côté Unity passent par NotificationDatauniksimweb/uniksimFrontEnd et NotificationListItemmaster/game., Le notificationType identifieinspecté le type30 deseptembre notification; extraData transporte les informations nécessaires à son affichage ou à son comportement.2026.

Ajouter un type de notification

Choisir un notificationType stable et explicite. Définir les champs de extraData dont le client a besoin. Déclencher l'envoi via Game.NotificationManager.SaveNotification(). Adapter NotificationData et NotificationListItem si le type nécessite un rendu ou une action spécifique. Ajouter les textes localisés. Vérifier le chargement initial, la réception RTT, le marquage comme lu et la suppression.

Vérification et diagnostic

Notification non enregistrée : vérifier l'appel Web à /saveNotification et sa réponse. Liste vide après connexion : vérifier /getNotifications/<teacherUid>, le destinataire et la donnée persistée. Donnée présente mais pas de mise à jour live : vérifier new_notification, le listener RTT et le rafraîchissement de l'UI. Affichage incorrect : vérifier le type, extraData, le rendu et les textes localisés.

Tester avec un destinataire connecté puis déconnecté, relancer le client et vérifier l'absence de doublons. Une notification persistée doit rester accessible après reconnexion.