maxmonax/Boot.ts

## Boot.ts
module BattleGoblins.Client {

	export class Boot extends BasicState {

		preload() {
			this.load.atlasJSONArray('preloader', './assets/atlases/preloader.png', './assets/atlases/preloader.json');
		}

		create() {
			this.stage.setBackgroundColor(0x0);

			this.input.maxPointers = 1;
			this.stage.disableVisibilityChange = true;

			ScaleManager.gameMaxW = Settings.GAME_W;
			ScaleManager.gameMaxH = Settings.GAME_H;
			ScaleManager.gameSafeW = Settings.GAME_SW;
			ScaleManager.gameSafeH = Settings.GAME_SH;
			ScaleManager.init(this.game, Settings.DOM_CONTAINER);

			this.changeState(States.PRELOADER, true);
		}
	}

}

## index.html
<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="pragma" content="no-cache" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<meta name="description" content="Battle Goblins is a match3 game with fighting elements. You can play this game together with your friends!" />

	<title>Battle Goblins</title>

	<style>
		html { overflow: hidden; }

		body {
			background-color: #000000;
			border: none;
			padding: 0;
			margin: 0;
		}

		#div_game {
			padding: 0;
			margin: 0;
		}
	</style>

	<script src="libs/phaser.min.js"></script>
	<script src="game.js"></script>
</head>

<body>
	<div id="div_game"></div>
</body>

</html>

## ScaleManager.ts
class ScaleManager {
	// game maximum size
	public static gameMaxW: number;
	public static gameMaxH: number;
	// game save area size
	public static gameSafeW: number;
	public static gameSafeH: number;
	// смещение контейнера игры по результатам скейлинга, для центрирования
	public static dtx: number = 0;
	public static dty: number = 0;
	// реально видимые ширина и высота в размерах истинного разрешения игры
	public static gameViewW: number;
	public static gameViewH: number;

	// orientation
	public static isPortrait: boolean;
	public static onOrientationChange: Phaser.Signal = new Phaser.Signal(); // orientation change event

	private static game: Phaser.Game;
	private static dom_id: string = '';
	private static dom: HTMLElement;

	public static init(aGame: Phaser.Game, aDomId: string) {
		this.game = aGame;
		this.dom_id = aDomId;
		this.dom = document.getElementById(this.dom_id);

		aGame.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;

		ScaleManager.SizeCalculation();

		window.onresize = () => {
			ScaleManager.SizeCalculation();
		};
	}

	private static doEventOriChange() {
		//console.log('doEventOriChange dispathing...');
		this.onOrientationChange.dispatch(this.isPortrait);
	}

