diff --git a/resources/image/icon/fullscreen.png b/resources/image/icon/fullscreen.png new file mode 100644 index 0000000..857df12 Binary files /dev/null and b/resources/image/icon/fullscreen.png differ diff --git a/resources/image/icon/fullscreen_white.png b/resources/image/icon/fullscreen_white.png new file mode 100644 index 0000000..8a045d8 Binary files /dev/null and b/resources/image/icon/fullscreen_white.png differ diff --git a/src/game/lib/fullscreen_button.js b/src/game/lib/fullscreen_button.js new file mode 100644 index 0000000..d0934c5 --- /dev/null +++ b/src/game/lib/fullscreen_button.js @@ -0,0 +1,47 @@ +class FullscreenButton { + + constructor(game) { + this.game = game; + + this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; + + let setting = new RoundRectButtonSetting(50, 50); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.setStrokeColor( + 0x884444, + 0xaa6666, + 0xaa6666, + 0x333333 + ); + setting.setButtonColor( + 0xddaaaa, + 0xffdddd, + 0xffdddd, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + + let button = new RoundRectButton(setting, "", () => this.clickEvent()); + button.move(this.game.world.width - 30, 30); + + let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen'); + icon_fullscreen.width = 20; + icon_fullscreen.height = 20; + button.setIcon(icon_fullscreen); + } + + clickEvent() { + if(this.game.scale.isFullScreen) { + this.game.scale.stopFullScreen(); + } else { + this.game.scale.startFullScreen(); + } + } + +} \ No newline at end of file diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js index 04273d6..1200914 100644 --- a/src/game/lib/round_rect_button.js +++ b/src/game/lib/round_rect_button.js @@ -146,29 +146,50 @@ class RoundRectButton { return btnText; } + setIcon(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(); + } + mouseOut() { this.text.fill = this.setting.textColors.out; this.buttonStroke.tint = this.setting.strokeColors.out; this.button.tint = this.setting.buttonColors.out; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.strokeColors.out; + } } mouseOver() { this.text.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.strokeColors.over; + } } mouseDown() { this.text.fill = this.setting.textColors.down; this.buttonStroke.tint = this.setting.strokeColors.down; this.button.tint = this.setting.buttonColors.down; + if(typeof this.buttonIcon !== "undefined") { + this.buttonIcon.tint = this.setting.strokeColors.down; + } } buttonDisabled() { this.text.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.strokeColors.disabled; + } } diff --git a/src/game/login/login.js b/src/game/login/login.js index 896ac7a..61ccc0b 100644 --- a/src/game/login/login.js +++ b/src/game/login/login.js @@ -71,6 +71,11 @@ let Login = { let startButton = new RoundRectButton(setting, "시작", this.startMenu); startButton.move(game.world.centerX, game.world.centerY + 140); + + icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen'); + icon_fullscreen.width = 20; + icon_fullscreen.height = 20; + startButton.setIcon(icon_fullscreen); }, startMenu: function() { diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index cec401e..e1f08e8 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -3,16 +3,25 @@ let MenuApp = { + preload: function() { + game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); + }, + create: function() { this.game.stage.backgroundColor = '#4d4d4d'; let backButton = new BackButton( () => { + sessionStorage.removeItem("playerName"); + sessionStorage.removeItem("playerUserID"); + location.href = '../../web/client/login.html'; }); + let fullscreenButton = new FullscreenButton(this.game); + let screenBottom = new ScreenBottom(game); screenBottom.makeBottomLine(); - screenBottom.printBottomLeftText("게임 진행 정보"); + // screenBottom.printBottomLeftText("게임 진행 정보"); screenBottom.printBottomCenterText("메뉴"); screenBottom.printBottomRightText(playerName); diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 062ddd1..98bf0db 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -15,6 +15,7 @@ +