Add: animal_list for typing practice and test

src/game/lib/animal.js

@@ -10,6 +10,10 @@ function Animal(type, x, y) {
 }
 
 
+Animal.prototype.setScale = function(value) {
+	this.sprite.scale.set(value);
+}
+
 Animal.prototype.setIconSprite = function(species) {
 	this.setSpecies(species);
 

src/game/lib/animal_list.js

@@ -0,0 +1,59 @@
+function AnimalList(y) {
+	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);
+
+	for(var i = 0; i < animalCount; i++) {
+		this.animals[i] = new Animal(
+			Animal.TYPE_ICON,
+			AnimalList.MARGIN_X + offsetAnimal * i,
+			y
+		);
+		this.inactivate(i);
+	}
+
+	this.activeAnimalIndex = 0;
+	this.activate(this.activeAnimalIndex);
+}
+
+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);
+}
+
+AnimalList.prototype.inactivate = function(index) {
+	this.animals[index].stopAnimation();
+	this.animals[index].setScale(1);
+	this.animals[index].setAlpha(AnimalList.ALPHA_INACTIVE);
+
+	var animalData = Animal.SPECIES_DATA[index];
+	this.animals[index].setIconSprite(animalData);
+}
+
+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		= 160;
+AnimalList.ALPHA_INACTIVE	= 0.1;

src/game/typing/practice/game.js

@@ -24,20 +24,7 @@ var TypingPractice = {
 		screenTopUI.makeFullScreenButton();
 
 
-		// this.animalOnTitle = new Animal(Animal.TYPE_ON_TITLE, game.world.centerX - 200, 30);
-		this.animalOnTitle = new Animal(Animal.TYPE_ON_TITLE, game.world.centerX, 100);
-		this.animalOnTitle.startAnimation(Animal.SPECIES_DATA[0]);
-
-		this.animalPrev = new Animal(Animal.TYPE_ICON, game.world.centerX - 200, 100);
-		this.animalPrev.setIconSprite(Animal.SPECIES_DATA[0]);
-		this.animalPrev.setAlpha(0);
-
-		this.animalNext = new Animal(Animal.TYPE_ICON, game.world.centerX + 200, 100);
-		this.animalNext.setIconSprite(Animal.SPECIES_DATA[1]);
-		this.animalNext.setAlpha(0.3);
-
 		this.typingScore = new TypingScore();
-
 		this.stageTimer = new StageTimer( TypingPractice.STAGE_TIMER_SEC, (function() {
 			self.isOnStage = false;
 
@@ -46,6 +33,9 @@ var TypingPractice = {
 		}));
 
 
+		this.animalList = new AnimalList(100);
+
+
 		// typing content
 		var typingContentBG = new TypingContentBG();
 		typingContentBG.makePracticeContentBG();
@@ -151,7 +141,7 @@ var TypingPractice = {
 		this.leftHand.moveToDefaultPosition();
 		this.rightHand.moveToDefaultPosition();
 
-		this.animalOnTitle.stopAnimation();
+		this.animalList.stopAnimation();
 
 		var gameOverText = new GameOverText();
 		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
@@ -370,21 +360,12 @@ var TypingPractice = {
 		if(this.isKeyPressed(inputContent, typingContent)) {
 			this.typingScore.increase();
 			var animalLevelID = Animal.animalLevelIDByRecord(this.typingScore.score(), Animal.TYPE_PRACTICE);
-				console.log(animalLevelID);
+				// console.log(animalLevelID);
-				console.log(this.playingAnimalIndex);
+				// console.log(this.playingAnimalIndex);
 			if(animalLevelID > this.playingAnimalIndex) {
 				this.playingAnimalIndex = animalLevelID;
-				this.animalOnTitle.startAnimation(Animal.SPECIES_DATA[this.playingAnimalIndex]);
+				this.animalList.activate(this.playingAnimalIndex);
-				this.animalOnTitle.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
+				this.animalList.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
-
-				if(this.playingAnimalIndex == 1)
-					this.animalPrev.setAlpha(0.3);
-				this.animalPrev.setIconSprite(Animal.SPECIES_DATA[this.playingAnimalIndex - 1]);
-
-				if(this.playingAnimalIndex == Animal.SPECIES_DATA.length - 1)
-					this.animalNext.setAlpha(0);
-				else
-					this.animalNext.setIconSprite(Animal.SPECIES_DATA[this.playingAnimalIndex + 1]);
 			}
 			this.playNextContent();
 
@@ -395,14 +376,8 @@ var TypingPractice = {
 			this.typingScore.reset();
 
 			this.playingAnimalIndex = 0;
-			this.animalOnTitle.startAnimation(Animal.SPECIES_DATA[this.playingAnimalIndex]);
+			this.animalList.activate(this.playingAnimalIndex);
-			this.animalOnTitle.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE);
+			this.animalList.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE);
-
-			this.animalPrev.setIconSprite(Animal.SPECIES_DATA[0]);
-			this.animalPrev.setAlpha(0);
-
-			this.animalNext.setIconSprite(Animal.SPECIES_DATA[1]);
-			this.animalNext.setAlpha(0.3);
 		}
 	},
 

src/game/typing/test/game.js

@@ -22,11 +22,6 @@ var TypingTest = {
 		screenTopUI.makeFullScreenButton();
 
 
-		// this.animalOnTitle = new Animal(Animal.TYPE_ON_TITLE, game.world.centerX - 200, 30);
-		this.animalOnTitle = new Animal(Animal.TYPE_ON_TITLE, game.world.centerX, GAME_SCREEN_SIZE.y - 110);
-		this.animalOnTitle.startAnimation(Animal.SPECIES_DATA[0]);
-
-
 		this.averageTypingSpeedText = new AverageTypingSpeed();
 		this.contentProgressText = new ContentProgress();
 
@@ -104,6 +99,9 @@ var TypingTest = {
 		}
 
 
+		this.animalList = new AnimalList(GAME_SCREEN_SIZE.y - 110);
+
+
 		// bottom ui
 		var screenBottomUI = new ScreenBottomUI();
 		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
@@ -156,7 +154,7 @@ var TypingTest = {
 	gameOver: function() {
 		var gameOverText = new GameOverText();
 
-		this.animalOnTitle.stopAnimation();
+		this.animalList.stopAnimation();
 
 		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
 	},
@@ -401,9 +399,8 @@ var TypingTest = {
 		// console.log('-----------------------------------');
 
 		var animalLevelID = Animal.animalLevelIDByRecord(typingRecordTotalInteger, Animal.TYPE_TEST);
-		this.animalOnTitle.startAnimation(Animal.SPECIES_DATA[animalLevelID]);
+		this.animalList.activate(animalLevelID);
-		this.animalOnTitle.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
+		this.animalList.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
-
 	},
 
 	playNextContent: function() {

src/web/client/typing_practice.html

@@ -29,6 +29,7 @@
 		<script src="../../game/lib/experience_app_timer.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 		<script src="../../game/lib/animal.js"></script>
+		<script src="../../game/lib/animal_list.js"></script>
 
 		<!-- Test typing : source files -->
 		<script src="../../game/typing/alphabet_list/korean_basic.js"></script>

src/web/client/typing_test.html

@@ -29,6 +29,7 @@
 		<script src="../../game/lib/experience_app_timer.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 		<script src="../../game/lib/animal.js"></script>
+		<script src="../../game/lib/animal_list.js"></script>
 
 		<!-- Test typing : source files -->
 		<script src="../../game/typing/word_list/korean_basic.js"></script>