Add: TypingExamButton

src/game/lib/flat_button/basic_button.js

@@ -144,9 +144,6 @@ BasicButton.prototype.makeMainText = function() {
 	var width = this.setting.width / 2;
 	var height = this.setting.height / 2;
 
-	// var mainText = game.add.text(0, 0, textContent, this.setting.fontStyle)
-	// 	.setTextBounds(0, 0, width, this.setting.height);
-
 	var mainText = game.add.text(width, height, "");
 	mainText.anchor.set(0.5);
 	mainText.fontSize = this.setting.fontSize;

src/game/lib/flat_button/typing_exam_button.js

@@ -0,0 +1,233 @@
+TypingExamButton.prototype = Object.create(BasicButton.prototype);
+TypingExamButton.constructor = TypingExamButton;
+
+function TypingExamButton(x, y) {
+	this.appData = null;
+
+	this.appType = Animal.TYPE_PRACTICE;
+	this.writingID = -1;
+	this.filename = "";
+
+	var setting = new ButtonSetting(x, y, TypingExamButton.WIDTH, TypingExamButton.HEIGHT);
+	setting.setStrokeWidth(0);
+	setting.setRound(30);
+	// setting.setFont("Nanum Brush Script");
+	setting.setFont("Nanum Gothic");
+	setting.setFontSize(20);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.setStrokeColor(
+		TypingExamButton.STROKE_COLOR_OUT_HEX,
+		TypingExamButton.STROKE_COLOR_OVER_HEX,
+		TypingExamButton.STROKE_COLOR_DOWN_HEX,
+		TypingExamButton.STROKE_COLOR_DISABLED_HEX
+	);
+	setting.setButtonColor(
+		TypingExamButton.BUTTON_COLOR_OUT_HEX,
+		TypingExamButton.BUTTON_COLOR_OVER_HEX,
+		TypingExamButton.BUTTON_COLOR_DOWN_HEX,
+		TypingExamButton.BUTTON_COLOR_DISABLED_HEX
+	);
+	setting.setIconColor(
+		TypingExamButton.BUTTON_COLOR_OUT_HEX,
+		TypingExamButton.BUTTON_COLOR_OVER_HEX,
+		TypingExamButton.BUTTON_COLOR_DOWN_HEX,
+		TypingExamButton.BUTTON_COLOR_DISABLED_HEX
+	);
+	setting.setTextColor(
+		TypingExamButton.TEXT_COLOR_OUT_HEX,
+		TypingExamButton.TEXT_COLOR_OVER_HEX,
+		TypingExamButton.TEXT_COLOR_DOWN_HEX,
+		TypingExamButton.TEXT_COLOR_DISABLED_HEX
+	);
+
+	BasicButton.call(this, setting, this.clickEvent);
+
+	this.mainText.anchor.set(0, 0.5);
+	this.mainText.x = 100;
+	// this.setMainText("");
+	// this.addIcon("tile_choco");
+	// this.setIconSize(40);
+	// this.setShortcutText("[단축키]");
+
+	this.letterCountText = this.makeLetterCountText();
+	this.buttonSprite.addChild(this.letterCountText);
+
+	this.writingNameText = this.makeWritingNameText();
+	this.buttonSprite.addChild(this.writingNameText);
+
+	this.animal = new Animal(
+		Animal.TYPE_ICON, 0,
+		TypingExamButton.WIDTH - Animal.SPRITE_WIDTH / 2, TypingExamButton.HEIGHT / 2
+	);
+	this.buttonSprite.addChild(this.animal.sprite);
+}
+
+
+TypingExamButton.prototype.makeLetterCountText = function() {
+	var letterCountText = game.add.text(20, this.mainText.y, "");
+	letterCountText.anchor.set(0, 0.5);
+	letterCountText.font = this.setting.font;
+	letterCountText.fontSize = 14;	// this.setting.fontSize;
+	letterCountText.style.fill = "white";
+
+	// letterCountText.style.fill = "#0xFFFFFF";
+	// letterCountText.addColor("0xffffff", 0);
+	// mainText.fontWeight = "bolder";
+	letterCountText.lineSpacing = ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+
+	return letterCountText;
+}
+
+TypingExamButton.prototype.setLetterCountText = function(letterCount) {
+	this.letterCountText.y = this.mainText.y;
+	if(typeof(letterCount) === "undefined")
+		this.letterCountText.text = "";
+	else
+		this.letterCountText.text = "( " + NumberUtil.numberWithCommas(letterCount) + "자 )";
+}
+
+TypingExamButton.prototype.makeWritingNameText = function() {
+	var textWidth = 250;
+
+	var style = { };
+	style.boundsAlignH = "left";
+	style.boundsAlignV = "middle"
+	style.wordWrap = true;
+	style.wordWrapWidth = textWidth;
+	style.font = this.setting.font;
+	style.fontSize = this.setting.fontSize;
+	style.fill = "white";
+	// style.backgroundColor = "black";
+
+	var writingNameText = game.add.text(100, 0, "", style);
+	writingNameText.anchor.set(0, 0);
+	writingNameText.setTextBounds(0, -1 * TypingExamButton.HEIGHT / 2, textWidth, TypingExamButton.HEIGHT);
+
+	// mainText.fontWeight = "bolder";
+	// writingNameText.lineSpacing = ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+
+	return writingNameText;
+}
+
+TypingExamButton.prototype.setWritingNameText = function(writingName) {
+	this.writingNameText.y = this.mainText.y;
+	this.writingNameText.text = writingName;
+}
+
+TypingExamButton.prototype.updateAnimal = function(highestRecord) {
+	var animalIndex = Animal.animalIndexByRecord(highestRecord, this.appType);
+	this.animal.chagneStandAnimation(animalIndex);
+	this.animal.sprite.y = TypingExamButton.HEIGHT / 2 - Animal.getOffsetY(animalIndex);
+}
+
+TypingExamButton.prototype.setInputEnabled = function(isEnabled) {
+	this.strokeSprite.inputEnabled = isEnabled;
+	this.buttonSprite.inputEnabled = isEnabled;
+
+	if(isEnabled === true) {
+		this.mouseOut();
+		// this.keyboardSprite.tint = MainColor.WHITE_HEX;
+		// this.animal.sprite.tint = MainColor.WHITE_HEX;
+		this.animal.sprite.alpha = 1;
+	} else {
+		this.buttonDisabled();
+		// this.keyboardSprite.tint = MainColor.DIM_GRAY_HEX;
+		// this.animal.sprite.tint = MainColor.DIM_GRAY_HEX;
+		this.animal.sprite.alpha = 0.3;
+	}
+}
+
+TypingExamButton.prototype.setActive = function(flag) {
+	this.setInputEnabled(flag);
+
+	if(flag) {
+		this.buttonSprite.alpha = 1;
+		this.strokeSprite.alpha = 1;
+		this.animal.sprite.alpha = 1;
+	} else {
+		this.buttonSprite.alpha = 0;
+		this.strokeSprite.alpha = 0;
+		this.animal.sprite.alpha = 0;
+	}
+}
+
+TypingExamButton.prototype.showEmptyDisabled = function() {
+	this.setInputEnabled(false);
+
+	this.buttonSprite.alpha = 0;
+	this.strokeSprite.alpha = 1;
+	this.strokeSprite.tint = MainColor.SADDLE_BROWN_HEX;
+}
+
+TypingExamButton.prototype.updateAppData = function(appData) {
+	this.appData = appData;
+
+	this.appType = Animal.TYPE_TEST;
+
+	// console.log(this.appData);
+	this.writingID = this.appData.writingID;
+	this.filename = this.appData.filename;
+
+	// this.setMainText(this.appData.name);
+	this.setLetterCountText(this.appData.letterCount);
+	this.setWritingNameText(this.appData.name);
+	this.setInputEnabled(this.appData.activated);
+	this.updateAnimal(this.appData.highestRecord);
+}
+
+TypingExamButton.prototype.clickEvent = function() {
+	console.log(this.writingID);
+	console.log(this.filename);
+	/*
+	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';
+	*/
+}
+
+/*
+TypingExamButton.prototype.onClick = function() {
+	sessionStorageManager.setPlayingAppID(TypingExamButton.TYPING_APP_ID);
+	sessionStorageManager.setPlayingAppName(TypingExamButton.TYPING_APP_NAME);
+	sessionStorageManager.setPlayingAppKoreanName(TypingExamButton.TYPING_APP_KOREAN_NAME);
+	sessionStorageManager.setWritingID(this.writingData.writingID);
+	// location.href = '../../web/client/typing_exam.html';
+	location.href = '../../web/client/start.html';
+	// printSessionStorage();
+}
+
+
+TypingExamButton.TYPING_APP_ID				= 200;
+TypingExamButton.TYPING_APP_NAME				= "typing_exam";
+TypingExamButton.TYPING_APP_KOREAN_NAME		= "타자검정";
+*/
+
+
+TypingExamButton.loadResources = function() {
+	game.load.spritesheet('keyboards', '../../../resources/image/ui/keyboard/keyboards.png', 120, 120);
+}
+
+
+TypingExamButton.WIDTH	= 400;
+TypingExamButton.HEIGHT	= 80;
+
+TypingExamButton.STROKE_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
+TypingExamButton.STROKE_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_HEX;
+TypingExamButton.STROKE_COLOR_DOWN_HEX			= MainColor.DARK_CHOCO_HEX;
+TypingExamButton.STROKE_COLOR_DISABLED_HEX		= MainColor.LIGHT_GRAY_HEX;	// MainColor.ROSY_BROWN_HEX;
+
+TypingExamButton.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
+TypingExamButton.BUTTON_COLOR_OVER_HEX			= MainColor.LIGHTER_CHOCO_HEX;
+TypingExamButton.BUTTON_COLOR_DOWN_HEX			= MainColor.LIGHT_CHOCO_HEX;
+TypingExamButton.BUTTON_COLOR_DISABLED_HEX		= MainColor.LIGHT_GRAY_HEX;	// MainColor.ROSY_BROWN_HEX;
+
+TypingExamButton.TEXT_COLOR_OUT_HEX				= MainColor.LINEN_STRING;
+TypingExamButton.TEXT_COLOR_OVER_HEX				= MainColor.DARK_CHOCO_STRING;
+TypingExamButton.TEXT_COLOR_DOWN_HEX				= MainColor.LIGHTER_CHOCO_STRING;
+TypingExamButton.TEXT_COLOR_DISABLED_HEX			= MainColor.DARK_GRAY_STRING;	// MainColor.THISTLE_STRING;

src/game/main_menu/main_menu.js

@@ -75,12 +75,13 @@ MainMenu.prototype.create = function() {
 
 	this.typingAppButtons = new Array();
 	this.makeTypingAppButtons();
-	this.writingAppButtons = new Array();
+	this.typingExamButtons = new Array();
+	this.makeTypingExamButtons();
 	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.selectedAppGroup = MainMenu.APP_GROUP_TYPING_EXAM;
 	this.selectedLanguage = MainMenu.LANGUAGE_KOREAN;
 	// this.animalRecordList.printScore(Animal.TYPE_PRACTICE);
 }
@@ -195,6 +196,22 @@ MainMenu.prototype.makeTypingAppButtons = function() {
 	}
 }
 
