Add: menu bg

src/game/lib/button/game_app_button.js

@@ -84,4 +84,4 @@ GameAppButton.BUTTON_GAP			= 20;
 GameAppButton.MARGIN_VERTICAL		= 100;
 
 GameAppButton.BUTTON_UPPER_POS_Y	= 200;
-GameAppButton.BUTTON_LOWER_POS_Y	= 460;
+GameAppButton.BUTTON_LOWER_POS_Y	= 480;

src/game/lib/button/typing_app_button.js

@@ -44,11 +44,11 @@ class TypingAppButton extends RoundRectButton {
 
 }
 
-TypingAppButton.BUTTON_WIDTH		= 160;
+TypingAppButton.BUTTON_WIDTH		= 220;
 TypingAppButton.BUTTON_HEIGHT		= 80;
 
 TypingAppButton.BUTTON_GAP			= 10;
 TypingAppButton.MARGIN_VERTICAL	= 100;
 
-TypingAppButton.BUTTON_UPPER_POS_Y	= 200;
+TypingAppButton.BUTTON_UPPER_POS_Y	= 205;
-TypingAppButton.BUTTON_LOWER_POS_Y	= 480;
+TypingAppButton.BUTTON_LOWER_POS_Y	= 475;

src/game/lib/button/typing_tab_button.js

@@ -41,13 +41,13 @@ class TypingTabButton extends RoundRectButton {
 
 }
 
-TypingTabButton.BUTTON_WIDTH		= 480;
+TypingTabButton.BUTTON_WIDTH		= 445;
 TypingTabButton.BUTTON_HEIGHT		= 80;
 
-TypingTabButton.BUTTON_GAP			= 20;
+TypingTabButton.BUTTON_GAP			= 26;
 TypingTabButton.MARGIN_VERTICAL		= 100;
 
-TypingTabButton.PRACTICE_BUTTON_POS_X	= GAME_SCREEN_SIZE.x / 4 + TypingTabButton.BUTTON_GAP / 2;
+TypingTabButton.PRACTICE_BUTTON_POS_X	= GAME_SCREEN_SIZE.x / 4 + TypingTabButton.BUTTON_GAP;
-TypingTabButton.TEST_BUTTON_POS_X		= GAME_SCREEN_SIZE.x / 4 * 3 - TypingTabButton.BUTTON_GAP / 2;
+TypingTabButton.TEST_BUTTON_POS_X		= GAME_SCREEN_SIZE.x / 4 * 3 - TypingTabButton.BUTTON_GAP;
 
-TypingTabButton.BUTTON_POS_Y		=  GAME_SCREEN_SIZE.y - (TypingTabButton.BUTTON_HEIGHT / 3 * 4);
+TypingTabButton.BUTTON_POS_Y		=  GAME_SCREEN_SIZE.y - 104;

src/game/lib/screen_bottom.js

