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

Fix: align menu app buttons

Browse Source
This commit is contained in:
Jisang Park
2018-06-05 09:05:07 +09:00
parent ed03e57b34
commit c50015a991
3 changed files with 127 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/app_button.js
+3 -2
View File
@@ -73,8 +73,9 @@ class AppButton {
}
AppButton.TYPE_MOUSE = 0;
AppButton.TYPE_TYPING = 1;
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/game_app_button.js
+31 -22
View File
@@ -1,31 +1,13 @@
class GameAppButton extends AppButton {
constructor(x, y, type, iconName, buttonText, clickEvent) {
let setting = new RoundRectButtonSetting(150, 150);
let setting = new RoundRectButtonSetting(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) {
setting.setStrokeColor(
0xaa6666,
0x884444,
0x884444,
0x333333
);
setting.setButtonColor(
0xffdddd,
0xddaaaa,
0xddaaaa,
0x666666
);
setting.setTextColor(
"#a66",
"#844",
"#844",
"#333"
);
} else { // TYPE_TYPING
if(type === AppButton.TYPE_MOUSE_APP) {
} if(type === AppButton.TYPE_TYPING_PRACTICE) {
setting.setStrokeColor(
0x444488,
0x6666aa,
@@ -44,6 +26,25 @@ class GameAppButton extends AppButton {
"#a66",
"#333"
);
} else { // TYPE_TYPING_APP
setting.setStrokeColor(
0xaa6666,
0x884444,
0x884444,
0x333333
);
setting.setButtonColor(
0xffdddd,
0xddaaaa,
0xddaaaa,
0x666666
);
setting.setTextColor(
"#a66",
"#844",
"#844",
"#333"
);
}
// this.button = new RoundRectButton(setting, buttonText, clickEvent);
@@ -70,4 +71,12 @@ class GameAppButton extends AppButton {
this.button.move(x, y);
}
}
}
GameAppButton.BUTTON_WIDTH = 150;
GameAppButton.BUTTON_HEIGHT = 150;
GameAppButton.BUTTON_GAP = 20;
GameAppButton.BUTTON_UPPER_POS_Y = 200;
GameAppButton.BUTTON_LOWER_POS_Y = 540;
src/game/menu/menu_app.js
+93 -51
View File
@@ -48,73 +48,115 @@ class MenuApp {
self.makeMouseAppButtons(replyJSON.MouseAppList);
self.makeTypingButtons(replyJSON.TypingPracticeAppCount, replyJSON.TypingAppList);
/*
let mouseAppCount = self.getAppCount(replyJSON, AppButton.TYPE_MOUSE);
let typingPracticeAppCount = self.getAppCount(replyJSON, AppButton.TYPE_TYPING);
let startX = game.world.width / 2 - (150 * mouseAppCount / 2) - (150 / 2);
let mouseAppIndex = 0;
for(let i = 0; i < replyJSON.length; i++) {
let activeApp = replyJSON[i];
if(self.isMouseApp(activeApp)) {
mouseAppIndex++;
new GameAppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
activeApp.AppName, AppButton.NONE_BUTTON_TEXT,
() => {
sessionStorageManager.playingAppID = activeApp.AppID;
sessionStorageManager.playingAppName = activeApp.AppName;
location.href = '../../web/client/start.html';
}
);
}
}
if(typingPracticeAppCount > 0) {
new GameAppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
"icon_fullscreen", "타자 연습\n(임시)",
() => {
location.href = '../../web/client/menu_typing_practice.html';
}
);
}
*/
}
makeMouseAppButtons(mouseAppJSON) {
console.log(mouseAppJSON);
// console.log(mouseAppJSON);
let mouseAppCount = Object.keys(mouseAppJSON).length;
for(let i = 0; i < mouseAppCount; i++) {
let posX = self.getButtonPosX(i, mouseAppCount);
let posY = self.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
let app = mouseAppJSON[i];
new GameAppButton(
posX, posY, AppButton.TYPE_MOUSE_APP,
"icon_fullscreen", app.KoreanName,
() => {
sessionStorageManager.playingAppID = app.AppID;
sessionStorageManager.playingAppName = app.AppName;
location.href = '../../web/client/start.html';
}
);
}
}
makeTypingButtons(typingPracticeAppCount, typingAppJSON) {
console.log(typingPracticeAppCount);
console.log(typingAppJSON);
// console.log(typingPracticeAppCount);
// console.log(typingAppJSON);
}
let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
let typingAppTotalCount = Object.keys(typingAppJSON).length + (isTypingPracticeAppExist ? 1 : 0);
let typingAppIndex = 0;
isMouseApp(app) {
if(app.AppType > 100)
return true;
for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
return false;
}
let posX = self.getButtonPosX(
typingButtonIndex, typingAppTotalCount
);
let posY = self.getButtonPosY(
typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
);
getAppCount(replyJSON, type) {
let appCount = 0;
for(let i = 0; i < replyJSON.length; i++) {
let activeApp = replyJSON[i];
if(type == AppButton.TYPE_TYPING && activeApp.AppType <= 100)
appCount++;
else if(type == AppButton.TYPE_MOUSE && activeApp.AppType > 100)
appCount++;
if(typingButtonIndex == 0 && isTypingPracticeAppExist) {
new GameAppButton(
posX, posY, AppButton.TYPE_TYPING_PRACTICE,
"", "타자 연습\n(임시)",
() => {
location.href = '../../web/client/menu_typing_practice.html';
}
);
} else {
let app = typingAppJSON[typingAppIndex];
let isKoreanTypingApp = app.AppID < 32 ? true : false;
new GameAppButton(
posX, posY, AppButton.TYPE_TYPING_APP,
"icon_fullscreen",
(isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
() => {
sessionStorageManager.playingAppID = app.AppID;
sessionStorageManager.playingAppName = app.AppName;
location.href = '../../web/client/start.html';
}
);
typingAppIndex++;
}
}
}
return appCount;
getButtonPosX(index, buttonCount) {
let gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - MenuApp.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
let columnIndex = index % maxColumnNum;
// console.log("columnIndex : " + columnIndex);
let rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
let columnCountForThisRow = 0;
if(rowIndex < rowCount - 1)
columnCountForThisRow = maxColumnNum;
else
columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
// console.log("columnCountForThisRow : " + columnCountForThisRow);
let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
return startX + gap * columnIndex;
}
getButtonPosY(index, buttonCount, startPosY) {
let gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - MenuApp.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
let rowIndex = Math.floor(index / maxColumnNum);
// console.log("rowIndex : " + rowIndex);
let startY = startPosY - ( (gap / 2) * (rowCount - 1) );
return startY + gap * rowIndex;
}
loadFailed(replyJSON) {
// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
}
}
}
MenuApp.MARGIN_VERTICAL = 100;