diff --git a/src/game/lib/flat_button/basic_button.js b/src/game/lib/flat_button/basic_button.js index e72896e..2669a24 100644 --- a/src/game/lib/flat_button/basic_button.js +++ b/src/game/lib/flat_button/basic_button.js @@ -169,7 +169,7 @@ BasicButton.prototype.makeShortcutText = function() { var shortcutText = game.add.text(posX, posY, ""); shortcutText.anchor.set(0.5); - shortcutText.fontSize = BasicButton.SHORTCUT_TEXT_FONTSIZE; + shortcutText.fontSize = this.setting.shortcutFontSize; shortcutText.fontWeight = "normal"; // shortcutText.addColor(this.setting.textColors.over, 0); shortcutText.addColor("0xffffff", 0); @@ -206,7 +206,7 @@ BasicButton.prototype.alignContents = function() { var offsetRatio = 7; var offsetMainText = mainTextHeight / offsetRatio; var offsetShortcutText = shortcutTextHeight / offsetRatio; - var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicButton.SHORTCUT_TEXT_FONTSIZE / 2); + var gap = (iconSpriteHeight > 0 ? gap = 0 : ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE / 2); if(shortcutTextHeight === 0) { if(mainTextHeight > 0) @@ -348,6 +348,4 @@ BasicButton.prototype.setLineSpacing = function(spacingInPixels) { } BasicButton.NONE_ICON = ""; -BasicButton.NONE_BUTTON_TEXT = ""; - -BasicButton.SHORTCUT_TEXT_FONTSIZE = 12; \ No newline at end of file +BasicButton.NONE_BUTTON_TEXT = ""; \ No newline at end of file diff --git a/src/game/lib/flat_button/button_setting.js b/src/game/lib/flat_button/button_setting.js index 176047b..efff832 100644 --- a/src/game/lib/flat_button/button_setting.js +++ b/src/game/lib/flat_button/button_setting.js @@ -6,7 +6,8 @@ function ButtonSetting(x, y, width, height) { this.strokeWidthPx = 0; this.roundAmount = 0; - this.fontSize = 10; + this.fontSize = ButtonSetting.DEFAULT_MAIN_TEXT_FONTSIZE; + this.shortcutFontSize = ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE; this.strokeColors = ButtonSetting.DEFAULT_STROKE_COLORS; this.buttonColors = ButtonSetting.DEFAULT_BUTTON_COLORS; @@ -55,6 +56,14 @@ ButtonSetting.prototype.setFontSize = function(size) { this.fontSize = size; } +ButtonSetting.prototype.setShortcutFont = function(fontName) { + this.shortcutFont = fontName; +} + +ButtonSetting.prototype.setShortcutFontSize = function(size) { + this.shortcutFontSize = size; +} + ButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { this.strokeColors = { }; this.strokeColors.out = out; @@ -124,5 +133,8 @@ ButtonSetting.DEFAULT_TEXT_FONT = { align: "center" }; -ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel -ButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel \ No newline at end of file +ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel +ButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel + +ButtonSetting.DEFAULT_MAIN_TEXT_FONTSIZE = 10; +ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE = 12; \ No newline at end of file diff --git a/src/game/lib/flat_button/play_app_button.js b/src/game/lib/flat_button/play_app_button.js new file mode 100644 index 0000000..1b57066 --- /dev/null +++ b/src/game/lib/flat_button/play_app_button.js @@ -0,0 +1,146 @@ +PlayAppButton.prototype = Object.create(BasicButton.prototype); +PlayAppButton.constructor = PlayAppButton; + +function PlayAppButton(x, y) { + this.appData = null; + + var setting = new ButtonSetting(x, y, PlayAppButton.WIDTH, PlayAppButton.HEIGHT); + setting.setStrokeWidth(0); + setting.setRound(30); + // setting.setFont("Nanum Brush Script"); + setting.setFont("Nanum Gothic"); + setting.setFontSize(20); + setting.setShortcutFont("Nanum Gothic"); + setting.setShortcutFontSize(18); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.setStrokeColor( + PlayAppButton.STROKE_COLOR_OUT_HEX, + PlayAppButton.STROKE_COLOR_OVER_HEX, + PlayAppButton.STROKE_COLOR_DOWN_HEX, + PlayAppButton.STROKE_COLOR_DISABLED_HEX + ); + setting.setButtonColor( + PlayAppButton.BUTTON_COLOR_OUT_HEX, + PlayAppButton.BUTTON_COLOR_OVER_HEX, + PlayAppButton.BUTTON_COLOR_DOWN_HEX, + PlayAppButton.BUTTON_COLOR_DISABLED_HEX + ); + setting.setIconColor( + PlayAppButton.ICON_COLOR_OUT_HEX, + PlayAppButton.ICON_COLOR_OVER_HEX, + PlayAppButton.ICON_COLOR_DOWN_HEX, + PlayAppButton.ICON_COLOR_DISABLED_HEX + ); + setting.setTextColor( + PlayAppButton.TEXT_COLOR_OUT_HEX, + PlayAppButton.TEXT_COLOR_OVER_HEX, + PlayAppButton.TEXT_COLOR_DOWN_HEX, + PlayAppButton.TEXT_COLOR_DISABLED_HEX + ); + + BasicButton.call(this, setting, this.clickEvent); + + // this.setMainText(""); + // this.addIcon("tile_choco"); + // this.setIconSize(40); + // this.setShortcutText("[단축키]"); +} + +PlayAppButton.prototype.setInputEnabled = function(isEnabled) { + this.strokeSprite.inputEnabled = isEnabled; + this.buttonSprite.inputEnabled = isEnabled; + + if(isEnabled === true) + this.mouseOut(); + else + this.buttonDisabled(); +} + +PlayAppButton.prototype.setActive = function(flag) { + this.setInputEnabled(flag); + + if(flag) { + this.buttonSprite.alpha = 1; + this.strokeSprite.alpha = 1; + } else { + this.buttonSprite.alpha = 0; + this.strokeSprite.alpha = 0; + } +} + +PlayAppButton.prototype.showEmptyDisabled = function() { + this.setInputEnabled(false); + + this.buttonSprite.alpha = 0; + this.strokeSprite.alpha = 1; + this.strokeSprite.tint = MainColor.SADDLE_BROWN_HEX; +} + +PlayAppButton.prototype.updateAppData = function(appData) { + this.appData = appData; + + // console.log(this.appData); + // this.addIcon(this.appData.appName); + this.addIcon("keyboard"); + this.setIconSize(100); + // this.setMainText(this.appData.koreanName); + this.setShortcutText(this.appData.koreanName); + + this.iconSprite.y = PlayAppButton.HEIGHT / 2 - 20; + this.shortcutText.y = PlayAppButton.HEIGHT / 2 + 40; + + this.setInputEnabled(this.appData.activated); +} + +PlayAppButton.prototype.clickEvent = function() { + sessionStorageManager.setPlayingAppID(this.appData.appID); + sessionStorageManager.setPlayingAppName(this.appData.appName); + sessionStorageManager.setPlayingAppKoreanName(this.appData.koreanName); + + if(isExperiencePlayerAccount()) + location.href = '../../web/client/ads.html'; + else + location.href = '../../web/client/start.html'; +} + +/* +PlayAppButton.prototype.onClick = function() { + sessionStorageManager.setPlayingAppID(PlayAppButton.TYPING_APP_ID); + sessionStorageManager.setPlayingAppName(PlayAppButton.TYPING_APP_NAME); + sessionStorageManager.setPlayingAppKoreanName(PlayAppButton.TYPING_APP_KOREAN_NAME); + sessionStorageManager.setWritingID(this.writingData.writingID); + // location.href = '../../web/client/typing_exam.html'; + location.href = '../../web/client/start.html'; + // printSessionStorage(); +} + + +PlayAppButton.TYPING_APP_ID = 200; +PlayAppButton.TYPING_APP_NAME = "typing_exam"; +PlayAppButton.TYPING_APP_KOREAN_NAME = "타자검정"; +*/ + + +PlayAppButton.WIDTH = 150; +PlayAppButton.HEIGHT = 180; + +PlayAppButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +PlayAppButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; +PlayAppButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX; +PlayAppButton.STROKE_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX; + +PlayAppButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +PlayAppButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX; +PlayAppButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; +PlayAppButton.BUTTON_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX; + +PlayAppButton.ICON_COLOR_OUT_HEX = MainColor.WHITE_HEX; +PlayAppButton.ICON_COLOR_OVER_HEX = MainColor.WHITE_HEX; +PlayAppButton.ICON_COLOR_DOWN_HEX = MainColor.WHITE_HEX; +PlayAppButton.ICON_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX; + +PlayAppButton.TEXT_COLOR_OUT_HEX = MainColor.LINEN_STRING; +PlayAppButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; +PlayAppButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; +PlayAppButton.TEXT_COLOR_DISABLED_HEX = MainColor.DARK_GRAY_STRING; // MainColor.THISTLE_STRING; \ No newline at end of file diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 1ca657d..35a4ee1 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -67,9 +67,11 @@ MainMenu.prototype.create = function() { this.typingAppButtons = new Array(); this.makeTypingAppButtons(); this.writingAppButtons = new Array(); - this.mouseAppButtons = new Array(); + this.playAppButtons = new Array(); + this.makePlayAppButtons(); - this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PRACTICE; + // this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PRACTICE; + this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PLAY; this.selectedLanguage = MainMenu.LANGUAGE_KOREAN; // this.animalRecordList.printScore(Animal.TYPE_PRACTICE); } @@ -184,15 +186,38 @@ MainMenu.prototype.makeTypingAppButtons = function() { } } +MainMenu.prototype.makePlayAppButtons = function() { + var startX = 150; + var startY = 300; + var offsetX = PlayAppButton.WIDTH + 30; + var offsetY = 250; + + var buttonHalfWidth = TypingAppButton.WIDTH / 2; + for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) { + var x = startX + (i % 5) * offsetX; + var y = Math.floor(i / 5) === 0 ? startY : startY + offsetY; + + var button = new PlayAppButton(x, y); + button.setActive(false); + this.playAppButtons.push(button); + } +} + MainMenu.prototype.hideAllButtons = function() { // hide all buttons for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) { this.typingAppButtons[i].setActive(false); } + + for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) { + this.playAppButtons[i].setActive(false); + } } MainMenu.prototype.updateAppButtons = function(appGroup, appData) { + this.hideAllButtons(); + switch(parseInt(appGroup)) { case MainMenu.APP_GROUP_TYPING_PRACTICE: this.updateTypingPracticeAppButtons(appGroup, appData); @@ -207,11 +232,13 @@ MainMenu.prototype.updateAppButtons = function(appGroup, appData) { break; case MainMenu.APP_GROUP_TYPING_PLAY: - this.updateTypingPlayAppButtons(appData); + this.updatePlayAppButtons(appData); + // this.updateTypingPlayAppButtons(appData); break; case MainMenu.APP_GROUP_MOUSE_PLAY: - this.updateMousePlayAppButtons(appData); + this.updatePlayAppButtons(appData); + // this.updateMousePlayAppButtons(appData); break; default: @@ -219,13 +246,6 @@ MainMenu.prototype.updateAppButtons = function(appGroup, appData) { } } -MainMenu.prototype.clearTypingAppButtons = function(appData) { - for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) { - var button = this.typingAppButtons[i]; - button.setActive(false); - } -} - MainMenu.prototype.isActivatedApp = function(appID, activeAppList) { var count = activeAppList.length; for(var i = 0; i < count; i++) { @@ -268,9 +288,29 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) { return appDataList; } +MainMenu.prototype.makePlayAppDataList = function(appData) { + var appDataList = new Array(); + + var appList = appData.appList; + if(appList.length === 0) + return []; + + var count = appList.length; + for(var appDataIndex = 0; appDataIndex < count; appDataIndex++) { + var data = {}; + data["appID"] = appList[appDataIndex].appID; + data["appName"] = appList[appDataIndex].appName; + data["koreanName"] = appList[appDataIndex].koreanName; + data["activated"] = this.isActivatedApp(appList[appDataIndex].appID, appData.activeAppList); + // data["highestRecord"] = this.getAppHighestRecord(appList[appDataIndex].appID, appData.highestRecordList); + appDataList.push(data); + } + + return appDataList; +} + MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData) { console.log("updateTypingPracticeAppButtons"); - this.clearTypingAppButtons(); var buttonIndex = 0; var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData); @@ -289,7 +329,6 @@ MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData) MainMenu.prototype.updateTypingTestAppButtons = function(appGroup, appData) { console.log("updateTypingTestAppButtons"); - this.clearTypingAppButtons(); var buttonIndex = 0; var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData); @@ -311,14 +350,22 @@ MainMenu.prototype.updateTypingExamAppButtons = function(appData) { console.log(appData); } -MainMenu.prototype.updateTypingPlayAppButtons = function(appData) { - console.log("updateTypingPlayAppButtons"); - console.log(appData); -} +MainMenu.prototype.updatePlayAppButtons = function(appData) { + console.log("updatePlayAppButtons"); -MainMenu.prototype.updateMousePlayAppButtons = function(appData) { - console.log("updateMousePlayAppButtons"); - console.log(appData); + var buttonIndex = 0; + var appDataList = this.makePlayAppDataList(appData); + var count = appDataList.length; + for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) { + var button = this.playAppButtons[i]; + if(i < count) { + button.setActive(true); + button.updateAppData(appDataList[i]); + } else { + button.setActive(true); + button.showEmptyDisabled(); + } + } } @@ -621,4 +668,5 @@ MainMenu.APP_GROUP_MOUSE_PLAY = 4; MainMenu.LANGUAGE_KOREAN = 0; MainMenu.LANGUAGE_ENGLISH = 1; -MainMenu.TYPING_APP_COUNT = 10; \ No newline at end of file +MainMenu.TYPING_APP_COUNT = 10; +MainMenu.PLAY_APP_COUNT = 10; \ No newline at end of file diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index 212acab..8f2c27b 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -66,6 +66,7 @@ +