Fix: show / hide AnimalRecordList, TabLayout

src/game/lib/animal.js

@@ -0,0 +1,118 @@
+function Animal(type, index, x, y) {
+	this.animalType = type;
+
+	this.sprite = null;
+	this.posX = x;
+	this.posY = 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];
+}
+
+
+Animal.prototype.setScale = function(value) {
+	this.sprite.scale.set(value);
+}
+
+Animal.prototype.setSpecies = function(species) {
+	console.log(species);
+	this.species = species;
+}
+
+Animal.prototype.setAlpha = function(value) {
+	this.sprite.alpha = value;
+}
+
+
+Animal.prototype.tweenAnimation = function(animationType) {
+	switch(animationType) {
+		case Animal.ANIMATION_TYPE_CHANGE:
+		this.sprite.width = 100;
+		this.sprite.height = 100;
+		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.height = 50;
+		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;
+	}
+}
+
+Animal.prototype.startAnimation = function(species) {
+	this.sprite.animations.play("run", this.species.fps, true);
+}
+
+Animal.prototype.stopAnimation = function() {
+	this.sprite.animations.stop("run");
+}
+
+Animal.prototype.show = function() {
+	this.sprite.y = this.posY;
+}
+
+Animal.prototype.hide = function() {
+	this.sprite.y = Animal.HIDE_POS_Y;
+}
+
+
+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))
+			return i;
+	}
+
+	return 0;
+}
+
+Animal.getAnimalPracticeTypingCount = function(animalIndex) {
+	return Animal.SPECIES_DATA[animalIndex].practiceTypingCount;
+}
+
+Animal.typingCount = function(speciesData, gameType) {
+	if(gameType === Animal.TYPE_PRACTICE)
+		return speciesData.practiceTypingCount;
+	else
+		return speciesData.testTypingCount;
+}
+
+Animal.loadResources = function() {
+	game.load.spritesheet('animals', '../../../resources/image/character/animal/animals.png', 50, 50);
+}
+
+
+Animal.TYPE_ANIMATION			= 0;
+Animal.TYPE_ICON				= 1;
+
+Animal.TYPE_PRACTICE			= 0;
+Animal.TYPE_TEST				= 1;
+
+Animal.ANIMATION_TYPE_CHANGE	= 0;
+Animal.ANIMATION_TYPE_DAMAGE	= 1;
+
+Animal.HIDE_POS_Y				= 1000;
+
+Animal.SPECIES_DATA = [
+	{ "species" : "snail",		"fps" : 1,		"practiceTypingCount" : 0,		"testTypingCount" : 0 },
+	{ "species" : "turtle",		"fps" : 2,		"practiceTypingCount" : 5,		"testTypingCount" : 20 },
+	{ "species" : "chick",		"fps" : 5,		"practiceTypingCount" : 10,		"testTypingCount" : 40 },
+	{ "species" : "mouse",		"fps" : 12,		"practiceTypingCount" : 15,		"testTypingCount" : 70 },
+	{ "species" : "chicken",	"fps" : 11,		"practiceTypingCount" : 20,		"testTypingCount" : 100 },
+	{ "species" : "pig",		"fps" : 5,		"practiceTypingCount" : 25,		"testTypingCount" : 150 },
+	{ "species" : "cat",		"fps" : 10,		"practiceTypingCount" : 30,		"testTypingCount" : 200 },
+	{ "species" : "deer",		"fps" : 9,		"practiceTypingCount" : 40,		"testTypingCount" : 250 },
+	{ "species" : "kangaroo",	"fps" : 4,		"practiceTypingCount" : 50,		"testTypingCount" : 300 },
+	{ "species" : "rabbit",		"fps" : 12,		"practiceTypingCount" : 60,		"testTypingCount" : 350 },
+	{ "species" : "dog",		"fps" : 9,		"practiceTypingCount" : 70,		"testTypingCount" : 400 },
+	{ "species" : "zebra",		"fps" : 12,		"practiceTypingCount" : 80,		"testTypingCount" : 450 },
+	{ "species" : "ostrich",	"fps" : 15,		"practiceTypingCount" : 90,		"testTypingCount" : 500 },
+	{ "species" : "lion",		"fps" : 10,		"practiceTypingCount" : 100,	"testTypingCount" : 600 },
+	{ "species" : "cheetah",	"fps" : 15,		"practiceTypingCount" : 110,	"testTypingCount" : 700 }
+];

