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

Fix: make game app button and typing app button smaller

Browse Source
This commit is contained in:
Jisang Park
2018-09-01 15:11:59 +09:00
parent 5ff260f05f
commit 29539e9ce7
8 changed files with 100 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/game_app_button.js
+17 -2
View File
@@ -53,6 +53,21 @@ class GameAppButton extends RoundRectButton {
break;
}
setting.fontStyle = {
font: "24px Arial",
boundsAlignH: "center", // left, center. right
boundsAlignV: "middle", // top, middle, bottom
fill: "#fff"
};
let textCount = buttonText.length;
if(textCount > 7)
setting.fontStyle.font = "18px Arial";
else if(textCount > 5)
setting.fontStyle.font = "22px Arial";
else
setting.fontStyle.font = "24px Arial";
super(setting, iconName, buttonText, clickEvent);
}
@@ -62,8 +77,8 @@ GameAppButton.TYPE_MOUSE_APP = 0;
GameAppButton.TYPE_TYPING_PRACTICE = 1;
GameAppButton.TYPE_TYPING_APP = 2;
GameAppButton.BUTTON_WIDTH = 150;
GameAppButton.BUTTON_HEIGHT = 150;
GameAppButton.BUTTON_WIDTH = 120;
GameAppButton.BUTTON_HEIGHT = 120;
GameAppButton.BUTTON_GAP = 20;
GameAppButton.MARGIN_VERTICAL = 100;
src/game/lib/button/typing_app_button.js
+54
View File
@@ -0,0 +1,54 @@
class TypingAppButton extends RoundRectButton {
constructor(x, y, iconName, buttonText, clickEvent) {
let setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
setting.setStrokeColor(
0x444488,
0x6666aa,
0x6666aa,
0x333333
);
setting.setButtonColor(
0xaaaadd,
0xddddff,
0xddddff,
0x666666
);
setting.setTextColor(
"#844",
"#a66",
"#a66",
"#333"
);
setting.fontStyle = {
font: "22px Arial",
boundsAlignH: "center", // left, center. right
boundsAlignV: "middle", // top, middle, bottom
fill: "#fff"
};
super(setting, iconName, buttonText, clickEvent);
if(iconName.length > 0) {
let iconImage = game.add.sprite(0, 0, iconName);
iconImage.width = 80;
iconImage.height = 80;
this.button.setIcon(iconImage);
}
}
}
TypingAppButton.BUTTON_WIDTH = 160;
TypingAppButton.BUTTON_HEIGHT = 80;
TypingAppButton.BUTTON_GAP = 10;
TypingAppButton.MARGIN_VERTICAL = 100;
TypingAppButton.BUTTON_UPPER_POS_Y = 200;
TypingAppButton.BUTTON_LOWER_POS_Y = 480;
src/game/lib/button/typing_practice_button.js
-48
View File
@@ -1,48 +0,0 @@
class TypingPracticeButton extends RoundRectButton {
constructor(x, y, iconName, buttonText, clickEvent) {
let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
setting.setStrokeColor(
0x444488,
0x6666aa,
0x6666aa,
0x333333
);
setting.setButtonColor(
0xaaaadd,
0xddddff,
0xddddff,
0x666666
);
setting.setTextColor(
"#844",
"#a66",
"#a66",
"#333"
);
super(setting, iconName, buttonText, clickEvent);
if(iconName.length > 0) {
let icon_fullscreen = game.add.sprite(0, 0, iconName);
icon_fullscreen.width = 80;
icon_fullscreen.height = 80;
this.button.setIcon(icon_fullscreen);
}
}
}
TypingPracticeButton.BUTTON_WIDTH = 200;
TypingPracticeButton.BUTTON_HEIGHT = 100;
TypingPracticeButton.BUTTON_GAP = 10;
TypingPracticeButton.MARGIN_VERTICAL = 100;
TypingPracticeButton.BUTTON_UPPER_POS_Y = 200;
TypingPracticeButton.BUTTON_LOWER_POS_Y = 480;
src/game/menu/menu_app.js
+3 -2
View File
@@ -82,7 +82,8 @@ class MenuApp {
let app = appList[i];
let gameAppButton = new GameAppButton(
posX, posY, GameAppButton.TYPE_MOUSE_APP,
"icon_fullscreen", app.KoreanName,
RoundRectButton.NONE_ICON, // "icon_fullscreen",
app.KoreanName,
() => {
sessionStorageManager.playingAppID = app.AppID;
sessionStorageManager.playingAppName = app.AppName;
@@ -145,7 +146,7 @@ class MenuApp {
let gameAppButton = new GameAppButton(
posX, posY, GameAppButton.TYPE_TYPING_APP,
"icon_fullscreen",
RoundRectButton.NONE_ICON, // "icon_fullscreen",
// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
app.KoreanName,
() => {
src/game/menu/menu_typing_practice.js
+12 -12
View File
@@ -72,7 +72,7 @@ class MenuTypingPractice {
downloadListSucceeded(replyJSON) {
// console.log(replyJSON);
let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
@@ -82,12 +82,12 @@ class MenuTypingPractice {
let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
TypingPracticeButton.BUTTON_UPPER_POS_Y
TypingAppButton.BUTTON_UPPER_POS_Y
);
let typingPracticeButton = new TypingPracticeButton(
let typingPracticeButton = new TypingAppButton(
posX, posY,
TypingPracticeButton.NONE_ICON,
TypingAppButton.NONE_ICON,
activeApp.KoreanName,
() => {
sessionStorageManager.playingAppID = activeApp.AppID;
@@ -106,12 +106,12 @@ class MenuTypingPractice {
let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
TypingPracticeButton.BUTTON_LOWER_POS_Y
TypingAppButton.BUTTON_LOWER_POS_Y
);
let typingPracticeButton = new TypingPracticeButton(
let typingPracticeButton = new TypingAppButton(
posX, posY,
TypingPracticeButton.NONE_ICON,
TypingAppButton.NONE_ICON,
activeApp.KoreanName,
() => {
sessionStorageManager.playingAppID = activeApp.AppID;
@@ -127,8 +127,8 @@ class MenuTypingPractice {
}
getButtonPosX(index, buttonCount) {
let gap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap );
let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
@@ -150,10 +150,10 @@ class MenuTypingPractice {
}
getButtonPosY(index, buttonCount, startPosY) {
let rowGap = TypingPracticeButton.BUTTON_HEIGHT + TypingPracticeButton.BUTTON_GAP;
let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
let columnGap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap );
let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
// console.log("maxColumnNum : " + maxColumnNum);
// console.log("buttonCount : " + buttonCount);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
src/game/menu/menu_typing_test.js
+12 -12
View File
@@ -71,7 +71,7 @@ class MenuTypingTest {
downloadListSucceeded(replyJSON) {
// console.log(replyJSON);
let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
@@ -81,12 +81,12 @@ class MenuTypingTest {
let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
TypingPracticeButton.BUTTON_UPPER_POS_Y
TypingAppButton.BUTTON_UPPER_POS_Y
);
let typingTestButton = new TypingPracticeButton(
let typingTestButton = new TypingAppButton(
posX, posY,
TypingPracticeButton.NONE_ICON,
TypingAppButton.NONE_ICON,
activeApp.KoreanName,
() => {
sessionStorageManager.playingAppID = activeApp.AppID;
@@ -105,12 +105,12 @@ class MenuTypingTest {
let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
TypingPracticeButton.BUTTON_LOWER_POS_Y
TypingAppButton.BUTTON_LOWER_POS_Y
);
let typingTestButton = new TypingPracticeButton(
let typingTestButton = new TypingAppButton(
posX, posY,
TypingPracticeButton.NONE_ICON,
TypingAppButton.NONE_ICON,
activeApp.KoreanName,
() => {
sessionStorageManager.playingAppID = activeApp.AppID;
@@ -126,8 +126,8 @@ class MenuTypingTest {
}
getButtonPosX(index, buttonCount) {
let gap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap );
let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
// console.log("maxColumnNum : " + maxColumnNum);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
// console.log("rowCount : " + rowCount);
@@ -149,10 +149,10 @@ class MenuTypingTest {
}
getButtonPosY(index, buttonCount, startPosY) {
let rowGap = TypingPracticeButton.BUTTON_HEIGHT + TypingPracticeButton.BUTTON_GAP;
let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
let columnGap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap );
let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
// console.log("maxColumnNum : " + maxColumnNum);
// console.log("buttonCount : " + buttonCount);
let rowCount = Math.ceil(buttonCount / maxColumnNum);
src/web/client/menu_typing_practice.html
+1 -1
View File
@@ -18,7 +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/button/typing_practice_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/db_connect_manager.js"></script>
src/web/client/menu_typing_test.html
+1 -1
View File
@@ -18,7 +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/button/typing_practice_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/db_connect_manager.js"></script>