Fix: load font in Login
This commit is contained in:
+175
-173
@@ -1,186 +1,188 @@
|
||||
var Login = {
|
||||
Login.prototype = Object.create(Phaser.State.prototype);
|
||||
Login.constructor = Login;
|
||||
|
||||
preload: function() {
|
||||
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
|
||||
game.load.image('icon_home', '../../../resources/image/icon/home.png');
|
||||
},
|
||||
function Login() {
|
||||
}
|
||||
|
||||
create: function() {
|
||||
// sessionStorageManager.clear(); // receive maestro_name from player_login_with_maestro.php
|
||||
Login.prototype.preload = function() {
|
||||
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';
|
||||
this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
|
||||
Login.prototype.create = function() {
|
||||
// sessionStorageManager.clear(); // receive maestro_name from player_login_with_maestro.php
|
||||
|
||||
// keyboard shortcut
|
||||
this.keyboardShortcut = new KeyboardShortcut();
|
||||
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
|
||||
);
|
||||
this.game.stage.backgroundColor = '#4d4d4d';
|
||||
this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
|
||||
|
||||
// top ui
|
||||
var screenTopUI = new ScreenTopUI();
|
||||
screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
|
||||
screenTopUI.makeFullScreenButton();
|
||||
// keyboard shortcut
|
||||
this.keyboardShortcut = new KeyboardShortcut();
|
||||
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
|
||||
var screenTopUI = new ScreenTopUI();
|
||||
screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
|
||||
screenTopUI.makeFullScreenButton();
|
||||
|
||||
|
||||
|
||||
var textX = this.game.world.centerX - 320;
|
||||
this.makeMaestroNameText(textX, 200);
|
||||
this.makeNameText(textX, 300);
|
||||
this.makeEnterCodeText(textX, 360);
|
||||
if(sessionStorageManager.getMaestroName() != null) {
|
||||
this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
|
||||
} 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('');
|
||||
var textX = this.game.world.centerX - 320;
|
||||
this.makeMaestroNameText(textX, 200);
|
||||
this.makeNameText(textX, 300);
|
||||
this.makeEnterCodeText(textX, 360);
|
||||
if(sessionStorageManager.getMaestroName() != null) {
|
||||
this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
|
||||
} else {
|
||||
if(isDebugMode()) {
|
||||
inputText.canvasInput.value(text);
|
||||
}
|
||||
inputText.canvasInput._onkeyup = (function() {
|
||||
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"];
|
||||
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();
|
||||
}
|
||||
|
||||
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"];
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
@@ -34,4 +34,3 @@ game.state.start('MainMenu');
|
||||
function fontLoaded() {
|
||||
mainMenu.fontLoaded();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user