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

Code before:
      ? // 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;
      iframeRef.current.contentWindow.postMessage(
        {
          type: 'keyboardOffset',
          value: softKeyboardBottomOffset - homepageMobileMenuHeight,
        },
        '*'
      );
    },
    [softKeyboardBottomOffset]
  );

  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 (

Review comment (suggestion):
```suggestion
          type: 'setKeyboardOffset',
```

? I think we prefer verbs like a function would be called

Code after:
        `/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',
      }}
    >
      <iframe
        id={GAMES_PLATFORM_IFRAME_ID}
        src={src}
        allow="autoplay; fullscreen *; geolocation; microphone; camera; midi; monetization; xr-spatial-tracking; gamepad; gyroscope; accelerometer; xr; keyboard-map *; focus-without-user-activation *; screen-wake-lock; clipboard-read; clipboard-write; web-share"
        sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin allow-popups-to-escape-sandbox allow-downloads"