Add: PlayAppButton

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)
@@ -349,5 +349,3 @@ BasicButton.prototype.setLineSpacing = function(spacingInPixels) {
 
 BasicButton.NONE_ICON			= "";
 BasicButton.NONE_BUTTON_TEXT	= "";
-
-BasicButton.SHORTCUT_TEXT_FONTSIZE	= 12;

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_TEXT_LINE_SPACING_PX		= -10;	// in pixel
-ButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
+ButtonSetting.DEFAULT_STROKE_WIDTH_PX			= 5;	// in pixel
+
+ButtonSetting.DEFAULT_MAIN_TEXT_FONTSIZE		= 10;
+ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE	= 12;

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;

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) {
+MainMenu.prototype.updatePlayAppButtons = function(appData) {
-	console.log("updateTypingPlayAppButtons");
+	console.log("updatePlayAppButtons");
-	console.log(appData);
-}
 
-MainMenu.prototype.updateMousePlayAppButtons = function(appData) {
+	var buttonIndex = 0;
-	console.log("updateMousePlayAppButtons");
+	var appDataList = this.makePlayAppDataList(appData);
-	console.log(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();
+		}
+	}
 }
 
 
@@ -622,3 +669,4 @@ MainMenu.LANGUAGE_KOREAN	= 0;
 MainMenu.LANGUAGE_ENGLISH	= 1;
 
 MainMenu.TYPING_APP_COUNT	= 10;
+MainMenu.PLAY_APP_COUNT		= 10;

src/web/client/main_menu.html

@@ -66,6 +66,7 @@
 		<script src="../../game/lib/flat_button/language_tab.js"></script>
 		<script src="../../game/lib/flat_button/tab_layout.js"></script>
 		<script src="../../game/lib/flat_button/typing_app_button.js"></script>
+		<script src="../../game/lib/flat_button/play_app_button.js"></script>
 
 		<script src="../../game/lib/animal.js"></script>
 		<script src="../../game/lib/animal_list.js"></script>