Add: TabLayout

src/game/lib/flat_button/app_group_tab.js

@@ -2,8 +2,41 @@ AppGroupTab.prototype = Object.create(BasicTab.prototype);
 AppGroupTab.constructor = AppGroupTab;
 
 function AppGroupTab(clickEvent) {
-	var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+	BasicTab.call(this);
-	setting.setFont("Nanum Gothic");
+
+	this.reservedClickEvent = clickEvent;
+
+	this.tabLayout = null;
+	this.reservedMainText = "";
+	this.reservedShortcutText = "";
+	this.reservedIconName = "";
+
+}
+
+AppGroupTab.prototype.setTabLayout = function(tabLayout) {
+	this.tabLayout = tabLayout;
+}
+
+AppGroupTab.prototype.reserveMainText = function(text) {
+	this.reservedMainText = text;
+}
+
+AppGroupTab.prototype.reserveIcon = function(iconName) {
+	this.reservedIconName = iconName;
+}
+
+AppGroupTab.prototype.reserveShortcutText = function(text) {
+	this.reservedShortcutText = text;
+}
+
+AppGroupTab.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.setFontSize(20);
 	setting.setButtonColor(
 		AppGroupTab.BUTTON_COLOR_OUT_HEX,
@@ -31,23 +64,32 @@ function AppGroupTab(clickEvent) {
 	);
 
 
-	BasicTab.call(this, setting, clickEvent);
+	this.createButton(
+		setting,
+		(function() {
+			this.tabLayout.selectedTab(this);
+			this.reservedClickEvent();
+		}).bind(this)
+	);
 
-	// this.setMainTextFontWeight("bold");
+	if(this.reservedMainText.length > 0)
-	this.setMainText("마우스 MOU");
+		this.setMainText(this.reservedMainText);
-	this.setMainTextFontWeight("800");
+
-	// this.addIcon("home");
+	if(this.reservedIconName.length > 0)
-	// this.setIconSize(30);
+		this.addIcon(this.reservedIconName);
-	this.setShortcutText("MOUSE");
+
+	if(this.reservedShortcutText.length > 0)
+		this.setShortcutText(this.reservedShortcutText);
 }
 
 
-AppGroupTab.STROKE_COLOR_OUT_HEX			= 0xAA6666;
+
+AppGroupTab.STROKE_COLOR_OUT_HEX		= 0xAA6666;
 AppGroupTab.STROKE_COLOR_OVER_HEX		= 0x884444;
 AppGroupTab.STROKE_COLOR_DOWN_HEX		= 0x884444;
 AppGroupTab.STROKE_COLOR_DISABLED_HEX	= 0x333333;
 
-AppGroupTab.BUTTON_COLOR_OUT_HEX			= 0xffdddd;
+AppGroupTab.BUTTON_COLOR_OUT_HEX		= 0xffdddd;
 AppGroupTab.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
 AppGroupTab.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
 AppGroupTab.BUTTON_COLOR_DISABLED_HEX	= 0x666666;

src/game/lib/flat_button/basic_tab.js

@@ -1,24 +1,30 @@
 // BasicTab.prototype = Object.create();
 BasicTab.constructor = BasicTab;
 
