Fix: button classes revised

src/game/global/global_variables.js

@@ -86,21 +86,41 @@ function isTypingTestStage() {
 	return false;
 }
 
+function isEnglishTypingStage() {
+	if(sessionStorageManager.playingAppName.indexOf("english") > -1)
+		return true;
+
+	return false;
+}
+
+function isKoreanTypingStage() {
+	if(sessionStorageManager.playingAppName.indexOf("korean") > -1)
+		return true;
+
+	return false;
+}
+
 function isTypingWordStage() {
 	let appName = sessionStorageManager.playingAppName;
 
-	if((isTypingPracticeStage() || isTypingTestStage()) && appName.indexOf("_word") > -1)
+	if(appName.indexOf("_word") > -1)
 		return true;
 
+	// if((isTypingPracticeStage() || isTypingTestStage()) && appName.indexOf("_word") > -1)
+	// 	return true;
+
 	return false;
 }
 
 function isTypingSentenceStage() {
 	let appName = sessionStorageManager.playingAppName;
 
-	if((isTypingPracticeStage() || isTypingTestStage()) && appName.indexOf("_sentence") > -1)
+	if(appName.indexOf("_sentence") > -1)
 		return true;
 
+	// if((isTypingPracticeStage() || isTypingTestStage()) && appName.indexOf("_sentence") > -1)
+	// 	return true;
+
 	return false;
 }
 

src/game/lib/animal.js

