How to use the phaser.Scale function in phaser

import Phaser from "phaser";
import ReferenceScene from "./scenes/ReferenceScene";
import DungeonScene from "./scenes/DungeonScene";
import InfoScene from "./scenes/InfoScene";
// import SceneWatcherPlugin from "phaser-plugin-scene-watcher";

new Phaser.Game({
  type: Phaser.WEBGL,
  width: window.innerWidth,
  height: window.innerHeight,
  render: { pixelArt: true },
  physics: { default: "arcade", arcade: { debug: false, gravity: { y: 0 } } },
  scene: [DungeonScene, InfoScene, ReferenceScene],
  scale: {
    mode: Phaser.Scale.RESIZE
  }
  // plugins: {
  //   global: [{ key: "SceneWatcher", plugin: SceneWatcherPlugin, start: true }]
  // }
});

height: window.innerHeight * window.devicePixelRatio,
    */
    width: 400,
    height: 300,
    scene: [
        LoadScene,
        MenuScene,
        DemoLevel,
    ],
    render: {
        pixelArt: true,
    },
    scale: {
        parent: 'phaser',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 400,
        height: 300,
    },
});


/* NOTES FOR NEXT TIME:

https://phaser.io/tutorials/coding-tips-005
http://nautil.us/issue/70/variables/how-designers-engineer-luck-into-video-games-rp

- Utilize tiled tilemaps.
- Learn to use the physics engine for collisions.

this.pacman.scale.x = 1;
this.pacman.angle = 0;

const height = window.innerHeight - 70

const config: Phaser.Types.Core.GameConfig = {
    parent: "phaser",
    backgroundColor: "#eee",
    type: Phaser.CANVAS,
    width,
    height,
    input: {
        mouse: true,
    },
    render: {
        roundPixels: true,
    },
    scale: {
        mode: Phaser.Scale.RESIZE,
    }
}

class Game extends React.Component {

    state: {
        width: number,
        height: number,
    }
    game: Phaser.Game | undefined
    // Store a state object stripped of proxies defined by mobx
    gameState: GameState | undefined

    constructor(props: Props) {
        super(props)
        this.state = {

width: window.innerWidth * window.devicePixelRatio,
    height: window.innerHeight * window.devicePixelRatio,
    */
    width: 400,
    height: 300,
    scene: [
        LoadScene,
        MenuScene,
        DemoLevel,
    ],
    render: {
        pixelArt: true,
    },
    scale: {
        parent: 'phaser',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 400,
        height: 300,
    },
});


/* NOTES FOR NEXT TIME:

https://phaser.io/tutorials/coding-tips-005
http://nautil.us/issue/70/variables/how-designers-engineer-luck-into-video-games-rp

- Utilize tiled tilemaps.
- Learn to use the physics engine for collisions.

this.pacman.scale.x = 1;

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]
		});
	}

ngOnInit() {
		this.heightMap.init();
		const scene = new MainScene();
		Globals.game = new Phaser.Game({
			width: window.innerWidth * window.devicePixelRatio,
			height: window.innerHeight * window.devicePixelRatio - 64,
			type: Phaser.AUTO,
			parent: 'content',
			scale: {
				mode: Phaser.Scale.ScaleModes.NONE,
				zoom: 1 / window.devicePixelRatio
			},
			render: {
				pixelArt: true
			},
			zoom: 1,
			scene: [scene]
		});
		Globals.scene = scene;
	}
}

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,
    GameOver
    ]
};

const game = new Phaser.Game(config);

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',
            plugin: TouchStatePlugin,
            start: true
        },
        {
            key: 'rexContainerLite',
            plugin: ContainerLitePlugin,

x: 0,
                y: 0
            },
            debug: false
        }
    },
    scale: {
        parent: 'reldens',
        mode: Phaser.Scale.FIT,
        width: 500,
        height: 500,
        min: {
            width: 300,
            height: 500
        },
        autoCenter: Phaser.Scale.CENTER_BOTH
    }
};

module.exports = config;

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',
                plugin: TouchStatePlugin,
                start: true
            },
            {
                key: 'rexContainerLite',
                plugin: ContainerLitePlugin,