diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/button/choco_button.js new file mode 100644 index 0000000..d1469fa --- /dev/null +++ b/src/game/lib/button/choco_button.js @@ -0,0 +1,231 @@ +// ChocoButton.prototype = Object.create(); +ChocoButton.constructor = ChocoButton; + +function ChocoButton(setting, clickEvent) { + this.setting = setting; + this.clickEvent = clickEvent; + + this.icon = null; + this.mainText = null; + this.shortcutText = null; + + this.buttonStroke = this.makeButtonStroke(); + // this.buttonStroke.anchor.setTo(0.5, 0.5); + this.buttonStroke.inputEnabled = true; + this.setEventMethod(this.buttonStroke); + + this.button = this.makeButtonSprite(); + + // this.button.anchor.setTo(0.5, 0.5); + this.button.inputEnabled = true; + this.setEventMethod(this.button); + + + this.mainText = this.makeText(""); + this.button.addChild(this.mainText); + + this.shortcutText = this.makeShortcutText(); + this.button.addChild(this.shortcutText); + + this.mouseOut(); +} + +ChocoButton.prototype.addIcon = function(spriteName) { + if(spriteName != null && spriteName.length > 0) { + this.icon = this.makeIcon(spriteName); + this.setIcon(this.icon); + } +} + + +ChocoButton.prototype.setEventMethod = function(target) { + target.events.onInputOver.add(function() { this.mouseOver(); }, this); + target.events.onInputOut.add(function() { this.mouseOut(); }, this); + target.events.onInputDown.add(function() { + this.mouseDown(); + + if(this.clickEvent) { + this.clickEvent(); + } + }, this); + target.events.onInputUp.add(function() { this.mouseOver(); }, this); +} + +ChocoButton.prototype.makeButtonStroke = function() { // outter(bigger) round rect sprite + var btnTexture = new Phaser.Graphics() + .beginFill(0xffffff) + .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount) + .endFill() + .generateTexture(); + + return game.add.sprite( + this.setting.x - this.setting.width / 2, + this.setting.y - this.setting.height / 2, + btnTexture + ); +} + +ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite + var width = this.setting.width - this.setting.strokeWidthPx * 2; + var height = this.setting.height - this.setting.strokeWidthPx * 2; + var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5); + + var btnTexture = new Phaser.Graphics() + .beginFill(0xffffff) + .drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount) + .endFill() + .generateTexture(); + + // return game.add.sprite(0, 0, btnTexture); + return game.add.sprite( + this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx, + this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx, + btnTexture + ); +} + +ChocoButton.prototype.makeIcon = function(iconName) { + var icon = game.add.sprite(0, 0, iconName); + icon.width = 40; + icon.height = 40; + + return icon; +} + +ChocoButton.prototype.setIconSize = function(size) { + this.setIconWidth(size); + this.setIconHeight(size); +} + +ChocoButton.prototype.setIconWidth = function(size) { + this.buttonIcon.width = size; +} + +ChocoButton.prototype.setIconHeight = function(size) { + this.buttonIcon.height = size; +} + +ChocoButton.prototype.makeText = function(textContent) { + var width = this.setting.width / 2 - this.setting.strokeWidthPx; + var height = this.setting.height / 2; + + // var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) + // .setTextBounds(0, 0, width, this.setting.height); + + var btnText = game.add.text(width, height, textContent, this.setting.fontStyle); + btnText.anchor.set(0.5); + btnText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; + + return btnText; +} + +ChocoButton.prototype.setIcon = function(icon) { + this.buttonIcon = this.button.addChild(icon); + this.buttonIcon.x = this.button.width / 2; + this.buttonIcon.y = this.button.height / 2; + this.buttonIcon.anchor.setTo(0.5, 0.5); + + this.mouseOut(); +} + +ChocoButton.prototype.makeShortcutText = function() { + var shortcutText = game.add.text(this.button.width / 2, this.button.height * 9 / 10, ""); + shortcutText.anchor.set(0.5); + + shortcutText.fontSize = this.button.height * 2 / 10; + // shortcutText.addColor(this.setting.textColors.over, 0); + shortcutText.addColor("0xffffff", 0); + + return shortcutText; +} + +ChocoButton.prototype.addShortcutText = function(text) { + var scText = "[ " + text + " ]"; + this.shortcutText.text = scText; + +} + + +ChocoButton.prototype.mouseOut = function() { + this.mainText.fill = this.setting.textColors.out; + if(this.shortcutText != undefined) + this.shortcutText.fill = this.setting.textColors.over; + this.buttonStroke.tint = this.setting.strokeColors.out; + this.button.tint = this.setting.buttonColors.out; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.iconColors.out; + } +} + +ChocoButton.prototype.mouseOver = function() { + this.mainText.fill = this.setting.textColors.over; + if(this.shortcutText != undefined) + this.shortcutText.fill = this.setting.textColors.over; + this.buttonStroke.tint = this.setting.strokeColors.over; + this.button.tint = this.setting.buttonColors.over; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.iconColors.over; + } +} + +ChocoButton.prototype.mouseDown = function() { + this.mainText.fill = this.setting.textColors.down; + if(this.shortcutText != undefined) + this.shortcutText.fill = this.setting.textColors.over; + this.buttonStroke.tint = this.setting.strokeColors.down; + this.button.tint = this.setting.buttonColors.down; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.iconColors.down; + } +} + +ChocoButton.prototype.buttonDisabled = function() { + this.mainText.fill = this.setting.textColors.disabled; + if(this.shortcutText != undefined) + this.shortcutText.fill = this.setting.textColors.disabled; + this.buttonStroke.tint = this.setting.strokeColors.disabled; + this.button.tint = this.setting.buttonColors.disabled; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.iconColors.disabled; + } +} + + + +ChocoButton.prototype.getPosX = function() { + return this.buttonStroke.x + this.setting.width / 2; +} + +ChocoButton.prototype.getPosY = function() { + return this.buttonStroke.y + y - this.setting.height / 2; +} + +ChocoButton.prototype.move = function(x, y) { + this.buttonStroke.x = x - this.setting.width / 2; + this.buttonStroke.y = y - this.setting.height / 2; + + this.button.x = x - this.setting.width / 2 + this.setting.strokeWidthPx; + this.button.y = y - this.setting.height / 2 + this.setting.strokeWidthPx; +} + +ChocoButton.prototype.getInputEnabled = function() { + return this.button.inputEnabled; +} + +ChocoButton.prototype.setInputEnabled = function(isEnabled) { + this.buttonStroke.inputEnabled = isEnabled; + this.button.inputEnabled = isEnabled; + + if(isEnabled === true) { + this.mouseOut(); + } else { + this.buttonDisabled(); + } +} + +ChocoButton.prototype.setLineSpacing = function(spacingInPixels) { + this.mainText.lineSpacing = spacingInPixels; +} + +ChocoButton.NONE_ICON = ""; +ChocoButton.NONE_BUTTON_TEXT = ""; \ No newline at end of file diff --git a/src/game/lib/button/choco_button_setting.js b/src/game/lib/button/choco_button_setting.js new file mode 100644 index 0000000..581f1e8 --- /dev/null +++ b/src/game/lib/button/choco_button_setting.js @@ -0,0 +1,93 @@ +function ChocoButtonSetting(x, y, width, height, roundAmount) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.roundAmount = 0; + if(typeof roundAmount === "undefined") { + var shorterSide = width > height ? height : width; + this.roundAmount = shorterSide * 0.1; + } else { + this.roundAmount = roundAmount; + } + this.strokeWidthPx = ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX; + + + this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS; + this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS; + this.textColors = ChocoButtonSetting.DEFAULT_TEXT_COLORS; + this.iconColors = ChocoButtonSetting.DEFAULT_ICON_COLORS; + this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT; +}; + +ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { + this.strokeColors = { }; + this.strokeColors.out = out; + this.strokeColors.over = over; + this.strokeColors.down = down; + this.strokeColors.disabled = disabled; +} + +ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) { + this.buttonColors = { }; + this.buttonColors.out = out; + this.buttonColors.over = over; + this.buttonColors.down = down; + this.buttonColors.disabled = disabled; +} + +ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled) { + this.textColors = { }; + this.textColors.out = out; + this.textColors.over = over; + this.textColors.down = down; + this.textColors.disabled = disabled; +} + +ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled) { + this.iconColors = { }; + this.iconColors.out = out; + this.iconColors.over = over; + this.iconColors.down = down; + this.iconColors.disabled = disabled; +} + + +ChocoButtonSetting.DEFAULT_STROKE_COLORS = { + out: 0x666666, + over: 0x333333, + down: 0x333333, + disabled: 0x666666 +}; + +ChocoButtonSetting.DEFAULT_BUTTON_COLORS = { + out: 0xffffff, + over: 0xddffdd, + down: 0xaaffaa, + disabled: 0x333333 +}; + +ChocoButtonSetting.DEFAULT_TEXT_COLORS = { + out: "#000", + over: "#333", + down: "#666", + disabled: "#999" +}; + +ChocoButtonSetting.DEFAULT_ICON_COLORS = { + out: 0xffffff, + over: 0xddffdd, + down: 0xaaffaa, + disabled: 0x333333 +}; + +ChocoButtonSetting.DEFAULT_TEXT_FONT = { + font: "30px Arial", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff", + align: "center" +}; + +ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel +ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel \ No newline at end of file diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 5265893..2651d09 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -5,7 +5,7 @@ function MainMenu() { } MainMenu.prototype.preload = function() { - // game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png'); + game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png'); game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); } @@ -42,7 +42,21 @@ MainMenu.prototype.create = function() { */ MainMenu.prototype.create = function() { - game.stage.backgroundColor = '#4d4d4d'; + console.log("create"); + + this.dbService = new DBService(); + this.dbService.setMaestroID(sessionStorageManager.getMaestroID()); + this.dbService.setPlayerID(sessionStorageManager.getPlayerID()); + + // bg + var graphics = game.add.graphics(); + graphics.beginFill(MainColor.LIGHT_CHOCO_HEX, 1); + graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y); + graphics.beginFill(MainColor.CHOCO_HEX, 1); + graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT); + + this.appGroupButtons = {}; + this.makeAppGroupButtons(); } MainMenu.prototype.fontLoaded = function() { @@ -56,25 +70,23 @@ MainMenu.prototype.fontLoaded = function() { "menu_app" // callerClassName ); - // bg - game.add.graphics() - .beginFill(MainColor.LIGHT_CHOCO_HEX, 1) - .drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y); - // top ui // var screenTopUI = new ScreenTopUI(); // screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) ); // screenTopUI.makeFullScreenButton(); // this.loadAllowEditEnterCode(screenTopUI); + console.log(this.appGroupButtons); // bottom ui + /* var screenBottomUI = new ScreenBottomUI(); // ScreenBottomUI.printLeftText("게임 진행 정보"); // var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); // ScreenBottomUI.printCenterText(playingAppName); screenBottomUI.printCenterText("메뉴"); screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); + */ new WelcomePlayerText(sessionStorageManager.getPlayerName()); if(isExperiencePlayerAccount()) { @@ -94,6 +106,7 @@ MainMenu.prototype.back = function() { } MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) { + /* var dbConnectManager = new DBConnectManager(); dbConnectManager.requestAllowEditEnterCode( sessionStorageManager.getMaestroID(), @@ -111,9 +124,18 @@ MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) { this.loadFailed(replyJSON); }).bind(this) ); + */ } MainMenu.prototype.loadAppData = function() { + // this.dbService.requestMainMenuAppData( + // (function(replyJSON) { + // this.updateAppGroupButton(replyJSON.appGroupData); + // this.updateAppButtons(replyJSON.appData); + // }) + // ); + + /* var dbConnectManager = new DBConnectManager(); dbConnectManager.requestMenuAppList( sessionStorageManager.getMaestroID(), @@ -124,6 +146,7 @@ MainMenu.prototype.loadAppData = function() { this.loadFailed(replyJSON); }).bind(this) ); + */ } MainMenu.prototype.loadSucceeded = function(replyJSON) { @@ -150,6 +173,25 @@ MainMenu.prototype.hasApp = function(appID, appList) { return false; } +MainMenu.prototype.makeAppGroupButtons = function() { + this.makeQuitButton(); +} + +MainMenu.prototype.makeQuitButton = function() { + var setting = new ChocoButtonSetting(1000, 40, 60, 60, 5); + var quitButton = new ChocoButton( + setting, // choco button setting, + (function() { + this.back(); + }).bind(this) + ); + quitButton.addIcon("tile_choco"); + quitButton.setIconSize(30); + console.log(quitButton); + + this.appGroupButtons.quitButton = quitButton; +} + MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) { // console.log(appList); @@ -282,4 +324,7 @@ MainMenu.prototype.getButtonPosY = function(index, buttonCount, startPosY) { MainMenu.prototype.loadFailed = function(replyJSON) { // console.log('login failed, jsonData : ' + JSON.stringify(replyJSON)); -} \ No newline at end of file +} + + +MainMenu.MAIN_MENU_HEIGHT = 80; \ No newline at end of file diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index 4e17e81..bb4fe17 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -35,15 +35,15 @@ - + - - - + + + @@ -52,6 +52,10 @@ + + + +