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

Add: AppGroupTab

Browse Source
This commit is contained in:
Jisang Park
2019-07-25 18:39:08 +09:00
parent 2eae5af3a9
commit 995dcffc88
7 changed files with 162 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/flat_button/app_group_tab.js
+58
View File
@@ -0,0 +1,58 @@
AppGroupTab.prototype = Object.create(BasicTab.prototype);
AppGroupTab.constructor = AppGroupTab;
function AppGroupTab(clickEvent) {
var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
setting.setFont("Nanum Gothic");
setting.setFontSize(20);
setting.setButtonColor(
AppGroupTab.BUTTON_COLOR_OUT_HEX,
AppGroupTab.BUTTON_COLOR_OVER_HEX,
AppGroupTab.BUTTON_COLOR_DOWN_HEX,
AppGroupTab.BUTTON_COLOR_DISABLED_HEX
);
setting.setIconColor(
AppGroupTab.STROKE_COLOR_OUT_HEX,
AppGroupTab.STROKE_COLOR_OVER_HEX,
AppGroupTab.STROKE_COLOR_DOWN_HEX,
AppGroupTab.STROKE_COLOR_DISABLED_HEX
);
setting.setActiveColor(
MainColor.DARK_CHOCO_HEX,
MainColor.DARK_CHOCO_HEX,
MainColor.DARK_CHOCO_HEX,
MainColor.DARK_CHOCO_HEX
);
setting.setTextColor(
AppGroupTab.TEXT_COLOR_OUT_HEX,
AppGroupTab.TEXT_COLOR_OVER_HEX,
AppGroupTab.TEXT_COLOR_DOWN_HEX,
AppGroupTab.TEXT_COLOR_DISABLED_HEX
);
BasicTab.call(this, setting, clickEvent);
// this.setMainTextFontWeight("bold");
this.setMainText("마우스 MOU");
this.setMainTextFontWeight("800");
// this.addIcon("home");
// this.setIconSize(30);
this.setShortcutText("MOUSE");
}
AppGroupTab.STROKE_COLOR_OUT_HEX = 0xAA6666;
AppGroupTab.STROKE_COLOR_OVER_HEX = 0x884444;
AppGroupTab.STROKE_COLOR_DOWN_HEX = 0x884444;
AppGroupTab.STROKE_COLOR_DISABLED_HEX = 0x333333;
AppGroupTab.BUTTON_COLOR_OUT_HEX = 0xffdddd;
AppGroupTab.BUTTON_COLOR_OVER_HEX = 0xddaaaa;
AppGroupTab.BUTTON_COLOR_DOWN_HEX = 0xddaaaa;
AppGroupTab.BUTTON_COLOR_DISABLED_HEX = 0x666666;
AppGroupTab.TEXT_COLOR_OUT_HEX = "#aa6666";
AppGroupTab.TEXT_COLOR_OVER_HEX = "#884444";
AppGroupTab.TEXT_COLOR_DOWN_HEX = "#884444";
AppGroupTab.TEXT_COLOR_DISABLED_HEX = "#333333";
src/game/lib/flat_button/back_button.js
+3 -4
View File
@@ -2,12 +2,10 @@ BackButton.prototype = Object.create(BasicButton.prototype);
BackButton.constructor = BackButton;
function BackButton(clickEvent) {
var setting = new ButtonSetting(40, 40, 60, 60);
var setting = new ButtonSetting(40, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
setting.setStrokeWidth(3);
setting.setRound(10);
setting.setRound(30);
setting.setFont("Nanum Gothic Coding");
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.setStrokeColor(
BackButton.STROKE_COLOR_OUT_HEX,
BackButton.STROKE_COLOR_OVER_HEX,
@@ -33,6 +31,7 @@ function BackButton(clickEvent) {
BackButton.TEXT_COLOR_DISABLED_HEX
);
BasicButton.call(this, setting, clickEvent);
this.addIcon("home");
src/game/lib/flat_button/basic_tab.js
+59 -1
View File
@@ -5,10 +5,15 @@ function BasicTab(setting, clickEvent) {
this.setting = setting;
this.clickEvent = clickEvent;
this.activate = true;
// button sprite
this.buttonSprite = this.makeButtonSprite();
this.setEventMethod(this.buttonSprite);
this.activeSprite = this.makeActiveSprite();
this.setEventMethod(this.activeSprite);
this.iconSprite = null;
this.mainText = null;
@@ -28,7 +33,7 @@ function BasicTab(setting, clickEvent) {
BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
BasicTab.prototype.makeButtonSprite = function() {
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
// console.log("round : " + setting.roundAmount);
@@ -53,6 +58,34 @@ BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect
return buttonSprite;
}
BasicTab.prototype.makeActiveSprite = function() {
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
// console.log("round : " + setting.roundAmount);
var OFFSET_POS_Y = 12;
var buttonWidth = setting.width;
var lineWidth = buttonWidth * 3 / 4;
var lineHeight = 5;
var texture = null;
texture = new Phaser.Graphics()
.beginFill(0xffffff)
.drawRoundedRect(0, 0, lineWidth, lineHeight, 1)
.endFill()
.generateTexture();
var posX = setting.x - lineWidth / 2;
var posY = setting.y + setting.height / 2 - OFFSET_POS_Y;
var activeSprite = game.add.sprite(posX, posY, texture);
// buttonSprite.anchor.setTo(0.5, 0.5);
activeSprite.inputEnabled = true;
return activeSprite;
}
// icon
BasicTab.prototype.addIcon = function(spriteName) {
@@ -122,6 +155,14 @@ BasicTab.prototype.setMainText = function(text) {
this.alignContents();
}
BasicTab.prototype.setMainTextFontWeight = function(option) {
if(option === null || option === "")
this.mainText.fontWeight = "normal";
else
this.mainText.fontWeight = option;
console.log(this.mainText.fontWeight);
}
BasicTab.prototype.makeShortcutText = function() {
var posX = this.buttonSprite.width / 2;
var posY = this.buttonSprite.height / 2;
@@ -141,6 +182,15 @@ BasicTab.prototype.setShortcutText = function(text) {
this.alignContents();
}
BasicTab.prototype.setActive = function(flag) {
this.activate = flag;
if(this.activate)
this.activeSprite.alpha = 1;
else
this.activeSprite.alpha = 0;
}
BasicTab.prototype.alignContents = function() {
var mainTextHeight = 0;
var iconSpriteHeight = 0;
@@ -219,6 +269,8 @@ BasicTab.prototype.mouseOut = function() {
this.mainText.fill = this.setting.textColors.out;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.out;
this.activeSprite.tint = this.setting.activeColors.out;
}
BasicTab.prototype.mouseOver = function() {
@@ -230,6 +282,8 @@ BasicTab.prototype.mouseOver = function() {
this.mainText.fill = this.setting.textColors.over;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.over;
this.activeSprite.tint = this.setting.activeColors.over;
}
BasicTab.prototype.mouseDown = function() {
@@ -241,6 +295,8 @@ BasicTab.prototype.mouseDown = function() {
this.mainText.fill = this.setting.textColors.down;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.down;
this.activeSprite.tint = this.setting.activeColors.down;
}
BasicTab.prototype.buttonDisabled = function() {
@@ -252,6 +308,8 @@ BasicTab.prototype.buttonDisabled = function() {
this.mainText.fill = this.setting.textColors.disabled;
if(typeof this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.disabled;
this.activeSprite.tint = this.setting.activeColors.disabled;
}
src/game/lib/flat_button/setting_button.js
+3 -2
View File
@@ -2,9 +2,9 @@ SettingButton.prototype = Object.create(BasicButton.prototype);
SettingButton.constructor = SettingButton;
function SettingButton(clickEvent) {
var setting = new ButtonSetting(980, 40, 60, 60);
var setting = new ButtonSetting(980, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
setting.setStrokeWidth(0);
setting.setRound(10);
setting.setRound(30);
// setting.setFont("Nanum Brush Script");
setting.setFont("Nanum Gothic");
setting.setFontSize(20);
@@ -35,6 +35,7 @@ function SettingButton(clickEvent) {
SettingButton.TEXT_COLOR_DISABLED_HEX
);
BasicButton.call(this, setting, clickEvent);
this.setMainText("세팅");
src/game/lib/flat_button/tab_setting.js
+16
View File
@@ -9,6 +9,7 @@ function TabSetting(x, y, width, height) {
this.buttonColors = TabSetting.DEFAULT_BUTTON_COLORS;
this.textColors = TabSetting.DEFAULT_TEXT_COLORS;
this.iconColors = TabSetting.DEFAULT_ICON_COLORS;
this.activeColors = TabSetting.DEFAULT_ACTIVE_COLORS;
this.fontStyle = TabSetting.DEFAULT_TEXT_FONT;
};
@@ -36,6 +37,14 @@ TabSetting.prototype.setTextColor = function(out, over, down, disabled) {
this.textColors.disabled = disabled;
}
TabSetting.prototype.setActiveColor = function(out, over, down, disabled) {
this.activeColors = { };
this.activeColors.out = out;
this.activeColors.over = over;
this.activeColors.down = down;
this.activeColors.disabled = disabled;
}
TabSetting.prototype.setIconColor = function(out, over, down, disabled) {
this.iconColors = { };
this.iconColors.out = out;
@@ -73,6 +82,13 @@ TabSetting.DEFAULT_ICON_COLORS = {
disabled: 0x333333
};
TabSetting.DEFAULT_ACTIVE_COLORS = {
out: MainColor.DARK_CHOCO_HEX,
over: MainColor.DARK_CHOCO_HEX,
down: MainColor.DARK_CHOCO_HEX,
disabled: MainColor.DARK_CHOCO_HEX
};
TabSetting.DEFAULT_TEXT_FONT = {
font: "30px",
boundsAlignH: "center", // left, center. right
src/game/main_menu/main_menu.js
+22 -9
View File
@@ -53,7 +53,7 @@ MainMenu.prototype.create = function() {
graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
// graphics.beginFill(MainColor.BLACK_HEX, 1);
graphics.beginFill(MainColor.CHOCO_HEX, 1);
graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
this.appGroupButtons = {};
// this.makeAppGroupButtons();
@@ -190,15 +190,28 @@ MainMenu.prototype.makeAppGroupButtons = function() {
);
this.appGroupButtons.settingButton = settingButton;
var setting = new TabSetting(200, 40, 100, 80);
setting.setFontSize(20);
var mouseAppTab = new BasicTab(
setting,
var mouseAppGroupTab = new AppGroupTab(
(function() { console.log("mouse"); }).bind(this)
);
mouseAppTab.setMainText("MOUSE");
mouseAppTab.setShortcutText("마우스");
this.appGroupButtons.settingButton = mouseAppTab;
// var mouseAppTab = new BasicTab(
// setting,
// (function() { console.log("mouse"); }).bind(this)
// );
// mouseAppTab.setMainText("MOUSE");
// mouseAppTab.setShortcutText("마우스");
var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
setting.setFontSize(20);
setting.x = 290;
var typingAppTab = new BasicTab(
setting,
(function() { console.log("typing"); }).bind(this)
);
typingAppTab.setMainText("TYPING");
typingAppTab.setShortcutText("타이핑");
typingAppTab.setActive(false);
this.appGroupButtons.settingButton = mouseAppGroupTab;
}
@@ -337,4 +350,4 @@ MainMenu.prototype.loadFailed = function(replyJSON) {
}
MainMenu.MAIN_MENU_HEIGHT = 80;
MainMenu.MAIN_MENU_HEIGHT = 70;
src/web/client/main_menu.html
+1
View File
@@ -61,6 +61,7 @@
<script src="../../game/lib/flat_button/tab_setting.js"></script>
<script src="../../game/lib/flat_button/basic_tab.js"></script>
<script src="../../game/lib/flat_button/app_group_tab.js"></script>
<!-- source files -->
<script src="../../game/main_menu/main_menu.js"></script>