diff --git a/src/game/lib/button/typing_app_button.js b/src/game/lib/button/typing_app_button.js
index 6030750..418b488 100644
--- a/src/game/lib/button/typing_app_button.js
+++ b/src/game/lib/button/typing_app_button.js
@@ -96,12 +96,12 @@ TypingAppButton.TYPE_TEST_KOREAN = 2;
TypingAppButton.TYPE_TEST_ENGLISH = 3;
TypingAppButton.BUTTON_WIDTH = 230;
-TypingAppButton.BUTTON_HEIGHT = 80;
+TypingAppButton.BUTTON_HEIGHT = 70;
TypingAppButton.BUTTON_GAP = 10;
TypingAppButton.MARGIN_VERTICAL = 20;
-TypingAppButton.BUTTON_UPPER_POS_Y = 205;
-TypingAppButton.BUTTON_LOWER_POS_Y = 475;
+TypingAppButton.BUTTON_UPPER_POS_Y = 205 + 60;
+TypingAppButton.BUTTON_LOWER_POS_Y = 475 + 30;
TypingAppButton.QUESTION_ICON = "";
\ No newline at end of file
diff --git a/src/game/menu/animal_record_list.js b/src/game/menu/animal_record_list.js
new file mode 100644
index 0000000..af82d2c
--- /dev/null
+++ b/src/game/menu/animal_record_list.js
@@ -0,0 +1,100 @@
+function AnimalRecordList() {
+ this.animals = [];
+ 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;
+
+ game.add.graphics()
+ .beginFill(AppAreaBG.COLOR_MOUSE_APP, 1)
+ .drawRect(
+ 0, ScreenTopUI.BG_HEIGHT,
+ 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,
+ AnimalRecordList.ANIMAL_LIST_POS_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 Arial", fill: "#fff", align: "center"};
+ var typingCount = 0;
+ var animalData = null;
+ 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,
+ AnimalRecordList.ANIMAL_LIST_POS_Y + AnimalRecordList.RECORD_TEXT_OFFSET_Y,
+ typingCount, titleTextStyle
+ );
+ recordText.anchor.set(0.5);
+ recordText.stroke = "#333";
+ recordText.strokeThickness = 3;
+ recordText.setShadow(1, 1, 'rgba(0, 0, 0, 0.5)', 2);
+ }
+}
+
+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.MARGIN_X = 100;
+AnimalRecordList.ANIMAL_LIST_POS_Y = 90;
+AnimalRecordList.RECORD_TEXT_OFFSET_Y = 36;
+
+AnimalRecordList.ALPHA_INACTIVE = 0.3;
+
+AnimalRecordList.TYPE_PRACTICE = 0;
+AnimalRecordList.TYPE_TEST = 1;
\ No newline at end of file
diff --git a/src/game/menu/menu_typing_practice.js b/src/game/menu/menu_typing_practice.js
index 4484636..af7090d 100644
--- a/src/game/menu/menu_typing_practice.js
+++ b/src/game/menu/menu_typing_practice.js
@@ -73,6 +73,9 @@ var MenuTypingPractice = {
);
// typingTestTabButton.setInputEnabled(false);
+ this.animalRecordList = new AnimalRecordList();
+ this.animalRecordList.printScore(AnimalRecordList.TYPE_PRACTICE);
+
// bottom ui
var screenBottomUI = new ScreenBottomUI();
// screenBottomUI.printLeftText("게임 진행 정보");
diff --git a/src/game/menu/menu_typing_test.js b/src/game/menu/menu_typing_test.js
index c257b71..0389f0c 100644
--- a/src/game/menu/menu_typing_test.js
+++ b/src/game/menu/menu_typing_test.js
@@ -73,6 +73,10 @@ var MenuTypingTest = {
);
typingTestTabButton.setInputEnabled(false);
+
+ this.animalRecordList = new AnimalRecordList();
+ this.animalRecordList.printScore(AnimalRecordList.TYPE_TEST);
+
this.makeActiveTypingTestAppButtons();
diff --git a/src/web/client/menu_typing_practice.html b/src/web/client/menu_typing_practice.html
index 9a1e93f..f8222d2 100644
--- a/src/web/client/menu_typing_practice.html
+++ b/src/web/client/menu_typing_practice.html
@@ -38,6 +38,9 @@
+
+
+
@@ -49,6 +52,8 @@
+
+
diff --git a/src/web/client/menu_typing_test.html b/src/web/client/menu_typing_test.html
index 7fa6185..6ea3d40 100644
--- a/src/web/client/menu_typing_test.html
+++ b/src/web/client/menu_typing_test.html
@@ -38,6 +38,9 @@
+
+
+
@@ -49,6 +52,8 @@
+
+