Add: animal sprite in the typing button

src/game/lib/animal.js

@@ -1,5 +1,8 @@
 function Animal(type, index, x, y) {
 	this.animalType = type;
+	this.animalIndex = index;
+
+	this.species = Animal.SPECIES_DATA[index];
 
 	this.sprite = null;
 	this.posX = x;
@@ -7,13 +10,53 @@ function Animal(type, index, x, y) {
 
 	this.sprite = game.add.sprite(this.posX, this.posY, "animals");
 	this.sprite.anchor.set(0.5);
-	this.sprite.animations.add("stand", [index * 2]);
-	this.sprite.animations.play("stand");
-	this.sprite.animations.add("run", [index * 2, index * 2 + 1]);
 
-	this.species = Animal.SPECIES_DATA[index];
+	// for(var i = 0; i < Animal.SPECIES_DATA.length; i++) {
+	// for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) {
+	// 	var animalName = this.getSpeciesName(i);
+
+	// 	var standAnimationName = animalName + "_stand";
+	// 	this.sprite.animations.add(standAnimationName, i * 2);
+
+	// 	var runAnimationName = animalName + "_run";
+	// 	this.sprite.animations.add(runAnimationName, i * 2, i * 2 + 1);
+	// }
+
+	this.sprite.frame = this.animalIndex * 2;
+
+	// game.time.events.add(Phaser.Timer.SECOND * 5, this.showStandAnimation, this);
+
+	// var standAnimationName = this.getSpeciesName(this.animalIndex) + "_stand";
+	// console.log(standAnimationName);
+	// this.sprite.animations.play(standAnimationName);
+	// this.sprite.animations.play("cheetah_stand");
+
+	this.sprite.animations.add("stand", [index * 2]);
+	// this.sprite.animations.play("stand");
+	this.sprite.animations.add("run", [index * 2, index * 2 + 1]);
 }
 
+/*
+Animal.prototype.showStandAnimation = function() {
+	var standAnimationName = this.getSpeciesName(this.animalIndex) + "_stand";
+	console.log(standAnimationName);
+	this.sprite.animations.play(standAnimationName);
+}
+*/
+
+Animal.prototype.getSpeciesName = function(animalIndex) {
+	return Animal.SPECIES_DATA[animalIndex].species;
+}
+
+Animal.prototype.chagneStandAnimation = function(animalIndex) {
+	// this.sprite.animations.play(this.getSpeciesName(this.animalIndex) + "stand");
+	this.animalIndex = animalIndex;
+	this.sprite.frame = this.animalIndex * 2;
+}
+
+Animal.prototype.changeRunAnimation = function(animalIndex) {
+	this.sprite.animations.play(this.getSpeciesName(this.animalIndex) + "run");
+}
 
 Animal.prototype.setScale = function(value) {
 	this.sprite.scale.set(value);
@@ -32,14 +75,14 @@ Animal.prototype.setAlpha = function(value) {
 Animal.prototype.tweenAnimation = function(animationType) {
 	switch(animationType) {
 		case Animal.ANIMATION_TYPE_CHANGE:
-		this.sprite.width = 100;
+		this.sprite.width = Animal.SPRITE_WIDTH;
-		this.sprite.height = 100;
+		this.sprite.height = Animal.SPRITE_HEIGHT;
 		game.add.tween(this.sprite).to( { width: 50, height: 50 }, 500, Phaser.Easing.Bounce.Out, true);
 		break;
 
 		case Animal.ANIMATION_TYPE_DAMAGE:
-		this.sprite.width = 100;
+		this.sprite.width = Animal.SPRITE_WIDTH;
-		this.sprite.height = 50;
+		this.sprite.height = Animal.SPRITE_DAMAGE_HEIGHT;
 		game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Bounce.In, true);
 		// game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Elastic.Out, true);
 		break;
@@ -47,10 +90,14 @@ Animal.prototype.tweenAnimation = function(animationType) {
 }
 
 Animal.prototype.startAnimation = function(species) {
+	// var runAnimationName = this.getSpeciesName(this.animalIn) + "_run";
+	// this.sprite.animations.play(runAnimationName, this.species.fps, true);
 	this.sprite.animations.play("run", this.species.fps, true);
 }
 
 Animal.prototype.stopAnimation = function() {
+	// var runAnimationName = this.getSpeciesName(this.animalIn) + "_run";
+	// this.sprite.animations.stop(runAnimationName);
 	this.sprite.animations.stop("run");
 }
 
@@ -63,6 +110,15 @@ Animal.prototype.hide = function() {
 }
 
 
+Animal.animalIndexByRecord = function(record, gameType) {
+	for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) {
+		if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType))
+			return i;
+	}
+
+	return 0;
+}
+
 Animal.animalLevelIDByRecord = function(record, gameType) {
 	for(var i = Animal.SPECIES_DATA.length - 1; i > 0; i--) {
 		if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType))
@@ -72,15 +128,19 @@ Animal.animalLevelIDByRecord = function(record, gameType) {
 	return 0;
 }
 
-Animal.getAnimalFingerPositionTypingCount = function(animalIndex) {
+Animal.getAnimalTypingPracticeCount = function(animalIndex) {
-	return Animal.SPECIES_DATA[animalIndex].fingerPositionTypingCount;
+	return Animal.SPECIES_DATA[animalIndex].typingPracticeCount;
+}
+
+Animal.getAnimalTypingTestCount = function(animalIndex) {
+	return Animal.SPECIES_DATA[animalIndex].typingTestCount;
 }
 
 Animal.typingCount = function(speciesData, gameType) {
-	if(gameType === Animal.TYPE_FINGER_POSITION)
+	if(gameType === Animal.TYPE_PRACTICE)
-		return speciesData.fingerPositionTypingCount;
+		return speciesData.typingPracticeCount;
 	else
-		return speciesData.practiceTypingCount;
+		return speciesData.typingTestCount;
 }
 
 
@@ -99,22 +159,26 @@ Animal.TYPE_EXAM				= 1;
 Animal.ANIMATION_TYPE_CHANGE	= 0;
 Animal.ANIMATION_TYPE_DAMAGE	= 1;
 
+Animal.SPRITE_WIDTH				= 100;
+Animal.SPRITE_DAMAGE_WIDTH		= 50;
+Animal.SPRITE_HEIGHT			= 100;
+
 Animal.HIDE_POS_Y				= 1000;
 
 Animal.SPECIES_DATA = [
-	{ "species" : "snail",		"fps" : 1,		"fingerPositionTypingCount" : 0,		"practiceTypingCount" : 0 },
+	{ "species" : "snail",		"fps" : 1,		"typingPracticeCount" : 0,			"typingTestCount" : 0 },
-	{ "species" : "turtle",		"fps" : 2,		"fingerPositionTypingCount" : 5,		"practiceTypingCount" : 20 },
+	{ "species" : "turtle",		"fps" : 2,		"typingPracticeCount" : 5,			"typingTestCount" : 20 },
-	{ "species" : "chick",		"fps" : 5,		"fingerPositionTypingCount" : 10,		"practiceTypingCount" : 40 },
+	{ "species" : "chick",		"fps" : 5,		"typingPracticeCount" : 10,			"typingTestCount" : 40 },
-	{ "species" : "mouse",		"fps" : 12,		"fingerPositionTypingCount" : 15,		"practiceTypingCount" : 70 },
+	{ "species" : "mouse",		"fps" : 12,		"typingPracticeCount" : 15,			"typingTestCount" : 70 },
-	{ "species" : "chicken",	"fps" : 11,		"fingerPositionTypingCount" : 20,		"practiceTypingCount" : 100 },
+	{ "species" : "chicken",	"fps" : 11,		"typingPracticeCount" : 20,			"typingTestCount" : 100 },
-	{ "species" : "pig",		"fps" : 5,		"fingerPositionTypingCount" : 25,		"practiceTypingCount" : 150 },
+	{ "species" : "pig",		"fps" : 5,		"typingPracticeCount" : 25,			"typingTestCount" : 150 },
-	{ "species" : "cat",		"fps" : 10,		"fingerPositionTypingCount" : 30,		"practiceTypingCount" : 200 },
+	{ "species" : "cat",		"fps" : 10,		"typingPracticeCount" : 30,			"typingTestCount" : 200 },
-	{ "species" : "deer",		"fps" : 9,		"fingerPositionTypingCount" : 40,		"practiceTypingCount" : 250 },
+	{ "species" : "deer",		"fps" : 9,		"typingPracticeCount" : 40,			"typingTestCount" : 250 },
-	{ "species" : "kangaroo",	"fps" : 4,		"fingerPositionTypingCount" : 50,		"practiceTypingCount" : 300 },
+	{ "species" : "kangaroo",	"fps" : 4,		"typingPracticeCount" : 50,			"typingTestCount" : 300 },
-	{ "species" : "rabbit",		"fps" : 12,		"fingerPositionTypingCount" : 60,		"practiceTypingCount" : 350 },
+	{ "species" : "rabbit",		"fps" : 12,		"typingPracticeCount" : 60,			"typingTestCount" : 350 },
-	{ "species" : "dog",		"fps" : 9,		"fingerPositionTypingCount" : 70,		"practiceTypingCount" : 400 },
+	{ "species" : "dog",		"fps" : 9,		"typingPracticeCount" : 70,			"typingTestCount" : 400 },
-	{ "species" : "zebra",		"fps" : 12,		"fingerPositionTypingCount" : 80,		"practiceTypingCount" : 450 },
+	{ "species" : "zebra",		"fps" : 12,		"typingPracticeCount" : 80,			"typingTestCount" : 450 },
-	{ "species" : "ostrich",	"fps" : 15,		"fingerPositionTypingCount" : 90,		"practiceTypingCount" : 500 },
+	{ "species" : "ostrich",	"fps" : 15,		"typingPracticeCount" : 90,			"typingTestCount" : 500 },
-	{ "species" : "lion",		"fps" : 10,		"fingerPositionTypingCount" : 100,		"practiceTypingCount" : 600 },
+	{ "species" : "lion",		"fps" : 10,		"typingPracticeCount" : 100,		"typingTestCount" : 600 },
-	{ "species" : "cheetah",	"fps" : 15,		"fingerPositionTypingCount" : 110,		"practiceTypingCount" : 700 }
+	{ "species" : "cheetah",	"fps" : 15,		"typingPracticeCount" : 110,		"typingTestCount" : 700 }
 ];

src/game/lib/animal_record_list.js

@@ -83,9 +83,9 @@ AnimalRecordList.prototype.printScore = function(recordType) {
 
 		var typingCountWithUnit = "";
 		if(recordType == Animal.TYPE_PRACTICE)
-			typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.fingerPositionTypingCount, 1);
+			typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.typingPracticeCount, 1);
 		else
-			typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.practiceTypingCount, 1);
+			typingCountWithUnit = RecordUtil.getRecordValueWithUnit(animalData.typingTestCount, 1);
 		recordText.text = typingCountWithUnit;
 
 		/*

src/game/lib/color/main_color.js

@@ -17,6 +17,10 @@ MainColor.DARK_CHOCO_HEX		= 0x402D21;
 MainColor.LIGHTER_CHOCO_HEX		= 0xE6A277;
 
 
+
+////////////////////
+// https://www.rapidtables.com/web/color/RGB_Color.html
+
 // BASIC
 MainColor.MAROON_STRING				= "#800000";
 MainColor.DARK_RED_STRING			= "#8B0000";

src/game/lib/flat_button/typing_app_button.js

@@ -4,6 +4,9 @@ TypingAppButton.constructor = TypingAppButton;
 function TypingAppButton(x, y) {
 	this.appData = null;
 
+	this.appGroup = 0;
+	this.appType = Animal.TYPE_PRACTICE;
+
 	var setting = new ButtonSetting(x, y, TypingAppButton.WIDTH, TypingAppButton.HEIGHT);
 	setting.setStrokeWidth(0);
 	setting.setRound(30);
@@ -48,13 +51,35 @@ function TypingAppButton(x, y) {
 	// this.setShortcutText("Setting");
 
 	// this.setInputEnabled(this.appData.activated);
+
+	this.animalSprite = new Animal(
+		Animal.TYPE_ICON, 0,
+		Animal.SPRITE_WIDTH / 2, TypingAppButton.HEIGHT / 2
+	);
+	this.buttonSprite.addChild(this.animalSprite.sprite);
 }
 
+TypingAppButton.prototype.updateAnimalSprite = function(highestRecord) {
+	// console.log("highestRecord : " + highestRecord + ", appType : " + this.appType);
+	var animalIndex = Animal.animalIndexByRecord(highestRecord, this.appType);
+	// console.log("animalIndex : " + animalIndex);
+	this.animalSprite.chagneStandAnimation(animalIndex);
+}
+
+
 TypingAppButton.prototype.updateAppData = function(appData) {
 	this.appData = appData;
 
+	this.appGroup = this.appData.appGroup;
+	if(this.appGroup === 0)
+		this.appType = Animal.TYPE_PRACTICE;
+	else
+		this.appType = Animal.TYPE_TEST;
+
+	// console.log(this.appData);
 	this.setMainText(this.appData.koreanName);
 	this.setInputEnabled(this.appData.activated);
+	this.updateAnimalSprite(this.appData.highestRecord);
 }
 
 TypingAppButton.prototype.clickEvent = function() {
@@ -86,20 +111,20 @@ TypingAppButton.TYPING_APP_KOREAN_NAME		= "타자검정";
 */
 
 
