diff --git a/src/game/main_menu/main.js b/src/game/main_menu/main.js index 25091c5..3e65eab 100644 --- a/src/game/main_menu/main.js +++ b/src/game/main_menu/main.js @@ -3,10 +3,31 @@ var CONTENT_ID = "MainMenu"; + var game = new Phaser.Game( GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y, Phaser.CANVAS, CONTENT_ID ); -game.state.add('MainMenu', MainMenu); +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, fontLoaded, this); }, + + // The Google Fonts we want to load (specify as many as you like in the array) + google: { + families: ['Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Brush Script'] + // families: ['Nanum Brush Script'] + } +}; + +var mainMenu = new MainMenu(); +game.state.add('MainMenu', mainMenu); game.state.start('MainMenu'); + +function fontLoaded() { + console.log("fontLoaded #1"); + mainMenu.fontLoaded(); +} + diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index e5d3b10..5265893 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -1,246 +1,285 @@ -var MainMenu = { +MainMenu.prototype = Object.create(Phaser.State.prototype); +MainMenu.constructor = MainMenu; - preload: function() { - game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png'); - game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); - }, +function MainMenu() { +} - create: function() { - game.stage.backgroundColor = '#4d4d4d'; +MainMenu.prototype.preload = function() { + // game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png'); + game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); +} - // keyboard shortcut - this.keyboardShortcut = new KeyboardShortcut(); - this.keyboardShortcut.addCallback( - Phaser.KeyCode.ESC, // keyCode - null, // keyDownHandler - (function() { this.back(); }).bind(this), // keyUpHandler - "menu_app" // callerClassName +// fontLoaded, create method for Google WebFonts test +/* +MainMenu.prototype.fontLoaded = function() { + console.log("fontLoaded"); + + // this.loadingImage.alpha = 0; + + // this.text.font = 'Nanum Gothic'; + // text2.font = 'Nanum Brush Script'; + // this.text3.font = 'Nanum Brush Script'; +} + +MainMenu.prototype.create = function() { + console.log("create"); + + game.stage.backgroundColor = '#4d4d4d'; + + this.loadingImage = game.add.sprite(GAME_SCREEN_SIZE.x / 2, GAME_SCREEN_SIZE.y / 2, "tile_choco"); + this.text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts"); + this.text.anchor.setTo(0.5); + this.text.fontSize = 60; + + this.text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴"); + this.text2.anchor.setTo(0.5); + this.text2.fontSize = 60; + + this.text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 브러시 스크립트 웹 폰트\ngoogle web fonts"); + this.text3.anchor.setTo(0.5); + this.text3.fontSize = 60; +} +*/ + +MainMenu.prototype.create = function() { + game.stage.backgroundColor = '#4d4d4d'; +} + +MainMenu.prototype.fontLoaded = function() { + + // keyboard shortcut + this.keyboardShortcut = new KeyboardShortcut(); + this.keyboardShortcut.addCallback( + Phaser.KeyCode.ESC, // keyCode + null, // keyDownHandler + (function() { this.back(); }).bind(this), // keyUpHandler + "menu_app" // callerClassName + ); + + // bg + game.add.graphics() + .beginFill(MainColor.LIGHT_CHOCO_HEX, 1) + .drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y); + + // top ui + // var screenTopUI = new ScreenTopUI(); + // screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) ); + // screenTopUI.makeFullScreenButton(); + // this.loadAllowEditEnterCode(screenTopUI); + + + // bottom ui + var screenBottomUI = new ScreenBottomUI(); + // ScreenBottomUI.printLeftText("게임 진행 정보"); + // var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); + // ScreenBottomUI.printCenterText(playingAppName); + screenBottomUI.printCenterText("메뉴"); + screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); + + new WelcomePlayerText(sessionStorageManager.getPlayerName()); + if(isExperiencePlayerAccount()) { + game.time.events.add(Phaser.Timer.SECOND * 2.5, + (function() { new NoticeExperiencePlayerText(); } ), + this ); - - // bg - game.add.graphics() - .beginFill(MainColor.LIGHT_CHOCO_HEX, 1) - .drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y); - - // top ui - // var screenTopUI = new ScreenTopUI(); - // screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) ); - // screenTopUI.makeFullScreenButton(); - // this.loadAllowEditEnterCode(screenTopUI); - - - // bottom ui - var screenBottomUI = new ScreenBottomUI(); - // ScreenBottomUI.printLeftText("게임 진행 정보"); - // var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); - // ScreenBottomUI.printCenterText(playingAppName); - screenBottomUI.printCenterText("메뉴"); - screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); - - new WelcomePlayerText(sessionStorageManager.getPlayerName()); - if(isExperiencePlayerAccount()) { - game.time.events.add(Phaser.Timer.SECOND * 2.5, - (function() { new NoticeExperiencePlayerText(); } ), - this - ); - } - - - this.loadAppData(); - }, - - back: function() { - sessionStorageManager.clear(); - location.href = '../../web/client/login.html'; - }, - - loadAllowEditEnterCode: function(screenTopUI) { - var dbConnectManager = new DBConnectManager(); - dbConnectManager.requestAllowEditEnterCode( - sessionStorageManager.getMaestroID(), - - (function(replyJSON) { - if(replyJSON["AllowEditEnterCode"] == "1") { - screenTopUI.makeSetupButton( (function() { - console.log("setup"); - location.href = '../../web/client/setup.html'; - }).bind(this) ); - } - }).bind(this), - - (function(replyJSON) { - this.loadFailed(replyJSON); - }).bind(this) - ); - }, - - loadAppData: function() { - var dbConnectManager = new DBConnectManager(); - dbConnectManager.requestMenuAppList( - sessionStorageManager.getMaestroID(), - (function(replyJSON) { - this.loadSucceeded(replyJSON); - }).bind(this), - (function(replyJSON) { - this.loadFailed(replyJSON); - }).bind(this) - ); - }, - - loadSucceeded: function(replyJSON) { - // console.log(replyJSON); - - this.makeMouseAppButtons( - replyJSON.MouseAppList, - replyJSON.MouseActiveAppList - ); - this.makeTypingButtons( - replyJSON.TypingPracticeAppCount, - replyJSON.TypingTestAppCount, - replyJSON.TypingAppList, - replyJSON.TypingActiveAppList - ); - }, - - hasApp: function(appID, appList) { - for(var i = 0; i < appList.length; i++) { - if(appList[i].AppID === appID) - return true; - } - - return false; - }, - - makeMouseAppButtons: function(appList, activeAppList) { - // console.log(appList); - - var mouseAppCount = Object.keys(appList).length; - - for(var i = 0; i < mouseAppCount; i++) { - var posX = this.getButtonPosX(i, mouseAppCount); - var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y); - - var app = appList[i]; - var gameAppButton = new GameAppButton( - posX, posY, - GameAppButton.TYPE_MOUSE_APP, - RoundRectButton.NONE_ICON, app.KoreanName, - { - AppID: app.AppID, - AppName: app.AppName, - KoreanName: app.KoreanName - } - ); - - if(!this.hasApp(app.AppID, activeAppList)) - gameAppButton.setInputEnabled(false); - } - }, - - makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) { - // console.log(typingPracticeAppCount); - // console.log(typingTestAppCount); - // console.log(appList); - - var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false; - var isTypingTestAppExist = typingTestAppCount > 0 ? true : false; - - var typingAppTotalCount = Object.keys(appList).length; - var typingAppIndex = 0; - - - // typing tab buttons - var typingPracticeTabButton = new TypingTabButton( - TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, - "", "타자 연습", - (function() { - location.href = '../../web/client/menu_typing_practice.html'; - }) - ); - if(typingPracticeAppCount === 0) - typingPracticeTabButton.setInputEnabled(false); - - var typingTestTabButton = new TypingTabButton( - TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, - "", "타자 시험", - (function() { - location.href = '../../web/client/menu_typing_test.html'; - }) - ); - if(typingTestAppCount === 0) - typingTestTabButton.setInputEnabled(false); - - - // typing app buttons - for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) { - - var posX = this.getButtonPosX( - typingButtonIndex, typingAppTotalCount - ); - var posY = this.getButtonPosY( - typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y - ); - - var app = appList[typingAppIndex]; - var isKoreanTypingApp = app.AppID < 32 ? true : false; - - var gameAppButton = new GameAppButton( - posX, posY, GameAppButton.TYPE_TYPING_APP, - RoundRectButton.NONE_ICON, // "icon_fullscreen", - // (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName, - app.KoreanName, - { - AppID: app.AppID, - AppName: app.AppName, - KoreanName: app.KoreanName - } - ); - - if(!this.hasApp(app.AppID, activeAppList)) - gameAppButton.setInputEnabled(false); - - typingAppIndex++; - } - }, - - getButtonPosX: function(index, buttonCount) { - var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP; - var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); - // console.log("maxColumnNum : " + maxColumnNum); - var rowCount = Math.ceil(buttonCount / maxColumnNum); - // console.log("rowCount : " + rowCount); - - var columnIndex = index % maxColumnNum; - // console.log("columnIndex : " + columnIndex); - var rowIndex = Math.floor(index / maxColumnNum); - // console.log("rowIndex : " + rowIndex); - - var columnCountForThisRow = 0; - if(rowIndex < rowCount - 1) - columnCountForThisRow = maxColumnNum; - else - columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex); - // console.log("columnCountForThisRow : " + columnCountForThisRow); - - var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); - return startX + gap * columnIndex; - }, - - getButtonPosY: function(index, buttonCount, startPosY) { - var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP; - var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); - // console.log("maxColumnNum : " + maxColumnNum); - var rowCount = Math.ceil(buttonCount / maxColumnNum); - // console.log("rowCount : " + rowCount); - - var rowIndex = Math.floor(index / maxColumnNum); - // console.log("rowIndex : " + rowIndex); - - var startY = startPosY - ( (gap / 2) * (rowCount - 1) ); - return startY + gap * rowIndex; - }, - - loadFailed: function(replyJSON) { - // console.log('login failed, jsonData : ' + JSON.stringify(replyJSON)); } + + + this.loadAppData(); +} + +MainMenu.prototype.back = function() { + sessionStorageManager.clear(); + location.href = '../../web/client/login.html'; +} + +MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) { + var dbConnectManager = new DBConnectManager(); + dbConnectManager.requestAllowEditEnterCode( + sessionStorageManager.getMaestroID(), + + (function(replyJSON) { + if(replyJSON["AllowEditEnterCode"] == "1") { + screenTopUI.makeSetupButton( (function() { + console.log("setup"); + location.href = '../../web/client/setup.html'; + }).bind(this) ); + } + }).bind(this), + + (function(replyJSON) { + this.loadFailed(replyJSON); + }).bind(this) + ); +} + +MainMenu.prototype.loadAppData = function() { + var dbConnectManager = new DBConnectManager(); + dbConnectManager.requestMenuAppList( + sessionStorageManager.getMaestroID(), + (function(replyJSON) { + this.loadSucceeded(replyJSON); + }).bind(this), + (function(replyJSON) { + this.loadFailed(replyJSON); + }).bind(this) + ); +} + +MainMenu.prototype.loadSucceeded = function(replyJSON) { + // console.log(replyJSON); + + this.makeMouseAppButtons( + replyJSON.MouseAppList, + replyJSON.MouseActiveAppList + ); + this.makeTypingButtons( + replyJSON.TypingPracticeAppCount, + replyJSON.TypingTestAppCount, + replyJSON.TypingAppList, + replyJSON.TypingActiveAppList + ); +} + +MainMenu.prototype.hasApp = function(appID, appList) { + for(var i = 0; i < appList.length; i++) { + if(appList[i].AppID === appID) + return true; + } + + return false; +} + +MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) { + // console.log(appList); + + var mouseAppCount = Object.keys(appList).length; + + for(var i = 0; i < mouseAppCount; i++) { + var posX = this.getButtonPosX(i, mouseAppCount); + var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y); + + var app = appList[i]; + var gameAppButton = new GameAppButton( + posX, posY, + GameAppButton.TYPE_MOUSE_APP, + RoundRectButton.NONE_ICON, app.KoreanName, + { + AppID: app.AppID, + AppName: app.AppName, + KoreanName: app.KoreanName + } + ); + gameAppButton.text.font = "Nanum Brush Script"; + + if(!this.hasApp(app.AppID, activeAppList)) + gameAppButton.setInputEnabled(false); + } +} + +MainMenu.prototype.makeTypingButtons = function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) { + // console.log(typingPracticeAppCount); + // console.log(typingTestAppCount); + // console.log(appList); + + var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false; + var isTypingTestAppExist = typingTestAppCount > 0 ? true : false; + + var typingAppTotalCount = Object.keys(appList).length; + var typingAppIndex = 0; + + + // typing tab buttons + var typingPracticeTabButton = new TypingTabButton( + TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, + "", "타자 연습", + (function() { + location.href = '../../web/client/menu_typing_practice.html'; + }) + ); + if(typingPracticeAppCount === 0) + typingPracticeTabButton.setInputEnabled(false); + + var typingTestTabButton = new TypingTabButton( + TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, + "", "타자 시험", + (function() { + location.href = '../../web/client/menu_typing_test.html'; + }) + ); + if(typingTestAppCount === 0) + typingTestTabButton.setInputEnabled(false); + + + // typing app buttons + for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) { + + var posX = this.getButtonPosX( + typingButtonIndex, typingAppTotalCount + ); + var posY = this.getButtonPosY( + typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y + ); + + var app = appList[typingAppIndex]; + var isKoreanTypingApp = app.AppID < 32 ? true : false; + + var gameAppButton = new GameAppButton( + posX, posY, GameAppButton.TYPE_TYPING_APP, + RoundRectButton.NONE_ICON, // "icon_fullscreen", + // (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName, + app.KoreanName, + { + AppID: app.AppID, + AppName: app.AppName, + KoreanName: app.KoreanName + } + ); + + if(!this.hasApp(app.AppID, activeAppList)) + gameAppButton.setInputEnabled(false); + + typingAppIndex++; + } +} + +MainMenu.prototype.getButtonPosX = function(index, buttonCount) { + var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); + // console.log("maxColumnNum : " + maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); + // console.log("rowCount : " + rowCount); + + var columnIndex = index % maxColumnNum; + // console.log("columnIndex : " + columnIndex); + var rowIndex = Math.floor(index / maxColumnNum); + // console.log("rowIndex : " + rowIndex); + + var columnCountForThisRow = 0; + if(rowIndex < rowCount - 1) + columnCountForThisRow = maxColumnNum; + else + columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex); + // console.log("columnCountForThisRow : " + columnCountForThisRow); + + var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); + return startX + gap * columnIndex; +} + +MainMenu.prototype.getButtonPosY = function(index, buttonCount, startPosY) { + var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); + // console.log("maxColumnNum : " + maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); + // console.log("rowCount : " + rowCount); + + var rowIndex = Math.floor(index / maxColumnNum); + // console.log("rowIndex : " + rowIndex); + + var startY = startPosY - ( (gap / 2) * (rowCount - 1) ); + return startY + gap * rowIndex; +} + +MainMenu.prototype.loadFailed = function(replyJSON) { + // console.log('login failed, jsonData : ' + JSON.stringify(replyJSON)); } \ No newline at end of file diff --git a/study/PhaserText/google_webfonts.html b/study/PhaserText/google_webfonts.html new file mode 100644 index 0000000..e6d56a5 --- /dev/null +++ b/study/PhaserText/google_webfonts.html @@ -0,0 +1,32 @@ + + + + + Phaser text test + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/study/PhaserText/google_webfonts.js b/study/PhaserText/google_webfonts.js new file mode 100755 index 0000000..8454fac --- /dev/null +++ b/study/PhaserText/google_webfonts.js @@ -0,0 +1,87 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'google_webfonts', { preload: preload, create: create }); + +// The Google WebFont Loader will look for this object, so create it before loading the script. +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, createText, this); }, + + // The Google Fonts we want to load (specify as many as you like in the array) + // nanumGothic: { + // families: ['Nanum Gothic'] // ['Revalia'] + // }, + google: { + families: ['Nanum Gothic', 'Nanum Brush Script'] // ['Revalia'] + } + +}; + +function preload() { + + // Load the Google WebFont Loader script + game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); + +} + +var text = null; +var grd; + +function create() { + + game.stage.setBackgroundColor(0x2d2d2d); + +} + +function createText() { + + text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts"); + text.anchor.setTo(0.5); + + // text.font = 'Nanum Gothic'; + text.fontSize = 60; + + text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴"); + text2.anchor.setTo(0.5); + + // text2.font = 'Nanum Brush Script'; + text2.fontSize = 60; + + text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts"); + text3.anchor.setTo(0.5); + + text3.font = 'Nanum Brush Script'; + text3.fontSize = 60; + + // x0, y0 - x1, y1 + grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height); + grd.addColorStop(0, '#8ED6FF'); + grd.addColorStop(1, '#004CB3'); + text.fill = grd; + + text.align = 'center'; + text.stroke = '#000000'; + text.strokeThickness = 2; + text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5); + + text.inputEnabled = true; + text.input.enableDrag(); + + text.events.onInputOver.add(over, this); + text.events.onInputOut.add(out, this); + +} + +function out() { + + text.fill = grd; + +} + +function over() { + + text.fill = '#ff00ff'; + +}