	public static SizeCalculation() {
		var wnd = {
			w: window.innerWidth,
			h: window.innerHeight
		};

		// orientation check
		var oldOri = this.isPortrait;
		this.isPortrait = wnd.h > wnd.w;
		if (this.isPortrait != oldOri)
			this.doEventOriChange();

		var g = {
			w: ScaleManager.gameMaxW,
			h: ScaleManager.gameMaxH,
			sw: ScaleManager.gameSafeW,
			sh: ScaleManager.gameSafeH
		}

		var gw: number;
		var gh: number;

		// determine game size
		if (g.h / g.w > wnd.h / wnd.w) {
			// игра сжата окном по высоте, чёрные поля слева и справа
			//LogMng.log('game pressed by height, black fields on left and right');
			if (g.sh / g.w > wnd.h / wnd.w) {
				// A
				gh = wnd.h * g.h / g.sh;
				gw = gh * g.w / g.h;
			} else {
				// B
				gw = wnd.w;
				gh = gw * g.h / g.w;
			}
		} else {
			// игра сжата окном по ширине, чёрные поля сверху и слева
			//LogMng.log('game pressed by width, black fields on top and bot');
			if (g.h / g.sw > wnd.h / wnd.w) {
				// C
				gh = wnd.h;
				gw = gh * g.w / g.h;
			} else {
				// D
				gw = wnd.w * g.w / g.sw;
				gh = gw * g.h / g.w;
			}
		}

		// game scale
		var sclX = gw / g.sw;
		var sclY = gh / g.sh;
		var newScale = Math.min(sclX, sclY);
		ScaleManager.game.scale.setUserScale(newScale, newScale, 0, 0);

		// game dt xy
		//this.dtx = (wnd.w - g.w * newScale) / 2;
		this.dtx = (wnd.w - gw) / 2;
		this.dty = (wnd.h - gh) / 2;

		this.gameViewW = this.gameMaxW + 2 * this.dtx / newScale;
		if (this.gameViewW > this.gameMaxW) this.gameViewW = this.gameMaxW;

		this.gameViewH = this.gameMaxH + 2 * this.dty / newScale;
		if (this.gameViewH > this.gameMaxH) this.gameViewH = this.gameMaxH;

		this.dom.style.marginLeft = Math.round(this.dtx).toString() + 'px';
		this.dom.style.marginTop = Math.round(this.dty).toString() + 'px';
		this.dom.style.maxWidth = String(gw) + 'px';
		this.dom.style.maxHeight = String(gh) + 'px';

		ScaleManager.game.scale.refresh();

		// debug
		//console.log('----------------------------');
		//console.log('gw = ' + gw);
		//console.log('gh = ' + gh);
		//console.log('g.w = ' + g.w);
		//console.log('g.h = ' + g.h);
		//console.log('scale = ' + newScale);
		//console.log('dtx = ' + this.dtx);
		//console.log('dty = ' + this.dty);
		//console.log('this.gvw = ' + this.gameViewW);
		//console.log('this.gvh = ' + this.gameViewH);
	}

	private static handleIncorrect() {
		if (!this.game.device.desktop) {
			document.getElementById("turn").style.display = "block";
			ScaleManager.game.world.isPaused = true;
		}
	}

