How to use the phaser.AUTO function in phaser

window.onload = function () {
  // aspect ratio - (240/160)= 3:2
  const game = new Phaser.Game(240, 160, Phaser.AUTO, ''); 
  // const game = new Phaser.Game(360, 240, Phaser.AUTO, ''); // experiment

  game.state.add('bootstrap', new Bootstrap(game));
  game.state.add('preload', Preloader);
  game.state.add('mainmenu', MainMenu);
  game.state.add('options', Options);
  game.state.add('options-audio', OptionsAudio);
  game.state.add('credits', Credits);
  game.state.add('loading', Loading);
  game.state.add('intro', Intro);
  game.state.add('act1', Act1);
  game.state.add('act2', Act2);
  game.state.add('act5', Act5);
  game.state.add('gameover', GameOver);

  game.state.start('bootstrap');

import Phaser from "phaser";

import constants from "./config/constants";
import GameScene from "./scenes/game";

const config = {
  type: Phaser.AUTO,
  width: constants.WIDTH,
  height: constants.HEIGHT,
  physics: {
    default: "arcade",
    arcade: {
      gravity: {
        y: 200
      },
      debug: false
    }
  },
  scene: [GameScene]
};

// eslint-disable-next-line no-new
new Phaser.Game(config);

ngAfterViewInit() {
		this.scene = new TileSelectorScene();
		this.display = new Phaser.Game({
			width: 400 * window.devicePixelRatio,
			height: 1200 * window.devicePixelRatio,
			type: Phaser.AUTO,
			parent: 'tile-selector-content',
			scale: {
				mode: Phaser.Scale.ScaleModes.NONE,
				zoom: 1 / window.devicePixelRatio
			},
			render: {
				pixelArt: true
			},
			zoom: 1,
			scene: [this.scene]
		});
	}

constructor() {
    this.game = new Phaser.Game(Config.width, Config.height, Phaser.AUTO, "content", this);
  }

table = scene.make.rexGridTable(config);
    addDragContentBehavior(table);

    return table;
}

var addDragContentBehavior = function (table) {
    table.touchState = table.scene.plugins.get('rexTouchState').add(table)
        .on('touchmove', function (pointer) {
            table.addTableOXY(this.dx, this.dy).updateTable();
        });
    return table;
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
        global: [{
                key: 'rexGridTable',
                plugin: GridTablePlugin,
                start: true
            },
            {
                key: 'rexTouchState',

import Phaser from "phaser";

import Preload from './scenes/Preload';
import Level from './scenes/Level';
import HUD from './scenes/HUD';
import GameOver from './scenes/gameOver';

document.body.style.cursor = 'none';    //remove cursor so we can replace it with our crosshair

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-tilemap-pack',
    pixelArt: true,
    clearBeforeRender: false,
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'phaser-example',
        width: 640,
        height: 360
    },
    physics: {
        default: 'arcade'
    },
    scene: [
    Preload,
    Level,
    HUD,

constructor () {
    let width = document.documentElement.clientWidth > 768 ? 768 : document.documentElement.clientWidth
    let height = document.documentElement.clientHeight > 1024 ? 1024 : document.documentElement.clientHeight

    super(width, height, Phaser.AUTO, 'content', null)

    this.state.add('Boot', BootState, false)
    this.state.add('Splash', SplashState, false)
    this.state.add('Game', GameState, false)

    this.state.start('Boot')
  }
}

window.addEventListener('load', () => {
  const config = {
    type: Phaser.AUTO,
    width: 750,
    height: 1334,
    backgroundColor: '#05424C',
    scene: [
      BootScene,
      LoadingScene,
      GameScene,
    ],
  }

  window.game = new Game(config)

  window.focus()
  bindEvents()
  resize()
})

function createGame(inputPlayers, onUpdateCb, ignore, getPlayerInput) {
  const state = { preload: preload, create: create, update: update}
  let renderMode = Phaser.AUTO;
  if (ignore){
    ignore.forEach((key) => {
      delete state[key];
    });
  }

  var game = new Phaser.Game(gameWidth, gameHeight, renderMode, 'gameDiv', state);

  function preload() {
    game.load.image('sky', sky);
    game.load.image('ground', ground);
    game.load.spritesheet('dude', dude, 32, 48);
    game.stage.disableVisibilityChange = true;
  }

  let players;

import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'
import logo from './assets/logo.png'

import './App.css'

class App extends Component {

  state = {
    unmounted: false,
    initialize: false,
    game: {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {
        init: function() {
          this.cameras.main.setBackgroundColor('#24252A')
        },
        create: function() {
          this.helloWorld = this.add.text(
            this.cameras.main.centerX, 
            this.cameras.main.centerY, 
            "Hello World", { 
              font: "40px Arial", 
              fill: "#ffffff" 
            }
          );
          this.helloWorld.setOrigin(0.5);
        },
        update: function() {