@@ -8,6 +8,7 @@ class ScreenBottom {
 
 		this.bottomBarCenterY = game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT / 2;
 
+		this.makeBottomLine();
 		this.leftText = this.printBottomText(this.leftText, "", "left");
 		this.centerText = this.printBottomText(this.centerText, "", "center");
 		this.rightText = this.printBottomText(this.rightText, "", "right");
@@ -15,7 +16,7 @@ class ScreenBottom {
 
 	makeBottomLine() {
 		game.add.graphics()
-			.beginFill(0xffffff, 0.1)
+			.beginFill(0x303030, 1)
 			.drawRect(
 				0, game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT,
 				game.world.width, ScreenBottom.BOTTOM_BAR_HEIGHT

src/game/menu/app_area_bg.js

@@ -0,0 +1,27 @@
+class AppAreaBG {
+
+	constructor(color, alpha, x, y, width, height) {
+		game.add.graphics()
+			.beginFill(color, alpha)
+			.drawRect(x, y, width, height);
+	}
+
+	printText(text, x, y, size, color, alpha) {
+		let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+		let titleText = game.add.text(x, y, text, fontStyle);
+		titleText.anchor.set(0.5);
+		titleText.fontSize = size;
+		titleText.addColor(color, 0);
+		titleText.alpha = alpha;
+	}
+
+};
+
+AppAreaBG.COLOR_MOUSE_APP		= 0xffce54;
+AppAreaBG.COLOR_TYPING_APP		= 0x99ccff;
+
+AppAreaBG.COLOR_TYPING_KOREAN	= 0xffccff;
+AppAreaBG.COLOR_TYPING_ENGLISH	= 0x77aaff;
+
+AppAreaBG.GAP_X					= 10;
+AppAreaBG.GAP_Y					= 10;

src/game/menu/menu_app.js

@@ -12,26 +12,48 @@ class MenuApp {
 		self = this;
 		this.game.stage.backgroundColor = '#4d4d4d';
 
+		// mouse app area
+		let mouseBG = new AppAreaBG(AppAreaBG.COLOR_MOUSE_APP, 1,
+			0, 60,
+			GAME_SCREEN_SIZE.x, 280
+		);
+		mouseBG.printText(
+			"마    우    스      연    습     앱",
+			game.world.centerX, 320,
+			36, "#000", 0.05
+		);
+
+		// typing app area
+		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+			0, 340,
+			GAME_SCREEN_SIZE.x, 378
+		);
+		typingBG.printText(
+			"타      자       연      습       앱",
+			game.world.centerX, 370,
+			36, "#000", 0.05
+		);
+
+
 		// top
 		let backButton = new BackButton( () => {
 			sessionStorageManager.clear();
 			location.href = '../../web/client/login.html';
 		});
 
-		new WelcomePlayerText(sessionStorageManager.playerName);
-
 		let fullscreenButton = new FullscreenButton();
 
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("게임 진행 정보");
 		// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
 		// screenBottom.printBottomCenterText(playingAppName);
 		screenBottom.printBottomCenterText("메뉴");
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
+		new WelcomePlayerText(sessionStorageManager.playerName);
+
 
 		this.loadAppData();
 	}

src/game/menu/menu_typing_practice.js

@@ -19,6 +19,35 @@ class MenuTypingPractice {
 		let fullscreenButton = new FullscreenButton(this.game);
 
 
+		// typing app area
+		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+			0, 60,
+			GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
+		);
+
+		// korean app area
+		let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+			0, 60 + AppAreaBG.GAP_Y,
+			GAME_SCREEN_SIZE.x, 270
+		);
+		koreanBG.printText(
+			"한          글          타          자",
+			game.world.centerX, 320,
+			36, "#000", 0.05
+		);
+
+		// english app area
+		let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+			0, 340,
+			GAME_SCREEN_SIZE.x, 270
+		);
+		englishBG.printText(
+			"영          문          타          자",
+			game.world.centerX, 370,
+			36, "#000", 0.05
+		);
+
+
 		// typing tab buttons
 		let typingPracticeTabButton = new TypingTabButton(
 			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
@@ -40,7 +69,6 @@ class MenuTypingPractice {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("게임 진행 정보");
 		screenBottom.printBottomCenterText("메뉴 > 타자 연습");
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/menu/menu_typing_test.js

@@ -19,9 +19,38 @@ class MenuTypingTest {
 		let fullscreenButton = new FullscreenButton(this.game);
 
 
+		// typing app area
+		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
+			0, 60,
+			GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
+		);
+
+		// korean app area
+		let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+			0, 60 + AppAreaBG.GAP_Y,
+			GAME_SCREEN_SIZE.x, 270
+		);
+		koreanBG.printText(
+			"한          글          타          자",
+			game.world.centerX, 320,
+			36, "#000", 0.05
+		);
+
+		// english app area
+		let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+			0, 340,
+			GAME_SCREEN_SIZE.x, 270
+		);
+		englishBG.printText(
+			"영          문          타          자",
+			game.world.centerX, 370,
+			36, "#000", 0.05
+		);
+
+
+
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("게임 진행 정보");
 		screenBottom.printBottomCenterText("메뉴 > 타자 시험");
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/menu/welcome_player_text.js

@@ -1,7 +1,7 @@
 class WelcomePlayerText extends Phaser.Text {
 
 	constructor(playerName) {
-		super(game, game.world.width / 2, WelcomePlayerText.FONT_HEIGHT_PX, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
+		super(game, game.world.width / 2, 32, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
 
 		this.anchor.set(0.5);
 		this.inputEnabled = false;
@@ -14,17 +14,9 @@ class WelcomePlayerText extends Phaser.Text {
 		this.stroke = '#000';
 		this.strokeThickness = 5;
 
+		this.alpha = 0;
 		let tweenAlpha = game.add.tween(this);
-		tweenAlpha.from( { alpha: 0 } ).to( { alpha: 100 }, 1000, Phaser.Easing.Linear.None, true);
+		tweenAlpha.to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
-
-		/*
-		let tweenAlpha = game.add.tween(this);
-		tweenAlpha.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
-
-		let tweenMoveUp = game.add.tween(this);
-		tweenMoveUp.to( { y: this.y - WelcomePlayerText.MOVE_UP_AMOUNT_PX }, 1000, Phaser.Easing.Linear.None, true);
-		tweenMoveUp.onComplete.addOnce(this.destroySelf, this);
-		*/
 
 		game.add.existing(this);
 	};
@@ -40,6 +32,4 @@ WelcomePlayerText.DEFAULT_TEXT_FONT = {
 	boundsAlignH: "center",		// left, center. right
 	boundsAlignV: "middle", 	// top, middle, bottom
 	fill: "#fff"
-};
+};
-
-WelcomePlayerText.FONT_HEIGHT_PX				= 35;

src/game/mouse/space_invaders/game.js

@@ -63,7 +63,6 @@ class Game {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/result/result.js

@@ -47,7 +47,6 @@ class Result {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		screenBottom.printBottomLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
 		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/start/start.js

@@ -44,7 +44,6 @@ class Start {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		screenBottom.printBottomLeftText("오늘의 최고 기록 : ");
 		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/typing/practice/game.js

@@ -104,7 +104,6 @@ class TypingPractice {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("");
 		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/game/typing/test/game.js

@@ -105,7 +105,6 @@ class TypingTest {
 
 		// bottom
 		let screenBottom = new ScreenBottom();
-		screenBottom.makeBottomLine();
 		screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);

src/web/client/menu_app.html

@@ -27,6 +27,7 @@
 		<script src="../../game/menu/menu_app.js"></script>
 		<script src="../../game/menu/main_menu_app.js"></script>
 		<script src="../../game/menu/welcome_player_text.js"></script>
+		<script src="../../game/menu/app_area_bg.js"></script>
 
 
 		<style>

src/web/client/menu_typing_practice.html

@@ -26,6 +26,7 @@
 		<!-- source files -->
 		<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>
 
 
 		<style>

src/web/client/menu_typing_test.html

@@ -26,6 +26,7 @@
 		<!-- source files -->
 		<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>
 
 
 		<style>