src/game/lib/animal_list.js

@@ -0,0 +1,117 @@
+function AnimalList(posY) {
+	this.animals = [];
+	this.activeAnimalIndex = -1;
+
+	var animalCount = Animal.SPECIES_DATA.length;
+	var lineWidth = GAME_SCREEN_SIZE.x - AnimalList.MARGIN_X * 2;
+	// console.log("lineWidth : " + lineWidth);
+	var offsetAnimal = lineWidth / (animalCount - 1);
+	// console.log("animalCount : " + animalCount);
+	// console.log("offsetAnimal : " + offsetAnimal);
+
+	this.activeAnimalIndex = 0;
+
+	var bg = game.add.graphics();
+	bg.beginFill(AnimalList.COLOR_BG, 1);
+	bg.drawRect(0, posY - 30, GAME_SCREEN_SIZE.x, 80);
+
+	this.recordTextList = this.makeRecordTextList(posY);
+
+	for(var i = 0; i < animalCount; i++) {
+		this.animals[i] = new Animal(
+			Animal.TYPE_ICON,
+			i,
+			AnimalList.MARGIN_X + offsetAnimal * i,
+			posY
+		);
+		this.inactivate(i);
+	}
+
+	this.activate(this.activeAnimalIndex);
+	this.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE);
+}
+
+AnimalList.prototype.activate = function(index) {
+	this.inactivate(this.activeAnimalIndex);
+
+	this.activeAnimalIndex = index;
+
+	this.animals[this.activeAnimalIndex].setScale(2);
+	this.animals[index].setAlpha(1);
+	this.animate(this.activeAnimalIndex);
+
+	this.recordTextList[index].addColor(AnimalList.COLOR_SCORE_CLEARED_TEXT, 0);
+}
+
+AnimalList.prototype.inactivate = function(index) {
+	this.animals[index].stopAnimation();
+	this.animals[index].setScale(1);
+	this.animals[index].setAlpha(AnimalList.ALPHA_INACTIVE);
+
+	this.recordTextList[index].addColor(AnimalList.COLOR_SCORE_DEFAULT_TEXT, 0);
+}
+
+
+AnimalList.prototype.makeRecordTextList = function(posY) {
+	var animalCount = Animal.SPECIES_DATA.length;
+	var lineWidth = GAME_SCREEN_SIZE.x - AnimalList.MARGIN_X * 2;
+	// console.log("lineWidth : " + lineWidth);
+	var offsetAnimal = lineWidth / (animalCount - 1);
+
+	var titleTextStyle = { font: "16px Arial", fill: "#fff", align: "center"};
+	var typingCount = 0;
+	var animalData = null;
+	var recordTextList = new Array();
+	for(var i = 0; i < animalCount; i++) {
+		animalData = Animal.SPECIES_DATA[i];
+		if(isTypingPracticeApp())
+			typingCount = RecordUtil.getRecordValueWithUnit(animalData.practiceTypingCount, 1);
+		else
+			typingCount = RecordUtil.getRecordValueWithUnit(animalData.testTypingCount, 1);
+
+		var recordText = game.add.text(
+			AnimalList.MARGIN_X + offsetAnimal * i,
+			posY + AnimalList.RECORD_TEXT_OFFSET_Y,
+			typingCount, titleTextStyle
+		);
+		recordText.anchor.set(0.5);
+		recordText.addColor(AnimalList.COLOR_SCORE_DEFAULT_TEXT, 0);
+		recordText.stroke = "#333";
+		recordText.strokeThickness = 3;
+		recordText.setShadow(1, 1, 'rgba(0, 0, 0, 0.5)', 2);
+		recordTextList.push(recordText);
+	}
+
+	return recordTextList;
+}
+
+
+
+AnimalList.prototype.animate = function(index) {
+	var animalData = Animal.SPECIES_DATA[index];
+	this.animals[index].startAnimation(animalData);
+}
+
+AnimalList.prototype.stopAnimation = function() {
+	this.animals[this.activeAnimalIndex].stopAnimation();
+}
+
+AnimalList.prototype.tweenAnimation = function(animationType) {
+	this.animals[this.activeAnimalIndex].tweenAnimation(animationType);
+}
+
+
+AnimalList.MARGIN_X			= 100;
+AnimalList.ALPHA_INACTIVE	= 0.1;
+
+// AnimalList.ANIMAL_LIST_POS_Y		= 90;
+AnimalList.RECORD_TEXT_OFFSET_Y		= 36;
+
+AnimalList.ALPHA_INACTIVE			= 0.3;
+
+AnimalList.TYPE_PRACTICE		= 0;
+AnimalList.TYPE_TEST			= 1;
+
+AnimalList.COLOR_BG					= 0x545454;	// "0x77aadd"; //0x99ccff;
+AnimalList.COLOR_SCORE_DEFAULT_TEXT	= "#999999";	// "#dddddd";	//"#bbddff";
+AnimalList.COLOR_SCORE_CLEARED_TEXT	= "#ffffff";

