diff --git a/src/game/login/login.js b/src/game/login/login.js index b078706..9f9dc95 100644 --- a/src/game/login/login.js +++ b/src/game/login/login.js @@ -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"]; + } } \ No newline at end of file diff --git a/src/game/login/main.js b/src/game/login/main.js index 0b7d40e..3be0ca0 100644 --- a/src/game/login/main.js +++ b/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(); +} \ No newline at end of file diff --git a/src/game/main_menu/main.js b/src/game/main_menu/main.js index 096d956..51c9ec6 100644 --- a/src/game/main_menu/main.js +++ b/src/game/main_menu/main.js @@ -33,5 +33,4 @@ game.state.start('MainMenu'); function fontLoaded() { mainMenu.fontLoaded(); -} - +} \ No newline at end of file