Add: PlayAppButton

This commit is contained in:
2019-08-12 22:17:43 +09:00
parent cf467dd2d7
commit b34526151f
5 changed files with 234 additions and 29 deletions
+3 -5
View File
@@ -169,7 +169,7 @@ BasicButton.prototype.makeShortcutText = function() {
var shortcutText = game.add.text(posX, posY, "");
shortcutText.anchor.set(0.5);
shortcutText.fontSize = BasicButton.SHORTCUT_TEXT_FONTSIZE;
shortcutText.fontSize = this.setting.shortcutFontSize;
shortcutText.fontWeight = "normal";
// shortcutText.addColor(this.setting.textColors.over, 0);
shortcutText.addColor("0xffffff", 0);
@@ -206,7 +206,7 @@ BasicButton.prototype.alignContents = function() {
var offsetRatio = 7;
var offsetMainText = mainTextHeight / offsetRatio;
var offsetShortcutText = shortcutTextHeight / offsetRatio;
var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicButton.SHORTCUT_TEXT_FONTSIZE / 2);
var gap = (iconSpriteHeight > 0 ? gap = 0 : ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE / 2);
if(shortcutTextHeight === 0) {
if(mainTextHeight > 0)
@@ -348,6 +348,4 @@ BasicButton.prototype.setLineSpacing = function(spacingInPixels) {
}
BasicButton.NONE_ICON = "";
BasicButton.NONE_BUTTON_TEXT = "";
BasicButton.SHORTCUT_TEXT_FONTSIZE = 12;
BasicButton.NONE_BUTTON_TEXT = "";
+15 -3
View File
@@ -6,7 +6,8 @@ function ButtonSetting(x, y, width, height) {
this.strokeWidthPx = 0;
this.roundAmount = 0;
this.fontSize = 10;
this.fontSize = ButtonSetting.DEFAULT_MAIN_TEXT_FONTSIZE;
this.shortcutFontSize = ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE;
this.strokeColors = ButtonSetting.DEFAULT_STROKE_COLORS;
this.buttonColors = ButtonSetting.DEFAULT_BUTTON_COLORS;
@@ -55,6 +56,14 @@ ButtonSetting.prototype.setFontSize = function(size) {
this.fontSize = size;
}
ButtonSetting.prototype.setShortcutFont = function(fontName) {
this.shortcutFont = fontName;
}
ButtonSetting.prototype.setShortcutFontSize = function(size) {
this.shortcutFontSize = size;
}
ButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
this.strokeColors = { };
this.strokeColors.out = out;
@@ -124,5 +133,8 @@ ButtonSetting.DEFAULT_TEXT_FONT = {
align: "center"
};
ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
ButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel
ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
ButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel
ButtonSetting.DEFAULT_MAIN_TEXT_FONTSIZE = 10;
ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE = 12;
+146
View File
@@ -0,0 +1,146 @@
PlayAppButton.prototype = Object.create(BasicButton.prototype);
PlayAppButton.constructor = PlayAppButton;
function PlayAppButton(x, y) {
this.appData = null;
var setting = new ButtonSetting(x, y, PlayAppButton.WIDTH, PlayAppButton.HEIGHT);
setting.setStrokeWidth(0);
setting.setRound(30);
// setting.setFont("Nanum Brush Script");
setting.setFont("Nanum Gothic");
setting.setFontSize(20);
setting.setShortcutFont("Nanum Gothic");
setting.setShortcutFontSize(18);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.setStrokeColor(
PlayAppButton.STROKE_COLOR_OUT_HEX,
PlayAppButton.STROKE_COLOR_OVER_HEX,
PlayAppButton.STROKE_COLOR_DOWN_HEX,
PlayAppButton.STROKE_COLOR_DISABLED_HEX
);
setting.setButtonColor(
PlayAppButton.BUTTON_COLOR_OUT_HEX,
PlayAppButton.BUTTON_COLOR_OVER_HEX,
PlayAppButton.BUTTON_COLOR_DOWN_HEX,
PlayAppButton.BUTTON_COLOR_DISABLED_HEX
);
setting.setIconColor(
PlayAppButton.ICON_COLOR_OUT_HEX,
PlayAppButton.ICON_COLOR_OVER_HEX,
PlayAppButton.ICON_COLOR_DOWN_HEX,
PlayAppButton.ICON_COLOR_DISABLED_HEX
);
setting.setTextColor(
PlayAppButton.TEXT_COLOR_OUT_HEX,
PlayAppButton.TEXT_COLOR_OVER_HEX,
PlayAppButton.TEXT_COLOR_DOWN_HEX,
PlayAppButton.TEXT_COLOR_DISABLED_HEX
);
BasicButton.call(this, setting, this.clickEvent);
// this.setMainText("");
// this.addIcon("tile_choco");
// this.setIconSize(40);
// this.setShortcutText("[단축키]");
}
PlayAppButton.prototype.setInputEnabled = function(isEnabled) {
this.strokeSprite.inputEnabled = isEnabled;
this.buttonSprite.inputEnabled = isEnabled;
if(isEnabled === true)
this.mouseOut();
else
this.buttonDisabled();
}
PlayAppButton.prototype.setActive = function(flag) {
this.setInputEnabled(flag);
if(flag) {
this.buttonSprite.alpha = 1;
this.strokeSprite.alpha = 1;
} else {
this.buttonSprite.alpha = 0;
this.strokeSprite.alpha = 0;
}
}
PlayAppButton.prototype.showEmptyDisabled = function() {
this.setInputEnabled(false);
this.buttonSprite.alpha = 0;
this.strokeSprite.alpha = 1;
this.strokeSprite.tint = MainColor.SADDLE_BROWN_HEX;
}
PlayAppButton.prototype.updateAppData = function(appData) {
this.appData = appData;
// console.log(this.appData);
// this.addIcon(this.appData.appName);
this.addIcon("keyboard");
this.setIconSize(100);
// this.setMainText(this.appData.koreanName);
this.setShortcutText(this.appData.koreanName);
this.iconSprite.y = PlayAppButton.HEIGHT / 2 - 20;
this.shortcutText.y = PlayAppButton.HEIGHT / 2 + 40;
this.setInputEnabled(this.appData.activated);
}
PlayAppButton.prototype.clickEvent = function() {
sessionStorageManager.setPlayingAppID(this.appData.appID);
sessionStorageManager.setPlayingAppName(this.appData.appName);
sessionStorageManager.setPlayingAppKoreanName(this.appData.koreanName);
if(isExperiencePlayerAccount())
location.href = '../../web/client/ads.html';
else
location.href = '../../web/client/start.html';
}
/*
PlayAppButton.prototype.onClick = function() {
sessionStorageManager.setPlayingAppID(PlayAppButton.TYPING_APP_ID);
sessionStorageManager.setPlayingAppName(PlayAppButton.TYPING_APP_NAME);
sessionStorageManager.setPlayingAppKoreanName(PlayAppButton.TYPING_APP_KOREAN_NAME);
sessionStorageManager.setWritingID(this.writingData.writingID);
// location.href = '../../web/client/typing_exam.html';
location.href = '../../web/client/start.html';
// printSessionStorage();
}
PlayAppButton.TYPING_APP_ID = 200;
PlayAppButton.TYPING_APP_NAME = "typing_exam";
PlayAppButton.TYPING_APP_KOREAN_NAME = "타자검정";
*/
PlayAppButton.WIDTH = 150;
PlayAppButton.HEIGHT = 180;
PlayAppButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX;
PlayAppButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX;
PlayAppButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX;
PlayAppButton.STROKE_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX;
PlayAppButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX;
PlayAppButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX;
PlayAppButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX;
PlayAppButton.BUTTON_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX;
PlayAppButton.ICON_COLOR_OUT_HEX = MainColor.WHITE_HEX;
PlayAppButton.ICON_COLOR_OVER_HEX = MainColor.WHITE_HEX;
PlayAppButton.ICON_COLOR_DOWN_HEX = MainColor.WHITE_HEX;
PlayAppButton.ICON_COLOR_DISABLED_HEX = MainColor.LIGHT_GRAY_HEX;
PlayAppButton.TEXT_COLOR_OUT_HEX = MainColor.LINEN_STRING;
PlayAppButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING;
PlayAppButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING;
PlayAppButton.TEXT_COLOR_DISABLED_HEX = MainColor.DARK_GRAY_STRING; // MainColor.THISTLE_STRING;
+69 -21
View File
@@ -67,9 +67,11 @@ MainMenu.prototype.create = function() {
this.typingAppButtons = new Array();
this.makeTypingAppButtons();
this.writingAppButtons = new Array();
this.mouseAppButtons = new Array();
this.playAppButtons = new Array();
this.makePlayAppButtons();
this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PRACTICE;
// this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PRACTICE;
this.selectedAppGroup = MainMenu.APP_GROUP_TYPING_PLAY;
this.selectedLanguage = MainMenu.LANGUAGE_KOREAN;
// this.animalRecordList.printScore(Animal.TYPE_PRACTICE);
}
@@ -184,15 +186,38 @@ MainMenu.prototype.makeTypingAppButtons = function() {
}
}
MainMenu.prototype.makePlayAppButtons = function() {
var startX = 150;
var startY = 300;
var offsetX = PlayAppButton.WIDTH + 30;
var offsetY = 250;
var buttonHalfWidth = TypingAppButton.WIDTH / 2;
for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) {
var x = startX + (i % 5) * offsetX;
var y = Math.floor(i / 5) === 0 ? startY : startY + offsetY;
var button = new PlayAppButton(x, y);
button.setActive(false);
this.playAppButtons.push(button);
}
}
MainMenu.prototype.hideAllButtons = function() {
// hide all buttons
for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
this.typingAppButtons[i].setActive(false);
}
for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) {
this.playAppButtons[i].setActive(false);
}
}
MainMenu.prototype.updateAppButtons = function(appGroup, appData) {
this.hideAllButtons();
switch(parseInt(appGroup)) {
case MainMenu.APP_GROUP_TYPING_PRACTICE:
this.updateTypingPracticeAppButtons(appGroup, appData);
@@ -207,11 +232,13 @@ MainMenu.prototype.updateAppButtons = function(appGroup, appData) {
break;
case MainMenu.APP_GROUP_TYPING_PLAY:
this.updateTypingPlayAppButtons(appData);
this.updatePlayAppButtons(appData);
// this.updateTypingPlayAppButtons(appData);
break;
case MainMenu.APP_GROUP_MOUSE_PLAY:
this.updateMousePlayAppButtons(appData);
this.updatePlayAppButtons(appData);
// this.updateMousePlayAppButtons(appData);
break;
default:
@@ -219,13 +246,6 @@ MainMenu.prototype.updateAppButtons = function(appGroup, appData) {
}
}
MainMenu.prototype.clearTypingAppButtons = function(appData) {
for(var i = 0; i < MainMenu.TYPING_APP_COUNT; i++) {
var button = this.typingAppButtons[i];
button.setActive(false);
}
}
MainMenu.prototype.isActivatedApp = function(appID, activeAppList) {
var count = activeAppList.length;
for(var i = 0; i < count; i++) {
@@ -268,9 +288,29 @@ MainMenu.prototype.makeTypingPracticeAppDataList = function(appGroup, appData) {
return appDataList;
}
MainMenu.prototype.makePlayAppDataList = function(appData) {
var appDataList = new Array();
var appList = appData.appList;
if(appList.length === 0)
return [];
var count = appList.length;
for(var appDataIndex = 0; appDataIndex < count; appDataIndex++) {
var data = {};
data["appID"] = appList[appDataIndex].appID;
data["appName"] = appList[appDataIndex].appName;
data["koreanName"] = appList[appDataIndex].koreanName;
data["activated"] = this.isActivatedApp(appList[appDataIndex].appID, appData.activeAppList);
// data["highestRecord"] = this.getAppHighestRecord(appList[appDataIndex].appID, appData.highestRecordList);
appDataList.push(data);
}
return appDataList;
}
MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData) {
console.log("updateTypingPracticeAppButtons");
this.clearTypingAppButtons();
var buttonIndex = 0;
var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData);
@@ -289,7 +329,6 @@ MainMenu.prototype.updateTypingPracticeAppButtons = function(appGroup, appData)
MainMenu.prototype.updateTypingTestAppButtons = function(appGroup, appData) {
console.log("updateTypingTestAppButtons");
this.clearTypingAppButtons();
var buttonIndex = 0;
var appDataList = this.makeTypingPracticeAppDataList(appGroup, appData);
@@ -311,14 +350,22 @@ MainMenu.prototype.updateTypingExamAppButtons = function(appData) {
console.log(appData);
}
MainMenu.prototype.updateTypingPlayAppButtons = function(appData) {
console.log("updateTypingPlayAppButtons");
console.log(appData);
}
MainMenu.prototype.updatePlayAppButtons = function(appData) {
console.log("updatePlayAppButtons");
MainMenu.prototype.updateMousePlayAppButtons = function(appData) {
console.log("updateMousePlayAppButtons");
console.log(appData);
var buttonIndex = 0;
var appDataList = this.makePlayAppDataList(appData);
var count = appDataList.length;
for(var i = 0; i < MainMenu.PLAY_APP_COUNT; i++) {
var button = this.playAppButtons[i];
if(i < count) {
button.setActive(true);
button.updateAppData(appDataList[i]);
} else {
button.setActive(true);
button.showEmptyDisabled();
}
}
}
@@ -621,4 +668,5 @@ MainMenu.APP_GROUP_MOUSE_PLAY = 4;
MainMenu.LANGUAGE_KOREAN = 0;
MainMenu.LANGUAGE_ENGLISH = 1;
MainMenu.TYPING_APP_COUNT = 10;
MainMenu.TYPING_APP_COUNT = 10;
MainMenu.PLAY_APP_COUNT = 10;
+1
View File
@@ -66,6 +66,7 @@
<script src="../../game/lib/flat_button/language_tab.js"></script>
<script src="../../game/lib/flat_button/tab_layout.js"></script>
<script src="../../game/lib/flat_button/typing_app_button.js"></script>
<script src="../../game/lib/flat_button/play_app_button.js"></script>
<script src="../../game/lib/animal.js"></script>
<script src="../../game/lib/animal_list.js"></script>