How to force screen to open in landscape mode

[yunusemreagdin]

In Phaser3, I want to open the game that will run in webview directly horizontally. In other words, I want the game to open horizontally without the user turning the phone.
The white photo below is the vertical version of the game.
So when I open it vertically, the game itself is landscape, but it does not sit on the screen as landscape, it stands horizontally on the top of the screen, so it does not turn the game.

Here is my game configs

import Phaser, { Types } from "phaser";

const ratio = window.innerWidth < 600 ? 2 : 1;

const baseGameConfig: Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth * ratio,
    height: window.innerHeight * ratio,
  },
  render: {
    antialias: true,
  },
};

export default baseGameConfig;

import { Types } from "phaser";

import baseGameConfig from "@games/config.base";

import Scenes from "./src/scenes";

export const DEFAULT_WIDTH: number = 1280;
export const DEFAULT_HEIGHT: number = 720;
export const MAX_WIDTH: number = 1920;
export const MAX_HEIGHT: number = 1080;
export let SCALE_MODE: "FIT" | "SMOOTH" = "SMOOTH";

const gameConfig: Types.Core.GameConfig = {
  ...baseGameConfig,
  title: "monkeygo",
  scene: Scenes.BootScene.scene,
  physics: {
    default: "arcade",
    arcade: {
      debug: process.env.NODE_ENV !== "production",
      gravity: {
        y: 800,
      },
      fps: 30,
      fixedStep: true,
      tileBias: 32,
    },
  },
  scale: {
    mode: Phaser.Scale.NONE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT,
  },
  input: {
    activePointers: 3,
  },
};

export default gameConfig;

[samme]

ScreenOrientation: lock() method - Web APIs | MDN

[yunusemreagdin]

I don’t understand exactly where to use these codes.
I tried here but it doesn’t recognize anything called “lock”.
Why are responsive actions so hard in Phaser3.

/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";

import { resize } from "@games/common/utils";
import withLauncher, { LauncherProps } from "@games/launcher";

import gameConfig, {
  DEFAULT_HEIGHT,
  DEFAULT_WIDTH,
  MAX_HEIGHT,
  MAX_WIDTH,
  SCALE_MODE,
} from "./config";

function Launcher(props: LauncherProps) {
  const { game } = props;

  const _resize = () =>
    resize(
      game,
      SCALE_MODE,
      DEFAULT_WIDTH,
      DEFAULT_HEIGHT,
      MAX_WIDTH,
      MAX_HEIGHT
    );

  useEffect(() => {
    if (!game) return;

    game.events.on("react__onGameStart", (e: any) => {
      console.log("game started");
      _resize();
    });

    game.events.on("react__onGameOver", (e: any) => {
      console.log("game over");
    });

    game.scale.on(Phaser.Scale.Events.ENTER_FULLSCREEN, () => {
      console.log("ENTER FULL SCREEN");
    });

    game.scale.on(Phaser.Scale.Events.LEAVE_FULLSCREEN, () => {
      console.log("LEAVE FULL SCREEN");
    });
  }, [game]);
  const oppositeOrientation = screen.orientation.type.startsWith("portrait")
    ? "landscape"
    : "portrait";
  screen.orientation
    .lock(oppositeOrientation)
    .then(() => {
      log.textContent = `Locked to ${oppositeOrientation}\n`;
    })
    .catch((error) => {
      log.textContent += `${error}\n`;
    });
  return <div id={gameConfig.title} />;
}

export default withLauncher(Launcher, gameConfig);

Property ‘lock’ does not exist on type ‘ScreenOrientation’.

I also said something like it throws the logs correctly but it doesn’t work.

this.game.scale.on("orientationchange", function (orientation) {
      if (orientation === Phaser.Scale.PORTRAIT) {
        console.log("portrait");
        orientation = Phaser.Scale.LANDSCAPE;
      } else if (orientation === Phaser.Scale.LANDSCAPE) {
        console.log("landscape");
      }
    });