maxmonax/Preloader.ts

## 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" />

	<title>Short Vowel Make A Match</title>

	<style>
		@font-face {
			font-family: VAGzStarBold;
			src: url(assets/fonts/vrzb.ttf);
		}

		@font-face {
			font-family: VAGzStarLight;
			src: url(assets/fonts/vrzl.ttf);
		}

		@font-face {
			font-family: VAGzStarThin;
			src: url(assets/fonts/vrzt.ttf);
		}

		html { overflow: hidden; }

		body {
			background-color: #cc33cc;
			font-family: 'Segoe UI', sans-serif;
			border: none; padding: 0; margin: 0;
		}

		#content { margin: 0; padding: 0; }

		#rotatepic {
			padding-top: 10px;
			/**/display: none;/**/
		}

		#rotatepic img {
			margin-left: auto;
			margin-right: auto;
			display: block;
			width: 50%;
			height: 50%;
		}

	</style>

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

<body>
	<div class="font_preload hidden">
		<span style="font-family: VAGzStarBold;"></span>
		<span style="font-family: VAGzStarLight;"></span>
		<span style="font-family: VAGzStarThin;"></span>
	</div>
	<div id="content"></div>
	<div id="rotatepic">
		<img src="assets/sprites/rotate-phone-icon-white.png" />
	</div>

</body>

</html>

## Preloader.ts
module PhaserTemplate.Client {

	export class Preloader extends Phaser.State {
		private dummyBar: Phaser.Sprite;

		preload() {
			var bg = new Phaser.Sprite(this.game, 0, 0, 'bg');
			this.add.existing(bg);

			this.dummyBar = new Phaser.Sprite(this.game, 0, 0);
			this.add.existing(this.dummyBar);

			var bar_bg = new Phaser.Sprite(this.game, 0, 0, 'bar_bg');
			bar_bg.x = Config.GW / 2 - bar_bg.width / 2;
			bar_bg.y = Config.GH / 2 - bar_bg.height / 2;
			this.dummyBar.addChild(bar_bg);

			var bar = new Phaser.Sprite(this.game, 0, 0, 'bar');
			bar.x = Config.GW / 2 - bar.width / 2;
			bar.y = Config.GH / 2 - bar.height / 2;
			this.dummyBar.addChild(bar);

			this.load.setPreloadSprite(bar);

			// atlases
			this.load.atlasJSONArray('game', './assets/atlases/game.png', './assets/atlases/game.json');

			// LOAD SOUNDS
			SndMng.init(this.game, true);

		}

		create() {
			// 'tap to start' for iOS
			if (Params.isIOS) {
				this.dummyBar.visible = false;

				var spr = new Phaser.Sprite(this.game, Config.GW / 2, Config.GH / 2, 'game', 'youtube-like-start-icon');
				spr.anchor.set(0.5);
				this.add.existing(spr);

				this.input.onDown.addOnce(this.startMainMenu, this);
			}
			else {
				this.startMainMenu();
			}
		}

		startMainMenu() {
			if (!this.game.device.desktop) {
				if (ScaleManager.isPortrait) {
					document.getElementById("rotatepic").style.display = "";
				}
				else {
					document.getElementById("rotatepic").style.display = "none";
				}
			}

			this.game.state.start(States.GAME, true, false);
		}

	}

}
	<!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" />

	<title>Short Vowel Make A Match</title>

	<style>
	@font-face {
	font-family: VAGzStarBold;
	src: url(assets/fonts/vrzb.ttf);
	}

	@font-face {
	font-family: VAGzStarLight;
	src: url(assets/fonts/vrzl.ttf);
	}

	@font-face {
	font-family: VAGzStarThin;
	src: url(assets/fonts/vrzt.ttf);
	}

	html { overflow: hidden; }

	body {
	background-color: #cc33cc;
	font-family: 'Segoe UI', sans-serif;
	border: none; padding: 0; margin: 0;
	}

	#content { margin: 0; padding: 0; }

	#rotatepic {
	padding-top: 10px;
	//display: none;//
	}

	#rotatepic img {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 50%;
	height: 50%;
	}

	</style>

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

	<body>
	<div class="font_preload hidden">
	<span style="font-family: VAGzStarBold;"></span>
	<span style="font-family: VAGzStarLight;"></span>
	<span style="font-family: VAGzStarThin;"></span>
	</div>
	<div id="content"></div>
	<div id="rotatepic">
	<img src="assets/sprites/rotate-phone-icon-white.png" />
	</div>

	</body>

	</html>
	module PhaserTemplate.Client {

	export class Preloader extends Phaser.State {
	private dummyBar: Phaser.Sprite;

	preload() {
	var bg = new Phaser.Sprite(this.game, 0, 0, 'bg');
	this.add.existing(bg);

	this.dummyBar = new Phaser.Sprite(this.game, 0, 0);
	this.add.existing(this.dummyBar);

	var bar_bg = new Phaser.Sprite(this.game, 0, 0, 'bar_bg');
	bar_bg.x = Config.GW / 2 - bar_bg.width / 2;
	bar_bg.y = Config.GH / 2 - bar_bg.height / 2;
	this.dummyBar.addChild(bar_bg);

	var bar = new Phaser.Sprite(this.game, 0, 0, 'bar');
	bar.x = Config.GW / 2 - bar.width / 2;
	bar.y = Config.GH / 2 - bar.height / 2;
	this.dummyBar.addChild(bar);

	this.load.setPreloadSprite(bar);

	// atlases
	this.load.atlasJSONArray('game', './assets/atlases/game.png', './assets/atlases/game.json');

	// LOAD SOUNDS
	SndMng.init(this.game, true);

	}

	create() {
	// 'tap to start' for iOS
	if (Params.isIOS) {
	this.dummyBar.visible = false;

	var spr = new Phaser.Sprite(this.game, Config.GW / 2, Config.GH / 2, 'game', 'youtube-like-start-icon');
	spr.anchor.set(0.5);
	this.add.existing(spr);

	this.input.onDown.addOnce(this.startMainMenu, this);
	}
	else {
	this.startMainMenu();
	}
	}

	startMainMenu() {
	if (!this.game.device.desktop) {
	if (ScaleManager.isPortrait) {
	document.getElementById("rotatepic").style.display = "";
	}
	else {
	document.getElementById("rotatepic").style.display = "none";
	}
	}

	this.game.state.start(States.GAME, true, false);
	}

	}

	}