From 478ffaeaa25d921ccc0e88e0f1d4132480fa561c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Tue, 6 Aug 2019 10:45:07 +0900 Subject: [PATCH] Add: LanguageTab --- src/game/lib/flat_button/app_group_tab.js | 36 +++---- src/game/lib/flat_button/language_tab.js | 111 ++++++++++++++++++++++ src/game/main_menu/main_menu.js | 22 ++--- src/game/typing/lib/animal_record_list.js | 5 +- src/web/client/main_menu.html | 1 + 5 files changed, 146 insertions(+), 29 deletions(-) create mode 100644 src/game/lib/flat_button/language_tab.js diff --git a/src/game/lib/flat_button/app_group_tab.js b/src/game/lib/flat_button/app_group_tab.js index 45bfc46..e266745 100644 --- a/src/game/lib/flat_button/app_group_tab.js +++ b/src/game/lib/flat_button/app_group_tab.js @@ -10,7 +10,6 @@ function AppGroupTab(clickEvent) { this.reservedMainText = ""; this.reservedSubText = ""; this.reservedIconName = ""; - } AppGroupTab.prototype.setTabLayout = function(tabLayout) { @@ -46,18 +45,18 @@ AppGroupTab.prototype.createTab = function(index) { AppGroupTab.BUTTON_COLOR_DOWN_HEX, AppGroupTab.BUTTON_COLOR_DISABLED_HEX ); + setting.setActiveLineColor( + AppGroupTab.ACTIVE_LINE_COLOR_OUT_HEX, + AppGroupTab.ACTIVE_LINE_COLOR_OVER_HEX, + AppGroupTab.ACTIVE_LINE_COLOR_DOWN_HEX, + AppGroupTab.ACTIVE_LINE_COLOR_DISABLED_HEX + ); setting.setIconColor( AppGroupTab.ICON_COLOR_OUT_HEX, AppGroupTab.ICON_COLOR_OVER_HEX, AppGroupTab.ICON_COLOR_DOWN_HEX, AppGroupTab.ICON_COLOR_DISABLED_HEX ); - setting.setActiveLineColor( - MainColor.DARK_CHOCO_HEX, - MainColor.CHOCO_HEX, - MainColor.LIGHT_CHOCO_HEX, - MainColor.WHITE_HEX // MainColor.DARK_CHOCO_HEX - ); setting.setTextColor( AppGroupTab.TEXT_COLOR_OUT_STRING, AppGroupTab.TEXT_COLOR_OVER_STRING, @@ -86,17 +85,22 @@ AppGroupTab.prototype.createTab = function(index) { -AppGroupTab.BUTTON_COLOR_OUT_HEX = MainColor.CHOCO_HEX; -AppGroupTab.BUTTON_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; -AppGroupTab.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_HEX; -AppGroupTab.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; +AppGroupTab.BUTTON_COLOR_OUT_HEX = MainColor.CHOCO_HEX; +AppGroupTab.BUTTON_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; +AppGroupTab.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_HEX; +AppGroupTab.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; -AppGroupTab.ICON_COLOR_OUT_HEX = MainColor.LIGHT_CHOCO_HEX; // MainColor.WHITE_HEX; // MainColor.DARK_CHOCO_HEX; -AppGroupTab.ICON_COLOR_OVER_HEX = MainColor.CHOCO_HEX; -AppGroupTab.ICON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; -AppGroupTab.ICON_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; +AppGroupTab.ACTIVE_LINE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +AppGroupTab.ACTIVE_LINE_COLOR_OVER_HEX = MainColor.CHOCO_HEX; +AppGroupTab.ACTIVE_LINE_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_HEX; +AppGroupTab.ACTIVE_LINE_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; -AppGroupTab.TEXT_COLOR_OUT_STRING = MainColor.BLACK_STRING; // MainColor.DARK_CHOCO_STRING; +AppGroupTab.ICON_COLOR_OUT_HEX = MainColor.LIGHT_CHOCO_HEX; +AppGroupTab.ICON_COLOR_OVER_HEX = MainColor.CHOCO_HEX; +AppGroupTab.ICON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; +AppGroupTab.ICON_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; + +AppGroupTab.TEXT_COLOR_OUT_STRING = MainColor.BLACK_STRING; AppGroupTab.TEXT_COLOR_OVER_STRING = MainColor.CHOCO_STRING; AppGroupTab.TEXT_COLOR_DOWN_STRING = MainColor.CHOCO_STRING; AppGroupTab.TEXT_COLOR_DISABLED_STRING = MainColor.DARK_CHOCO_STRING; \ No newline at end of file diff --git a/src/game/lib/flat_button/language_tab.js b/src/game/lib/flat_button/language_tab.js new file mode 100644 index 0000000..c5a9c87 --- /dev/null +++ b/src/game/lib/flat_button/language_tab.js @@ -0,0 +1,111 @@ +LanguageTab.prototype = Object.create(BasicTab.prototype); +LanguageTab.constructor = LanguageTab; + +function LanguageTab(clickEvent) { + BasicTab.call(this); + + this.reservedClickEvent = clickEvent; + + this.tabLayout = null; + this.reservedMainText = ""; + this.reservedSubText = ""; + this.reservedIconName = ""; +} + +LanguageTab.prototype.setTabLayout = function(tabLayout) { + this.tabLayout = tabLayout; +} + +LanguageTab.prototype.reserveMainText = function(text) { + this.reservedMainText = text; +} + +LanguageTab.prototype.reserveIcon = function(iconName) { + this.reservedIconName = iconName; +} + +LanguageTab.prototype.reserveSubText = function(text) { + this.reservedSubText = text; +} + +LanguageTab.prototype.createTab = function(index) { + var width = this.tabLayout.getTabWidth(); + var height = this.tabLayout.getTabHeight(); + var x = this.tabLayout.getX() + width / 2 + width * index; + var y = this.tabLayout.getY() + height / 2; + + var setting = new TabSetting(x, y, width, height); + // setting.setFont("Nanum Pen Script"); + setting.setFont("Nanum Gothic"); + setting.setMainFontSize(16); + setting.setSubFontSize(16); + setting.setButtonColor( + LanguageTab.BUTTON_COLOR_OUT_HEX, + LanguageTab.BUTTON_COLOR_OVER_HEX, + LanguageTab.BUTTON_COLOR_DOWN_HEX, + LanguageTab.BUTTON_COLOR_DISABLED_HEX + ); + setting.setActiveLineColor( + LanguageTab.ACTIVE_LINE_COLOR_OUT_HEX, + LanguageTab.ACTIVE_LINE_COLOR_OVER_HEX, + LanguageTab.ACTIVE_LINE_COLOR_DOWN_HEX, + LanguageTab.ACTIVE_LINE_COLOR_DISABLED_HEX + ); + setting.setIconColor( + LanguageTab.ICON_COLOR_OUT_HEX, + LanguageTab.ICON_COLOR_OVER_HEX, + LanguageTab.ICON_COLOR_DOWN_HEX, + LanguageTab.ICON_COLOR_DISABLED_HEX + ); + setting.setTextColor( + LanguageTab.TEXT_COLOR_OUT_STRING, + LanguageTab.TEXT_COLOR_OVER_STRING, + LanguageTab.TEXT_COLOR_DOWN_STRING, + LanguageTab.TEXT_COLOR_DISABLED_STRING + ); + + + this.createButton( + setting, + (function() { + this.tabLayout.selectedTab(this); + this.reservedClickEvent(); + }).bind(this) + ); + this.setMainTextFontWeight("normal"); + this.mainText.fontSize = 18; + this.transformActiveLine(); + + if(this.reservedMainText.length > 0) + this.setMainText(this.reservedMainText); + + if(this.reservedIconName.length > 0) + this.addIcon(this.reservedIconName); + + if(this.reservedSubText.length > 0) + this.setSubText(this.reservedSubText); +} + +LanguageTab.prototype.transformActiveLine = function() { + this.activeLineSprite.y = this.buttonSprite.y + 3; +} + +LanguageTab.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +LanguageTab.BUTTON_COLOR_OVER_HEX = MainColor.CHOCO_HEX; +LanguageTab.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_HEX; +LanguageTab.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; + +LanguageTab.ACTIVE_LINE_COLOR_OUT_HEX = MainColor.LIGHTER_CHOCO_HEX; +LanguageTab.ACTIVE_LINE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; +LanguageTab.ACTIVE_LINE_COLOR_DOWN_HEX = MainColor.CHOCO_HEX; +LanguageTab.ACTIVE_LINE_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; + +LanguageTab.ICON_COLOR_OUT_HEX = MainColor.LIGHT_CHOCO_HEX; +LanguageTab.ICON_COLOR_OVER_HEX = MainColor.CHOCO_HEX; +LanguageTab.ICON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; +LanguageTab.ICON_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; + +LanguageTab.TEXT_COLOR_OUT_STRING = MainColor.WHITE_STRING; +LanguageTab.TEXT_COLOR_OVER_STRING = MainColor.DARK_CHOCO_STRING; +LanguageTab.TEXT_COLOR_DOWN_STRING = MainColor.CHOCO_STRING; +LanguageTab.TEXT_COLOR_DISABLED_STRING = MainColor.DARK_CHOCO_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 ea498fd..d396860 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -86,7 +86,9 @@ MainMenu.prototype.fontLoaded = function() { // screenTopUI.makeFullScreenButton(); // this.loadAllowEditEnterCode(screenTopUI); - this.makeAppGroupButtons(); + this.makeButtons(); + this.makeAppGroupTab(); + this.makeLanguageTab(); this.backButton.applyLoadedFont(); this.settingButton.applyLoadedFont(); @@ -188,7 +190,7 @@ MainMenu.prototype.hasApp = function(appID, appList) { return false; } -MainMenu.prototype.makeAppGroupButtons = function() { +MainMenu.prototype.makeButtons = function() { this.backButton = new BackButton( (function() { console.log("back"); }).bind(this) ); @@ -196,8 +198,9 @@ MainMenu.prototype.makeAppGroupButtons = function() { this.settingButton = new SettingButton( (function() { console.log("setting"); }).bind(this) ); +} - +MainMenu.prototype.makeAppGroupTab = function() { this.appGroupTabLayout = new TabLayout(100, 0, 844, 70); var typingFingerGroupTab = new AppGroupTab( (function() { console.log("typing finger position"); }).bind(this) ); @@ -226,21 +229,18 @@ MainMenu.prototype.makeAppGroupButtons = function() { this.appGroupTabLayout.add(mousePlayGroupTab); this.appGroupTabLayout.createTabs(); +} - +MainMenu.prototype.makeLanguageTab = function() { var languageTabHeight = 48; this.languageTabLayout = new TabLayout(0, GAME_SCREEN_SIZE.y - languageTabHeight, GAME_SCREEN_SIZE.x, languageTabHeight); - var koreanTab = new AppGroupTab( (function() { console.log("Language : Korean"); }).bind(this) ); - koreanTab.reserveMainText("한국어"); - // koreanTab.reserveIcon("keyboard"); - // koreanTab.reserveSubText("손가락 위치"); + var koreanTab = new LanguageTab( (function() { console.log("Language : Korean"); }).bind(this) ); + koreanTab.reserveMainText("한글"); this.languageTabLayout.add(koreanTab); - var englishTab = new AppGroupTab( (function() { console.log("Language : English"); }).bind(this) ); + var englishTab = new LanguageTab( (function() { console.log("Language : English"); }).bind(this) ); englishTab.reserveMainText("영어"); - // englishTab.reserveIcon("keyboard"); - // englishTab.reserveSubText("연습"); this.languageTabLayout.add(englishTab); this.languageTabLayout.createTabs(); diff --git a/src/game/typing/lib/animal_record_list.js b/src/game/typing/lib/animal_record_list.js index fa83c6d..a9a88eb 100644 --- a/src/game/typing/lib/animal_record_list.js +++ b/src/game/typing/lib/animal_record_list.js @@ -69,7 +69,7 @@ AnimalRecordList.prototype.printScore = function(type) { ); recordText.anchor.set(0.5); if(this.type === AnimalRecordList.TYPE_MENU) - recordText.addColor(MainColor.LIGHTER_CHOCO_STRING, 0); + recordText.addColor(AnimalRecordList.COLOR_SCORE_MENU_DEFAULT_TEXT, 0); else recordText.addColor(AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT, 0); recordText.stroke = "#333"; @@ -123,7 +123,8 @@ AnimalRecordList.TYPE_TEST = 2; AnimalRecordList.ANIMAL_LIST_MENU_POS_Y = 640; AnimalRecordList.ANIMAL_OFFSET_Y = 30; AnimalRecordList.RECORD_TEXT_MENU_OFFSET_Y = 70; +AnimalRecordList.COLOR_SCORE_MENU_DEFAULT_TEXT = "#ffdddd"; // MainColor.WHITE_STRING; AnimalRecordList.COLOR_BG = MainColor.CHOCO_HEX; // 0x77aadd; //0x99ccff; -AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT = MainColor.LIGHTER_CHOCO_STRING; // "#bbddff"; +AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT = "#bbddff"; AnimalRecordList.COLOR_SCORE_CLEARED_TEXT = "#ffffff"; \ No newline at end of file diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index dc9b801..d8138d7 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -63,6 +63,7 @@ +