+MainMenu.prototype.makeTypingExamButtons = function() {
+	var offsetX = 95;
+	var startY = 190;
+	var offsetY = 110;
+
+	var buttonHalfWidth = TypingExamButton.WIDTH / 2;
+	for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
+		var x = (i % 2) === 0 ? buttonHalfWidth + offsetX : GAME_SCREEN_SIZE.x - buttonHalfWidth - offsetX;
+		var y = startY + Math.floor(i / 2) * offsetY;
+
+		var button = new TypingExamButton(x, y);
+		// button.setActive(false);
+		this.typingExamButtons.push(button);
+	}
+}
+
 MainMenu.prototype.makePlayAppButtons = function() {
 	var startX = 150;
 	var startY = 300;
@@ -219,6 +236,10 @@ MainMenu.prototype.hideAllButtons = function() {
 		this.typingAppButtons[i].setActive(false);
 	}
 
+	for(var i = 0; i < MainMenu.TYPING_EXAM_COUNT; i++) {
+		this.typingExamButtons[i].setActive(false);
+	}
+
 	for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) {
 		this.playAppButtons[i].setActive(false);
 	}
@@ -242,12 +263,10 @@ MainMenu.prototype.updateAppButtons = function(appGroup, appData) {
 
 		case MainMenu.APP_GROUP_TYPING_PLAY:
 		this.updatePlayAppButtons(appData);
-		// this.updateTypingPlayAppButtons(appData);
 		break;
 
 		case MainMenu.APP_GROUP_MOUSE_PLAY:
 		this.updatePlayAppButtons(appData);
-		// this.updateMousePlayAppButtons(appData);
 		break;
 
 		default:
@@ -265,6 +284,16 @@ MainMenu.prototype.isActivatedApp = function(appID, activeAppList) {
 	return false;
 }
 
+MainMenu.prototype.isActivatedWriting = function(writingID, activeAppList) {
+	var count = activeAppList.length;
+	for(var i = 0; i < count; i++) {
+		if(writingID === activeAppList[i].writingID)
+			return true;
+	}
+
+	return false;
+}
+
 MainMenu.prototype.getAppHighestRecord = function(appID, highestRecordList) {
 	var count = highestRecordList.length;
 	for(var i = 0; i < count; i++) {
@@ -275,6 +304,16 @@ MainMenu.prototype.getAppHighestRecord = function(appID, highestRecordList) {
 	return 0;
 }
 
+MainMenu.prototype.getWritingHighestRecord = function(writingID, highestRecordList) {
+	var count = highestRecordList.length;
+	for(var i = 0; i < count; i++) {
+		if(writingID === highestRecordList[i].writingID)
+			return highestRecordList[i].highestRecord;
+	}
+
+	return 0;
+}
+
 MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) {
 	var appDataList = new Array();
 
@@ -297,6 +336,28 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) {
 	return appDataList;
 }
 
+MainMenu.prototype.makeTypingExamAppDataList = 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["writingID"] = appList[appDataIndex].writingID;
+		data["name"] = appList[appDataIndex].name;
+		data["filename"] = appList[appDataIndex].filename;
+		data["letterCount"] = appList[appDataIndex].letterCount;
+		data["activated"] = this.isActivatedWriting(appList[appDataIndex].writingID, appData.activeAppList);
+		data["highestRecord"] = this.getWritingHighestRecord(appList[appDataIndex].writingID, appData.highestRecordList);
+		appDataList.push(data);
+	}
+
+	return appDataList;
+}
+
 MainMenu.prototype.makePlayAppDataList = function(appData) {
 	var appDataList = new Array();
 
@@ -357,6 +418,21 @@ MainMenu.prototype.updateTypingTestAppButtons = function(appGroup, appData) {
 MainMenu.prototype.updateTypingExamAppButtons = function(appData) {
 	console.log("updateTypingExamAppButtons");
 	console.log(appData);
+
+	var buttonIndex = 0;
+	var appDataList = this.makeTypingExamAppDataList(appData);
+	console.log(appDataList);
+	var count = appDataList.length;
+	for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
+		var button = this.typingExamButtons[i];
+		if(i < count) {
+			button.setActive(true);
+			button.updateAppData(appDataList[i]);
+		} else {
+			button.setActive(true);
+			button.showEmptyDisabled();
+		}
+	}
 }
 
 MainMenu.prototype.updatePlayAppButtons = function(appData) {
@@ -678,4 +754,5 @@ MainMenu.LANGUAGE_KOREAN	= 0;
 MainMenu.LANGUAGE_ENGLISH	= 1;
 
 MainMenu.TYPING_APP_COUNT	= 10;
+MainMenu.TYPING_EXAM_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/typing_exam_button.js"></script>
 		<script src="../../game/lib/flat_button/play_app_button.js"></script>
 
 		<script src="../../game/lib/animal.js"></script>

test/tdd.js

@@ -146,7 +146,7 @@ QUnit.test( "AppList", function( assert ) {
 			(function(jsonData) {
 				assert.equal(jsonData.appGroup, appGroup, "#3 appGroup : typing play, Korean");
 				assert.equal(jsonData.appData.appList.length, 2, "appList");
-				assert.equal(jsonData.appData.activeAppList.length, 2, "activeAppList");
+				assert.equal(jsonData.appData.activeAppList.length, 1, "activeAppList");
 				assert.equal(jsonData.appData.highestRecordList.length, 2, "highestRecordList");
 				asyncTypingPlayKorean();
 			}).bind(this),
@@ -167,7 +167,7 @@ QUnit.test( "AppList", function( assert ) {
 			(function(jsonData) {
 				assert.equal(jsonData.appGroup, appGroup, "#3 appGroup : typing play, English");
 				assert.equal(jsonData.appData.appList.length, 2, "appList");
-				assert.equal(jsonData.appData.activeAppList.length, 2, "activeAppList");
+				assert.equal(jsonData.appData.activeAppList.length, 1, "activeAppList");
 				assert.equal(jsonData.appData.highestRecordList.length, 2, "highestRecordList");
 				asyncTypingPlayEnglish();
 			}).bind(this),