src/game/lib/animal_record_list.js

@@ -0,0 +1,158 @@
+function AnimalRecordList(type) {
+	this.type = type;
+
+	this.posY = 0;
+
+	this.animals = [];
+	this.texts = new Array();
+	this.activeAnimalIndex = -1;
+
+	var animalCount = Animal.SPECIES_DATA.length;
+	var lineWidth = GAME_SCREEN_SIZE.x - AnimalRecordList.MARGIN_X * 2;
+	// console.log("lineWidth : " + lineWidth);
+	var offsetAnimal = lineWidth / (animalCount - 1);
+	// console.log("animalCount : " + animalCount);
+	// console.log("offsetAnimal : " + offsetAnimal);
+
+	this.activeAnimalIndex = 0;
+
+	var bgColor = AnimalRecordList.COLOR_BG;
+	var posY = AnimalRecordList.ANIMAL_LIST_POS_Y;
+	if(this.type === AnimalRecordList.TYPE_MENU) {
+		bgColor = MainColor.LIGHT_CHOCO_HEX;
+		posY = AnimalRecordList.ANIMAL_LIST_MENU_POS_Y;
+	}
+	this.posY = posY;
+
+	game.add.graphics()
+		.beginFill(bgColor, 1)
+		.drawRect(
+			0, posY,
+			game.world.width, 80
+		);
+
+	for(var i = 0; i < animalCount; i++) {
+		this.animals[i] = new Animal(
+			Animal.TYPE_ICON,
+			i,
+			AnimalRecordList.MARGIN_X + offsetAnimal * i,
+			posY + AnimalRecordList.ANIMAL_OFFSET_Y
+		);
+		// this.inactivate(i);
+	}
+
+	// this.activate(this.activeAnimalIndex);
+	// this.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE);
+}
+
+AnimalRecordList.prototype.printScore = function(type) {
+	var animalCount = Animal.SPECIES_DATA.length;
+	var lineWidth = GAME_SCREEN_SIZE.x - AnimalRecordList.MARGIN_X * 2;
+	// console.log("lineWidth : " + lineWidth);
+	var offsetAnimal = lineWidth / (animalCount - 1);
+
+	var titleTextStyle = { font: "16px Nanum Gothic", fill: "#fff", align: "center"};
+	var typingCount = 0;
+	var animalData = null;
+
+	var posY = AnimalRecordList.RECORD_TEXT_OFFSET_Y;
+	if(this.type === AnimalRecordList.TYPE_MENU)
+		posY = AnimalRecordList.RECORD_TEXT_MENU_OFFSET_Y;
+
+	for(var i = 0; i < animalCount; i++) {
+		animalData = Animal.SPECIES_DATA[i];
+		if(type == AnimalRecordList.TYPE_PRACTICE)
+			typingCount = RecordUtil.getRecordValueWithUnit(animalData.practiceTypingCount, 1);
+		else
+			typingCount = RecordUtil.getRecordValueWithUnit(animalData.testTypingCount, 1);
+
+		var recordText = game.add.text(
+			// AnimalRecordList.MARGIN_X + offsetAnimal * i,
+			0,	// center of animal image
+			posY,
+			typingCount, titleTextStyle
+		);
+		recordText.anchor.set(0.5);
+		if(this.type === AnimalRecordList.TYPE_MENU)
+			recordText.addColor(AnimalRecordList.COLOR_SCORE_MENU_DEFAULT_TEXT, 0);
+		else
+			recordText.addColor(AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT, 0);
+		recordText.stroke = "#333";
+		recordText.strokeThickness = 3;
+		recordText.setShadow(1, 1, 'rgba(0, 0, 0, 0.5)', 2);
+
+		this.animals[i].sprite.addChild(recordText);
+		this.texts.push(recordText);
+	}
+}
+
+AnimalRecordList.prototype.activate = function(index) {
+	this.inactivate(this.activeAnimalIndex);
+
+	this.activeAnimalIndex = index;
+
+	this.animals[this.activeAnimalIndex].setScale(2);
+	this.animals[index].setAlpha(1);
+	this.animate(this.activeAnimalIndex);
+}
+
+AnimalRecordList.prototype.inactivate = function(index) {
+	this.animals[index].stopAnimation();
+	this.animals[index].setScale(1);
+	this.animals[index].setAlpha(AnimalRecordList.ALPHA_INACTIVE);
+}
+
+AnimalRecordList.prototype.animate = function(index) {
+	var animalData = Animal.SPECIES_DATA[index];
+	this.animals[index].startAnimation(animalData);
+}
+
+AnimalRecordList.prototype.stopAnimation = function() {
+	this.animals[this.activeAnimalIndex].stopAnimation();
+}
+
+AnimalRecordList.prototype.tweenAnimation = function(animationType) {
+	this.animals[this.activeAnimalIndex].tweenAnimation(animationType);
+}
+
+AnimalRecordList.prototype.show = function() {
+	var count = this.animals.length;
+	for(var i = 0; i < count; i++)
+		this.animals[i].show();
+}
+
+AnimalRecordList.prototype.hide = function() {
+	var count = this.animals.length;
+	for(var i = 0; i < count; i++)
+		this.animals[i].hide();
+}
+
+AnimalRecordList.prototype.applyLoadedFont = function() {
+	var count = this.texts.length;
+	for(var i = 0; i < count; i++) {
+		this.texts[i].font = "Nanum Gothic";
+	}
+}
+
+
+AnimalRecordList.POS_Y 					= 800;
+AnimalRecordList.HIDE_POS_Y				= 1000;
+
+AnimalRecordList.MARGIN_X				= 100;
+AnimalRecordList.ANIMAL_LIST_POS_Y		= 90;
+AnimalRecordList.RECORD_TEXT_OFFSET_Y	= 36;
+
+AnimalRecordList.ALPHA_INACTIVE			= 0.3;
+
+AnimalRecordList.TYPE_MENU				= 0;
+AnimalRecordList.TYPE_PRACTICE			= 1;
+AnimalRecordList.TYPE_TEST				= 2;
+
+AnimalRecordList.ANIMAL_LIST_MENU_POS_Y		= 640;
+AnimalRecordList.ANIMAL_OFFSET_Y			= 30;
+AnimalRecordList.RECORD_TEXT_MENU_OFFSET_Y	= 35;
+AnimalRecordList.COLOR_SCORE_MENU_DEFAULT_TEXT	= MainColor.OLD_LACE_STRING;	// MainColor.WHITE_STRING;
+
+AnimalRecordList.COLOR_BG					= MainColor.CHOCO_HEX;		// 0x77aadd; //0x99ccff;
+AnimalRecordList.COLOR_SCORE_DEFAULT_TEXT	= "#bbddff";
+AnimalRecordList.COLOR_SCORE_CLEARED_TEXT	= "#ffffff";

