Fix: load font in Login

src/game/login/login.js

@@ -1,186 +1,188 @@
-var Login = {
+Login.prototype = Object.create(Phaser.State.prototype);
+Login.constructor = Login;
 
-	preload: function() {
+function Login() {
-		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+}
-		game.load.image('icon_home', '../../../resources/image/icon/home.png');
-	},
 
-	create: function() {
+Login.prototype.preload = function() {
-		// sessionStorageManager.clear();	// receive maestro_name from player_login_with_maestro.php
+	game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+	game.load.image('icon_home', '../../../resources/image/icon/home.png');
+}
 
-		this.game.stage.backgroundColor = '#4d4d4d';
+Login.prototype.create = function() {
-		this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
+	// sessionStorageManager.clear();	// receive maestro_name from player_login_with_maestro.php
 
-		// keyboard shortcut
+	this.game.stage.backgroundColor = '#4d4d4d';
-		this.keyboardShortcut = new KeyboardShortcut();
+	this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
-		this.keyboardShortcut.addCallback(
-			Phaser.KeyCode.ESC,	// keyCode
-			null,	// keyDownHandler
-			(function() { this.back(); }).bind(this),	// keyUpHandler
-			"login"	// callerClassName
-		);
-		this.keyboardShortcut.addCallback(
-			Phaser.KeyCode.ENTER,	// keyCode
-			null,	// keyDownHandler
-			(function() { this.startMenu(); }).bind(this),	// keyUpHandler
-			"start"	// callerClassName
-		);
 
-		// top ui
+	// keyboard shortcut
-		var screenTopUI = new ScreenTopUI();
+	this.keyboardShortcut = new KeyboardShortcut();
-		screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
+	this.keyboardShortcut.addCallback(
-		screenTopUI.makeFullScreenButton();
+		Phaser.KeyCode.ESC,	// keyCode
+		null,	// keyDownHandler
+		(function() { this.back(); }).bind(this),	// keyUpHandler
+		"login"	// callerClassName
+	);
+	this.keyboardShortcut.addCallback(
+		Phaser.KeyCode.ENTER,	// keyCode
+		null,	// keyDownHandler
+		(function() { this.startMenu(); }).bind(this),	// keyUpHandler
+		"start"	// callerClassName
+	);
+
+	// top ui
+	var screenTopUI = new ScreenTopUI();
+	screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
+	screenTopUI.makeFullScreenButton();
 
 
 
-		var textX = this.game.world.centerX - 320;
+	var textX = this.game.world.centerX - 320;
-		this.makeMaestroNameText(textX, 200);
+	this.makeMaestroNameText(textX, 200);
-		this.makeNameText(textX, 300);
+	this.makeNameText(textX, 300);
-		this.makeEnterCodeText(textX, 360);
+	this.makeEnterCodeText(textX, 360);
-		if(sessionStorageManager.getMaestroName() != null) {
+	if(sessionStorageManager.getMaestroName() != null) {
-			this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
+		this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
-		} else {
+	} else {
-			if(isDebugMode()) {
-				this.inputTextMaestroName.canvasInput.value("삼화초");
-				this.inputTextName.canvasInput.value("박지상");
-				this.inputTextEnterCode.canvasInput.value("760621");
-			}
-		}
-
-		if(sessionStorageManager.getMaestroID() === null || sessionStorageManager.getMaestroID() == -1)
-			this.inputTextMaestroName.canvasInput.focus();
-		else
-			this.inputTextName.canvasInput.focus();
-
-		this.makeStartButton(game.world.centerX, game.world.centerY + 100);
-
-		this.makeInfoText();
-	},
-
-	back: function() {
-		sessionStorageManager.clear();
-		location.href = '../../web/main/index.html';
-	},
-
-	makeMaestroNameText: function(x, y) {
-		this.makeTextField(x, y, "마에스트로 계정 :");
-		this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
-		this.inputTextMaestroName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
-
-	makeNameText: function(x, y) {
-		this.makeTextField(x, y, "이름 :");
-		this.inputTextName = this.makeInputTypeText(x, y, "");
-		this.inputTextName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
-
-	makeEnterCodeText: function(x, y) {
-		this.makeTextField(x, y, "입장번호 :");
-		this.inputTextEnterCode = this.makeInputTypeText(x, y, "");
-		this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
-	},
-
-	makeTextField: function(x, y, text) {
-		return game.add.text(x, y, text, this.textStyle)
-		.setTextBounds(0, 0, 200, 0)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-		.boundsAlignH = 'right';
-	},
-
-	makeInputTypeText: function(x, y, text) {
-		var inputText = new InputTypeText(x + 420, y);
-		inputText.anchor.set(0.5);
-		inputText.canvasInput.value('');
 		if(isDebugMode()) {
-			inputText.canvasInput.value(text);
+			this.inputTextMaestroName.canvasInput.value("삼화초");
-		}
+			this.inputTextName.canvasInput.value("박지상");
-		inputText.canvasInput._onkeyup = (function() {
+			this.inputTextEnterCode.canvasInput.value("760621");
-			if(event.keyCode == Phaser.Keyboard.ENTER) {
-				this.startMenu();
-			}
-		}).bind(this);
-
-		return inputText;
-	},
-
-	makeStartButton: function(x, y) {
-		var setting = new RoundRectButtonSetting(x, y, 200, 100);
-		setting.fontStyle.fontWeight = "bold";
-
-		var startButton = new RoundRectButton(
-			setting,
-			RoundRectButton.NONE_ICON, "시작",
-			(function() { this.startMenu(); }).bind(this)
-		);
-		startButton.addShortcutText("Enter");
-	},
-
-	makeInfoText: function(x, y) {
-		var textStyle = { font: "30px Arial", fill: "#faa" };
-		this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
-		this.infoText.anchor.set(0.5);
-		this.infoText.stroke = "#333";
-		this.infoText.strokeThickness = 3;
-	},
-
-
-	startMenu: function() {
-		var maestroName = this.inputTextMaestroName.canvasInput._value;
-		sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
-		var enterCode = this.inputTextEnterCode.canvasInput._value;
-
-		if(maestroName == "") {
-			this.infoText.text = "마에스트로 계정 이름을 입력해주세요";
-			this.inputTextMaestroName.canvasInput.focus();
-			return;
-		} else if(sessionStorageManager.getPlayerName() == "") {
-			this.infoText.text = "학생의 이름을 입력해주세요";
-			this.inputTextName.canvasInput.focus();
-			return;
-		} else if(enterCode == "") {
-			this.infoText.text = "학생의 입장번호를 입력해주세요";
-			this.inputTextEnterCode.canvasInput.focus();
-			return;
-		}
-
-		var dbConnectManager = new DBConnectManager();
-		dbConnectManager.requestCheckPlayerLogin(
-			maestroName,
-			sessionStorageManager.getPlayerName(),
-			enterCode,
-			(function(jsonData) {
-				this.loginSucceeded(jsonData);
-			}).bind(this),
-			(function(jsonData) {
-				this.loginFailed(jsonData);
-			}).bind(this)
-		);
-	},
-
-	loginSucceeded: function(jsonData) {
-		sessionStorageManager.setMaestroID(jsonData['MaestroID']);
-		sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
-		sessionStorageManager.setPlayerID(jsonData['PlayerID']);
-		sessionStorageManager.setPlayerName(jsonData['PlayerName']);
-		sessionStorageManager.setPlayerAccountType(jsonData['PlayerAccountType']);
-
-		sessionStorageManager.setPlayingAppName("menu");
-		// location.href = '../../web/client/menu_app.html';
-		location.href = '../../web/client/main_menu.html';
-
-		// console.log("===== after login =====");
-		// console.log(sessionStorageManager.playerID);
-	},
-
-	loginFailed: function(jsonData) {
-		sessionStorageManager.clear();
-
-		// show retry message
-		// console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
-
-		if(jsonData["error"] !== null) {
-			this.infoText.text = jsonData["error"];
 		}
 	}
 
+	if(sessionStorageManager.getMaestroID() === null || sessionStorageManager.getMaestroID() == -1)
+		this.inputTextMaestroName.canvasInput.focus();
+	else
+		this.inputTextName.canvasInput.focus();
+
+	this.makeStartButton(game.world.centerX, game.world.centerY + 100);
+
+	this.makeInfoText();
+}
+
+Login.prototype.back = function() {
+	sessionStorageManager.clear();
+	location.href = '../../web/main/index.html';
+}
+
+Login.prototype.makeMaestroNameText = function(x, y) {
+	this.makeTextField(x, y, "마에스트로 계정 :");
+	this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
+	this.inputTextMaestroName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+}
+
+Login.prototype.makeNameText = function(x, y) {
+	this.makeTextField(x, y, "이름 :");
+	this.inputTextName = this.makeInputTypeText(x, y, "");
+	this.inputTextName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+}
+
+Login.prototype.makeEnterCodeText = function(x, y) {
+	this.makeTextField(x, y, "입장번호 :");
+	this.inputTextEnterCode = this.makeInputTypeText(x, y, "");
+	this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+}
+
+Login.prototype.makeTextField = function(x, y, text) {
+	return game.add.text(x, y, text, this.textStyle)
+	.setTextBounds(0, 0, 200, 0)
+	.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+	.boundsAlignH = 'right';
+}
+
+Login.prototype.makeInputTypeText = function(x, y, text) {
+	var inputText = new InputTypeText(x + 420, y);
+	inputText.anchor.set(0.5);
+	inputText.canvasInput.value('');
+	if(isDebugMode()) {
+		inputText.canvasInput.value(text);
+	}
+	inputText.canvasInput._onkeyup = (function() {
+		if(event.keyCode == Phaser.Keyboard.ENTER) {
+			this.startMenu();
+		}
+	}).bind(this);
+
+	return inputText;
+}
+
+Login.prototype.makeStartButton = function(x, y) {
+	var setting = new RoundRectButtonSetting(x, y, 200, 100);
+	setting.fontStyle.fontWeight = "bold";
+
+	var startButton = new RoundRectButton(
+		setting,
+		RoundRectButton.NONE_ICON, "시작",
+		(function() { this.startMenu(); }).bind(this)
+	);
+	startButton.addShortcutText("Enter");
+}
+
+Login.prototype.makeInfoText = function(x, y) {
+	var textStyle = { font: "30px Arial", fill: "#faa" };
+	this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
+	this.infoText.anchor.set(0.5);
+	this.infoText.stroke = "#333";
+	this.infoText.strokeThickness = 3;
+}
+
+
+Login.prototype.startMenu = function() {
+	var maestroName = this.inputTextMaestroName.canvasInput._value;
+	sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
+	var enterCode = this.inputTextEnterCode.canvasInput._value;
+
+	if(maestroName == "") {
+		this.infoText.text = "마에스트로 계정 이름을 입력해주세요";
+		this.inputTextMaestroName.canvasInput.focus();
+		return;
+	} else if(sessionStorageManager.getPlayerName() == "") {
+		this.infoText.text = "학생의 이름을 입력해주세요";
+		this.inputTextName.canvasInput.focus();
+		return;
+	} else if(enterCode == "") {
+		this.infoText.text = "학생의 입장번호를 입력해주세요";
+		this.inputTextEnterCode.canvasInput.focus();
+		return;
+	}
+
+	var dbConnectManager = new DBConnectManager();
+	dbConnectManager.requestCheckPlayerLogin(
+		maestroName,
+		sessionStorageManager.getPlayerName(),
+		enterCode,
+		(function(jsonData) {
+			this.loginSucceeded(jsonData);
+		}).bind(this),
+		(function(jsonData) {
+			this.loginFailed(jsonData);
+		}).bind(this)
+	);
+}
+
+Login.prototype.loginSucceeded = function(jsonData) {
+	sessionStorageManager.setMaestroID(jsonData['MaestroID']);
+	sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
+	sessionStorageManager.setPlayerID(jsonData['PlayerID']);
+	sessionStorageManager.setPlayerName(jsonData['PlayerName']);
+	sessionStorageManager.setPlayerAccountType(jsonData['PlayerAccountType']);
+
+	sessionStorageManager.setPlayingAppName("menu");
+	// location.href = '../../web/client/menu_app.html';
+	location.href = '../../web/client/main_menu.html';
+
+	// console.log("===== after login =====");
+	// console.log(sessionStorageManager.playerID);
+}
+
+Login.prototype.loginFailed = function(jsonData) {
+	sessionStorageManager.clear();
+
+	// show retry message
+	// console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
+
+	if(jsonData["error"] !== null) {
+		this.infoText.text = jsonData["error"];
+	}
 }

src/game/login/main.js

@@ -3,10 +3,34 @@
 
 var CONTENT_ID = "Login";
 
+
 var game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );
 
+WebFontConfig = {
+	//  'active' means all requested fonts have finished loading
+	//  We set a 1 second delay before calling 'createText'.
+	//  For some reason if we don't the browser cannot render the text the first time it's created.
+	active: function() { game.time.events.add(Phaser.Timer.SECOND * 0.1, fontLoaded, this); },
+
+	//  The Google Fonts we want to load (specify as many as you like in the array)
+	google: {
+		families: [
+			'Nanum Gothic:400, 700, 800',
+			'Nanum Gothic Coding:400,700',
+			// 'Nanum Brush Script',
+			// 'Nanum Pen Script'
+		]
+		// families: ['Nanum Brush Script']
+	}
+};
+
+var login = new Login();
 game.state.add('Login', Login);
 game.state.start('Login');
+
+function fontLoaded() {
+	login.fontLoaded();
+}

src/game/main_menu/main.js

@@ -34,4 +34,3 @@ game.state.start('MainMenu');
 function fontLoaded() {
 	mainMenu.fontLoaded();
 }
-