-TypingAppButton.WIDTH	= 460;
+TypingAppButton.WIDTH	= 400;
 TypingAppButton.HEIGHT	= 80;
 
 TypingAppButton.STROKE_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
 TypingAppButton.STROKE_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_HEX;
 TypingAppButton.STROKE_COLOR_DOWN_HEX			= MainColor.DARK_CHOCO_HEX;
-TypingAppButton.STROKE_COLOR_DISABLED_HEX		= MainColor.DARK_CHOCO_HEX;
+TypingAppButton.STROKE_COLOR_DISABLED_HEX		= MainColor.LIGHT_GRAY_HEX;	// MainColor.ROSY_BROWN_HEX;
 
 TypingAppButton.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
 TypingAppButton.BUTTON_COLOR_OVER_HEX			= MainColor.LIGHTER_CHOCO_HEX;
 TypingAppButton.BUTTON_COLOR_DOWN_HEX			= MainColor.LIGHT_CHOCO_HEX;
-TypingAppButton.BUTTON_COLOR_DISABLED_HEX		= MainColor.BLACK_HEX;
+TypingAppButton.BUTTON_COLOR_DISABLED_HEX		= MainColor.LIGHT_GRAY_HEX;	// MainColor.ROSY_BROWN_HEX;
 
-TypingAppButton.TEXT_COLOR_OUT_HEX			= MainColor.WHITE_STRING;
+TypingAppButton.TEXT_COLOR_OUT_HEX				= MainColor.LINEN_STRING;
-TypingAppButton.TEXT_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_STRING;
+TypingAppButton.TEXT_COLOR_OVER_HEX				= MainColor.DARK_CHOCO_STRING;
-TypingAppButton.TEXT_COLOR_DOWN_HEX			= MainColor.LIGHTER_CHOCO_STRING;
+TypingAppButton.TEXT_COLOR_DOWN_HEX				= MainColor.LIGHTER_CHOCO_STRING;
-TypingAppButton.TEXT_COLOR_DISABLED_HEX		= MainColor.GREY_STRING;
+TypingAppButton.TEXT_COLOR_DISABLED_HEX			= MainColor.DARK_GRAY_STRING;	// MainColor.THISTLE_STRING;

