Add: animal icon for typing app button

src/game/lib/animal.js

@@ -47,14 +47,14 @@ class Animal {
 	tweenAnimation(animationType) {
 		switch(animationType) {
 			case Animal.ANIMATION_TYPE_CHANGE:
-			this.sprite.width = 70;
+			this.sprite.width = 200;
-			this.sprite.height = 70;
+			this.sprite.height = 200;
-			game.add.tween(this.sprite).to( { width: 50, height: 50 }, 500, Phaser.Easing.Bounce.Out, true);
+			game.add.tween(this.sprite).to( { width: 150, height: 150 }, 500, Phaser.Easing.Bounce.Out, true);
 			break;
 
 			case Animal.ANIMATION_TYPE_DAMAGE:
-			this.sprite.width = 100;
+			this.sprite.width = 200;
-			game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Bounce.In, true);
+			game.add.tween(this.sprite).to( { width: 150 }, 500, Phaser.Easing.Bounce.In, true);
 			// game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Elastic.Out, true);
 			break;
 
@@ -71,8 +71,8 @@ class Animal {
 		if(this.sprite === null) {
 			this.sprite = game.add.sprite(this.posX, this.posY, this.spriteFrameNames.run1);
 			this.sprite.anchor.set(0.5);
-			this.sprite.width = 50;
+			this.sprite.width = 150;
-			this.sprite.height = 50;
+			this.sprite.height = 150;
 		}
 
 		this.stopAnimation();
@@ -103,6 +103,8 @@ class Animal {
 
 
 	static loadResources() {
+		game.load.image('snail_shadow',	'../../../resources/image/character/animal/snail/shadow.png');
+
 		game.load.image('snail_icon',	'../../../resources/image/character/animal/snail/run2.png');
 		game.load.image('snail_run1',	'../../../resources/image/character/animal/snail/run1.png');
 		game.load.image('snail_run2',	'../../../resources/image/character/animal/snail/run2.png');

src/game/lib/button/round_rect_button.js

@@ -25,7 +25,7 @@ class RoundRectButtonSetting {
 		this.strokeColors = { };
 		this.strokeColors.out = out;
 		this.strokeColors.over = over;
-		this.strokeColors.odownut = down;
+		this.strokeColors.down = down;
 		this.strokeColors.disabled = disabled;
 	}
 
@@ -33,7 +33,7 @@ class RoundRectButtonSetting {
 		this.buttonColors = { };
 		this.buttonColors.out = out;
 		this.buttonColors.over = over;
-		this.buttonColors.odownut = down;
+		this.buttonColors.down = down;
 		this.buttonColors.disabled = disabled;
 	}
 
@@ -41,7 +41,7 @@ class RoundRectButtonSetting {
 		this.textColors = { };
 		this.textColors.out = out;
 		this.textColors.over = over;
-		this.textColors.odownut = down;
+		this.textColors.down = down;
 		this.textColors.disabled = disabled;
 	}
 

src/game/lib/button/typing_app_button.js

@@ -1,13 +1,59 @@
 class TypingAppButton extends RoundRectButton {
 
-	constructor(x, y, iconName, buttonText, clickEvent) {
+	constructor(type, x, y, iconName, buttonText, clickEvent) {
 		let setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
 		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 		setting.strokeWidthPx = 5;
 
+		switch(type) {
+			case TypingAppButton.TYPE_PRACTICE_KOREAN:
+			case TypingAppButton.TYPE_TEST_KOREAN:
+			setting.setStrokeColor(
+				0xffffff,
+				0xeeeeff,
+				0xccccdd,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xeeeeff,
+				0xddddee,
+				0xccccdd,
+				0x666666
+			);
+			setting.setTextColor(
+				"#668",
+				"#668",
+				"#668",
+				"#333"
+			);
+			break;
+
+			case TypingAppButton.TYPE_PRACTICE_ENGLISH:
+			case TypingAppButton.TYPE_TEST_ENGLISH:
+			setting.setStrokeColor(
+				0xffffff,
+				0xffeeee,
+				0xddcccc,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffeeee,
+				0xeedddd,
+				0xddcccc,
+				0x666666
+			);
+			setting.setTextColor(
+				"#866",
+				"#866",
+				"#866",
+				"#333"
+			);
+			break;
+		}
+		/*
 		setting.setStrokeColor(
-			0x444488,
+			0xffffff, //0x444488,
 			0x6666aa,
 			0x6666aa,
 			0x333333
@@ -24,6 +70,7 @@ class TypingAppButton extends RoundRectButton {
 			"#a66",
 			"#333"
 		);
+		*/
 
 		setting.fontStyle = {
 			font: "22px Arial",
@@ -34,21 +81,31 @@ class TypingAppButton extends RoundRectButton {
 
 		super(setting, iconName, buttonText, clickEvent);
 
+		this.text.x = 30;
+
 		if(iconName.length > 0) {
-			let iconImage = game.add.sprite(0, 0, iconName);
+			console.log(this.icon);
-			iconImage.width = 80;
+			this.icon.x = 40;
-			iconImage.height = 80;
+			this.icon.width = 100;
-			this.button.setIcon(iconImage);
+			this.icon.height = 100;
 		}
+
 	}
 
 }
 
-TypingAppButton.BUTTON_WIDTH		= 220;
+TypingAppButton.TYPE_PRACTICE_KOREAN	= 0;
+TypingAppButton.TYPE_PRACTICE_ENGLISH	= 1;
+TypingAppButton.TYPE_TEST_KOREAN		= 2;
+TypingAppButton.TYPE_TEST_ENGLISH		= 3;
+
+TypingAppButton.BUTTON_WIDTH		= 230;
 TypingAppButton.BUTTON_HEIGHT		= 80;
 
 TypingAppButton.BUTTON_GAP			= 10;
-TypingAppButton.MARGIN_VERTICAL	= 100;
+TypingAppButton.MARGIN_VERTICAL		= 20;
 
 TypingAppButton.BUTTON_UPPER_POS_Y	= 205;
-TypingAppButton.BUTTON_LOWER_POS_Y	= 475;
+TypingAppButton.BUTTON_LOWER_POS_Y	= 475;
+
+TypingAppButton.QUESTION_ICON		= "";

src/game/lib/button/typing_tab_button.js

@@ -41,10 +41,10 @@ class TypingTabButton extends RoundRectButton {
 
 }
 
-TypingTabButton.BUTTON_WIDTH		= 445;
+TypingTabButton.BUTTON_WIDTH		= 490;
 TypingTabButton.BUTTON_HEIGHT		= 80;
 
-TypingTabButton.BUTTON_GAP			= 26;
+TypingTabButton.BUTTON_GAP			= 5;
 TypingTabButton.MARGIN_VERTICAL		= 100;
 
 TypingTabButton.PRACTICE_BUTTON_POS_X	= GAME_SCREEN_SIZE.x / 4 + TypingTabButton.BUTTON_GAP;

src/game/menu/app_area_bg.js

@@ -20,8 +20,11 @@ class AppAreaBG {
 AppAreaBG.COLOR_MOUSE_APP		= 0xffce54;
 AppAreaBG.COLOR_TYPING_APP		= 0x99ccff;
 
-AppAreaBG.COLOR_TYPING_KOREAN	= 0xffccff;
+AppAreaBG.COLOR_TYPING_KOREAN	= 0x88bbff;
-AppAreaBG.COLOR_TYPING_ENGLISH	= 0x77aaff;
+AppAreaBG.COLOR_TYPING_ENGLISH	= 0xbbccff;
 
 AppAreaBG.GAP_X					= 10;
-AppAreaBG.GAP_Y					= 10;
+AppAreaBG.GAP_Y					= 10;
+
+AppAreaBG.MARGIN_X				= 20;
+AppAreaBG.MARGIN_Y				= 10;

src/game/menu/menu_app.js

@@ -18,9 +18,9 @@ class MenuApp {
 			GAME_SCREEN_SIZE.x, 280
 		);
 		mouseBG.printText(
-			"마    우    스      연    습     앱",
+			"마우스 연습 앱",
-			game.world.centerX, 320,
+			game.world.centerX, 200,
-			36, "#000", 0.05
+			170, "#000", 0.03
 		);
 
 		// typing app area
@@ -29,9 +29,9 @@ class MenuApp {
 			GAME_SCREEN_SIZE.x, 378
 		);
 		typingBG.printText(
-			"타      자       연      습       앱",
+			"타 자  연 습 앱",
-			game.world.centerX, 370,
+			game.world.centerX, 500,
-			36, "#000", 0.05
+			170, "#000", 0.03
 		);
 
 

src/game/menu/menu_typing_practice.js

@@ -6,6 +6,8 @@ class MenuTypingPractice {
 	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 		game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png');
+
+		Animal.loadResources();
 	}
 
 	create() {
@@ -27,25 +29,25 @@ class MenuTypingPractice {
 
 		// korean app area
 		let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
-			0, 60 + AppAreaBG.GAP_Y,
+			AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
-			GAME_SCREEN_SIZE.x, 270
+			GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
-		);
-		koreanBG.printText(
-			"한          글          타          자",
-			game.world.centerX, 320,
-			36, "#000", 0.05
 		);
+		// koreanBG.printText(
+		// 	"한          글          타          자",
+		// 	game.world.centerX, 320,
+		// 	36, "#000", 0.05
+		// );
 
 		// english app area
 		let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
-			0, 340,
+			AppAreaBG.MARGIN_X, 340,
-			GAME_SCREEN_SIZE.x, 270
+			GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
-		);
-		englishBG.printText(
-			"영          문          타          자",
-			game.world.centerX, 370,
-			36, "#000", 0.05
 		);
+		// englishBG.printText(
+		// 	"영          문          타          자",
+		// 	game.world.centerX, 370,
+		// 	36, "#000", 0.05
+		// );
 
 
 		// typing tab buttons
@@ -113,9 +115,11 @@ class MenuTypingPractice {
 				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
+			let iconImage = "snail_shadow";
 			let typingPracticeButton = new TypingAppButton(
+				TypingAppButton.TYPE_PRACTICE_KOREAN,
 				posX, posY,
-				TypingAppButton.NONE_ICON,
+				iconImage,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -137,9 +141,11 @@ class MenuTypingPractice {
 				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
+			let iconImage = "snail_shadow";
 			let typingPracticeButton = new TypingAppButton(
+				TypingAppButton.TYPE_PRACTICE_ENGLISH,
 				posX, posY,
-				TypingAppButton.NONE_ICON,
+				iconImage,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;

src/game/menu/menu_typing_test.js

@@ -6,6 +6,8 @@ class MenuTypingTest {
 	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 		game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png');
+
+		Animal.loadResources();
 	}
 
 	create() {
@@ -113,9 +115,11 @@ class MenuTypingTest {
 				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
+			let iconImage = "snail_shadow";
 			let typingTestButton = new TypingAppButton(
+				TypingAppButton.TYPE_TEST_KOREAN,
 				posX, posY,
-				TypingAppButton.NONE_ICON,
+				iconImage,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -137,9 +141,11 @@ class MenuTypingTest {
 				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
+			let iconImage = "snail_shadow";
 			let typingTestButton = new TypingAppButton(
+				TypingAppButton.TYPE_TEST_ENGLISH,
 				posX, posY,
-				TypingAppButton.NONE_ICON,
+				iconImage,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;

src/web/client/menu_typing_practice.html

@@ -22,6 +22,7 @@
 		<script src="../../game/lib/button/typing_tab_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
+		<script src="../../game/lib/animal.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/menu/menu_typing_practice.js"></script>

src/web/client/menu_typing_test.html

@@ -22,6 +22,7 @@
 		<script src="../../game/lib/button/typing_tab_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
+		<script src="../../game/lib/animal.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/menu/menu_typing_test.js"></script>