Add: keyboard icon

src/game/lib/animal.js

@@ -143,6 +143,9 @@ Animal.typingCount = function(speciesData, gameType) {
 		return speciesData.typingTestCount;
 }
 
+Animal.getOffsetY = function(animalIndex) {
+	return Animal.SPECIES_DATA[animalIndex].offsetY;
+}
 
 Animal.loadResources = function() {
 	game.load.spritesheet('animals', '../../../resources/image/character/animal/animals.png', 50, 50);
@@ -166,19 +169,19 @@ Animal.SPRITE_HEIGHT			= 100;
 Animal.HIDE_POS_Y				= 1000;
 
 Animal.SPECIES_DATA = [
-	{ "species" : "snail",		"fps" : 1,		"typingPracticeCount" : 0,			"typingTestCount" : 0 },
+	{ "species" : "snail",		"fps" : 1,	"offsetY" : 15,	"typingPracticeCount" : 0,			"typingTestCount" : 0 },
-	{ "species" : "turtle",		"fps" : 2,		"typingPracticeCount" : 5,			"typingTestCount" : 20 },
+	{ "species" : "turtle",		"fps" : 2,	"offsetY" : 13,	"typingPracticeCount" : 5,			"typingTestCount" : 20 },
-	{ "species" : "chick",		"fps" : 5,		"typingPracticeCount" : 10,			"typingTestCount" : 40 },
+	{ "species" : "chick",		"fps" : 5,	"offsetY" : 14,	"typingPracticeCount" : 10,			"typingTestCount" : 40 },
-	{ "species" : "mouse",		"fps" : 12,		"typingPracticeCount" : 15,			"typingTestCount" : 70 },
+	{ "species" : "mouse",		"fps" : 12,	"offsetY" : 15,	"typingPracticeCount" : 15,			"typingTestCount" : 70 },
-	{ "species" : "chicken",	"fps" : 11,		"typingPracticeCount" : 20,			"typingTestCount" : 100 },
+	{ "species" : "chicken",	"fps" : 11,	"offsetY" : 8,	"typingPracticeCount" : 20,			"typingTestCount" : 100 },
-	{ "species" : "pig",		"fps" : 5,		"typingPracticeCount" : 25,			"typingTestCount" : 150 },
+	{ "species" : "pig",		"fps" : 5,	"offsetY" : 12,	"typingPracticeCount" : 25,			"typingTestCount" : 150 },
-	{ "species" : "cat",		"fps" : 10,		"typingPracticeCount" : 30,			"typingTestCount" : 200 },
+	{ "species" : "cat",		"fps" : 10,	"offsetY" : 12,	"typingPracticeCount" : 30,			"typingTestCount" : 200 },
-	{ "species" : "deer",		"fps" : 9,		"typingPracticeCount" : 40,			"typingTestCount" : 250 },
+	{ "species" : "deer",		"fps" : 9,	"offsetY" : 6,	"typingPracticeCount" : 40,			"typingTestCount" : 250 },
-	{ "species" : "kangaroo",	"fps" : 4,		"typingPracticeCount" : 50,			"typingTestCount" : 300 },
+	{ "species" : "kangaroo",	"fps" : 4,	"offsetY" : 6,	"typingPracticeCount" : 50,			"typingTestCount" : 300 },
-	{ "species" : "rabbit",		"fps" : 12,		"typingPracticeCount" : 60,			"typingTestCount" : 350 },
+	{ "species" : "rabbit",		"fps" : 12,	"offsetY" : 13,	"typingPracticeCount" : 60,			"typingTestCount" : 350 },
-	{ "species" : "dog",		"fps" : 9,		"typingPracticeCount" : 70,			"typingTestCount" : 400 },
+	{ "species" : "dog",		"fps" : 9,	"offsetY" : 10,	"typingPracticeCount" : 70,			"typingTestCount" : 400 },
-	{ "species" : "zebra",		"fps" : 12,		"typingPracticeCount" : 80,			"typingTestCount" : 450 },
+	{ "species" : "zebra",		"fps" : 12,	"offsetY" : 4,	"typingPracticeCount" : 80,			"typingTestCount" : 450 },
-	{ "species" : "ostrich",	"fps" : 15,		"typingPracticeCount" : 90,			"typingTestCount" : 500 },
+	{ "species" : "ostrich",	"fps" : 15,	"offsetY" : 0,	"typingPracticeCount" : 90,			"typingTestCount" : 500 },
-	{ "species" : "lion",		"fps" : 10,		"typingPracticeCount" : 100,		"typingTestCount" : 600 },
+	{ "species" : "lion",		"fps" : 10,	"offsetY" : 8,	"typingPracticeCount" : 100,		"typingTestCount" : 600 },
-	{ "species" : "cheetah",	"fps" : 15,		"typingPracticeCount" : 110,		"typingTestCount" : 700 }
+	{ "species" : "cheetah",	"fps" : 15,	"offsetY" : 8,	"typingPracticeCount" : 110,		"typingTestCount" : 700 }
 ];

src/game/lib/flat_button/typing_app_button.js

@@ -42,21 +42,115 @@ function TypingAppButton(x, y) {
 
 	BasicButton.call(this, setting, this.clickEvent);
 
+	this.mainText.x = TypingAppButton.WIDTH / 2 + TypingAppButton.KEYBOARD_WIDTH / 4;
 	// this.setMainText("");
 	// this.addIcon("tile_choco");
 	// this.setIconSize(40);
 	// this.setShortcutText("[단축키]");
 
-	this.animalSprite = new Animal(
+	this.keyboardSprite = game.add.sprite(
+		80,
+		TypingAppButton.HEIGHT / 2,
+		"keyboards"
+	);
+	this.keyboardSprite.anchor.set(0.5);
+	this.keyboardSprite.frame = 1;
+	this.keyboardSprite.width = 120;
+	this.keyboardSprite.height = 120;
+	this.buttonSprite.addChild(this.keyboardSprite);
+
+	this.animal = new Animal(
 		Animal.TYPE_ICON, 0,
 		TypingAppButton.WIDTH - Animal.SPRITE_WIDTH / 2, TypingAppButton.HEIGHT / 2
 	);
-	this.buttonSprite.addChild(this.animalSprite.sprite);
+	this.buttonSprite.addChild(this.animal.sprite);
 }
 
-TypingAppButton.prototype.updateAnimalSprite = function(highestRecord) {
+TypingAppButton.prototype.updateKeyboard = function(appID) {
+	switch(appID) {
+		case 1:
+		case 11:
+		case 21:
+		case 31:
+		this.keyboardSprite.frame = 0;
+		break;
+
+		case 2:
+		case 12:
+		case 22:
+		case 32:
+		this.keyboardSprite.frame = 1;
+		break;
+
+		case 3:
+		case 13:
+		case 23:
+		case 33:
+		this.keyboardSprite.frame = 2;
+		break;
+
+		case 4:
+		case 14:
+		case 24:
+		case 34:
+		this.keyboardSprite.frame = 3;
+		break;
+
+		case 5:
+		case 15:
+		case 25:
+		case 35:
+		this.keyboardSprite.frame = 4;
+		break;
+
+		case 6:
+		case 16:
+		case 26:
+		case 36:
+		this.keyboardSprite.frame = 5;
+		break;
+
+		case 7:
+		case 27:
+		case 37:
+		this.keyboardSprite.frame = 6;
+		break;
+
+		case 17:
+		this.keyboardSprite.frame = 10;
+		break;
+
+		case 8:
+		case 18:
+		case 28:
+		case 38:
+		this.keyboardSprite.frame = 7;
+		break;
+
+		case 9:
+		case 19:
+		case 29:
+		case 39:
+		this.keyboardSprite.frame = 8;
+		break;
+
+		case 10:
+		case 20:
+		case 30:
+		case 40:
+		this.keyboardSprite.frame = 9;
+		break;
+
+		default:
+		this.keyboardSprite.frame = 0;
+		break;
+	}
+}
+
+TypingAppButton.prototype.updateAnimal = function(highestRecord) {
 	var animalIndex = Animal.animalIndexByRecord(highestRecord, this.appType);
-	this.animalSprite.chagneStandAnimation(animalIndex);
+	this.animal.chagneStandAnimation(animalIndex);
+	this.animal.sprite.y = TypingAppButton.HEIGHT / 2 - Animal.getOffsetY(animalIndex);
 }
 
 TypingAppButton.prototype.setInputEnabled = function(isEnabled) {
@@ -65,10 +159,16 @@ TypingAppButton.prototype.setInputEnabled = function(isEnabled) {
 
 	if(isEnabled === true) {
 		this.mouseOut();
-		this.animalSprite.sprite.tint = MainColor.WHITE_HEX;
+		// this.keyboardSprite.tint = MainColor.WHITE_HEX;
+		// this.animal.sprite.tint = MainColor.WHITE_HEX;
+		this.keyboardSprite.alpha = 1;
+		this.animal.sprite.alpha = 1;
 	} else {
 		this.buttonDisabled();
-		this.animalSprite.sprite.tint = MainColor.DIM_GRAY_HEX;
+		// this.keyboardSprite.tint = MainColor.DIM_GRAY_HEX;
+		// this.animal.sprite.tint = MainColor.DIM_GRAY_HEX;
+		this.keyboardSprite.alpha = 0.3;
+		this.animal.sprite.alpha = 0.3;
 	}
 }
 
@@ -78,11 +178,11 @@ TypingAppButton.prototype.setActive = function(flag) {
 	if(flag) {
 		this.buttonSprite.alpha = 1;
 		this.strokeSprite.alpha = 1;
-		this.animalSprite.sprite.alpha = 1;
+		this.animal.sprite.alpha = 1;
 	} else {
 		this.buttonSprite.alpha = 0;
 		this.strokeSprite.alpha = 0;
-		this.animalSprite.sprite.alpha = 0;
+		this.animal.sprite.alpha = 0;
 	}
 }
 
@@ -92,7 +192,6 @@ TypingAppButton.prototype.showEmptyDisabled = function() {
 	this.buttonSprite.alpha = 0;
 	this.strokeSprite.alpha = 1;
 	this.strokeSprite.tint = MainColor.SADDLE_BROWN_HEX;
-	this.animalSprite.sprite.alpha = 0;
 }
 
 TypingAppButton.prototype.updateAppData = function(appData) {
@@ -105,9 +204,10 @@ TypingAppButton.prototype.updateAppData = function(appData) {
 		this.appType = Animal.TYPE_TEST;
 
 	// console.log(this.appData);
+	this.updateKeyboard(this.appData.appID);
 	this.setMainText(this.appData.koreanName);
 	this.setInputEnabled(this.appData.activated);
-	this.updateAnimalSprite(this.appData.highestRecord);
+	this.updateAnimal(this.appData.highestRecord);
 }
 
 TypingAppButton.prototype.clickEvent = function() {
@@ -139,9 +239,16 @@ TypingAppButton.TYPING_APP_KOREAN_NAME		= "타자검정";
 */
 
 
+TypingAppButton.loadResources = function() {
+	game.load.spritesheet('keyboards', '../../../resources/image/ui/keyboard/keyboards.png', 120, 120);
+}
+
+
 TypingAppButton.WIDTH	= 400;
 TypingAppButton.HEIGHT	= 80;
 
+TypingAppButton.KEYBOARD_WIDTH	= 120;
+
 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;

src/game/main_menu/main_menu.js

@@ -12,6 +12,7 @@ MainMenu.prototype.preload = function() {
 	game.load.image('mouse',	'../../../resources/image/icon/mouse.png');
 
 	Animal.loadResources();
+	TypingAppButton.loadResources();
 
 	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
 }
@@ -70,8 +71,8 @@ MainMenu.prototype.create = function() {
 	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_PLAY;
 	this.selectedLanguage = MainMenu.LANGUAGE_KOREAN;
 	// this.animalRecordList.printScore(Animal.TYPE_PRACTICE);
 }