Function showNotification

Extensions/Multiplayer/multiplayercomponents.ts:584–697

({
      runtimeScene,
      content,
      type,
      id,
      persist,
    }: {
      runtimeScene: gdjs.RuntimeScene;
      content: string;
      type: 'success' | 'warning' | 'error';
      id?: string;
      persist?: boolean;
    })

     * Helper to show a notification to the user, that disappears automatically.
     */
    export const showNotification = function ({
      runtimeScene,
      content,
      type,
      id,
      persist,
    }: {
      runtimeScene: gdjs.RuntimeScene;
      content: string;
      type: 'success' | 'warning' | 'error';
      id?: string;
      persist?: boolean;
    }) {
      // When we show a notification, we add it below the other ones.
      // We also remove the oldest one if there are too many > 5.
      if (notificationContainerIds.length > 5) {
        const oldestNotificationId = notificationContainerIds.shift();
        if (!oldestNotificationId) {
          logger.error('No oldest notification ID found.');
          return;
        }

        removeNotificationAndShiftOthers(oldestNotificationId);
      }

      // We generate a random ID for the notification, so they can stack.
      const notificationId =
        id || `notification-${Math.random().toString(36).substring(7)}`;

      const domContainer = runtimeScene
        .getGame()
        .getRenderer()
        .getDomElementContainer();
      if (!domContainer) {
        logger.error('No DOM element container found.');
        return;
      }
      const divContainer = document.createElement('div');

      divContainer.id = notificationId;
      divContainer.style.position = 'absolute';
      divContainer.style.pointerEvents = 'all';
      divContainer.style.backgroundColor =
        type === 'success'
          ? '#0E062D'
          : type === 'warning'
            ? '#FFA500'
            : '#FF0000';
      // Space the notifications vertically, based on how many there are.
      divContainer.style.top = `${12 + notificationContainerIds.length * 32}px`;
      divContainer.style.right = '16px';
      divContainer.style.padding = '6px 32px 6px 6px';
      // Use zIndex 1 to make sure it is below the iframe.
      divContainer.style.zIndex = '1';
      divContainer.style.display = 'flex';
      divContainer.style.flexDirection = 'row-reverse';
      divContainer.style.justifyContent = 'space-between';
      divContainer.style.alignItems = 'center';