# 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`. - La cloche ouvre le centre de notifications et affiche son nombre de notifications non lues. - Le bouton 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 badge conserve le total des deux compteurs, plafonné visuellement à `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 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 interneVue 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](https://wiki.uniksim.com/books/web/page/support-temps-reel) 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 :
ActionAPI 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__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](https://wiki.uniksim.com/books/web/page/notifications-et-push) pour la réception serveur, l'inbox et le push. ## Fichiers à modifier
FichierResponsabilité
`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 - 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 notifications, la lecture, la suppression et une reconnexion. - Sortir du jeu : vérifier le retrait des outils et du jeu actif côté compte. Sources de cette page : frontend Web de la branche `messagerie_fixes` et code Game de la branche `refactor_notifications`, inspecté le 30 septembre 2026.