Add: LanguageTab

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_OUT_HEX			= MainColor.CHOCO_HEX;
-AppGroupTab.BUTTON_COLOR_OVER_HEX		= MainColor.DARK_CHOCO_HEX;
+AppGroupTab.BUTTON_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_HEX;
-AppGroupTab.BUTTON_COLOR_DOWN_HEX		= MainColor.LIGHTER_CHOCO_HEX;
+AppGroupTab.BUTTON_COLOR_DOWN_HEX			= MainColor.LIGHTER_CHOCO_HEX;
-AppGroupTab.BUTTON_COLOR_DISABLED_HEX	= MainColor.BLACK_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.ACTIVE_LINE_COLOR_OUT_HEX		= MainColor.DARK_CHOCO_HEX;
-AppGroupTab.ICON_COLOR_OVER_HEX			= MainColor.CHOCO_HEX;
+AppGroupTab.ACTIVE_LINE_COLOR_OVER_HEX		= MainColor.CHOCO_HEX;
-AppGroupTab.ICON_COLOR_DOWN_HEX			= MainColor.LIGHT_CHOCO_HEX;
+AppGroupTab.ACTIVE_LINE_COLOR_DOWN_HEX		= MainColor.LIGHTER_CHOCO_HEX;
-AppGroupTab.ICON_COLOR_DISABLED_HEX		= MainColor.DARK_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;

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;

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) );
+	var koreanTab = new LanguageTab( (function() { console.log("Language : Korean"); }).bind(this) );
-	koreanTab.reserveMainText("한국어");
+	koreanTab.reserveMainText("한글");
-	// koreanTab.reserveIcon("keyboard");
-	// koreanTab.reserveSubText("손가락 위치");
 	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();

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";

src/web/client/main_menu.html

@@ -63,6 +63,7 @@
 		<script src="../../game/lib/flat_button/tab_setting.js"></script>
 		<script src="../../game/lib/flat_button/basic_tab.js"></script>
 		<script src="../../game/lib/flat_button/app_group_tab.js"></script>
+		<script src="../../game/lib/flat_button/language_tab.js"></script>
 		<script src="../../game/lib/flat_button/tab_layout.js"></script>
 
 		<script src="../../game/typing/lib/animal.js"></script>