	private static handleCorrect() {
		if (!this.game.device.desktop) {
			document.getElementById("turn").style.display = "none";
			ScaleManager.game.world.isPaused = false;
		}
		setTimeout("window.scrollTo(0,0)", 1000);
	}

}
	module BattleGoblins.Client {

	export class Boot extends BasicState {

	preload() {
	this.load.atlasJSONArray('preloader', './assets/atlases/preloader.png', './assets/atlases/preloader.json');
	}

	create() {
	this.stage.setBackgroundColor(0x0);

	this.input.maxPointers = 1;
	this.stage.disableVisibilityChange = true;

	ScaleManager.gameMaxW = Settings.GAME_W;
	ScaleManager.gameMaxH = Settings.GAME_H;
	ScaleManager.gameSafeW = Settings.GAME_SW;
	ScaleManager.gameSafeH = Settings.GAME_SH;
	ScaleManager.init(this.game, Settings.DOM_CONTAINER);

	this.changeState(States.PRELOADER, true);
	}
	}

	}
	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="pragma" content="no-cache" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<meta name="description" content="Battle Goblins is a match3 game with fighting elements. You can play this game together with your friends!" />

	<title>Battle Goblins</title>

	<style>
	html { overflow: hidden; }

	body {
	background-color: #000000;
	border: none;
	padding: 0;
	margin: 0;
	}

	#div_game {
	padding: 0;
	margin: 0;
	}
	</style>

	<script src="libs/phaser.min.js"></script>
	<script src="game.js"></script>
	</head>

	<body>
	<div id="div_game"></div>
	</body>

	</html>
	class ScaleManager {
	// game maximum size
	public static gameMaxW: number;
	public static gameMaxH: number;
	// game save area size
	public static gameSafeW: number;
	public static gameSafeH: number;
	// смещение контейнера игры по результатам скейлинга, для центрирования
	public static dtx: number = 0;
	public static dty: number = 0;
	// реально видимые ширина и высота в размерах истинного разрешения игры
	public static gameViewW: number;
	public static gameViewH: number;

	// orientation
	public static isPortrait: boolean;
	public static onOrientationChange: Phaser.Signal = new Phaser.Signal(); // orientation change event

	private static game: Phaser.Game;
	private static dom_id: string = '';
	private static dom: HTMLElement;

	public static init(aGame: Phaser.Game, aDomId: string) {
	this.game = aGame;
	this.dom_id = aDomId;
	this.dom = document.getElementById(this.dom_id);

	aGame.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;

	ScaleManager.SizeCalculation();

	window.onresize = () => {
	ScaleManager.SizeCalculation();
	};
	}

	private static doEventOriChange() {
	//console.log('doEventOriChange dispathing...');
	this.onOrientationChange.dispatch(this.isPortrait);
	}

	public static SizeCalculation() {
	var wnd = {
	w: window.innerWidth,
	h: window.innerHeight
	};

	// orientation check
	var oldOri = this.isPortrait;
	this.isPortrait = wnd.h > wnd.w;
	if (this.isPortrait != oldOri)
	this.doEventOriChange();

	var g = {
	w: ScaleManager.gameMaxW,
	h: ScaleManager.gameMaxH,
	sw: ScaleManager.gameSafeW,
	sh: ScaleManager.gameSafeH
	}

	var gw: number;
	var gh: number;

	// determine game size
	if (g.h / g.w > wnd.h / wnd.w) {
	// игра сжата окном по высоте, чёрные поля слева и справа
	//LogMng.log('game pressed by height, black fields on left and right');
	if (g.sh / g.w > wnd.h / wnd.w) {
	// A
	gh = wnd.h * g.h / g.sh;
	gw = gh * g.w / g.h;
	} else {
	// B
	gw = wnd.w;
	gh = gw * g.h / g.w;
	}
	} else {
	// игра сжата окном по ширине, чёрные поля сверху и слева
	//LogMng.log('game pressed by width, black fields on top and bot');
	if (g.h / g.sw > wnd.h / wnd.w) {
	// C
	gh = wnd.h;
	gw = gh * g.w / g.h;
	} else {
	// D
	gw = wnd.w * g.w / g.sw;
	gh = gw * g.h / g.w;
	}
	}

	// game scale
	var sclX = gw / g.sw;
	var sclY = gh / g.sh;
	var newScale = Math.min(sclX, sclY);
	ScaleManager.game.scale.setUserScale(newScale, newScale, 0, 0);

	// game dt xy
	//this.dtx = (wnd.w - g.w * newScale) / 2;
	this.dtx = (wnd.w - gw) / 2;
	this.dty = (wnd.h - gh) / 2;

	this.gameViewW = this.gameMaxW + 2 * this.dtx / newScale;
	if (this.gameViewW > this.gameMaxW) this.gameViewW = this.gameMaxW;

	this.gameViewH = this.gameMaxH + 2 * this.dty / newScale;
	if (this.gameViewH > this.gameMaxH) this.gameViewH = this.gameMaxH;

	this.dom.style.marginLeft = Math.round(this.dtx).toString() + 'px';
	this.dom.style.marginTop = Math.round(this.dty).toString() + 'px';
	this.dom.style.maxWidth = String(gw) + 'px';
	this.dom.style.maxHeight = String(gh) + 'px';

	ScaleManager.game.scale.refresh();

	// debug
	//console.log('----------------------------');
	//console.log('gw = ' + gw);
	//console.log('gh = ' + gh);
	//console.log('g.w = ' + g.w);
	//console.log('g.h = ' + g.h);
	//console.log('scale = ' + newScale);
	//console.log('dtx = ' + this.dtx);
	//console.log('dty = ' + this.dty);
	//console.log('this.gvw = ' + this.gameViewW);
	//console.log('this.gvh = ' + this.gameViewH);
	}

	private static handleIncorrect() {
	if (!this.game.device.desktop) {
	document.getElementById("turn").style.display = "block";
	ScaleManager.game.world.isPaused = true;
	}
	}

	private static handleCorrect() {
	if (!this.game.device.desktop) {
	document.getElementById("turn").style.display = "none";
	ScaleManager.game.world.isPaused = false;
	}
	setTimeout("window.scrollTo(0,0)", 1000);
	}

	}