Repository: 4ian/GDevelop
File: newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js (JavaScript)

Code before:

  const url = new URL(
    gameId.current
      ? `/app-embedded/${gamesPlatformEmbeddedVersion}/games/${gameId.current}`
      : isMobile
      ? // On mobile, go directly to a random game if none is specified.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/games/random`
      : // On desktop, access the homepage.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/${paletteType}`,
    gdGamesHost
  );
  if (gameId.current || isMobile) url.searchParams.set('theme', paletteType);

  const src = loaded ? url.toString() : '';

  React.useEffect(
    () => {
      if (!loaded && initialGameId) {
        // Every time the frame is unloaded on a gameId, we reset it for the next load.
        gameId.current = initialGameId;
      }
    },
    [loaded, initialGameId]
  );

  React.useEffect(
    () => {
      if (!iframeRef.current) return;
      let offset = 0;
      if (loaded) {
        offset = softKeyboardBottomOffset - homepageMobileMenuHeight;
      }
      iframeRef.current.contentWindow.postMessage(
        {
          type: 'setKeyboardOffset',
          value: offset,
        },
        '*'
      );
    },
    [softKeyboardBottomOffset, loaded]
  );

  const titleBarAndToolbarHeight = isMobile ? 0 : 37 + 40;
  const containerTop = isMobile
    ? 0 // Always top of the screen on small screens.
    : `calc(${titleBarAndToolbarHeight}px + var(--safe-area-inset-top))`;
  const containerBottom = isMobile ? homepageMobileMenuHeight : 0;
  const containerLeft = isMobile
    ? 0
    : isMediumScreen

Review comment (suggestion):
as discussed, this should probably be moved to the top component `GamesPlatformFrameContext` to do a logic similar to `sendUserCustomTokenToFrame()`

Code after:
      ? `/app-embedded/${gamesPlatformEmbeddedVersion}/games/${gameId.current}`
      : isMobile
      ? // On mobile, go directly to a random game if none is specified.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/games/random`
      : // On desktop, access the homepage.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/${paletteType}`,
    gdGamesHost
  );
  if (gameId.current || isMobile) url.searchParams.set('theme', paletteType);

  const src = loaded ? url.toString() : '';

  React.useEffect(
    () => {
      if (!loaded && initialGameId) {
        // Every time the frame is unloaded on a gameId, we reset it for the next load.
        gameId.current = initialGameId;
      }
    },
    [loaded, initialGameId]
  );

  const titleBarAndToolbarHeight = isMobile ? 0 : 37 + 40;
  const containerTop = isMobile
    ? 0 // Always top of the screen on small screens.
    : `calc(${titleBarAndToolbarHeight}px + var(--safe-area-inset-top))`;
  const containerBottom = isMobile ? homepageMobileMenuHeight : 0;
  const containerLeft = isMobile
    ? 0
    : isMediumScreen
    ? homepageMediumMenuBarWidth
    : homepageDesktopMenuBarWidth;
  const containerWidth = `calc(100% - ${containerLeft}px`;
  const containerHeight = `calc(100% - ${titleBarAndToolbarHeight +
    containerBottom}px - ${isMobile ? '0px' : 'var(--safe-area-inset-top)'})`;

  // We wrap the iframe in a paper, as its content has a transparent background,
  // and we don't want what's behind the iframe to be visible.
  return (
    <Paper
      square
      background="dark"
      style={{
        ...styles.paper,
        width: containerWidth,
        height: containerHeight,
        left: containerLeft,
        top: containerTop,
        display: visible ? 'block' : 'none',
      }}
    >