src/game/main_menu/main_menu.js

@@ -169,10 +169,14 @@ MainMenu.prototype.loadAppData = function() {
 }
 
 MainMenu.prototype.makeTypingAppButtons = function() {
-	var offsetX = 50;
+	var offsetX = 95;
+	var startY = 190;
+	var offsetY = 115;
+
+	var buttonHalfWidth = TypingAppButton.WIDTH / 2;
 	for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
-		var x = (i % 2) === 0 ? TypingAppButton.WIDTH / 2 + offsetX : 800;
+		var x = (i % 2) === 0 ? buttonHalfWidth + offsetX : GAME_SCREEN_SIZE.x - buttonHalfWidth - offsetX;
-		var y = 200 + Math.floor(i / 2) * 100;
+		var y = startY + Math.floor(i / 2) * offsetY;
 
 		var button = new TypingAppButton(x, y);
 		button.setActive(false);
@@ -187,11 +191,11 @@ MainMenu.prototype.hideAllButtons = function() {
 MainMenu.prototype.updateAppButtons = function(appGroup, appData) {
 	switch(parseInt(appGroup)) {
 		case MainMenu.APP_GROUP_TYPING_PRACTICE:
-		this.updateTypingPracticeAppButtons(appData);
+		this.updateTypingPracticeAppButtons(appGroup, appData);
 		break;
 
 		case MainMenu.APP_GROUP_TYPING_TEST:
-		this.updateTypingTestAppButtons(appData);
+		this.updateTypingTestAppButtons(appGroup, appData);
 		break;
 
 		case MainMenu.APP_GROUP_TYPING_EXAM:
@@ -231,14 +235,14 @@ MainMenu.prototype.isActivatedApp = function(appID, activeAppList) {
 MainMenu.prototype.getAppHighestRecord = function(appID, highestRecordList) {
 	var count = highestRecordList.length;
 	for(var i = 0; i < count; i++) {
-		if(appID === highestRecordList.appID)
+		if(appID === highestRecordList[i].appID)
 			return highestRecordList[i].highestRecord;
 	}
 
 	return 0;
 }
 
-MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) {
+MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) {
 	var appDataList = new Array();
 
 	var appList = appData.appList;
@@ -248,6 +252,7 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) {
 	var count = appList.length;
 	for(var appDataIndex = 0; appDataIndex < count; appDataIndex++) {
 		var data = {};
+		data["appGroup"] = appGroup;
 		data["appID"] = appList[appDataIndex].appID;
 		data["appName"] = appList[appDataIndex].appName;
 		data["koreanName"] = appList[appDataIndex].koreanName;
@@ -259,12 +264,12 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appData) {
 	return appDataList;
 }
 
-MainMenu.prototype.updateTypingPracticeAppButtons = function(appData) {
+MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData) {
 	console.log("updateTypingPracticeAppButtons");
 	this.clearTypingAppButtons();
 
 	var buttonIndex = 0;
-	var appDataList = this.makeTypingPracticeAppDataList(appData);
+	var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData);
 	var count = appDataList.length;
 	for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
 		var button = this.typingAppButtons[i];
@@ -277,9 +282,22 @@ MainMenu.prototype.updateTypingPracticeAppButtons = function(appData) {
 	}
 }
 
-MainMenu.prototype.updateTypingTestAppButtons = function(appData) {
+MainMenu.prototype.updateTypingTestAppButtons = function(appGroup, appData) {
 	console.log("updateTypingTestAppButtons");
-	console.log(appData);
+	this.clearTypingAppButtons();
+
+	var buttonIndex = 0;
+	var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData);
+	var count = appDataList.length;
+	for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
+		var button = this.typingAppButtons[i];
+		if(i < count) {
+			button.setActive(true);
+			button.updateAppData(appDataList[i]);
+		} else {
+			button.setActive(false);
+		}
+	}
 }
 
 MainMenu.prototype.updateTypingExamAppButtons = function(appData) {