Add: AnimalRecordList

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_UPPER_POS_Y	= 205 + 60;
-TypingAppButton.BUTTON_LOWER_POS_Y	= 475;
+TypingAppButton.BUTTON_LOWER_POS_Y	= 475 + 30;
 
 TypingAppButton.QUESTION_ICON		= "";

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;

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("게임 진행 정보");

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();
 
 

src/web/client/menu_typing_practice.html

@@ -38,6 +38,9 @@
 		<!-- library source files -->
 		<script src="../../game/lib/keyboard_shortcut.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/number_util.js"></script>
+		<script src="../../game/lib/string_util.js"></script>
+		<script src="../../game/lib/record_util.js"></script>
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
@@ -49,6 +52,8 @@
 		<script src="../../game/lib/animal.js"></script>
 
 		<!-- source files -->
+		<script src="../../game/menu/app_area_bg.js"></script>
+		<script src="../../game/menu/animal_record_list.js"></script>
 		<script src="../../game/menu/menu_typing_practice.js"></script>
 		<script src="../../game/menu/main_menu_typing_practice.js"></script>
 		<script src="../../game/menu/app_area_bg.js"></script>

src/web/client/menu_typing_test.html

@@ -38,6 +38,9 @@
 		<!-- library source files -->
 		<script src="../../game/lib/keyboard_shortcut.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/number_util.js"></script>
+		<script src="../../game/lib/string_util.js"></script>
+		<script src="../../game/lib/record_util.js"></script>
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
@@ -49,6 +52,8 @@
 		<script src="../../game/lib/animal.js"></script>
 
 		<!-- source files -->
+		<script src="../../game/menu/app_area_bg.js"></script>
+		<script src="../../game/menu/animal_record_list.js"></script>
 		<script src="../../game/menu/menu_typing_test.js"></script>
 		<script src="../../game/menu/main_menu_typing_test.js"></script>
 		<script src="../../game/menu/app_area_bg.js"></script>