-function BasicTab(setting, clickEvent) {
+function BasicTab() {
+	this.activate = true;
+
+	this.buttonSprite = null;
+	this.activeLineSprite = null;
+
+	this.iconSprite = null;
+
+	this.mainText = null;
+	this.shortcutText = null;
+}
+
+
+
+BasicTab.prototype.createButton = function(setting, clickEvent) {
 	this.setting = setting;
 	this.clickEvent = clickEvent;
 
-	this.activate = true;
-
 	// button sprite
 	this.buttonSprite = this.makeButtonSprite();
 	this.setEventMethod(this.buttonSprite);
 
-	this.activeSprite = this.makeActiveSprite();
+	this.activeLineSprite = this.makeActiveLineSprite();
-	this.setEventMethod(this.activeSprite);
+	this.setEventMethod(this.activeLineSprite);
-
-
-	this.iconSprite = null;
-	this.mainText = null;
-	this.shortcutText = null;
-
 
 	this.mainText = this.makeMainText();
 	this.buttonSprite.addChild(this.mainText);
@@ -31,8 +37,6 @@ function BasicTab(setting, clickEvent) {
 	this.mouseOut();
 }
 
-
-
 BasicTab.prototype.makeButtonSprite = function() {
 	var setting = this.setting;
 	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
@@ -58,12 +62,12 @@ BasicTab.prototype.makeButtonSprite = function() {
 	return buttonSprite;
 }
 
-BasicTab.prototype.makeActiveSprite = function() {
+BasicTab.prototype.makeActiveLineSprite = function() {
 	var setting = this.setting;
 	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
 	// console.log("round : " + setting.roundAmount);
 
-	var OFFSET_POS_Y	= 12;
+	var OFFSET_POS_Y	= 7;
 
 	var buttonWidth = setting.width;
 	var lineWidth = buttonWidth * 3 / 4;
@@ -71,19 +75,20 @@ BasicTab.prototype.makeActiveSprite = function() {
 
 	var texture = null;
 	texture = new Phaser.Graphics()
-		.beginFill(0xffffff)
+		// .beginFill(0xffffff)
+		.beginFill(MainColor.LIGHT_CHOCO_HEX)
 		.drawRoundedRect(0, 0, lineWidth, lineHeight, 1)
 		.endFill()
 		.generateTexture();
 
 	var posX = setting.x - lineWidth / 2;
 	var posY = setting.y + setting.height / 2 - OFFSET_POS_Y;
-	var activeSprite = game.add.sprite(posX, posY, texture);
+	var activeLineSprite = game.add.sprite(posX, posY, texture);
 
 	// buttonSprite.anchor.setTo(0.5, 0.5);
-	activeSprite.inputEnabled = true;
+	activeLineSprite.inputEnabled = true;
 
-	return activeSprite;
+	return activeLineSprite;
 }
 
 
@@ -95,7 +100,6 @@ BasicTab.prototype.addIcon = function(spriteName) {
 	if(spriteName.length === 0)
 		return;
 
-	console.log("addIcon : " + spriteName);
 	this.iconSprite = game.add.sprite(0, 0, spriteName);
 	this.iconSprite.x = this.buttonSprite.width / 2;
 	this.iconSprite.y = this.buttonSprite.height / 2;
@@ -186,9 +190,9 @@ BasicTab.prototype.setActive = function(flag) {
 	this.activate = flag;
 
 	if(this.activate)
-		this.activeSprite.alpha = 1;
+		this.activeLineSprite.alpha = 1;
 	else
-		this.activeSprite.alpha = 0;
+		this.activeLineSprite.alpha = 0;
 }
 
 BasicTab.prototype.alignContents = function() {
@@ -270,7 +274,7 @@ BasicTab.prototype.mouseOut = function() {
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.out;
 
-	this.activeSprite.tint = this.setting.activeColors.out;
+	// this.activeLineSprite.tint = this.setting.activeColors.out;
 }
 
 BasicTab.prototype.mouseOver = function() {
@@ -283,7 +287,7 @@ BasicTab.prototype.mouseOver = function() {
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.over;
 
-	this.activeSprite.tint = this.setting.activeColors.over;
+	// this.activeLineSprite.tint = this.setting.activeColors.over;
 }
 
 BasicTab.prototype.mouseDown = function() {
@@ -296,7 +300,7 @@ BasicTab.prototype.mouseDown = function() {
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.down;
 
-	this.activeSprite.tint = this.setting.activeColors.down;
+	// this.activeLineSprite.tint = this.setting.activeColors.down;
 }
 
 BasicTab.prototype.buttonDisabled = function() {
@@ -309,7 +313,7 @@ BasicTab.prototype.buttonDisabled = function() {
 	if(typeof this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.disabled;
 
-	this.activeSprite.tint = this.setting.activeColors.disabled;
+	// this.activeLineSprite.tint = this.setting.activeColors.disabled;
 }
 
 

src/game/lib/flat_button/setting_button.js

@@ -2,7 +2,7 @@ SettingButton.prototype = Object.create(BasicButton.prototype);
 SettingButton.constructor = SettingButton;
 
 function SettingButton(clickEvent) {
-	var setting = new ButtonSetting(980, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
+	var setting = new ButtonSetting(984, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
 	setting.setStrokeWidth(0);
 	setting.setRound(30);
 	// setting.setFont("Nanum Brush Script");

src/game/lib/flat_button/tab_layout.js

@@ -0,0 +1,65 @@
+function TabLayout(x, y, width, height) {
+	this.x = x;
+	this.y = y;
+	this.width = width;
+	this.height = height;
+
+	this.activeTabIndex = 0;
+
+	this.tabGroup = new Array();
+};
+
+TabLayout.prototype.add = function(tab) {
+	tab.setTabLayout(this);
+	this.tabGroup.push(tab);
+}
+
+TabLayout.prototype.getX = function() {
+	return this.x;
+}
+
+TabLayout.prototype.getY = function() {
+	return this.y;
+}
+
+TabLayout.prototype.getTabWidth = function() {
+	return this.width / this.tabGroup.length;
+}
+
+TabLayout.prototype.getTabHeight = function() {
+	return this.height;
+}
+
+TabLayout.prototype.createTabs = function() {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++) {
+		this.tabGroup[i].createTab(i);
+	}
+
+	this.updateActiveLine();
+}
+
+TabLayout.prototype.applyLoadedFont = function() {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++) {
+		this.tabGroup[i].applyLoadedFont();
+	}
+}
+
+TabLayout.prototype.selectedTab = function(tab) {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++) {
+		if(this.tabGroup[i] === tab)
+			this.activeTabIndex = i;
+	}
+
+	this.updateActiveLine();
+}
+
+TabLayout.prototype.updateActiveLine = function() {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++)
+			this.tabGroup[i].setActive(false);
+
+	this.tabGroup[this.activeTabIndex].setActive(true);
+}

src/game/main_menu/main.js

@@ -17,7 +17,7 @@ WebFontConfig = {
 
 	//  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 Gothic:400,700,800', 'Nanum Gothic Coding:400,700', 'Nanum Brush Script', 'Nanum Pen Script']
 		// families: ['Nanum Brush Script']
 	}
 };

src/game/main_menu/main_menu.js

@@ -55,8 +55,7 @@ MainMenu.prototype.create = function() {
 	graphics.beginFill(MainColor.CHOCO_HEX, 1);
 	graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
 
-	this.appGroupButtons = {};
+	this.appGroupTabLayout = null;
-	// this.makeAppGroupButtons();
 }
 
 MainMenu.prototype.fontLoaded = function() {
@@ -76,12 +75,11 @@ MainMenu.prototype.fontLoaded = function() {
 	// screenTopUI.makeFullScreenButton();
 	// this.loadAllowEditEnterCode(screenTopUI);
 
-	// this.appGroupButtons = {};
 	this.makeAppGroupButtons();
 
-	// console.log(this.appGroupButtons);
+	this.backButton.applyLoadedFont();
-	this.appGroupButtons.backButton.applyLoadedFont();
+	this.settingButton.applyLoadedFont();
-	this.appGroupButtons.settingButton.applyLoadedFont();
+	this.appGroupTabLayout.applyLoadedFont();
 
 
 	// bottom ui
@@ -180,38 +178,91 @@ MainMenu.prototype.hasApp = function(appID, appList) {
 }
 
 MainMenu.prototype.makeAppGroupButtons = function() {
-	var backButton = new BackButton(
+	this.backButton = new BackButton(
 		(function() { console.log("back"); }).bind(this)
 	);
-	this.appGroupButtons.backButton = backButton;
 
-	var settingButton = new SettingButton(
+	this.settingButton = new SettingButton(
 		(function() { console.log("setting"); }).bind(this)
 	);
-	this.appGroupButtons.settingButton = settingButton;
 
-	var mouseAppGroupTab = new AppGroupTab(
+
-		(function() { console.log("mouse"); }).bind(this)
+	this.appGroupTabLayout = new TabLayout(80, 0, 864, 70);
+	// typing practice
+	var typingPracticeKoreanAppGroupTab = new AppGroupTab(
+		(function() { console.log("typing practice"); }).bind(this)
 	);
-	// var mouseAppTab = new BasicTab(
+	typingPracticeKoreanAppGroupTab.reserveIcon("home");
-	// 	setting,
+	typingPracticeKoreanAppGroupTab.reserveShortcutText("한글 타자연습");
-	// 	(function() { console.log("mouse"); }).bind(this)
+	this.appGroupTabLayout.add(typingPracticeKoreanAppGroupTab);
-	// );
-	// mouseAppTab.setMainText("MOUSE");
-	// mouseAppTab.setShortcutText("마우스");
 
-	var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+	var typingPracticeEnglishAppGroupTab = new AppGroupTab(
-	setting.setFontSize(20);
+		(function() { console.log("typing practice"); }).bind(this)
-	setting.x = 290;
-	var typingAppTab = new BasicTab(
-		setting,
-		(function() { console.log("typing"); }).bind(this)
 	);
-	typingAppTab.setMainText("TYPING");
+	typingPracticeEnglishAppGroupTab.reserveIcon("home");
-	typingAppTab.setShortcutText("타이핑");
+	typingPracticeEnglishAppGroupTab.reserveShortcutText("영문 타자연습");
-	typingAppTab.setActive(false);
+	this.appGroupTabLayout.add(typingPracticeEnglishAppGroupTab);
+
+
+	// typing test
+	var typingTestAppKoreaGroupTab = new AppGroupTab(
+		(function() { console.log("typing test"); }).bind(this)
+	);
+	typingTestAppKoreaGroupTab.reserveMainText("Typing test");
+	typingTestAppKoreaGroupTab.reserveShortcutText("한글 타자시험");
+	this.appGroupTabLayout.add(typingTestAppKoreaGroupTab);
+
+	var typingTestAppEnglishGroupTab = new AppGroupTab(
+		(function() { console.log("typing test"); }).bind(this)
+	);
+	typingTestAppEnglishGroupTab.reserveMainText("Typing test");
+	typingTestAppEnglishGroupTab.reserveShortcutText("영문 타자시험");
+	this.appGroupTabLayout.add(typingTestAppEnglishGroupTab);
+
+
+	// typing exam
+	var typingExamAppKoreaGroupTab = new AppGroupTab(
+		(function() { console.log("typing exam"); }).bind(this)
+	);
+	typingExamAppKoreaGroupTab.reserveMainText("Typing exam");
+	typingExamAppKoreaGroupTab.reserveShortcutText("한글 타자검정");
+	this.appGroupTabLayout.add(typingExamAppKoreaGroupTab);
+
+	var typingExamAppEnglishGroupTab = new AppGroupTab(
+		(function() { console.log("typing exam"); }).bind(this)
+	);
+	typingExamAppEnglishGroupTab.reserveMainText("Typing exam");
+	typingExamAppEnglishGroupTab.reserveShortcutText("영문 타자검정");
+	this.appGroupTabLayout.add(typingExamAppEnglishGroupTab);
+
+
+	// typing play
+	var typingPlayAppKoreaGroupTab = new AppGroupTab(
+		(function() { console.log("typing game"); }).bind(this)
+	);
+	typingPlayAppKoreaGroupTab.reserveMainText("Typing game");
+	typingPlayAppKoreaGroupTab.reserveShortcutText("한글 타자놀이");
+	this.appGroupTabLayout.add(typingPlayAppKoreaGroupTab);
+
+	var typingPlayAppEnglishGroupTab = new AppGroupTab(
+		(function() { console.log("typing game"); }).bind(this)
+	);
+	typingPlayAppEnglishGroupTab.reserveMainText("Typing game");
+	typingPlayAppEnglishGroupTab.reserveShortcutText("영문 타자놀이");
+	this.appGroupTabLayout.add(typingPlayAppEnglishGroupTab);
+
+
+	// typing practice
+	var mousePlayAppGroupTab = new AppGroupTab(
+		(function() { console.log("mouse game"); }).bind(this)
+	);
+	mousePlayAppGroupTab.reserveMainText("Mouse game");
+	mousePlayAppGroupTab.reserveShortcutText("마우스놀이");
+	this.appGroupTabLayout.add(mousePlayAppGroupTab);
+
+	this.appGroupTabLayout.createTabs();
+
 
-	this.appGroupButtons.settingButton = mouseAppGroupTab;
 }
 
 

src/web/client/main_menu.html

@@ -62,6 +62,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/tab_layout.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>