diff --git a/src/game/lib/flat_button/app_group_tab.js b/src/game/lib/flat_button/app_group_tab.js index 0989f35..da8c7e8 100644 --- a/src/game/lib/flat_button/app_group_tab.js +++ b/src/game/lib/flat_button/app_group_tab.js @@ -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; diff --git a/src/game/lib/flat_button/basic_tab.js b/src/game/lib/flat_button/basic_tab.js index c07b031..6186e2a 100644 --- a/src/game/lib/flat_button/basic_tab.js +++ b/src/game/lib/flat_button/basic_tab.js @@ -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; } diff --git a/src/game/lib/flat_button/setting_button.js b/src/game/lib/flat_button/setting_button.js index 4542e28..3426ee2 100644 --- a/src/game/lib/flat_button/setting_button.js +++ b/src/game/lib/flat_button/setting_button.js @@ -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"); diff --git a/src/game/lib/flat_button/tab_layout.js b/src/game/lib/flat_button/tab_layout.js new file mode 100644 index 0000000..40864a2 --- /dev/null +++ b/src/game/lib/flat_button/tab_layout.js @@ -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); +} \ No newline at end of file diff --git a/src/game/main_menu/main.js b/src/game/main_menu/main.js index a630256..3e46b6c 100644 --- a/src/game/main_menu/main.js +++ b/src/game/main_menu/main.js @@ -17,7 +17,7 @@ WebFontConfig = { // The Google Fonts we want to load (specify as many as you like in the array) google: { - families: ['Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Brush Script'] + families: ['Nanum Gothic:400,700,800', 'Nanum Gothic Coding:400,700', 'Nanum Brush Script', 'Nanum Pen Script'] // families: ['Nanum Brush Script'] } }; diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 0a812ed..491758e 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -55,8 +55,7 @@ MainMenu.prototype.create = function() { graphics.beginFill(MainColor.CHOCO_HEX, 1); graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT); - this.appGroupButtons = {}; - // this.makeAppGroupButtons(); + this.appGroupTabLayout = null; } MainMenu.prototype.fontLoaded = function() { @@ -76,12 +75,11 @@ MainMenu.prototype.fontLoaded = function() { // screenTopUI.makeFullScreenButton(); // this.loadAllowEditEnterCode(screenTopUI); - // this.appGroupButtons = {}; this.makeAppGroupButtons(); - // console.log(this.appGroupButtons); - this.appGroupButtons.backButton.applyLoadedFont(); - this.appGroupButtons.settingButton.applyLoadedFont(); + this.backButton.applyLoadedFont(); + this.settingButton.applyLoadedFont(); + this.appGroupTabLayout.applyLoadedFont(); // bottom ui @@ -180,38 +178,91 @@ MainMenu.prototype.hasApp = function(appID, appList) { } MainMenu.prototype.makeAppGroupButtons = function() { - var backButton = new BackButton( + this.backButton = new BackButton( (function() { console.log("back"); }).bind(this) ); - this.appGroupButtons.backButton = backButton; - var settingButton = new SettingButton( + this.settingButton = new SettingButton( (function() { console.log("setting"); }).bind(this) ); - this.appGroupButtons.settingButton = settingButton; - var mouseAppGroupTab = new AppGroupTab( - (function() { console.log("mouse"); }).bind(this) + + this.appGroupTabLayout = new TabLayout(80, 0, 864, 70); + // typing practice + var typingPracticeKoreanAppGroupTab = new AppGroupTab( + (function() { console.log("typing practice"); }).bind(this) ); - // var mouseAppTab = new BasicTab( - // setting, - // (function() { console.log("mouse"); }).bind(this) - // ); - // mouseAppTab.setMainText("MOUSE"); - // mouseAppTab.setShortcutText("마우스"); + typingPracticeKoreanAppGroupTab.reserveIcon("home"); + typingPracticeKoreanAppGroupTab.reserveShortcutText("한글 타자연습"); + this.appGroupTabLayout.add(typingPracticeKoreanAppGroupTab); - 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) + var typingPracticeEnglishAppGroupTab = new AppGroupTab( + (function() { console.log("typing practice"); }).bind(this) ); - typingAppTab.setMainText("TYPING"); - typingAppTab.setShortcutText("타이핑"); - typingAppTab.setActive(false); + typingPracticeEnglishAppGroupTab.reserveIcon("home"); + typingPracticeEnglishAppGroupTab.reserveShortcutText("영문 타자연습"); + this.appGroupTabLayout.add(typingPracticeEnglishAppGroupTab); + + + // typing test + var typingTestAppKoreaGroupTab = new AppGroupTab( + (function() { console.log("typing test"); }).bind(this) + ); + typingTestAppKoreaGroupTab.reserveMainText("Typing test"); + typingTestAppKoreaGroupTab.reserveShortcutText("한글 타자시험"); + this.appGroupTabLayout.add(typingTestAppKoreaGroupTab); + + var typingTestAppEnglishGroupTab = new AppGroupTab( + (function() { console.log("typing test"); }).bind(this) + ); + typingTestAppEnglishGroupTab.reserveMainText("Typing test"); + typingTestAppEnglishGroupTab.reserveShortcutText("영문 타자시험"); + this.appGroupTabLayout.add(typingTestAppEnglishGroupTab); + + + // typing exam + var typingExamAppKoreaGroupTab = new AppGroupTab( + (function() { console.log("typing exam"); }).bind(this) + ); + typingExamAppKoreaGroupTab.reserveMainText("Typing exam"); + typingExamAppKoreaGroupTab.reserveShortcutText("한글 타자검정"); + this.appGroupTabLayout.add(typingExamAppKoreaGroupTab); + + var typingExamAppEnglishGroupTab = new AppGroupTab( + (function() { console.log("typing exam"); }).bind(this) + ); + typingExamAppEnglishGroupTab.reserveMainText("Typing exam"); + typingExamAppEnglishGroupTab.reserveShortcutText("영문 타자검정"); + this.appGroupTabLayout.add(typingExamAppEnglishGroupTab); + + + // typing play + var typingPlayAppKoreaGroupTab = new AppGroupTab( + (function() { console.log("typing game"); }).bind(this) + ); + typingPlayAppKoreaGroupTab.reserveMainText("Typing game"); + typingPlayAppKoreaGroupTab.reserveShortcutText("한글 타자놀이"); + this.appGroupTabLayout.add(typingPlayAppKoreaGroupTab); + + var typingPlayAppEnglishGroupTab = new AppGroupTab( + (function() { console.log("typing game"); }).bind(this) + ); + typingPlayAppEnglishGroupTab.reserveMainText("Typing game"); + typingPlayAppEnglishGroupTab.reserveShortcutText("영문 타자놀이"); + this.appGroupTabLayout.add(typingPlayAppEnglishGroupTab); + + + // typing practice + var mousePlayAppGroupTab = new AppGroupTab( + (function() { console.log("mouse game"); }).bind(this) + ); + mousePlayAppGroupTab.reserveMainText("Mouse game"); + mousePlayAppGroupTab.reserveShortcutText("마우스놀이"); + this.appGroupTabLayout.add(mousePlayAppGroupTab); + + this.appGroupTabLayout.createTabs(); + - this.appGroupButtons.settingButton = mouseAppGroupTab; } diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index 6f0f99d..986947f 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -62,6 +62,7 @@ +