jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: screen top ui, screen bottom ui

Browse Source
This commit is contained in:
Jisang Park
2018-09-03 09:15:50 +09:00
parent ac46b61539
commit 8cf7f67ac6
24 changed files with 197 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/typing_app_button.js
+6 -6
View File
@@ -22,9 +22,9 @@ class TypingAppButton extends RoundRectButton {
0x666666
);
setting.setTextColor(
"#668",
"#668",
"#668",
"#66c",
"#66c",
"#66c",
"#333"
);
break;
@@ -44,9 +44,9 @@ class TypingAppButton extends RoundRectButton {
0x666666
);
setting.setTextColor(
"#866",
"#866",
"#866",
"#a66",
"#a66",
"#a66",
"#333"
);
break;
src/game/lib/screen_bottom.js → src/game/lib/screen_bottom_ui.js
+21 -20
View File
@@ -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.leftText = this.printBottomText(this.leftText, "", "left");
this.centerText = this.printBottomText(this.centerText, "", "center");
this.rightText = this.printBottomText(this.rightText, "", "right");
this.drawBG();
this.leftText = this.printText(this.leftText, "", "left");
this.centerText = this.printText(this.centerText, "", "center");
this.rightText = this.printText(this.rightText, "", "right");
}
makeBottomLine() {
drawBG() {
game.add.graphics()
.beginFill(0x303030, 1)
.drawRect(
0, game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT,
game.world.width, ScreenBottom.BOTTOM_BAR_HEIGHT
0, game.world.height - ScreenBottomUI.BG_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;
ScreenBottom.BOTTOM_BAR_NAME_WIDTH = 200;
ScreenBottom.BOTTOM_BAR_TEXT_OFFSET = 10;
ScreenBottomUI.BG_HEIGHT = 50;
ScreenBottomUI.NAME_WIDTH = 200;
ScreenBottomUI.TEXT_OFFSET = 10;
src/game/lib/screen_top_ui.js
+30
View File
@@ -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
+5 -2
View File
@@ -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
+2 -2
View File
@@ -20,8 +20,8 @@ class AppAreaBG {
AppAreaBG.COLOR_MOUSE_APP = 0xffce54;
AppAreaBG.COLOR_TYPING_APP = 0x99ccff;
AppAreaBG.COLOR_TYPING_KOREAN = 0x88bbff;
AppAreaBG.COLOR_TYPING_ENGLISH = 0xbbccff;
AppAreaBG.COLOR_TYPING_KOREAN = 0xbbccff;
AppAreaBG.COLOR_TYPING_ENGLISH = 0x88bbff;
AppAreaBG.GAP_X = 10;
AppAreaBG.GAP_Y = 10;
src/game/menu/menu_app.js
+12 -13
View File
@@ -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
let backButton = new BackButton( () => {
// top ui
let screenTopUI = new ScreenTopUI();
screenTopUI.makeBackButton( () => {
sessionStorageManager.clear();
location.href = '../../web/client/login.html';
});
let fullscreenButton = new FullscreenButton();
screenTopUI.makeFullScreenButton();
// bottom
let screenBottom = new ScreenBottom();
// screenBottom.printBottomLeftText("게임 진행 정보");
// bottom ui
let screenBottomUI = new ScreenBottomUI();
// ScreenBottomUI.printLeftText("게임 진행 정보");
// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
// screenBottom.printBottomCenterText(playingAppName);
screenBottom.printBottomCenterText("메뉴");
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// ScreenBottomUI.printCenterText(playingAppName);
screenBottomUI.printCenterText("메뉴");
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
+21 -20
View File
@@ -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,
AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
);
// let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
// AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y,
// 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,
AppAreaBG.MARGIN_X, 340,
GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270
);
// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
// AppAreaBG.MARGIN_X, 340,
// 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
let screenBottom = new ScreenBottom();
// screenBottom.printBottomLeftText("게임 진행 정보");
screenBottom.printBottomCenterText("메뉴 > 타자 연습");
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
// screenBottomUI.printLeftText("게임 진행 정보");
screenBottomUI.printCenterText("메뉴 > 타자 연습");
screenBottomUI.printRightText(sessionStorageManager.playerName);
this.makeActiveTypingPracticeAppButtons();
src/game/menu/menu_typing_test.js
+21 -20
View File
@@ -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,
0, 60 + AppAreaBG.GAP_Y,
GAME_SCREEN_SIZE.x, 270
);
// 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,
@@ -39,10 +32,10 @@ class MenuTypingTest {
// );
// english app area
let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
0, 340,
GAME_SCREEN_SIZE.x, 270
);
// let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
// 0, 340,
// 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
+4 -4
View File
@@ -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
+16 -17
View File
@@ -8,20 +8,13 @@ class Game {
sessionStorageManager.isNewBestRecrd = false;
// top
let backButton = new BackButton( () => {
// top ui
let screenTopUI = new ScreenTopUI();
screenTopUI.makeBackButton( () => {
sessionStorageManager.resetPlayingAppData();
location.href = '../../web/client/menu_app.html';
});
let heartGauge = new HeartGauge(heartManager);
heartManager.addOnChangeGameOverListener(
() => { this.gameOver(); }
);
heartGauge.start();
let fullscreenButton = new FullscreenButton(this.game);
screenTopUI.makeFullScreenButton();
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
let screenBottom = new ScreenBottom();
screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
screenBottomUI.printRightText(sessionStorageManager.playerName);
this.startGame();
src/game/result/result.js
+9 -9
View File
@@ -16,8 +16,9 @@ class Result {
this.chartGraphics = game.add.graphics(100, game.world.height - 120);
// top
let backButton = new BackButton( () => {
// top ui
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();
});
let fullscreenButton = new FullscreenButton(this.game);
screenTopUI.makeFullScreenButton();
// contents
@@ -45,11 +45,11 @@ class Result {
let recordBoard = new RecordBoard(RecordBoard.TYPE_DB);
}
// bottom
let screenBottom = new ScreenBottom();
screenBottom.printBottomLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
screenBottomUI.printLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
screenBottomUI.printRightText(sessionStorageManager.playerName);
}
printRecord() {
src/game/start/start.js
+11 -11
View File
@@ -15,8 +15,9 @@ class Start {
this.chart = new Chart();
// top
let backButton = new BackButton( () => {
// top ui
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();
});
let fullscreenButton = new FullscreenButton(this.game);
screenTopUI.makeFullScreenButton();
// contents
@@ -42,11 +42,11 @@ class Start {
}
// bottom
let screenBottom = new ScreenBottom();
screenBottom.printBottomLeftText("오늘의 최고 기록 : ");
screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
screenBottomUI.printLeftText("오늘의 최고 기록 : ");
screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
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
+10 -10
View File
@@ -13,12 +13,14 @@ class TypingPractice {
game.stage.backgroundColor = '#4d4d4d';
// top
let backButton = new BackButton( () => {
// top ui
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
let screenBottom = new ScreenBottom();
// screenBottom.printBottomLeftText("");
screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
// screenBottomUI.printBottomUILeftText("");
screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
screenBottomUI.printRightText(sessionStorageManager.playerName);
this.startGame();
src/game/typing/test/game.js
+10 -10
View File
@@ -11,12 +11,14 @@ class TypingTest {
game.stage.backgroundColor = '#4d4d4d';
// top
let backButton = new BackButton( () => {
// top ui
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
let screenBottom = new ScreenBottom();
screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord);
screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName);
screenBottom.printBottomRightText(sessionStorageManager.playerName);
// bottom ui
let screenBottomUI = new ScreenBottomUI();
screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
screenBottomUI.printRightText(sessionStorageManager.playerName);
this.startGame();