Fix: screen top ui, screen bottom ui

src/game/lib/button/typing_app_button.js

@@ -22,9 +22,9 @@ class TypingAppButton extends RoundRectButton {
 				0x666666
 			);
 			setting.setTextColor(
-				"#668",
+				"#66c",
-				"#668",
+				"#66c",
-				"#668",
+				"#66c",
 				"#333"
 			);
 			break;
@@ -44,9 +44,9 @@ class TypingAppButton extends RoundRectButton {
 				0x666666
 			);
 			setting.setTextColor(
-				"#866",
+				"#a66",
-				"#866",
+				"#a66",
-				"#866",
+				"#a66",
 				"#333"
 			);
 			break;

src/game/lib/screen_bottom_ui.js

@@ -1,41 +1,41 @@
 /////////////////////////////
 // Screen bottom
 
-class ScreenBottom {
+class ScreenBottomUI {
 
 	constructor() {
 		this.dbConnectManager = new DBConnectManager();
 
-		this.bottomBarCenterY = game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT / 2;
+		this.bottomBarCenterY = game.world.height - ScreenBottomUI.BG_HEIGHT / 2;
 
-		this.makeBottomLine();
+		this.drawBG();
-		this.leftText = this.printBottomText(this.leftText, "", "left");
+		this.leftText = this.printText(this.leftText, "", "left");
-		this.centerText = this.printBottomText(this.centerText, "", "center");
+		this.centerText = this.printText(this.centerText, "", "center");
-		this.rightText = this.printBottomText(this.rightText, "", "right");
+		this.rightText = this.printText(this.rightText, "", "right");
 	}
 
-	makeBottomLine() {
+	drawBG() {
 		game.add.graphics()
 			.beginFill(0x303030, 1)
 			.drawRect(
-				0, game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT,
+				0, game.world.height - ScreenBottomUI.BG_HEIGHT,
-				game.world.width, ScreenBottom.BOTTOM_BAR_HEIGHT
+				game.world.width, ScreenBottomUI.BG_HEIGHT
 			);
 	}
 
-	printBottomLeftText(text) {
+	printLeftText(text) {
 		this.leftText.text = text;
 	}
 
-	printBottomCenterText(text) {
+	printCenterText(text) {
 		this.centerText.text = text;
 	}
 
-	printBottomRightText(text) {
+	printRightText(text) {
 		this.rightText.text = text;
 	}
 
-	printBottomText(textObject, text, align) {
+	printText(textObject, text, align) {
 		if(textObject !== null && textObject !== undefined) {
 			textObject.text = "";
 			textObject = null;
@@ -45,7 +45,7 @@ class ScreenBottom {
 		let anchorValue = 0;
 		switch(align) {
 			case "left":
-			posX = ScreenBottom.BOTTOM_BAR_TEXT_OFFSET;
+			posX = ScreenBottomUI.TEXT_OFFSET;
 			break;
 
 			case "center":
@@ -54,7 +54,7 @@ class ScreenBottom {
 			break;
 
 			case "right":
-			posX = game.world.width - ScreenBottom.BOTTOM_BAR_TEXT_OFFSET;
+			posX = game.world.width - ScreenBottomUI.TEXT_OFFSET;
 			anchorValue = 1;
 			break;
 		}
@@ -67,10 +67,10 @@ class ScreenBottom {
 		return textObject;
 	}
 
-	printBottomLeftTextWithBestRecord(bestRecord) {
+	printLeftTextWithBestRecord(bestRecord) {
 		let roundUpBestRecord = Math.round(bestRecord);
 		let highScoreWithCommas = NumberUtil.numberWithCommas(roundUpBestRecord);
-		this.printBottomLeftText("오늘의 최고 기록 : " + highScoreWithCommas);
+		this.printLeftText("오늘의 최고 기록 : " + highScoreWithCommas);
 	}
 
 	getFontStyle() {
@@ -79,6 +79,7 @@ class ScreenBottom {
 
 }
 
-ScreenBottom.BOTTOM_BAR_HEIGHT					= 50;
+ScreenBottomUI.BG_HEIGHT					= 50;
-ScreenBottom.BOTTOM_BAR_NAME_WIDTH				= 200;
+
-ScreenBottom.BOTTOM_BAR_TEXT_OFFSET				= 10;
+ScreenBottomUI.NAME_WIDTH				= 200;
+ScreenBottomUI.TEXT_OFFSET				= 10;

src/game/lib/screen_top_ui.js

@@ -0,0 +1,30 @@
+/////////////////////////////
+// Screen top ui
+
+class ScreenTopUI {
+
+	constructor() {
+		this.drawBG();
+	}
+
+	drawBG() {
+		game.add.graphics()
+			.beginFill(0x303030, 1)
+			.drawRect(
+				0, 0,
+				game.world.width, ScreenTopUI.BG_HEIGHT
+			);
+	}
+
+	makeBackButton(eventHandler) {
+		this.backButton = new BackButton(eventHandler);
+	}
+
+	makeFullScreenButton() {
+		// this.fullscreenButton = new FullscreenButton();
+	}
+
+}
+
+
+ScreenTopUI.BG_HEIGHT		= 60;

src/game/login/login.js

@@ -15,12 +15,15 @@ class Login {
 		this.game.stage.backgroundColor = '#4d4d4d';
 		this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
 
-		let backButton = new BackButton( () => {
+		// top ui
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			sessionStorageManager.clear();
 			location.href = '../../web/main/index.html';
 		});
+		screenTopUI.makeFullScreenButton();
+
 
-		let fullscreenButton = new FullscreenButton(this.game);
 
 		let textX = this.game.world.centerX - 320;
 		if(sessionStorageManager.maestroID === null)

src/game/menu/app_area_bg.js

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

src/game/menu/menu_app.js

@@ -5,7 +5,6 @@ class MenuApp {
 
 	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-		game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png');
 	}
 
 	create() {
@@ -30,27 +29,27 @@ class MenuApp {
 		);
 		typingBG.printText(
 			"타 자  연 습 앱",
-			game.world.centerX, 500,
+			game.world.centerX, 490,
 			170, "#000", 0.03
 		);
 
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			sessionStorageManager.clear();
 			location.href = '../../web/client/login.html';
 		});
-
+		screenTopUI.makeFullScreenButton();
-		let fullscreenButton = new FullscreenButton();
 
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		// screenBottom.printBottomLeftText("게임 진행 정보");
+		// ScreenBottomUI.printLeftText("게임 진행 정보");
 		// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
-		// screenBottom.printBottomCenterText(playingAppName);
+		// ScreenBottomUI.printCenterText(playingAppName);
-		screenBottom.printBottomCenterText("메뉴");
+		screenBottomUI.printCenterText("메뉴");
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 		new WelcomePlayerText(sessionStorageManager.playerName);
 
@@ -69,7 +68,7 @@ class MenuApp {
 	}
 
 	loadSucceeded(replyJSON) {
-		console.log(replyJSON);
+		// console.log(replyJSON);
 
 		self.makeMouseAppButtons(
 			replyJSON.MouseAppList,

src/game/menu/menu_typing_practice.js

@@ -14,13 +14,6 @@ class MenuTypingPractice {
 		self = this;
 		this.game.stage.backgroundColor = '#4d4d4d';
 
-		// top
-		let backButton = new BackButton( () => {
-			location.href = '../../web/client/menu_app.html';
-		});
-		let fullscreenButton = new FullscreenButton(this.game);
-
-
 		// typing app area
 		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
 			0, 60,
@@ -28,10 +21,10 @@ class MenuTypingPractice {
 		);
 
 		// korean app area
-		let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+		// let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
-			AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
+		// 	AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
-			GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
+		// 	GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
-		);
+		// );
 		// koreanBG.printText(
 		// 	"한          글          타          자",
 		// 	game.world.centerX, 320,
@@ -39,10 +32,10 @@ class MenuTypingPractice {
 		// );
 
 		// english app area
-		let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+		// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
-			AppAreaBG.MARGIN_X, 340,
+		// 	AppAreaBG.MARGIN_X, 340,
-			GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
+		// 	GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
-		);
+		// );
 		// englishBG.printText(
 		// 	"영          문          타          자",
 		// 	game.world.centerX, 370,
@@ -50,6 +43,14 @@ class MenuTypingPractice {
 		// );
 
 
+		// top ui
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
+			location.href = '../../web/client/menu_app.html';
+		});
+		screenTopUI.makeFullScreenButton();
+
+
 		// typing tab buttons
 		let typingPracticeTabButton = new TypingTabButton(
 			TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
@@ -69,11 +70,11 @@ class MenuTypingPractice {
 		);
 		// typingTestTabButton.inputEnabled = false;
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		// screenBottom.printBottomLeftText("게임 진행 정보");
+		// screenBottomUI.printLeftText("게임 진행 정보");
-		screenBottom.printBottomCenterText("메뉴 > 타자 연습");
+		screenBottomUI.printCenterText("메뉴 > 타자 연습");
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 
 		this.makeActiveTypingPracticeAppButtons();

src/game/menu/menu_typing_test.js

@@ -14,13 +14,6 @@ class MenuTypingTest {
 		self = this;
 		this.game.stage.backgroundColor = '#4d4d4d';
 
-		// top
-		let backButton = new BackButton( () => {
-			location.href = '../../web/client/menu_app.html';
-		});
-		let fullscreenButton = new FullscreenButton(this.game);
-
-
 		// typing app area
 		let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
 			0, 60,
@@ -28,10 +21,10 @@ class MenuTypingTest {
 		);
 
 		// korean app area
-		let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
+		// let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
-			0, 60 + AppAreaBG.GAP_Y,
+		// 	0, 60 + AppAreaBG.GAP_Y,
-			GAME_SCREEN_SIZE.x, 270
+		// 	GAME_SCREEN_SIZE.x, 270
-		);
+		// );
 		// koreanBG.printText(
 		// 	"한          글          타          자",
 		// 	game.world.centerX, 320,
@@ -39,10 +32,10 @@ class MenuTypingTest {
 		// );
 
 		// english app area
-		let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
+		// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
-			0, 340,
+		// 	0, 340,
-			GAME_SCREEN_SIZE.x, 270
+		// 	GAME_SCREEN_SIZE.x, 270
-		);
+		// );
 		// englishBG.printText(
 		// 	"영          문          타          자",
 		// 	game.world.centerX, 370,
@@ -50,12 +43,13 @@ class MenuTypingTest {
 		// );
 
 
+		// top ui
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
+			location.href = '../../web/client/menu_app.html';
+		});
+		screenTopUI.makeFullScreenButton();
 
-		// bottom
-		let screenBottom = new ScreenBottom();
-		// screenBottom.printBottomLeftText("게임 진행 정보");
-		screenBottom.printBottomCenterText("메뉴 > 타자 시험");
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
 		// typing tab buttons
 		let typingPracticeTabButton = new TypingTabButton(
@@ -77,6 +71,13 @@ class MenuTypingTest {
 		typingTestTabButton.inputEnabled = false;
 
 		this.makeActiveTypingTestAppButtons();
+
+
+		// bottom ui
+		let screenBottomUI = new ScreenBottomUI();
+		// screenBottomUI.printLeftText("게임 진행 정보");
+		screenBottomUI.printCenterText("메뉴 > 타자 시험");
+		screenBottomUI.printRightText(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, 32, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
+		super(game, game.world.width / 2, game.world.height / 2 - 40, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
 
 		this.anchor.set(0.5);
 		this.inputEnabled = false;
@@ -14,9 +14,9 @@ class WelcomePlayerText extends Phaser.Text {
 		this.stroke = '#000';
 		this.strokeThickness = 5;
 
-		this.alpha = 0;
+		this.alpha = 1;
 		let tweenAlpha = game.add.tween(this);
-		tweenAlpha.to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
+		tweenAlpha.to( { alpha: 0 }, 2000, Phaser.Easing.Back.In, true);
 
 		game.add.existing(this);
 	};
@@ -28,7 +28,7 @@ class WelcomePlayerText extends Phaser.Text {
 }
 
 WelcomePlayerText.DEFAULT_TEXT_FONT = {
-	font: "40px Arial",
+	font: "60px Arial",
 	boundsAlignH: "center",		// left, center. right
 	boundsAlignV: "middle", 	// top, middle, bottom
 	fill: "#fff"

src/game/mouse/space_invaders/game.js

@@ -8,20 +8,13 @@ class Game {
 
 		sessionStorageManager.isNewBestRecrd = false;
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			sessionStorageManager.resetPlayingAppData();
 			location.href = '../../web/client/menu_app.html';
 		});
-
+		screenTopUI.makeFullScreenButton();
-		let heartGauge = new HeartGauge(heartManager);
-		heartManager.addOnChangeGameOverListener(
-			() => { this.gameOver(); }
-		);
-		heartGauge.start();
-
-		let fullscreenButton = new FullscreenButton(this.game);
-
 
 		let scoreBoard = new ScoreBoard();
 		scoreManager.addOnChangeScoreListener( score => {
@@ -32,9 +25,15 @@ class Game {
 			console.log(highScore);
 			sessionStorageManager.bestRecord = highScore;
 			sessionStorageManager.isNewBestRecrd = true;
-			screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+			screenBottomUI.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 		});
 
+		let heartGauge = new HeartGauge(heartManager);
+		heartManager.addOnChangeGameOverListener(
+			() => { this.gameOver(); }
+		);
+		heartGauge.start();
+
 
 		// waiting room
 		this.game.add.graphics()
@@ -61,11 +60,11 @@ class Game {
 		this.alienTimer = new AlienTimer(this.aliens);
 
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
-		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 
 		this.startGame();

src/game/result/result.js

@@ -16,8 +16,9 @@ class Result {
 		this.chartGraphics = game.add.graphics(100, game.world.height - 120);
 
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			if(isTypingPracticeStage())
 				location.href = '../../web/client/menu_typing_practice.html';
 			else if(isTypingTestStage())
@@ -27,8 +28,7 @@ class Result {
 
 			sessionStorageManager.resetPlayingAppData();
 		});
-
+		screenTopUI.makeFullScreenButton();
-		let fullscreenButton = new FullscreenButton(this.game);
 
 
 		// contents
@@ -45,11 +45,11 @@ class Result {
 			let recordBoard = new RecordBoard(RecordBoard.TYPE_DB);
 		}
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		screenBottom.printBottomLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
+		screenBottomUI.printLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
-		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 	}
 
 	printRecord() {

src/game/start/start.js

@@ -15,8 +15,9 @@ class Start {
 		this.chart = new Chart();
 
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			if(isTypingPracticeStage())
 				location.href = '../../web/client/menu_typing_practice.html';
 			else if(isTypingTestStage())
@@ -26,8 +27,7 @@ class Start {
 
 			sessionStorageManager.resetPlayingAppData();
 		});
-
+		screenTopUI.makeFullScreenButton();
-		let fullscreenButton = new FullscreenButton(this.game);
 
 
 		// contents
@@ -42,11 +42,11 @@ class Start {
 		}
 
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		screenBottom.printBottomLeftText("오늘의 최고 기록 : ");
+		screenBottomUI.printLeftText("오늘의 최고 기록 : ");
-		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 		this.dbConnectManager.requestTodayBestRecord(
 			sessionStorageManager.maestroID,
@@ -54,11 +54,11 @@ class Start {
 			sessionStorageManager.playingAppID,
 			replyJSON => {
 				sessionStorageManager.bestRecord = Number(replyJSON["BestRecord"]);
-				screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 			},
 			replyJSON => {	// no data
 				sessionStorageManager.bestRecord = 0;
-				screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
 			}
 		);
 	}

src/game/typing/practice/game.js

@@ -13,12 +13,14 @@ class TypingPractice {
 
 		game.stage.backgroundColor = '#4d4d4d';
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			sessionStorageManager.resetPlayingAppData();
-
 			location.href = '../../web/client/menu_typing_practice.html';
 		});
+		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, 90);
@@ -34,8 +36,6 @@ class TypingPractice {
 			self.gameOver();
 		});
 
-		let fullscreenButton = new FullscreenButton(game);
-
 
 		// typing content
 		let typingContentBG = new TypingContentBG();
@@ -102,11 +102,11 @@ class TypingPractice {
 
 
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		// screenBottom.printBottomLeftText("");
+		// screenBottomUI.printBottomUILeftText("");
-		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 
 		this.startGame();

src/game/typing/test/game.js

@@ -11,12 +11,14 @@ class TypingTest {
 
 		game.stage.backgroundColor = '#4d4d4d';
 
-		// top
+		// top ui
-		let backButton = new BackButton( () => {
+		let screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( () => {
 			sessionStorageManager.resetPlayingAppData();
-
 			location.href = '../../web/client/menu_typing_test.html';
 		});
+		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);
@@ -27,8 +29,6 @@ class TypingTest {
 		this.averageTypingSpeedText = new AverageTypingSpeed();
 		this.contentProgressText = new ContentProgress();
 
-		let fullscreenButton = new FullscreenButton(game);
-
 
 		// typing content
 		let typingContentBG = new TypingContentBG();
@@ -103,11 +103,11 @@ class TypingTest {
 		}
 
 
-		// bottom
+		// bottom ui
-		let screenBottom = new ScreenBottom();
+		let screenBottomUI = new ScreenBottomUI();
-		screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
-		screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
-		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.playerName);
 
 
 		this.startGame();

src/web/client/login.html

@@ -18,6 +18,7 @@
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
+		<script src="../../game/lib/screen_top_ui.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 
 		<!-- source files -->

src/web/client/menu_app.html

@@ -20,7 +20,8 @@
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/button/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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 
 		<!-- source files -->

src/web/client/menu_app_play_free.html

@@ -20,7 +20,8 @@
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/button/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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 
 		<!-- source files -->

src/web/client/menu_typing_practice.html

@@ -20,7 +20,8 @@
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/button/typing_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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/animal.js"></script>
 

src/web/client/menu_typing_test.html

@@ -20,7 +20,8 @@
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
 		<script src="../../game/lib/button/typing_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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/animal.js"></script>
 

src/web/client/result.html

@@ -24,7 +24,8 @@
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/screen_bottom.js"></script>
+		<script src="../../game/lib/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/announce_box.js"></script>
 		<script src="../../game/lib/animal.js"></script>
 

src/web/client/space_invaders.html

@@ -26,7 +26,8 @@
 		<script src="../../game/lib/button/back_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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 
 		<!-- Space Invaders : source files -->

src/web/client/start.html

@@ -23,7 +23,8 @@
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/screen_bottom.js"></script>
+		<script src="../../game/lib/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/how_to_play.js"></script>
 		<script src="../../game/lib/chart.js"></script>
 		<script src="../../game/lib/announce_box.js"></script>

src/web/client/typing_practice.html

@@ -24,7 +24,8 @@
 		<script src="../../game/lib/button/back_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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 		<script src="../../game/lib/animal.js"></script>
 

src/web/client/typing_test.html

@@ -24,7 +24,8 @@
 		<script src="../../game/lib/button/back_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/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
 		<script src="../../game/lib/game_over_text.js"></script>
 		<script src="../../game/lib/animal.js"></script>