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

Add: TabLayout

Browse Source
This commit is contained in:
Jisang Park
2019-07-26 12:00:23 +09:00
parent 995dcffc88
commit 9c26aa2a71
7 changed files with 230 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/flat_button/app_group_tab.js
+53 -11
View File
@@ -2,8 +2,41 @@ 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");
BasicTab.call(this);
this.reservedClickEvent = clickEvent;
this.tabLayout = null;
this.reservedMainText = "";
this.reservedShortcutText = "";
this.reservedIconName = "";
}
AppGroupTab.prototype.setTabLayout = function(tabLayout) {
this.tabLayout = tabLayout;
}
AppGroupTab.prototype.reserveMainText = function(text) {
this.reservedMainText = text;
}
AppGroupTab.prototype.reserveIcon = function(iconName) {
this.reservedIconName = iconName;
}
AppGroupTab.prototype.reserveShortcutText = function(text) {
this.reservedShortcutText = text;
}
AppGroupTab.prototype.createTab = function(index) {
var width = this.tabLayout.getTabWidth();
var height = this.tabLayout.getTabHeight();
var x = this.tabLayout.getX() + width / 2 + width * index;
var y = this.tabLayout.getY() + height / 2;
var setting = new TabSetting(x, y, width, height);
setting.setFont("Nanum Pen Script");
setting.setFontSize(20);
setting.setButtonColor(
AppGroupTab.BUTTON_COLOR_OUT_HEX,
@@ -31,23 +64,32 @@ function AppGroupTab(clickEvent) {
);
BasicTab.call(this, setting, clickEvent);
this.createButton(
setting,
(function() {
this.tabLayout.selectedTab(this);
this.reservedClickEvent();
}).bind(this)
);
// this.setMainTextFontWeight("bold");
this.setMainText("마우스 MOU");
this.setMainTextFontWeight("800");
// this.addIcon("home");
// this.setIconSize(30);
this.setShortcutText("MOUSE");
if(this.reservedMainText.length > 0)
this.setMainText(this.reservedMainText);
if(this.reservedIconName.length > 0)
this.addIcon(this.reservedIconName);
if(this.reservedShortcutText.length > 0)
this.setShortcutText(this.reservedShortcutText);
}
AppGroupTab.STROKE_COLOR_OUT_HEX = 0xAA6666;
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_OUT_HEX = 0xffdddd;
AppGroupTab.BUTTON_COLOR_OVER_HEX = 0xddaaaa;
AppGroupTab.BUTTON_COLOR_DOWN_HEX = 0xddaaaa;
AppGroupTab.BUTTON_COLOR_DISABLED_HEX = 0x666666;
src/game/lib/flat_button/basic_tab.js
+30 -26
View File
@@ -1,24 +1,30 @@
// BasicTab.prototype = Object.create();
BasicTab.constructor = BasicTab;
function BasicTab(setting, clickEvent) {
function BasicTab() {
this.activate = true;
this.buttonSprite = null;
this.activeLineSprite = null;
this.iconSprite = null;
this.mainText = null;
this.shortcutText = null;
}
BasicTab.prototype.createButton = function(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;
this.shortcutText = null;
this.activeLineSprite = this.makeActiveLineSprite();
this.setEventMethod(this.activeLineSprite);
this.mainText = this.makeMainText();
this.buttonSprite.addChild(this.mainText);
@@ -31,8 +37,6 @@ function BasicTab(setting, clickEvent) {
this.mouseOut();
}
BasicTab.prototype.makeButtonSprite = function() {
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
@@ -58,12 +62,12 @@ BasicTab.prototype.makeButtonSprite = function() {
return buttonSprite;
}
BasicTab.prototype.makeActiveSprite = function() {
BasicTab.prototype.makeActiveLineSprite = function() {
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
// console.log("round : " + setting.roundAmount);
var OFFSET_POS_Y = 12;
var OFFSET_POS_Y = 7;
var buttonWidth = setting.width;
var lineWidth = buttonWidth * 3 / 4;
@@ -71,19 +75,20 @@ BasicTab.prototype.makeActiveSprite = function() {
var texture = null;
texture = new Phaser.Graphics()
.beginFill(0xffffff)
// .beginFill(0xffffff)
.beginFill(MainColor.LIGHT_CHOCO_HEX)
.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);
var activeLineSprite = game.add.sprite(posX, posY, texture);
// buttonSprite.anchor.setTo(0.5, 0.5);
activeSprite.inputEnabled = true;
activeLineSprite.inputEnabled = true;
return activeSprite;
return activeLineSprite;
}
@@ -95,7 +100,6 @@ BasicTab.prototype.addIcon = function(spriteName) {
if(spriteName.length === 0)
return;
console.log("addIcon : " + spriteName);
this.iconSprite = game.add.sprite(0, 0, spriteName);
this.iconSprite.x = this.buttonSprite.width / 2;
this.iconSprite.y = this.buttonSprite.height / 2;
@@ -186,9 +190,9 @@ BasicTab.prototype.setActive = function(flag) {
this.activate = flag;
if(this.activate)
this.activeSprite.alpha = 1;
this.activeLineSprite.alpha = 1;
else
this.activeSprite.alpha = 0;
this.activeLineSprite.alpha = 0;
}
BasicTab.prototype.alignContents = function() {
@@ -270,7 +274,7 @@ BasicTab.prototype.mouseOut = function() {
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.out;
this.activeSprite.tint = this.setting.activeColors.out;
// this.activeLineSprite.tint = this.setting.activeColors.out;
}
BasicTab.prototype.mouseOver = function() {
@@ -283,7 +287,7 @@ BasicTab.prototype.mouseOver = function() {
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.over;
this.activeSprite.tint = this.setting.activeColors.over;
// this.activeLineSprite.tint = this.setting.activeColors.over;
}
BasicTab.prototype.mouseDown = function() {
@@ -296,7 +300,7 @@ BasicTab.prototype.mouseDown = function() {
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.down;
this.activeSprite.tint = this.setting.activeColors.down;
// this.activeLineSprite.tint = this.setting.activeColors.down;
}
BasicTab.prototype.buttonDisabled = function() {
@@ -309,7 +313,7 @@ BasicTab.prototype.buttonDisabled = function() {
if(typeof this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.disabled;
this.activeSprite.tint = this.setting.activeColors.disabled;
// this.activeLineSprite.tint = this.setting.activeColors.disabled;
}
src/game/lib/flat_button/setting_button.js
+1 -1
View File
@@ -2,7 +2,7 @@ SettingButton.prototype = Object.create(BasicButton.prototype);
SettingButton.constructor = SettingButton;
function SettingButton(clickEvent) {
var setting = new ButtonSetting(980, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
var setting = new ButtonSetting(984, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
setting.setStrokeWidth(0);
setting.setRound(30);
// setting.setFont("Nanum Brush Script");
src/game/lib/flat_button/tab_layout.js
+65
View File
@@ -0,0 +1,65 @@
function TabLayout(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.activeTabIndex = 0;
this.tabGroup = new Array();
};
TabLayout.prototype.add = function(tab) {
tab.setTabLayout(this);
this.tabGroup.push(tab);
}
TabLayout.prototype.getX = function() {
return this.x;
}
TabLayout.prototype.getY = function() {
return this.y;
}
TabLayout.prototype.getTabWidth = function() {
return this.width / this.tabGroup.length;
}
TabLayout.prototype.getTabHeight = function() {
return this.height;
}
TabLayout.prototype.createTabs = function() {
var count = this.tabGroup.length;
for(var i = 0; i < count; i++) {
this.tabGroup[i].createTab(i);
}
this.updateActiveLine();
}
TabLayout.prototype.applyLoadedFont = function() {
var count = this.tabGroup.length;
for(var i = 0; i < count; i++) {
this.tabGroup[i].applyLoadedFont();
}
}
TabLayout.prototype.selectedTab = function(tab) {
var count = this.tabGroup.length;
for(var i = 0; i < count; i++) {
if(this.tabGroup[i] === tab)
this.activeTabIndex = i;
}
this.updateActiveLine();
}
TabLayout.prototype.updateActiveLine = function() {
var count = this.tabGroup.length;
for(var i = 0; i < count; i++)
this.tabGroup[i].setActive(false);
this.tabGroup[this.activeTabIndex].setActive(true);
}