From a291c18ea138990be6621248414e461004cf1cb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Sat, 1 Sep 2018 17:36:17 +0900 Subject: [PATCH] Add: menu bg --- src/game/lib/button/game_app_button.js | 2 +- src/game/lib/button/typing_app_button.js | 6 ++--- src/game/lib/button/typing_tab_button.js | 10 ++++---- src/game/lib/screen_bottom.js | 3 ++- src/game/menu/app_area_bg.js | 27 +++++++++++++++++++++ src/game/menu/menu_app.js | 28 ++++++++++++++++++--- src/game/menu/menu_typing_practice.js | 30 ++++++++++++++++++++++- src/game/menu/menu_typing_test.js | 31 +++++++++++++++++++++++- src/game/menu/welcome_player_text.js | 18 +++----------- src/game/mouse/space_invaders/game.js | 1 - src/game/result/result.js | 1 - src/game/start/start.js | 1 - src/game/typing/practice/game.js | 1 - src/game/typing/test/game.js | 1 - src/web/client/menu_app.html | 1 + src/web/client/menu_typing_practice.html | 1 + src/web/client/menu_typing_test.html | 1 + 17 files changed, 129 insertions(+), 34 deletions(-) create mode 100644 src/game/menu/app_area_bg.js diff --git a/src/game/lib/button/game_app_button.js b/src/game/lib/button/game_app_button.js index bb70837..ec6086f 100644 --- a/src/game/lib/button/game_app_button.js +++ b/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; \ No newline at end of file +GameAppButton.BUTTON_LOWER_POS_Y = 480; \ No newline at end of file diff --git a/src/game/lib/button/typing_app_button.js b/src/game/lib/button/typing_app_button.js index 1e61dfc..a868150 100644 --- a/src/game/lib/button/typing_app_button.js +++ b/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_LOWER_POS_Y = 480; \ No newline at end of file +TypingAppButton.BUTTON_UPPER_POS_Y = 205; +TypingAppButton.BUTTON_LOWER_POS_Y = 475; \ No newline at end of file diff --git a/src/game/lib/button/typing_tab_button.js b/src/game/lib/button/typing_tab_button.js index 645934d..af84960 100644 --- a/src/game/lib/button/typing_tab_button.js +++ b/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.TEST_BUTTON_POS_X = GAME_SCREEN_SIZE.x / 4 * 3 - 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; -TypingTabButton.BUTTON_POS_Y = GAME_SCREEN_SIZE.y - (TypingTabButton.BUTTON_HEIGHT / 3 * 4); \ No newline at end of file +TypingTabButton.BUTTON_POS_Y = GAME_SCREEN_SIZE.y - 104; \ No newline at end of file diff --git a/src/game/lib/screen_bottom.js b/src/game/lib/screen_bottom.js index 3da7550..edb3633 100644 --- a/src/game/lib/screen_bottom.js +++ b/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 diff --git a/src/game/menu/app_area_bg.js b/src/game/menu/app_area_bg.js new file mode 100644 index 0000000..899471d --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index 7fffe9b..fcc5791 100644 --- a/src/game/menu/menu_app.js +++ b/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(); } diff --git a/src/game/menu/menu_typing_practice.js b/src/game/menu/menu_typing_practice.js index 253e429..b3edcdd 100644 --- a/src/game/menu/menu_typing_practice.js +++ b/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); diff --git a/src/game/menu/menu_typing_test.js b/src/game/menu/menu_typing_test.js index 27f580b..f6d6a85 100644 --- a/src/game/menu/menu_typing_test.js +++ b/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); diff --git a/src/game/menu/welcome_player_text.js b/src/game/menu/welcome_player_text.js index 2479ed9..5197577 100644 --- a/src/game/menu/welcome_player_text.js +++ b/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); - - /* - 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); - */ + tweenAlpha.to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true); 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; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/game/mouse/space_invaders/game.js b/src/game/mouse/space_invaders/game.js index 19e27c9..320fb7c 100644 --- a/src/game/mouse/space_invaders/game.js +++ b/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); diff --git a/src/game/result/result.js b/src/game/result/result.js index 25b34ac..639acc4 100644 --- a/src/game/result/result.js +++ b/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); diff --git a/src/game/start/start.js b/src/game/start/start.js index 2231f50..f8a1f89 100644 --- a/src/game/start/start.js +++ b/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); diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js index 31cbc42..d50e0aa 100644 --- a/src/game/typing/practice/game.js +++ b/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); diff --git a/src/game/typing/test/game.js b/src/game/typing/test/game.js index 2cc1111..95d2727 100644 --- a/src/game/typing/test/game.js +++ b/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); diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 2d0f636..3a0e214 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -27,6 +27,7 @@ +