src/game/lib/db_service.js

@@ -375,3 +375,21 @@ DBService.prototype.parseJSONtoRankingRecord = function(type, jsonData) {
 
 
 
+// menu
+DBService.prototype.requestMainMenuAppData = function(onSucceededListener, onFailedListener) {
+	var xhr = this.makeXhr(
+		"php/writing/player_list.php",
+		(function() {	// onreadystatechange
+			if(xhr.readyState == 4 && xhr.status == 200) {
+				var replyJSON = JSON.parse(xhr.responseText);
+
+				if(replyJSON != null)
+					onSucceededListener(replyJSON);
+				else
+					onFailedListener(replyJSON);
+			}
+		}).bind(this)
+	);
+	xhr.send("maestroID=" + this.maestroID + "&playerID=" + this.playerID);
+}
+

src/game/lib/flat_button/basic_tab.js

@@ -11,6 +11,8 @@ function BasicTab() {
 
 	this.mainText = null;
 	this.subText = null;
+
+	this.posY = 0;
 }
 
 
@@ -25,6 +27,7 @@ BasicTab.prototype.createButton = function(setting, clickEvent) {
 
 	this.activeLineSprite = this.makeActiveLineSprite();
 	this.setEventMethod(this.activeLineSprite);
+	this.buttonSprite.addChild(this.activeLineSprite);
 
 	this.mainText = this.makeMainText();
 	this.buttonSprite.addChild(this.mainText);
@@ -56,8 +59,8 @@ BasicTab.prototype.makeButtonSprite = function() {
 	var posX = setting.x - btnWidth / 2;
 	var posY = setting.y - btnHeight / 2;
 	var buttonSprite = game.add.sprite(posX, posY, texture);
+	this.posY = posY;
 
-	// buttonSprite.anchor.setTo(0.5, 0.5);
 	buttonSprite.inputEnabled = true;
 
 	return buttonSprite;
@@ -68,7 +71,7 @@ BasicTab.prototype.makeActiveLineSprite = function() {
 	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
 	// console.log("round : " + setting.roundAmount);
 
-	var OFFSET_POS_Y	= 6;
+	var OFFSET_POS_Y	= setting.height - 6;
 	var ACTIVE_LINE_HEIGHT	= 3;
 
 	var buttonWidth = setting.width;
@@ -83,11 +86,10 @@ BasicTab.prototype.makeActiveLineSprite = function() {
 		.endFill()
 		.generateTexture();
 
-	var posX = setting.x - lineWidth / 2;
-	var posY = setting.y + setting.height / 2 - OFFSET_POS_Y;
+	var posX = setting.width / 2 - lineWidth / 2;
+	var posY = OFFSET_POS_Y;
 	var activeLineSprite = game.add.sprite(posX, posY, texture);
 
-	// buttonSprite.anchor.setTo(0.5, 0.5);
 	activeLineSprite.inputEnabled = true;
 
 	return activeLineSprite;
@@ -166,7 +168,6 @@ BasicTab.prototype.setMainTextFontWeight = function(option) {
 		this.mainText.fontWeight = "normal";
 	else
 		this.mainText.fontWeight = option;
-	console.log(this.mainText.fontWeight);
 }
 
 BasicTab.prototype.makeSubText = function() {
@@ -269,6 +270,9 @@ BasicTab.prototype.setEventMethod = function(target) {
 }
 
 BasicTab.prototype.mouseOut = function() {
+	if(!this.buttonSprite.inputEnabled)
+		return;
+
 	this.buttonSprite.tint = this.setting.buttonColors.out;
 
 	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
@@ -282,6 +286,9 @@ BasicTab.prototype.mouseOut = function() {
 }
 
 BasicTab.prototype.mouseOver = function() {
+	if(!this.buttonSprite.inputEnabled)
+		return;
+
 	this.buttonSprite.tint = this.setting.buttonColors.over;
 
 	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
@@ -295,6 +302,9 @@ BasicTab.prototype.mouseOver = function() {
 }
 
 BasicTab.prototype.mouseDown = function() {
+	if(!this.buttonSprite.inputEnabled)
+		return;
+
 	this.buttonSprite.tint = this.setting.buttonColors.down;
 
 	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
@@ -341,6 +351,7 @@ BasicTab.prototype.getInputEnabled = function() {
 
 BasicTab.prototype.setInputEnabled = function(isEnabled) {
 	this.buttonSprite.inputEnabled = isEnabled;
+	this.activeLineSprite.inputEnabled = isEnabled;
 
 	if(isEnabled === true) {
 		this.mouseOut();
@@ -353,7 +364,17 @@ BasicTab.prototype.setLineSpacing = function(spacingInPixels) {
 	this.mainText.lineSpacing = spacingInPixels;
 }
 
+BasicTab.prototype.show = function() {
+	this.buttonSprite.y = this.posY;
+}
+
+BasicTab.prototype.hide = function() {
+	this.buttonSprite.y = BasicTab.HIDE_POS_Y;
+}
+
+
 BasicTab.NONE_ICON			= "";
 BasicTab.NONE_BUTTON_TEXT	= "";
 
-BasicTab.SUBTEXT_FONTSIZE	= 12;
+BasicTab.SUBTEXT_FONTSIZE	= 12;
+BasicTab.HIDE_POS_Y	= 1000;

src/game/lib/flat_button/language_tab.js

@@ -87,7 +87,7 @@ LanguageTab.prototype.createTab = function(index) {
 }
 
 LanguageTab.prototype.transformActiveLine = function() {
-	this.activeLineSprite.y = this.buttonSprite.y + 3;
+	this.activeLineSprite.y = 3;
 }
 
 LanguageTab.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;

src/game/lib/flat_button/tab_layout.js

@@ -62,4 +62,17 @@ TabLayout.prototype.updateActiveLine = function() {
 		this.tabGroup[i].setActive(false);
 
 	this.tabGroup[this.activeTabIndex].setActive(true);
-}
+}
+
+
+TabLayout.prototype.show = function() {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++)
+		this.tabGroup[i].show();
+}
+
+TabLayout.prototype.hide = function() {
+	var count = this.tabGroup.length;
+	for(var i = 0; i < count; i++)
+		this.tabGroup[i].hide();
+}

src/game/main_menu/main.js

@@ -17,7 +17,12 @@ WebFontConfig = {
 
 	//  The Google Fonts we want to load (specify as many as you like in the array)
 	google: {
-		families: ['Nanum Gothic:400,700,800', 'Nanum Gothic Coding:400,700', 'Nanum Brush Script', 'Nanum Pen 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

@@ -62,10 +62,7 @@ MainMenu.prototype.create = function() {
 	graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
 
 	this.appGroupTabLayout = null;
-
-
-	this.animalRecordList = new AnimalRecordList(AnimalRecordList.TYPE_MENU);
-	this.animalRecordList.printScore(AnimalList.TYPE_TEST);
+	this.languageTabLayout = null;
 	// this.animalRecordList.printScore(AnimalList.TYPE_PRACTICE);
 }
 
@@ -80,31 +77,23 @@ MainMenu.prototype.fontLoaded = function() {
 		"menu_app"	// callerClassName
 	);
 
-	// top ui
-	// var screenTopUI = new ScreenTopUI();
-	// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
-	// screenTopUI.makeFullScreenButton();
-	// this.loadAllowEditEnterCode(screenTopUI);
-
+	// top UI
 	this.makeButtons();
 	this.makeAppGroupTab();
+
+	// bottom UI
+	this.makeAnimalRecordList();
+	this.animalRecordList.hide();
 	this.makeLanguageTab();
+	this.languageTabLayout.hide();
 
 	this.backButton.applyLoadedFont();
 	this.settingButton.applyLoadedFont();
 	this.appGroupTabLayout.applyLoadedFont();
+	this.animalRecordList.applyLoadedFont();
+	this.languageTabLayout.applyLoadedFont();
 
-
-	// bottom ui
-	/*
-	var screenBottomUI = new ScreenBottomUI();
-	// ScreenBottomUI.printLeftText("게임 진행 정보");
-	// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
-	// ScreenBottomUI.printCenterText(playingAppName);
-	screenBottomUI.printCenterText("메뉴");
-	screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
-	*/
-
+	// welcome message
 	new WelcomePlayerText(sessionStorageManager.getPlayerName());
 	if(isExperiencePlayerAccount()) {
 		game.time.events.add(Phaser.Timer.SECOND * 2.5,
@@ -113,7 +102,6 @@ MainMenu.prototype.fontLoaded = function() {
 		);
 	}
 
-
 	this.loadAppData();
 }
 
@@ -145,12 +133,16 @@ MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
 }
 
 MainMenu.prototype.loadAppData = function() {
-	// this.dbService.requestMainMenuAppData(
-	// 	(function(replyJSON) {
-	// 		this.updateAppGroupButton(replyJSON.appGroupData);
-	// 		this.updateAppButtons(replyJSON.appData);
-	// 	})
-	// );
+	this.dbService.requestMainMenuAppData(
+		(function(replyJSON) {
+			// this.updateAppGroupTab(replyJSON.appGroupData);
+			// this.updateAppButtons(replyJSON.appGroup, replyJSON.appData);
+			// this.updateLanguageTab(replyJSON.appGroup);
+		}).bind(this),
+		(function(replyJSON) {
+			console.log(replyJSON);
+		}).bind(this)
+	);
 
 	/*
 	var dbConnectManager = new DBConnectManager();
@@ -218,17 +210,35 @@ MainMenu.prototype.makeAppGroupTab = function() {
 	typingTestGroupTab.reserveSubText("시험");
 	this.appGroupTabLayout.add(typingTestGroupTab);
 
-	var typingPlayGroupTab = new AppGroupTab( (function() { console.log("typing exam"); }).bind(this) );
+	// var typingPlayGroupTab = new AppGroupTab( (function() { console.log("typing exam"); }).bind(this) );
+	var typingPlayGroupTab = new AppGroupTab(
+		(function() { console.log("typing exam"); this.animalRecordList.show(); this.languageTabLayout.show(); }).bind(this)
+	);
 	typingPlayGroupTab.reserveIcon("keyboard");
 	typingPlayGroupTab.reserveSubText("놀이");
 	this.appGroupTabLayout.add(typingPlayGroupTab);
 
-	var mousePlayGroupTab = new AppGroupTab( (function() { console.log("mouse exam"); }).bind(this) );
+	// var mousePlayGroupTab = new AppGroupTab( (function() { console.log("mouse exam"); }).bind(this) );
+	var mousePlayGroupTab = new AppGroupTab(
+		(function() { console.log("mouse exam"); this.animalRecordList.hide(); this.languageTabLayout.hide(); }).bind(this)
+	);
 	mousePlayGroupTab.reserveIcon("mouse");
 	mousePlayGroupTab.reserveSubText("놀이");
 	this.appGroupTabLayout.add(mousePlayGroupTab);
 
 	this.appGroupTabLayout.createTabs();
+
+
+	// typingFingerGroupTab.setInputEnabled(false);
+	// typingPracticeGroupTab.setInputEnabled(false);
+	// typingTestGroupTab.setInputEnabled(false);
+	// typingPlayGroupTab.setInputEnabled(false);
+	// mousePlayGroupTab.setInputEnabled(false);
+}
+
+MainMenu.prototype.makeAnimalRecordList = function() {
+	this.animalRecordList = new AnimalRecordList(AnimalRecordList.TYPE_MENU);
+	this.animalRecordList.printScore(AnimalList.TYPE_TEST);
 }
 
 MainMenu.prototype.makeLanguageTab = function() {