@@ -155,15 +155,15 @@ Animal.ANIMATION_TYPE_DAMAGE	= 1;
 
 Animal.SPECIES_DATA = [
 	{ "species" : "snail", "runningFPS" : 1.1, "practiceTypingCount" : 0, "testTypingCount" : 0 },
-	{ "species" : "turtle", "runningFPS" : 5.5, "practiceTypingCount" : 5, "testTypingCount" : 20 },
+	{ "species" : "turtle", "runningFPS" : 2.2, "practiceTypingCount" : 5, "testTypingCount" : 20 },
-	{ "species" : "cat", "runningFPS" : 10.1, "practiceTypingCount" : 10, "testTypingCount" : 50 },
+	{ "species" : "cat", "runningFPS" : 4.4, "practiceTypingCount" : 10, "testTypingCount" : 50 },
-	{ "species" : "lion", "runningFPS" : 15.5, "practiceTypingCount" : 15, "testTypingCount" : 100 },
+	{ "species" : "lion", "runningFPS" : 6.9, "practiceTypingCount" : 15, "testTypingCount" : 100 },
-	{ "species" : "rabbit", "runningFPS" : 20.2, "practiceTypingCount" : 20, "testTypingCount" : 200 },
+	{ "species" : "rabbit", "runningFPS" : 9.3, "practiceTypingCount" : 20, "testTypingCount" : 200 },
-	{ "species" : "ostrich", "runningFPS" : 25.5, "practiceTypingCount" : 30, "testTypingCount" : 300 },
+	{ "species" : "ostrich", "runningFPS" : 12.8, "practiceTypingCount" : 30, "testTypingCount" : 300 },
-	{ "species" : "horse", "runningFPS" : 30.3, "practiceTypingCount" : 40, "testTypingCount" : 400 },
+	{ "species" : "horse", "runningFPS" : 16.2, "practiceTypingCount" : 40, "testTypingCount" : 400 },
-	{ "species" : "dog", "runningFPS" : 35.5, "practiceTypingCount" : 50, "testTypingCount" : 500 },
+	{ "species" : "dog", "runningFPS" : 20.1, "practiceTypingCount" : 50, "testTypingCount" : 500 },
-	{ "species" : "cheetah", "runningFPS" : 40.4, "practiceTypingCount" : 60, "testTypingCount" : 600 },
+	{ "species" : "cheetah", "runningFPS" : 25.4, "practiceTypingCount" : 60, "testTypingCount" : 600 },
-	{ "species" : "eagle", "runningFPS" : 45.5, "practiceTypingCount" : 80, "testTypingCount" : 700 }
+	{ "species" : "eagle", "runningFPS" : 30.5, "practiceTypingCount" : 80, "testTypingCount" : 700 }
 ];
 
 Animal.SPRITE_NAMES = {

src/game/lib/app_button.js

@@ -1,13 +0,0 @@
-class AppButton {
-
-	constructor(setting, iconName, buttonText, clickEvent) {
-		this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
-	}
-}
-
-AppButton.TYPE_MOUSE_APP		= 0;
-AppButton.TYPE_TYPING_PRACTICE	= 1;
-AppButton.TYPE_TYPING_APP		= 2;
-
-AppButton.NONE_ICON			= "";
-AppButton.NONE_BUTTON_TEXT	= "";

src/game/lib/button/back_button.js

@@ -1,4 +1,4 @@
-class BackButton {
+class BackButton extends RoundRectButton {
 
 	constructor(clickEvent) {
 		let setting = new RoundRectButtonSetting(30, 30, 50, 50);
@@ -24,10 +24,7 @@ class BackButton {
 			"#333"
 		);
 
-		let button = new RoundRectButton(
+		super(setting, RoundRectButton.NONE_ICON, "<", clickEvent);
-			setting,
-			RoundRectButton.NONE_ICON, "<", clickEvent
-		);
 	}
 
 }

src/game/lib/button/fullscreen_button.js

@@ -1,11 +1,9 @@
-class FullscreenButton {
+class FullscreenButton extends RoundRectButton {
 
-	constructor(game) {
+	constructor() {
-		this.game = game;
+		game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
 
-		this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
+		let setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50);
-
-		let setting = new RoundRectButtonSetting(this.game.world.width - 30, 30, 50, 50);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
 		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 		setting.strokeWidthPx = 3;
@@ -28,23 +26,22 @@ class FullscreenButton {
 			"#333"
 		);
 
-		let button = new RoundRectButton(
+		super(
-			setting, RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
+			setting,
-			() => this.clickEvent()
+			RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
+			() => {
+				if(game.scale.isFullScreen) {
+					game.scale.stopFullScreen();
+				} else {
+					game.scale.startFullScreen();
+				}
+			}
 		);
 
 		let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
 		icon_fullscreen.width = 20;
 		icon_fullscreen.height = 20;
-		button.setIcon(icon_fullscreen);
+		this.setIcon(icon_fullscreen);
-	}
-
-	clickEvent() {
-		if(this.game.scale.isFullScreen) {
-			this.game.scale.stopFullScreen();
-		} else {
-			this.game.scale.startFullScreen();
-		}
 	}
 
 }

src/game/lib/button/game_app_button.js

@@ -1,32 +1,17 @@
-class GameAppButton extends AppButton {
+class GameAppButton extends RoundRectButton {
 
 	constructor(x, y, type, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(x, y, GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT);
+		console.log(type);
+		let setting = new RoundRectButtonSetting(
+			x, y,
+			GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT
+		);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
 		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 		setting.strokeWidthPx = 5;
 
-		if(type === AppButton.TYPE_MOUSE_APP) {
+		switch(type) {
-		} if(type === AppButton.TYPE_TYPING_PRACTICE) {
+			case GameAppButton.TYPE_MOUSE_APP:
-			setting.setStrokeColor(
-				0x444488,
-				0x6666aa,
-				0x6666aa,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xaaaadd,
-				0xddddff,
-				0xddddff,
-				0x666666
-			);
-			setting.setTextColor(
-				"#844",
-				"#a66",
-				"#a66",
-				"#333"
-			);
-		} else {	// TYPE_TYPING_APP
 			setting.setStrokeColor(
 				0xaa6666,
 				0x884444,
@@ -45,6 +30,28 @@ class GameAppButton extends AppButton {
 				"#844",
 				"#333"
 			);
+			break;
+			case GameAppButton.TYPE_TYPING_PRACTICE:
+			case GameAppButton.TYPE_TYPING_APP:
+			setting.setStrokeColor(
+				0x444488,
+				0x6666aa,
+				0x6666aa,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xaaaadd,
+				0xddddff,
+				0xddddff,
+				0x666666
+			);
+			setting.setTextColor(
+				"#844",
+				"#a66",
+				"#a66",
+				"#333"
+			);
+			break;
 		}
 
 		super(setting, iconName, buttonText, clickEvent);
@@ -52,6 +59,10 @@ class GameAppButton extends AppButton {
 
 }
 
+GameAppButton.TYPE_MOUSE_APP		= 0;
+GameAppButton.TYPE_TYPING_PRACTICE	= 1;
+GameAppButton.TYPE_TYPING_APP		= 2;
+
 GameAppButton.BUTTON_WIDTH			= 150;
 GameAppButton.BUTTON_HEIGHT			= 150;
 
@@ -59,4 +70,4 @@ GameAppButton.BUTTON_GAP			= 20;
 GameAppButton.MARGIN_VERTICAL		= 100;
 
 GameAppButton.BUTTON_UPPER_POS_Y	= 200;
-GameAppButton.BUTTON_LOWER_POS_Y	= 540;
+GameAppButton.BUTTON_LOWER_POS_Y	= 460;

src/game/lib/button/typing_practice_button.js

@@ -0,0 +1,48 @@
+class TypingPracticeButton extends RoundRectButton {
+
+	constructor(x, y, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+
+		super(setting, iconName, buttonText, clickEvent);
+
+		if(iconName.length > 0) {
+			let icon_fullscreen = game.add.sprite(0, 0, iconName);
+			icon_fullscreen.width = 80;
+			icon_fullscreen.height = 80;
+			this.button.setIcon(icon_fullscreen);
+		}
+	}
+
+}
+
+TypingPracticeButton.BUTTON_WIDTH		= 200;
+TypingPracticeButton.BUTTON_HEIGHT		= 100;
+
+TypingPracticeButton.BUTTON_GAP			= 10;
+TypingPracticeButton.MARGIN_VERTICAL	= 100;
+
+TypingPracticeButton.BUTTON_UPPER_POS_Y	= 200;
+TypingPracticeButton.BUTTON_LOWER_POS_Y	= 480;

src/game/lib/button/typing_tab_button.js

@@ -0,0 +1,53 @@
+class TypingTabButton extends RoundRectButton {
+
+	constructor(x, y, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(
+			x, y,
+			TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT
+		);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		super(setting, iconName, buttonText, clickEvent);
+
+
+		if(iconName.length > 0) {
+			let icon_fullscreen = game.add.sprite(0, 0, iconName);
+			icon_fullscreen.width = 80;
+			icon_fullscreen.height = 80;
+			this.button.setIcon(icon_fullscreen);
+		}
+	}
+
+}
+
+TypingTabButton.BUTTON_WIDTH		= 500;
+TypingTabButton.BUTTON_HEIGHT		= 80;
+
+TypingTabButton.BUTTON_GAP			= 20;
+TypingTabButton.MARGIN_VERTICAL		= 100;
+
+TypingTabButton.PRACTICE_BUTTON_POS_X	= GAME_SCREEN_SIZE.x / 4;
+TypingTabButton.TEST_BUTTON_POS_X		= GAME_SCREEN_SIZE.x / 4 * 3;
+
+TypingTabButton.BUTTON_POS_Y		=  GAME_SCREEN_SIZE.y - (TypingTabButton.BUTTON_HEIGHT / 3 * 4);

src/game/lib/typing_practice_button.js

@@ -1,68 +0,0 @@
-class TypingPracticeButton extends AppButton {
-
-	constructor(x, y, type, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
-
-		if(type === LANGUAGE_KOREAN) {
-			setting.setStrokeColor(
-				0xaa6666,
-				0x884444,
-				0x884444,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xffdddd,
-				0xddaaaa,
-				0xddaaaa,
-				0x666666
-			);
-			setting.setTextColor(
-				"#a66",
-				"#844",
-				"#844",
-				"#333"
-			);
-		} else {	// LANGUAGE_ENGLISH
-			setting.setStrokeColor(
-				0x444488,
-				0x6666aa,
-				0x6666aa,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xaaaadd,
-				0xddddff,
-				0xddddff,
-				0x666666
-			);
-			setting.setTextColor(
-				"#844",
-				"#a66",
-				"#a66",
-				"#333"
-			);
-		}
-
-		super(setting, iconName, buttonText, clickEvent);
-
-		if(iconName.length > 0) {
-			let icon_fullscreen = game.add.sprite(0, 0, iconName);
-			icon_fullscreen.width = 80;
-			icon_fullscreen.height = 80;
-			this.button.setIcon(icon_fullscreen);
-		}
-	}
-
-}
-
-TypingPracticeButton.BUTTON_WIDTH		= 200;
-TypingPracticeButton.BUTTON_HEIGHT		= 100;
-
-TypingPracticeButton.BUTTON_GAP			= 20;
-TypingPracticeButton.MARGIN_VERTICAL	= 100;
-
-TypingPracticeButton.BUTTON_UPPER_POS_Y	= 200;
-TypingPracticeButton.BUTTON_LOWER_POS_Y	= 540;

src/game/menu/menu_app.js

@@ -20,7 +20,7 @@ class MenuApp {
 
 		new WelcomePlayerText(sessionStorageManager.playerName);
 
-		let fullscreenButton = new FullscreenButton(this.game);
+		let fullscreenButton = new FullscreenButton();
 
 
 		// bottom
@@ -47,7 +47,7 @@ class MenuApp {
 	}
 
 	loadSucceeded(replyJSON) {
-		// console.log(replyJSON);
+		console.log(replyJSON);
 
 		self.makeMouseAppButtons(replyJSON.MouseAppList);
 		self.makeTypingButtons(
@@ -68,7 +68,7 @@ class MenuApp {
 
 			let app = mouseAppJSON[i];
 			new GameAppButton(
-				posX, posY, AppButton.TYPE_MOUSE_APP,
+				posX, posY, GameAppButton.TYPE_MOUSE_APP,
 				"icon_fullscreen", app.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = app.AppID;
@@ -88,11 +88,33 @@ class MenuApp {
 		let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
 		let isTypingTestAppExist = typingTestAppCount > 0 ? true : false;
 
-		let typingAppTotalCount = Object.keys(typingAppJSON).length
+		let typingAppTotalCount = Object.keys(typingAppJSON).length;
-			+ (isTypingPracticeAppExist ? 1 : 0)
-			+ (isTypingTestAppExist ? 1 : 0);
 		let typingAppIndex = 0;
 
+
+		// typing tab buttons
+		let typingPracticeTabButton = new TypingTabButton(
+			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 연습",
+			() => {
+				location.href = '../../web/client/menu_typing_practice.html';
+			}
+		);
+		if(typingPracticeAppCount === 0)
+			typingPracticeTabButton.inputEnabled = false;
+
+		let typingTestTabButton = new TypingTabButton(
+			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 시험",
+			() => {
+				location.href = '../../web/client/menu_typing_test.html';
+			}
+		);
+		if(typingTestAppCount === 0)
+			typingTestTabButton.inputEnabled = false;
+
+
+		// typing app buttons
 		for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
 
 			let posX = self.getButtonPosX(
@@ -102,39 +124,11 @@ class MenuApp {
 				typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			if(isTypingPracticeAppExist) {
-				isTypingPracticeAppExist = false;
-
-				new GameAppButton(
-					posX, posY, AppButton.TYPE_TYPING_PRACTICE,
-					"", "타자 연습",
-					() => {
-						location.href = '../../web/client/menu_typing_practice.html';
-					}
-				);
-
-				continue;
-			}
-
-			if(isTypingTestAppExist) {
-				isTypingTestAppExist = false;
-
-				new GameAppButton(
-					posX, posY, AppButton.TYPE_TYPING_PRACTICE,
-					"", "타자 시험",
-					() => {
-						location.href = '../../web/client/menu_typing_test.html';
-					}
-				);
-
-				continue;
-			}
-
 			let app = typingAppJSON[typingAppIndex];
 			let isKoreanTypingApp = app.AppID < 32 ? true : false;
 
 			new GameAppButton(
-				posX, posY, AppButton.TYPE_TYPING_APP,
+				posX, posY, GameAppButton.TYPE_TYPING_APP,
 				"icon_fullscreen",
 				// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
 				app.KoreanName,

src/game/menu/menu_typing_practice.js

@@ -19,6 +19,25 @@ class MenuTypingPractice {
 		let fullscreenButton = new FullscreenButton(this.game);
 
 
+		// typing tab buttons
+		let typingPracticeTabButton = new TypingTabButton(
+			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 연습",
+			() => {
+				location.href = '../../web/client/menu_typing_practice.html';
+			}
+		);
+		typingPracticeTabButton.inputEnabled = false;
+
+		let typingTestTabButton = new TypingTabButton(
+			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 시험",
+			() => {
+				location.href = '../../web/client/menu_typing_test.html';
+			}
+		);
+		// typingTestTabButton.inputEnabled = false;
+
 		// bottom
 		let screenBottom = new ScreenBottom();
 		screenBottom.makeBottomLine();
@@ -41,24 +60,33 @@ class MenuTypingPractice {
 
 	}
 
+	hasApp(appID, appList) {
+		for(let i = 0; i < appList.length; i++) {
+			if(appList[i].AppID === appID)
+				return true;
+		}
+
+		return false;
+	}
+
 	downloadListSucceeded(replyJSON) {
-		console.log(replyJSON);
+		// console.log(replyJSON);
 
 		let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
 
-		let koreanTypingPracticeAppCount = Object.keys(replyJSON.Korean).length;
+		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
-		let englishTypingPracticeAppCount = Object.keys(replyJSON.English).length;
+		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
 
 		for(let i = 0; i < koreanTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.Korean[i];
+			let activeApp = replyJSON.KoreanAppList[i];
 
 			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
 				TypingPracticeButton.BUTTON_UPPER_POS_Y
 			);
 
-			new TypingPracticeButton(
+			let typingPracticeButton = new TypingPracticeButton(
-				posX, posY, LANGUAGE_KOREAN,
+				posX, posY,
 				TypingPracticeButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
@@ -68,10 +96,13 @@ class MenuTypingPractice {
 					location.href = '../../web/client/start.html';
 				}
 			);
+
+			if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
+				typingPracticeButton.inputEnabled = false;
 		}
 
 		for(let i = 0; i < englishTypingPracticeAppCount; i++) {
-			let activeApp = replyJSON.English[i];
+			let activeApp = replyJSON.EnglishAppList[i];
 
 			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
@@ -79,7 +110,7 @@ class MenuTypingPractice {
 			);
 
 			new TypingPracticeButton(
-				posX, posY, LANGUAGE_ENGLISH,
+				posX, posY,
 				TypingPracticeButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
@@ -89,6 +120,9 @@ class MenuTypingPractice {
 					location.href = '../../web/client/start.html';
 				}
 			);
+
+			if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
+				typingPracticeButton.inputEnabled = false;
 		}
 	}
 

src/game/menu/menu_typing_test.js

@@ -26,6 +26,24 @@ class MenuTypingTest {
 		screenBottom.printBottomCenterText("메뉴 > 타자 시험");
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
+		// typing tab buttons
+		let typingPracticeTabButton = new TypingTabButton(
+			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 연습",
+			() => {
+				location.href = '../../web/client/menu_typing_practice.html';
+			}
+		);
+		// typingPracticeTabButton.inputEnabled = false;
+
+		let typingTestTabButton = new TypingTabButton(
+			TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
+			"", "타자 시험",
+			() => {
+				location.href = '../../web/client/menu_typing_test.html';
+			}
+		);
+		typingTestTabButton.inputEnabled = false;
 
 		this.makeActiveTypingTestAppButtons();
 	}
@@ -41,26 +59,33 @@ class MenuTypingTest {
 
 	}
 
+	hasApp(appID, appList) {
+		for(let i = 0; i < appList.length; i++) {
+			if(appList[i].AppID === appID)
+				return true;
+		}
+
+		return false;
+	}
+
 	downloadListSucceeded(replyJSON) {
 		// console.log(replyJSON);
 
 		let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
 
-		let koreanTypingTestAppCount = Object.keys(replyJSON.Korean).length;
+		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
-		let englishTypingTestAppCount = Object.keys(replyJSON.English).length;
+		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
 
-		// let startX = game.world.width / 2 - (buttonWidthGap * koreanTypingTestAppCount / 2) - (buttonWidthGap / 2);
+		for(let i = 0; i < koreanTypingPracticeAppCount; i++) {
-		// let koreanTypingTestAppIndex = 0;
+			let activeApp = replyJSON.KoreanAppList[i];
-		for(let i = 0; i < koreanTypingTestAppCount; i++) {
-			let activeApp = replyJSON.Korean[i];
 
-			let posX = self.getButtonPosX(i, koreanTypingTestAppCount);
+			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, koreanTypingTestAppCount,
+			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
 				TypingPracticeButton.BUTTON_UPPER_POS_Y
 			);
 
-			new TypingPracticeButton(
+			let typingTestButton = new TypingPracticeButton(
-				posX, posY, LANGUAGE_KOREAN,
+				posX, posY,
 				TypingPracticeButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
@@ -70,19 +95,21 @@ class MenuTypingTest {
 					location.href = '../../web/client/start.html';
 				}
 			);
+
+			if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList))
+				typingTestButton.inputEnabled = false;
 		}
 
-		// startX = game.world.width / 2 - (buttonWidthGap * englishTypingTestAppCount / 2) - (buttonWidthGap / 2);
+		for(let i = 0; i < englishTypingPracticeAppCount; i++) {
-		for(let i = 0; i < englishTypingTestAppCount; i++) {
+			let activeApp = replyJSON.EnglishAppList[i];
-			let activeApp = replyJSON.English[i];
 
-			let posX = self.getButtonPosX(i, englishTypingTestAppCount);
+			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
-			let posY = self.getButtonPosY(i, englishTypingTestAppCount,
+			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
 				TypingPracticeButton.BUTTON_LOWER_POS_Y
 			);
 
-			new TypingPracticeButton(
+			let typingTestButton = new TypingPracticeButton(
-				posX, posY, LANGUAGE_ENGLISH,
+				posX, posY,
 				TypingPracticeButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
@@ -92,6 +119,9 @@ class MenuTypingTest {
 					location.href = '../../web/client/start.html';
 				}
 			);
+
+			if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList))
+				typingTestButton.inputEnabled = false;
 		}
 	}
 

src/game/typing/lib/typing_content_bg.js

@@ -7,7 +7,7 @@ class TypingContentBG {
 		let CONTENT_Y = 140;
 
 		let bar = game.add.graphics();
-		if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+		if(isKoreanTypingStage()) {
 			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
 			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
 		} else {
@@ -24,16 +24,25 @@ class TypingContentBG {
 		let CONTENT_Y = 260;
 
 		let bar = game.add.graphics();
-		if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+		if(isKoreanTypingStage()) {
 			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
 			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
 		} else {
-			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+			if(isTypingSentenceStage()) {
-			bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
-			bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+				bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 46);
-			bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
-			bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+				bar.drawRect(0, CONTENT_Y + 46, GAME_SCREEN_SIZE.x, 30);
-			bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+				bar.drawRect(0, CONTENT_Y + 76, GAME_SCREEN_SIZE.x, 44);
+			} else {
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+				bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+				bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+				bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+				bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+			}
 		}
 	}
 

src/game/typing/test/game.js

@@ -35,10 +35,11 @@ class TypingTest {
 
 		let TYPING_CONTENT_Y = 320;
 
-		if(isTypingWordStage())
+		if( (isKoreanTypingStage() && isTypingSentenceStage())
-			textStyleBasic.font = "bold 84px Arial";
+			|| (isEnglishTypingStage() && isTypingSentenceStage()) )
-		else 	// Sentence stage
 			textStyleBasic.font = "bold 48px Arial";
+		else
+			textStyleBasic.font = "bold 84px Arial";
 
 		this.textTypingContent = game.add.text(
 			game.world.centerX, TYPING_CONTENT_Y,
@@ -48,7 +49,7 @@ class TypingTest {
 			.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
 		this.textTypingContent.anchor.set(0.5);
 
-		let TYPING_OFFSET_Y = 100;
+		let TYPING_OFFSET_Y = 90;
 		textStyleBasic.font = "32px Arial";
 
 		let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];

src/web/client/login.html

@@ -15,9 +15,9 @@
 
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 
 		<!-- source files -->

src/web/client/menu_app.html

@@ -15,11 +15,11 @@
 
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/button/game_app_button.js"></script>
-		<script src="../../game/lib/game_app_button.js"></script>
+		<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>
 

src/web/client/menu_app_play_free.html

@@ -15,11 +15,11 @@
 
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/button/app_button.js"></script>
-		<script src="../../game/lib/game_app_button.js"></script>
+		<script src="../../game/lib/button/game_app_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 

src/web/client/menu_typing_practice.html

@@ -15,11 +15,11 @@
 
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/button/typing_practice_button.js"></script>
-		<script src="../../game/lib/typing_practice_button.js"></script>
+		<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>
 

src/web/client/menu_typing_test.html

@@ -15,11 +15,11 @@
 
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/button/typing_practice_button.js"></script>
-		<script src="../../game/lib/typing_practice_button.js"></script>
+		<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>
 

src/web/client/result.html

@@ -21,9 +21,9 @@
 		<script src="../../game/lib/ranking_record_manager.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/announce_box.js"></script>
 		<script src="../../game/lib/animal.js"></script>

src/web/client/space_invaders.html

@@ -22,9 +22,9 @@
 		<script src="../../game/lib/score_board.js"></script>
 		<script src="../../game/lib/score_text.js"></script>
 		<script src="../../game/lib/heart_gauge.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>

src/web/client/start.html

@@ -20,9 +20,9 @@
 		<script src="../../game/lib/history_record_manager.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/how_to_play.js"></script>
 		<script src="../../game/lib/chart.js"></script>

src/web/client/typing_practice.html

@@ -20,9 +20,9 @@
 		<script src="../../game/lib/number_util.js"></script>
 		<script src="../../game/lib/history_record_manager.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>

src/web/client/typing_test.html

@@ -20,9 +20,9 @@
 		<script src="../../game/lib/number_util.js"></script>
 		<script src="../../game/lib/history_record_manager.js"></script>
 		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
-		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
-		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>

src/web/server/app/menu_active_typing_practice_app_list.php

@@ -1,27 +1,64 @@
 <?php
-header('Content-Type: application/json');
+header("Content-Type: application/json");
 
 $maestro_id = $_POST["maestro_id"];
 
+include "./../lib/send_reply_json.php";
 include "./../setup/connect_db.php";
 
 
-$replyJSON["Korean"] = get_active_typing_practice_app_list($maestro_id, 1);
+$koreanAppList = get_typing_practice_app_list(1);
-$replyJSON["English"] = get_active_typing_practice_app_list($maestro_id, 2);
+if($koreanAppList === null) {
-$db_conn->close();
+	set_error_code("no_app_list");
-
+	set_error_message("앱 목록을 가져오지 못했습니다.");
-if($replyJSON.length === 0) {
+	send_result_fail();
-	send_error_message($replyJSON, "앱 목록 가져오기 실패");
-	$db_conn->close();
 	exit;
 }
+$englishAppList = get_typing_practice_app_list(2);
+if($englishAppList === null) {
+	set_error_code("no_app_list");
+	set_error_message("앱 목록을 가져오지 못했습니다.");
+	send_result_fail();
+	exit;
+}
+$koreanActiveAppList = get_active_typing_practice_app_list($maestro_id, 1);
+$englishActiveAppList = get_active_typing_practice_app_list($maestro_id, 2);
 
-echo json_encode($replyJSON, JSON_UNESCAPED_UNICODE);
+set_data("KoreanAppList", $koreanAppList);
-$db_conn->close();
+set_data("EnglishAppList", $englishAppList);
+set_data("KoreanActiveAppList", $koreanActiveAppList);
+set_data("EnglishActiveAppList", $englishActiveAppList);
+send_result_success();
+exit;
 
 
 
-function get_active_typing_practice_app_list($maestro_id, $type) {
+function get_typing_practice_app_list($appType) {
+	global $db_conn;
+
+	$query = "
+		SELECT AppID, AppName, KoreanName
+		FROM app
+		WHERE AppType = ? AND Status = 1
+		ORDER BY AppID ASC";
+	$stmt = $db_conn->prepare($query);
+	$stmt->bind_param('i', $appType);
+	$stmt->execute();
+	$stmt->bind_result($app_id, $app_name, $korean_name);
+
+	$return_array = array();
+	while($stmt->fetch()) {
+	    $row_array['AppID'] = $app_id;
+	    $row_array['AppName'] = $app_name;
+	    $row_array['KoreanName'] = $korean_name;
+		array_push($return_array, $row_array);
+	}
+	$stmt->close();
+
+	return $return_array;
+}
+
+function get_active_typing_practice_app_list($maestro_id, $appType) {
 	global $db_conn;
 
 	$query = "
@@ -31,7 +68,7 @@ function get_active_typing_practice_app_list($maestro_id, $type) {
 		ON A.AppID = AA.AppID AND AA.MaestroID = ? AND A.AppType = ?
 		ORDER BY A.AppID ASC";
 	$stmt = $db_conn->prepare($query);
-	$stmt->bind_param('ii', $maestro_id, $type);
+	$stmt->bind_param('ii', $maestro_id, $appType);
 	$stmt->execute();
 	$stmt->bind_result($app_id, $app_name, $korean_name);
 

src/web/server/app/menu_active_typing_test_app_list.php

@@ -3,25 +3,62 @@ header('Content-Type: application/json');
 
 $maestro_id = $_POST["maestro_id"];
 
+include "./../lib/send_reply_json.php";
 include "./../setup/connect_db.php";
 
 
-$replyJSON["Korean"] = get_active_typing_practice_app_list($maestro_id, 11);
+$koreanAppList = get_typing_practice_app_list(11);
-$replyJSON["English"] = get_active_typing_practice_app_list($maestro_id, 12);
+if($koreanAppList === null) {
-$db_conn->close();
+	set_error_code("no_app_list");
-
+	set_error_message("앱 목록을 가져오지 못했습니다.");
-if($replyJSON.length === 0) {
+	send_result_fail();
-	send_error_message($replyJSON, "앱 목록 가져오기 실패");
-	$db_conn->close();
 	exit;
 }
+$englishAppList = get_typing_practice_app_list(12);
+if($englishAppList === null) {
+	set_error_code("no_app_list");
+	set_error_message("앱 목록을 가져오지 못했습니다.");
+	send_result_fail();
+	exit;
+}
+$koreanActiveAppList = get_active_typing_practice_app_list($maestro_id, 11);
+$englishActiveAppList = get_active_typing_practice_app_list($maestro_id, 12);
 
-echo json_encode($replyJSON, JSON_UNESCAPED_UNICODE);
+set_data("KoreanAppList", $koreanAppList);
-$db_conn->close();
+set_data("EnglishAppList", $englishAppList);
+set_data("KoreanActiveAppList", $koreanActiveAppList);
+set_data("EnglishActiveAppList", $englishActiveAppList);
+send_result_success();
+exit;
 
 
 
-function get_active_typing_practice_app_list($maestro_id, $type) {
+function get_typing_practice_app_list($appType) {
+	global $db_conn;
+
+	$query = "
+		SELECT AppID, AppName, KoreanName
+		FROM app
+		WHERE AppType = ? AND Status = 1
+		ORDER BY AppID ASC";
+	$stmt = $db_conn->prepare($query);
+	$stmt->bind_param('i', $appType);
+	$stmt->execute();
+	$stmt->bind_result($app_id, $app_name, $korean_name);
+
+	$return_array = array();
+	while($stmt->fetch()) {
+	    $row_array['AppID'] = $app_id;
+	    $row_array['AppName'] = $app_name;
+	    $row_array['KoreanName'] = $korean_name;
+		array_push($return_array, $row_array);
+	}
+	$stmt->close();
+
+	return $return_array;
+}
+
+function get_active_typing_practice_app_list($maestro_id, $appType) {
 	global $db_conn;
 
 	$query = "
@@ -31,7 +68,7 @@ function get_active_typing_practice_app_list($maestro_id, $type) {
 		ON A.AppID = AA.AppID AND AA.MaestroID = ? AND A.AppType = ?
 		ORDER BY A.AppID ASC";
 	$stmt = $db_conn->prepare($query);
-	$stmt->bind_param('ii', $maestro_id, $type);
+	$stmt->bind_param('ii', $maestro_id, $appType);
 	$stmt->execute();
 	$stmt->bind_result($app_id, $app_name, $korean_name);