diff --git a/src/game/global/global_variables.js b/src/game/global/global_variables.js index b749ede..c92d1ac 100644 --- a/src/game/global/global_variables.js +++ b/src/game/global/global_variables.js @@ -3,7 +3,7 @@ const LANGUAGE_ENGLISH = "english"; const MODE_RELEASE = "release"; const MODE_DEBUG = "debug"; -const runMode = MODE_RELEASE; +const runMode = MODE_DEBUG; function isDebugMode() { // console.log("debug mode ? " + runMode); diff --git a/src/game/lib/button/back_button.js b/src/game/lib/button/back_button.js index 51b04d2..d16090a 100644 --- a/src/game/lib/button/back_button.js +++ b/src/game/lib/button/back_button.js @@ -1,30 +1,34 @@ -class BackButton extends RoundRectButton { +BackButton.prototype = Object.create(RoundRectButton); +BackButton.constructor = BackButton; - constructor(clickEvent) { - let setting = new RoundRectButtonSetting(30, 30, 50, 50); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 3; - setting.setStrokeColor( - 0xaa6666, - 0x884444, - 0x884444, - 0x333333 - ); - setting.setButtonColor( - 0xffdddd, - 0xddaaaa, - 0xddaaaa, - 0x666666 - ); - setting.setTextColor( - "#a66", - "#844", - "#844", - "#333" - ); +function BackButton(clickEvent) { + let setting = new RoundRectButtonSetting(30, 30, 50, 50); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 3; + setting.setStrokeColor( + 0xaa6666, + 0x884444, + 0x884444, + 0x333333 + ); + setting.setButtonColor( + 0xffdddd, + 0xddaaaa, + 0xddaaaa, + 0x666666 + ); + setting.setTextColor( + "#a66", + "#844", + "#844", + "#333" + ); - super(setting, RoundRectButton.NONE_ICON, "<", clickEvent); - } + new RoundRectButton(setting, RoundRectButton.NONE_ICON, "<", clickEvent); +} +BackButton.prototype.startState = function(stateName) { + var game = this.backButton.parent.game; + game.state.start(stateName); } \ No newline at end of file diff --git a/src/game/lib/button/fullscreen_button.js b/src/game/lib/button/fullscreen_button.js index 1882fc1..ec0d947 100644 --- a/src/game/lib/button/fullscreen_button.js +++ b/src/game/lib/button/fullscreen_button.js @@ -1,47 +1,46 @@ -class FullscreenButton extends RoundRectButton { +FullscreenButton.prototype = Object.create(RoundRectButton); +FullscreenButton.constructor = BackButton; - constructor() { - game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; +function FullscreenButton() { + game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; - let setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 3; - setting.setStrokeColor( - 0x444488, - 0x6666aa, - 0x6666aa, - 0x333333 - ); - setting.setButtonColor( - 0xaaaadd, - 0xddddff, - 0xddddff, - 0x666666 - ); - setting.setTextColor( - "#844", - "#a66", - "#a66", - "#333" - ); + var setting = new RoundRectButtonSetting(game.world.width - 30, 30, 50, 50); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 3; + setting.setStrokeColor( + 0x444488, + 0x6666aa, + 0x6666aa, + 0x333333 + ); + setting.setButtonColor( + 0xaaaadd, + 0xddddff, + 0xddddff, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); - super( - setting, - RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT, - (function() { - if(game.scale.isFullScreen) { - game.scale.stopFullScreen(); - } else { - game.scale.startFullScreen(); - } - }) - ); - - let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen'); - icon_fullscreen.width = 20; - icon_fullscreen.height = 20; - this.setIcon(icon_fullscreen); - } + var button = new RoundRectButton( + setting, + RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT, + (function() { + if(game.scale.isFullScreen) { + game.scale.stopFullScreen(); + } else { + game.scale.startFullScreen(); + } + }) + ); + var icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen'); + icon_fullscreen.width = 20; + icon_fullscreen.height = 20; + button.setIcon(icon_fullscreen); } \ No newline at end of file diff --git a/src/game/lib/button/game_app_button.js b/src/game/lib/button/game_app_button.js index ec6086f..c6c5611 100644 --- a/src/game/lib/button/game_app_button.js +++ b/src/game/lib/button/game_app_button.js @@ -1,78 +1,92 @@ -class GameAppButton extends RoundRectButton { +GameAppButton.prototype = Object.create(RoundRectButton.prototype); +GameAppButton.constructor = GameAppButton; - constructor(x, y, type, iconName, buttonText, clickEvent) { - let setting = new RoundRectButtonSetting( - x, y, - GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT +function GameAppButton(x, y, type, iconName, buttonText, appInfo) { + var setting = new RoundRectButtonSetting( + x, y, + GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT + ); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 5; + + switch(type) { + case GameAppButton.TYPE_MOUSE_APP: + setting.setStrokeColor( + 0xaa6666, + 0x884444, + 0x884444, + 0x333333 ); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 5; - - switch(type) { - case GameAppButton.TYPE_MOUSE_APP: - setting.setStrokeColor( - 0xaa6666, - 0x884444, - 0x884444, - 0x333333 - ); - setting.setButtonColor( - 0xffdddd, - 0xddaaaa, - 0xddaaaa, - 0x666666 - ); - setting.setTextColor( - "#a66", - "#844", - "#844", - "#333" - ); - break; - case GameAppButton.TYPE_TYPING_PRACTICE: - case GameAppButton.TYPE_TYPING_APP: - setting.setStrokeColor( - 0x444488, - 0x6666aa, - 0x6666aa, - 0x333333 - ); - setting.setButtonColor( - 0xaaaadd, - 0xddddff, - 0xddddff, - 0x666666 - ); - setting.setTextColor( - "#844", - "#a66", - "#a66", - "#333" - ); - break; - } - - setting.fontStyle = { - font: "24px Arial", - boundsAlignH: "center", // left, center. right - boundsAlignV: "middle", // top, middle, bottom - fill: "#fff" - }; - - let textCount = buttonText.length; - if(textCount > 7) - setting.fontStyle.font = "18px Arial"; - else if(textCount > 5) - setting.fontStyle.font = "22px Arial"; - else - setting.fontStyle.font = "24px Arial"; - - super(setting, iconName, buttonText, clickEvent); + setting.setButtonColor( + 0xffdddd, + 0xddaaaa, + 0xddaaaa, + 0x666666 + ); + setting.setTextColor( + "#a66", + "#844", + "#844", + "#333" + ); + break; + case GameAppButton.TYPE_TYPING_PRACTICE: + case GameAppButton.TYPE_TYPING_APP: + setting.setStrokeColor( + 0x444488, + 0x6666aa, + 0x6666aa, + 0x333333 + ); + setting.setButtonColor( + 0xaaaadd, + 0xddddff, + 0xddddff, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + break; } + setting.fontStyle = { + font: "24px Arial", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" + }; + + var textCount = buttonText.length; + if(textCount > 7) + setting.fontStyle.font = "18px Arial"; + else if(textCount > 5) + setting.fontStyle.font = "22px Arial"; + else + setting.fontStyle.font = "24px Arial"; + + this.appInfo = appInfo; + RoundRectButton.call( + this, setting, + iconName, buttonText, + this.clickEvent + ); } + +GameAppButton.prototype.clickEvent = function() { + sessionStorageManager.playingAppID = this.appInfo.AppID; + sessionStorageManager.playingAppName = this.appInfo.AppName; + sessionStorageManager.playingAppKoreanName = this.appInfo.KoreanName; + + location.href = '../../web/client/start.html'; +} + + GameAppButton.TYPE_MOUSE_APP = 0; GameAppButton.TYPE_TYPING_PRACTICE = 1; GameAppButton.TYPE_TYPING_APP = 2; diff --git a/src/game/lib/button/round_rect_button.js b/src/game/lib/button/round_rect_button.js index b6b49f7..e65ac64 100644 --- a/src/game/lib/button/round_rect_button.js +++ b/src/game/lib/button/round_rect_button.js @@ -1,52 +1,49 @@ -class RoundRectButtonSetting { - - constructor(x, y, width, height, roundAmount) { - this.x = x; - this.y = y; - this.width = width; - this.height = height; - this.roundAmount = 0; - if(typeof roundAmount === "undefined") { - let shorterSide = width > height ? height : width; - this.roundAmount = shorterSide * 0.1; - } else { - this.roundAmount = roundAmount; - } - this.strokeWidthPx = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX; - - - this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS; - this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS; - this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS; - this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT; - }; - - setStrokeColor(out, over, down, disabled) { - this.strokeColors = { }; - this.strokeColors.out = out; - this.strokeColors.over = over; - this.strokeColors.down = down; - this.strokeColors.disabled = disabled; +function RoundRectButtonSetting(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 = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX; - setButtonColor(out, over, down, disabled) { - this.buttonColors = { }; - this.buttonColors.out = out; - this.buttonColors.over = over; - this.buttonColors.down = down; - this.buttonColors.disabled = disabled; - } - setTextColor(out, over, down, disabled) { - this.textColors = { }; - this.textColors.out = out; - this.textColors.over = over; - this.textColors.down = down; - this.textColors.disabled = disabled; - } + this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS; + this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS; + this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS; + this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT; +}; +RoundRectButtonSetting.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; } +RoundRectButtonSetting.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; +} + +RoundRectButtonSetting.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; +} + + RoundRectButtonSetting.DEFAULT_STROKE_COLORS = { out: 0x666666, over: 0x333333, @@ -80,176 +77,175 @@ RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel -class RoundRectButton { - constructor(roundRectSetting, iconName, buttonText, clickEvent) { - this.setting = roundRectSetting; - this.clickEvent = clickEvent; - this.buttonStroke = this.makeButtonStroke(); - // this.buttonStroke.anchor.setTo(0.5, 0.5); - this.buttonStroke.inputEnabled = true; - this.setEventMethod(this.buttonStroke); +function RoundRectButton(roundRectSetting, iconName, buttonText, clickEvent) { + this.setting = roundRectSetting; + this.clickEvent = clickEvent; - this.button = this.makeButtonSprite(); + this.buttonStroke = this.makeButtonStroke(); + // this.buttonStroke.anchor.setTo(0.5, 0.5); + this.buttonStroke.inputEnabled = true; + this.setEventMethod(this.buttonStroke); - this.text = this.makeText(buttonText); - if(buttonText.length > 0) { - this.button.addChild(this.text); + this.button = this.makeButtonSprite(); + + this.text = this.makeText(buttonText); + if(buttonText.length > 0) { + this.button.addChild(this.text); + } + + if(iconName.length > 0) { + this.icon = this.makeIcon(iconName); + this.setIcon(this.icon); + } + + // this.button.anchor.setTo(0.5, 0.5); + this.button.inputEnabled = true; + this.setEventMethod(this.button); + + this.mouseOut(); +} + +RoundRectButton.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); +} - if(iconName.length > 0) { - this.icon = this.makeIcon(iconName); - this.setIcon(this.icon); - } +RoundRectButton.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(); - // this.button.anchor.setTo(0.5, 0.5); - this.button.inputEnabled = true; - this.setEventMethod(this.button); + return game.add.sprite( + this.setting.x - this.setting.width / 2, + this.setting.y - this.setting.height / 2, + btnTexture + ); +} +RoundRectButton.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 + ); +} + +RoundRectButton.prototype.makeIcon = function(iconName) { + var icon = game.add.sprite(0, 0, iconName); + icon.width = 80; + icon.height = 80; + + return icon; +} + +RoundRectButton.prototype.makeText = function(textContent) { + var width = this.setting.width - this.setting.strokeWidthPx * 2; + var height = this.setting.height - this.setting.strokeWidthPx * 2; + + var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) + .setTextBounds(0, 0, width, this.setting.height); + + btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; + // btnText.anchor.setTo(0.5); + + return btnText; +} + +RoundRectButton.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(); +} + + +RoundRectButton.prototype.mouseOut = function() { + 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; + } +} + +RoundRectButton.prototype.mouseOver = function() { + 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; + } +} + +RoundRectButton.prototype.mouseDown = function() { + 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; + } +} + +RoundRectButton.prototype.buttonDisabled = function() { + 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; + } +} + + + +RoundRectButton.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; +} + +RoundRectButton.prototype.getInputEnabled = function() { + return this.button.inputEnabled; +} + +RoundRectButton.prototype.setInputEnabled = function(isEnabled) { + this.buttonStroke.inputEnabled = isEnabled; + this.button.inputEnabled = isEnabled; + + if(isEnabled === true) { this.mouseOut(); + } else { + this.buttonDisabled(); } +} - setEventMethod(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); - } - - makeButtonStroke() { // outter(bigger) round rect sprite - let 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 - ); - } - - makeButtonSprite() { // inner(smaller) round rect sprite - let width = this.setting.width - this.setting.strokeWidthPx * 2; - let height = this.setting.height - this.setting.strokeWidthPx * 2; - let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5); - - let 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 - ); - } - - makeIcon(iconName) { - let icon = game.add.sprite(0, 0, iconName); - icon.width = 80; - icon.height = 80; - - return icon; - } - - makeText(textContent) { - let width = this.setting.width - this.setting.strokeWidthPx * 2; - let height = this.setting.height - this.setting.strokeWidthPx * 2; - - let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) - .setTextBounds(0, 0, width, this.setting.height); - - btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; - // btnText.anchor.setTo(0.5); - - 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; - } - } - - - - move(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; - } - - get inputEnabled() { - return this.button.inputEnabled; - } - - set inputEnabled(isEnabled) { - this.buttonStroke.inputEnabled = isEnabled; - this.button.inputEnabled = isEnabled; - - if(isEnabled === true) { - this.mouseOut(); - } else { - this.buttonDisabled(); - } - } - - set lineSpacing(spacingInPixels) { - this.text.lineSpacing = spacingInPixels; - } +RoundRectButton.prototype.setLineSpacing = function(spacingInPixels) { + this.text.lineSpacing = spacingInPixels; } RoundRectButton.NONE_ICON = ""; diff --git a/src/game/lib/button/typing_app_button.js b/src/game/lib/button/typing_app_button.js index 11836f4..754374b 100644 --- a/src/game/lib/button/typing_app_button.js +++ b/src/game/lib/button/typing_app_button.js @@ -1,98 +1,111 @@ -class TypingAppButton extends RoundRectButton { +TypingAppButton.prototype = Object.create(RoundRectButton.prototype); +TypingAppButton.constructor = TypingAppButton; - constructor(type, x, y, iconName, buttonText, clickEvent) { - let setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 5; +function TypingAppButton(type, x, y, iconName, buttonText, appInfo) { + var setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 5; - switch(type) { - case TypingAppButton.TYPE_PRACTICE_KOREAN: - case TypingAppButton.TYPE_TEST_KOREAN: - setting.setStrokeColor( - 0xffffff, - 0xeeeeff, - 0xccccdd, - 0x333333 - ); - setting.setButtonColor( - 0xeeeeff, - 0xddddee, - 0xccccdd, - 0x666666 - ); - setting.setTextColor( - "#66c", - "#66c", - "#66c", - "#333" - ); - break; - - case TypingAppButton.TYPE_PRACTICE_ENGLISH: - case TypingAppButton.TYPE_TEST_ENGLISH: - setting.setStrokeColor( - 0xffffff, - 0xffeeee, - 0xddcccc, - 0x333333 - ); - setting.setButtonColor( - 0xffeeee, - 0xeedddd, - 0xddcccc, - 0x666666 - ); - setting.setTextColor( - "#a66", - "#a66", - "#a66", - "#333" - ); - break; - } - /* + switch(type) { + case TypingAppButton.TYPE_PRACTICE_KOREAN: + case TypingAppButton.TYPE_TEST_KOREAN: setting.setStrokeColor( - 0xffffff, //0x444488, - 0x6666aa, - 0x6666aa, + 0xffffff, + 0xeeeeff, + 0xccccdd, 0x333333 ); setting.setButtonColor( - 0xaaaadd, - 0xddddff, - 0xddddff, + 0xeeeeff, + 0xddddee, + 0xccccdd, 0x666666 ); setting.setTextColor( - "#844", + "#66c", + "#66c", + "#66c", + "#333" + ); + break; + + case TypingAppButton.TYPE_PRACTICE_ENGLISH: + case TypingAppButton.TYPE_TEST_ENGLISH: + setting.setStrokeColor( + 0xffffff, + 0xffeeee, + 0xddcccc, + 0x333333 + ); + setting.setButtonColor( + 0xffeeee, + 0xeedddd, + 0xddcccc, + 0x666666 + ); + setting.setTextColor( + "#a66", "#a66", "#a66", "#333" ); - */ + break; + } + /* + setting.setStrokeColor( + 0xffffff, //0x444488, + 0x6666aa, + 0x6666aa, + 0x333333 + ); + setting.setButtonColor( + 0xaaaadd, + 0xddddff, + 0xddddff, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + */ - setting.fontStyle = { - font: "22px Arial", - boundsAlignH: "center", // left, center. right - boundsAlignV: "middle", // top, middle, bottom - fill: "#fff" - }; + setting.fontStyle = { + font: "22px Arial", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" + }; - super(setting, iconName, buttonText, clickEvent); + this.appInfo = appInfo; + RoundRectButton.call( + this, setting, + iconName, buttonText, + this.clickEvent + ); - this.text.x = 30; - - if(iconName.length > 0) { - this.icon.x = 40; - this.icon.width = 100; - this.icon.height = 100; - } + this.text.x = 30; + if(iconName.length > 0) { + this.icon.x = 40; + this.icon.width = 100; + this.icon.height = 100; } } +TypingAppButton.prototype.clickEvent = function() { + sessionStorageManager.playingAppID = this.appInfo.AppID; + sessionStorageManager.playingAppName = this.appInfo.AppName; + sessionStorageManager.playingAppKoreanName = this.appInfo.KoreanName; + + location.href = '../../web/client/start.html'; +} + + TypingAppButton.TYPE_PRACTICE_KOREAN = 0; TypingAppButton.TYPE_PRACTICE_ENGLISH = 1; TypingAppButton.TYPE_TEST_KOREAN = 2; diff --git a/src/game/lib/button/typing_tab_button.js b/src/game/lib/button/typing_tab_button.js index 5f94476..e3a5ad9 100644 --- a/src/game/lib/button/typing_tab_button.js +++ b/src/game/lib/button/typing_tab_button.js @@ -1,46 +1,38 @@ -class TypingTabButton extends RoundRectButton { +TypingTabButton.prototype = Object.create(RoundRectButton.prototype); +TypingTabButton.constructor = TypingTabButton; - constructor(x, y, iconName, buttonText, clickEvent) { - let setting = new RoundRectButtonSetting( - x, y, - TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT - ); - setting.fontStyle.boundsAlignH = "center"; // left, center. right - setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom - setting.strokeWidthPx = 5; +function TypingTabButton(x, y, iconName, buttonText, clickEvent) { + var setting = new RoundRectButtonSetting( + x, y, + TypingTabButton.BUTTON_WIDTH, TypingTabButton.BUTTON_HEIGHT + ); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 5; - setting.setStrokeColor( - 0x446688, - 0x6688aa, - 0x6688aa, - 0x333333 - ); - setting.setButtonColor( - 0xaabbdd, - 0xddeeff, - 0xddeeff, - 0x666666 - ); - setting.setTextColor( - "#468", - "#68a", - "#68a", - "#333" - ); - - super(setting, iconName, buttonText, clickEvent); - - - if(iconName.length > 0) { - let icon_fullscreen = game.add.sprite(0, 0, iconName); - icon_fullscreen.width = 80; - icon_fullscreen.height = 80; - this.button.setIcon(icon_fullscreen); - } - } + setting.setStrokeColor( + 0x446688, + 0x6688aa, + 0x6688aa, + 0x333333 + ); + setting.setButtonColor( + 0xaabbdd, + 0xddeeff, + 0xddeeff, + 0x666666 + ); + setting.setTextColor( + "#468", + "#68a", + "#68a", + "#333" + ); + RoundRectButton.call(this, setting, iconName, buttonText, clickEvent); } + TypingTabButton.BUTTON_WIDTH = 490; TypingTabButton.BUTTON_HEIGHT = 80; diff --git a/src/game/login/login.js b/src/game/login/login.js index 3da2228..2587630 100644 --- a/src/game/login/login.js +++ b/src/game/login/login.js @@ -8,15 +8,13 @@ class Login { } create() { - self = this; - sessionStorageManager.clear(); this.game.stage.backgroundColor = '#4d4d4d'; this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" }; // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { sessionStorageManager.clear(); location.href = '../../web/main/index.html'; @@ -25,7 +23,7 @@ class Login { - let textX = this.game.world.centerX - 320; + var textX = this.game.world.centerX - 320; if(sessionStorageManager.maestroID === null) this.makeMaestroNameText(textX, 200); this.makeNameText(textX, 300); @@ -64,7 +62,7 @@ class Login { } makeInputTypeText(x, y, text) { - let inputText = new InputTypeText(x + 420, y); + var inputText = new InputTypeText(x + 420, y); inputText.anchor.set(0.5); inputText.canvasInput.value(''); if(isDebugMode()) { @@ -72,7 +70,7 @@ class Login { } inputText.canvasInput._onkeyup = function() { if(event.keyCode == Phaser.Keyboard.ENTER) { - self.startMenu(); + (function() { this.startMenu(); }).bind(this) } } @@ -80,10 +78,14 @@ class Login { } makeStartButton(x, y) { - let setting = new RoundRectButtonSetting(x, y, 200, 100); + var setting = new RoundRectButtonSetting(x, y, 200, 100); setting.fontStyle.fontWeight = "bold"; - let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startMenu); + var startButton = new RoundRectButton( + setting, + RoundRectButton.NONE_ICON, "시작", + (function() { this.startMenu(); }).bind(this) + ); } makeInfoText(x, y) { @@ -96,17 +98,21 @@ class Login { startMenu() { - let maestroName = self.inputTextMaestroName.canvasInput._value; - sessionStorageManager.playerName = self.inputTextName.canvasInput._value; - let enterCode = self.inputTextEnterCode.canvasInput._value; + var maestroName = this.inputTextMaestroName.canvasInput._value; + sessionStorageManager.playerName = this.inputTextName.canvasInput._value; + var enterCode = this.inputTextEnterCode.canvasInput._value; - let dbConnectManager = new DBConnectManager(); + var dbConnectManager = new DBConnectManager(); dbConnectManager.requestCheckPlayerLogin( maestroName, sessionStorageManager.playerName, enterCode, - self.loginSucceeded, - self.loginFailed + (function(jsonData) { + this.loginSucceeded(jsonData); + }).bind(this), + (function(jsonData) { + this.loginFailed(jsonData); + }).bind(this) ); } @@ -131,7 +137,7 @@ class Login { console.log('login failed, jsonData : ' + JSON.stringify(jsonData)); if(jsonData["error"] !== null) { - self.infoText.text = jsonData["error"]; + this.infoText.text = jsonData["error"]; } } diff --git a/src/game/menu/app_area_bg.js b/src/game/menu/app_area_bg.js index 6705b3f..fa785e4 100644 --- a/src/game/menu/app_area_bg.js +++ b/src/game/menu/app_area_bg.js @@ -1,21 +1,17 @@ -class AppAreaBG { +function AppAreaBG(color, alpha, x, y, width, height) { + game.add.graphics() + .beginFill(color, alpha) + .drawRect(x, y, width, height); +} - constructor(color, alpha, x, y, width, height) { - game.add.graphics() - .beginFill(color, alpha) - .drawRect(x, y, width, height); - } - - printText(text, x, y, size, color, alpha) { - let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" }; - let titleText = game.add.text(x, y, text, fontStyle); - titleText.anchor.set(0.5); - titleText.fontSize = size; - titleText.addColor(color, 0); - titleText.alpha = alpha; - } - -}; +AppAreaBG.prototype.printText = function(text, x, y, size, color, alpha) { + let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" }; + let titleText = game.add.text(x, y, text, fontStyle); + titleText.anchor.set(0.5); + titleText.fontSize = size; + titleText.addColor(color, 0); + titleText.alpha = alpha; +} AppAreaBG.COLOR_MOUSE_APP = 0xffce54; AppAreaBG.COLOR_TYPING_APP = 0x99ccff; diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index d333d71..2e9618d 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -1,18 +1,15 @@ -///////////////////////////// -// MenuApp +var MenuApp = { -class MenuApp { - - preload() { + preload: function() { game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); - } + }, - create() { - self = this; - this.game.stage.backgroundColor = '#4d4d4d'; + create: function() { + game.stage.backgroundColor = '#4d4d4d'; // mouse app area - let mouseBG = new AppAreaBG(AppAreaBG.COLOR_MOUSE_APP, 1, + var mouseBG = new AppAreaBG( + AppAreaBG.COLOR_MOUSE_APP, 1, 0, 60, GAME_SCREEN_SIZE.x, 280 ); @@ -23,7 +20,8 @@ class MenuApp { ); // typing app area - let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1, + var typingBG = new AppAreaBG( + AppAreaBG.COLOR_TYPING_APP, 1, 0, 340, GAME_SCREEN_SIZE.x, 378 ); @@ -35,7 +33,7 @@ class MenuApp { // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { sessionStorageManager.clear(); location.href = '../../web/client/login.html'; @@ -44,9 +42,9 @@ class MenuApp { // bottom ui - let screenBottomUI = new ScreenBottomUI(); + var screenBottomUI = new ScreenBottomUI(); // ScreenBottomUI.printLeftText("게임 진행 정보"); - // let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); + // var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); // ScreenBottomUI.printCenterText(playingAppName); screenBottomUI.printCenterText("메뉴"); screenBottomUI.printRightText(sessionStorageManager.playerName); @@ -55,83 +53,87 @@ class MenuApp { this.loadAppData(); - } + }, - loadAppData() { - let dbConnectManager = new DBConnectManager(); + + loadAppData: function() { + var dbConnectManager = new DBConnectManager(); dbConnectManager.requestMenuAppList( sessionStorageManager.maestroID, - self.loadSucceeded, - self.loadFailed + (function(replyJSON) { + this.loadSucceeded(replyJSON); + }).bind(this), + (function(replyJSON) { + this.loadFailed(replyJSON); + }).bind(this) ); - } + }, - loadSucceeded(replyJSON) { + loadSucceeded: function(replyJSON) { // console.log(replyJSON); - self.makeMouseAppButtons( + this.makeMouseAppButtons( replyJSON.MouseAppList, replyJSON.MouseActiveAppList ); - self.makeTypingButtons( + this.makeTypingButtons( replyJSON.TypingPracticeAppCount, replyJSON.TypingTestAppCount, replyJSON.TypingAppList, replyJSON.TypingActiveAppList ); - } + }, - hasApp(appID, appList) { - for(let i = 0; i < appList.length; i++) { + hasApp: function(appID, appList) { + for(var i = 0; i < appList.length; i++) { if(appList[i].AppID === appID) return true; } return false; - } + }, - makeMouseAppButtons(appList, activeAppList) { + makeMouseAppButtons: function(appList, activeAppList) { // console.log(appList); - let mouseAppCount = Object.keys(appList).length; + var mouseAppCount = Object.keys(appList).length; - for(let i = 0; i < mouseAppCount; i++) { - let posX = self.getButtonPosX(i, mouseAppCount); - let posY = self.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y); + for(var i = 0; i < mouseAppCount; i++) { + var posX = this.getButtonPosX(i, mouseAppCount); + var posY = this.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y); - let app = appList[i]; - let gameAppButton = new GameAppButton( - posX, posY, GameAppButton.TYPE_MOUSE_APP, - RoundRectButton.NONE_ICON, // "icon_fullscreen", - app.KoreanName, - (function() { - sessionStorageManager.playingAppID = app.AppID; - sessionStorageManager.playingAppName = app.AppName; - sessionStorageManager.playingAppKoreanName = app.KoreanName; - location.href = '../../web/client/start.html'; - }) + var app = appList[i]; + var gameAppButton = new GameAppButton( + posX, posY, + GameAppButton.TYPE_MOUSE_APP, + RoundRectButton.NONE_ICON, app.KoreanName, + { + AppID: app.AppID, + AppName: app.AppName, + KoreanName: app.KoreanName + } ); - if(!self.hasApp(app.AppID, activeAppList)) - gameAppButton.inputEnabled = false; + if(!this.hasApp(app.AppID, activeAppList)) + gameAppButton.setInputEnabled(false); } - } + }, - makeTypingButtons(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) { + makeTypingButtons: function(typingPracticeAppCount, typingTestAppCount, appList, activeAppList) { // console.log(typingPracticeAppCount); // console.log(typingTestAppCount); // console.log(appList); - let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false; - let isTypingTestAppExist = typingTestAppCount > 0 ? true : false; + var isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false; + var isTypingTestAppExist = typingTestAppCount > 0 ? true : false; - let typingAppTotalCount = Object.keys(appList).length; - let typingAppIndex = 0; + var typingAppTotalCount = Object.keys(appList).length; + var typingAppIndex = 0; // typing tab buttons - let typingPracticeTabButton = new TypingTabButton( + var typingPracticeTabButton = new TypingTabButton( TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 연습", (function() { @@ -139,9 +141,9 @@ class MenuApp { }) ); if(typingPracticeAppCount === 0) - typingPracticeTabButton.inputEnabled = false; + typingPracticeTabButton.setInputEnabled(false); - let typingTestTabButton = new TypingTabButton( + var typingTestTabButton = new TypingTabButton( TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 시험", (function() { @@ -149,81 +151,79 @@ class MenuApp { }) ); if(typingTestAppCount === 0) - typingTestTabButton.inputEnabled = false; + typingTestTabButton.setInputEnabled(false); // typing app buttons - for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) { + for(var typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) { - let posX = self.getButtonPosX( + var posX = this.getButtonPosX( typingButtonIndex, typingAppTotalCount ); - let posY = self.getButtonPosY( + var posY = this.getButtonPosY( typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y ); - let app = appList[typingAppIndex]; - let isKoreanTypingApp = app.AppID < 32 ? true : false; + var app = appList[typingAppIndex]; + var isKoreanTypingApp = app.AppID < 32 ? true : false; - let gameAppButton = new GameAppButton( + var gameAppButton = new GameAppButton( posX, posY, GameAppButton.TYPE_TYPING_APP, RoundRectButton.NONE_ICON, // "icon_fullscreen", // (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName, app.KoreanName, - (function() { - sessionStorageManager.playingAppID = app.AppID; - sessionStorageManager.playingAppName = app.AppName; - sessionStorageManager.playingAppKoreanName = app.KoreanName; - location.href = '../../web/client/start.html'; - }) + { + AppID: app.AppID, + AppName: app.AppName, + KoreanName: app.KoreanName + } ); - if(!self.hasApp(app.AppID, activeAppList)) - gameAppButton.inputEnabled = false; + if(!this.hasApp(app.AppID, activeAppList)) + gameAppButton.setInputEnabled(false); typingAppIndex++; } - } + }, - getButtonPosX(index, buttonCount) { - let gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); + getButtonPosX: function(index, buttonCount) { + var gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); // console.log("maxColumnNum : " + maxColumnNum); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let columnIndex = index % maxColumnNum; + var columnIndex = index % maxColumnNum; // console.log("columnIndex : " + columnIndex); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let columnCountForThisRow = 0; + var columnCountForThisRow = 0; if(rowIndex < rowCount - 1) columnCountForThisRow = maxColumnNum; else columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex); // console.log("columnCountForThisRow : " + columnCountForThisRow); - let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); + var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); return startX + gap * columnIndex; - } + }, - getButtonPosY(index, buttonCount, startPosY) { - let gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); + getButtonPosY: function(index, buttonCount, startPosY) { + var gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - GameAppButton.MARGIN_VERTICAL) / gap ); // console.log("maxColumnNum : " + maxColumnNum); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let startY = startPosY - ( (gap / 2) * (rowCount - 1) ); + var startY = startPosY - ( (gap / 2) * (rowCount - 1) ); return startY + gap * rowIndex; - } + }, - loadFailed(replyJSON) { + loadFailed: function(replyJSON) { // console.log('login failed, jsonData : ' + JSON.stringify(replyJSON)); } - } \ No newline at end of file diff --git a/src/game/menu/menu_typing_practice.js b/src/game/menu/menu_typing_practice.js index c641a66..635ba45 100644 --- a/src/game/menu/menu_typing_practice.js +++ b/src/game/menu/menu_typing_practice.js @@ -1,27 +1,22 @@ -///////////////////////////// -// MenuTypingPractice - -class MenuTypingPractice { - +var MenuTypingPractice = { preload() { game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png'); Animal.loadResources(); - } + }, create() { - self = this; - this.game.stage.backgroundColor = '#4d4d4d'; + game.stage.backgroundColor = '#4d4d4d'; // typing app area - let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1, + var typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1, 0, 60, GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110 ); // korean app area - // let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1, + // var koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1, // AppAreaBG.MARGIN_X, 60 + AppAreaBG.GAP_Y, // GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270 // ); @@ -32,7 +27,7 @@ class MenuTypingPractice { // ); // english app area - // let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1, + // var englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1, // AppAreaBG.MARGIN_X, 340, // GAME_SCREEN_SIZE.x - AppAreaBG.MARGIN_X * 2, 270 // ); @@ -44,7 +39,7 @@ class MenuTypingPractice { // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { location.href = '../../web/client/menu_app.html'; }); @@ -52,178 +47,179 @@ class MenuTypingPractice { // typing tab buttons - let typingPracticeTabButton = new TypingTabButton( + var typingPracticeTabButton = new TypingTabButton( TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 연습", (function() { location.href = '../../web/client/menu_typing_practice.html'; }) ); - typingPracticeTabButton.inputEnabled = false; + typingPracticeTabButton.setInputEnabled(false); - let typingTestTabButton = new TypingTabButton( + var typingTestTabButton = new TypingTabButton( TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 시험", (function() { location.href = '../../web/client/menu_typing_test.html'; }) ); - // typingTestTabButton.inputEnabled = false; + // typingTestTabButton.setInputEnabled(false); // bottom ui - let screenBottomUI = new ScreenBottomUI(); + var screenBottomUI = new ScreenBottomUI(); // screenBottomUI.printLeftText("게임 진행 정보"); screenBottomUI.printCenterText("메뉴 > 타자 연습"); screenBottomUI.printRightText(sessionStorageManager.playerName); this.makeActiveTypingPracticeAppButtons(); - } + }, - makeActiveTypingPracticeAppButtons() { - let dbConnectManager = new DBConnectManager(); + makeActiveTypingPracticeAppButtons: function() { + var dbConnectManager = new DBConnectManager(); dbConnectManager.requestTypingPracticeAppList( sessionStorageManager.maestroID, sessionStorageManager.playerID, - self.downloadListSucceeded, - self.downloadListFailed + (function(replyJSON) { + this.downloadListSucceeded(replyJSON); + }).bind(this), + (function(replyJSON) { + this.downloadListFailed(replyJSON); + }).bind(this) ); - } + }, - hasApp(appID, appList) { - for(let i = 0; i < appList.length; i++) { + hasApp: function(appID, appList) { + for(var i = 0; i < appList.length; i++) { if(appList[i].AppID === appID) return true; } return false; - } + }, - getBestRecord(jsonList, appID) { - let count = Object.keys(jsonList).length; + getBestRecord: function(jsonList, appID) { + var count = Object.keys(jsonList).length; - for(let i = 0; i < count; i++) { + for(var i = 0; i < count; i++) { if(jsonList[i].AppID === appID) return jsonList[i].BestRecord; } return 0; - } + }, - getIconImage(jsonList, appID) { - let bestRecord = this.getBestRecord(jsonList, appID); + getIconImage: function(jsonList, appID) { + var bestRecord = this.getBestRecord(jsonList, appID); if(bestRecord === 0) return "snail_shadow"; - let animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_PRACTICE); + var animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_PRACTICE); return Animal.SPECIES_DATA[animalLevel].species + Animal.SPRITE_NAMES.icon; - } + }, - downloadListSucceeded(replyJSON) { + downloadListSucceeded: function(replyJSON) { // console.log(replyJSON); - let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP; + var buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP; - let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length; - let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length; + var koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length; + var englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length; - for(let i = 0; i < koreanTypingPracticeAppCount; i++) { - let activeApp = replyJSON.KoreanAppList[i]; + for(var i = 0; i < koreanTypingPracticeAppCount; i++) { + var activeApp = replyJSON.KoreanAppList[i]; - let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount); - let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount, + var posX = this.getButtonPosX(i, koreanTypingPracticeAppCount); + var posY = this.getButtonPosY(i, koreanTypingPracticeAppCount, TypingAppButton.BUTTON_UPPER_POS_Y ); - let typingPracticeButton = new TypingAppButton( + var typingPracticeButton = new TypingAppButton( TypingAppButton.TYPE_PRACTICE_KOREAN, posX, posY, - self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), + this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), activeApp.KoreanName, - (function() { - sessionStorageManager.playingAppID = activeApp.AppID; - sessionStorageManager.playingAppName = activeApp.AppName; - sessionStorageManager.playingAppKoreanName = activeApp.KoreanName; - location.href = '../../web/client/start.html'; - }) + { + AppID: activeApp.AppID, + AppName: activeApp.AppName, + KoreanName: activeApp.KoreanName + } ); - if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList)) - typingPracticeButton.inputEnabled = false; + if(!this.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList)) + typingPracticeButton.setInputEnabled(false); } - for(let i = 0; i < englishTypingPracticeAppCount; i++) { - let activeApp = replyJSON.EnglishAppList[i]; + for(var i = 0; i < englishTypingPracticeAppCount; i++) { + var activeApp = replyJSON.EnglishAppList[i]; - let posX = self.getButtonPosX(i, englishTypingPracticeAppCount); - let posY = self.getButtonPosY(i, englishTypingPracticeAppCount, + var posX = this.getButtonPosX(i, englishTypingPracticeAppCount); + var posY = this.getButtonPosY(i, englishTypingPracticeAppCount, TypingAppButton.BUTTON_LOWER_POS_Y ); - let typingPracticeButton = new TypingAppButton( + var typingPracticeButton = new TypingAppButton( TypingAppButton.TYPE_PRACTICE_ENGLISH, posX, posY, - self.getIconImage(activeApp.AppID), + this.getIconImage(activeApp.AppID), activeApp.KoreanName, - (function() { - sessionStorageManager.playingAppID = activeApp.AppID; - sessionStorageManager.playingAppName = activeApp.AppName; - sessionStorageManager.playingAppKoreanName = activeApp.KoreanName; - location.href = '../../web/client/start.html'; - }) + { + AppID: activeApp.AppID, + AppName: activeApp.AppName, + KoreanName: activeApp.KoreanName + } ); - if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList)) - typingPracticeButton.inputEnabled = false; + if(!this.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList)) + typingPracticeButton.setInputEnabled(false); } - } + }, - getButtonPosX(index, buttonCount) { - let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap ); + getButtonPosX: function(index, buttonCount) { + var gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap ); // console.log("maxColumnNum : " + maxColumnNum); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let columnIndex = index % maxColumnNum; + var columnIndex = index % maxColumnNum; // console.log("columnIndex : " + columnIndex); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let columnCountForThisRow = 0; + var columnCountForThisRow = 0; if(rowIndex < rowCount - 1) columnCountForThisRow = maxColumnNum; else columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex); // console.log("columnCountForThisRow : " + columnCountForThisRow); - let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); + var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); return startX + gap * columnIndex; - } + }, - getButtonPosY(index, buttonCount, startPosY) { - let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP; + getButtonPosY: function(index, buttonCount, startPosY) { + var rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP; - let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap ); + var columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap ); // console.log("maxColumnNum : " + maxColumnNum); // console.log("buttonCount : " + buttonCount); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let startY = startPosY - ( (rowGap / 2) * (rowCount - 1) ); + var startY = startPosY - ( (rowGap / 2) * (rowCount - 1) ); return startY + rowGap * rowIndex; - } + }, - downloadListFailed(replyJSON) { + downloadListFailed: function(replyJSON) { console.log('download app list failed, jsonData : ' + JSON.stringify(replyJSON)); } - } \ No newline at end of file diff --git a/src/game/menu/menu_typing_test.js b/src/game/menu/menu_typing_test.js index 5248dc4..41b56fb 100644 --- a/src/game/menu/menu_typing_test.js +++ b/src/game/menu/menu_typing_test.js @@ -1,27 +1,22 @@ -///////////////////////////// -// MenuTypingTest - -class MenuTypingTest { - +var MenuTypingTest = { preload() { game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); game.load.image('space_invaders', '../../../resources/image/icon/space_invaders.png'); Animal.loadResources(); - } + }, create() { - self = this; - this.game.stage.backgroundColor = '#4d4d4d'; + game.stage.backgroundColor = '#4d4d4d'; // typing app area - let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1, + var typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1, 0, 60, GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110 ); // korean app area - // let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1, + // var koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1, // 0, 60 + AppAreaBG.GAP_Y, // GAME_SCREEN_SIZE.x, 270 // ); @@ -32,7 +27,7 @@ class MenuTypingTest { // ); // english app area - // let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1, + // var englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1, // 0, 340, // GAME_SCREEN_SIZE.x, 270 // ); @@ -44,7 +39,7 @@ class MenuTypingTest { // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { location.href = '../../web/client/menu_app.html'; }); @@ -52,177 +47,181 @@ class MenuTypingTest { // typing tab buttons - let typingPracticeTabButton = new TypingTabButton( + var typingPracticeTabButton = new TypingTabButton( TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 연습", (function() { location.href = '../../web/client/menu_typing_practice.html'; }) ); - // typingPracticeTabButton.inputEnabled = false; + // typingPracticeTabButton.setInputEnabled(false); - let typingTestTabButton = new TypingTabButton( + var typingTestTabButton = new TypingTabButton( TypingTabButton.TEST_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y, "", "타자 시험", (function() { location.href = '../../web/client/menu_typing_test.html'; }) ); - typingTestTabButton.inputEnabled = false; + typingTestTabButton.setInputEnabled(false); this.makeActiveTypingTestAppButtons(); // bottom ui - let screenBottomUI = new ScreenBottomUI(); + var screenBottomUI = new ScreenBottomUI(); // screenBottomUI.printLeftText("게임 진행 정보"); screenBottomUI.printCenterText("메뉴 > 타자 시험"); screenBottomUI.printRightText(sessionStorageManager.playerName); - } + }, - makeActiveTypingTestAppButtons() { - let dbConnectManager = new DBConnectManager(); + makeActiveTypingTestAppButtons: function() { + var dbConnectManager = new DBConnectManager(); dbConnectManager.requestTypingTestAppList( sessionStorageManager.maestroID, sessionStorageManager.playerID, - self.downloadListSucceeded, - self.downloadListFailed + // self.downloadListSucceeded, + // self.downloadListFailed + (function(replyJSON) { + this.downloadListSucceeded(replyJSON); + }).bind(this), + (function(replyJSON) { + this.downloadListFailed(replyJSON); + }).bind(this) ); - } + }, - hasApp(appID, appList) { - for(let i = 0; i < appList.length; i++) { + hasApp: function(appID, appList) { + for(var i = 0; i < appList.length; i++) { if(appList[i].AppID === appID) return true; } return false; - } + }, - getBestRecord(jsonList, appID) { - let count = Object.keys(jsonList).length; + getBestRecord: function(jsonList, appID) { + var count = Object.keys(jsonList).length; - for(let i = 0; i < count; i++) { + for(var i = 0; i < count; i++) { if(jsonList[i].AppID === appID) return jsonList[i].BestRecord; } return 0; - } + }, - getIconImage(jsonList, appID) { - let bestRecord = this.getBestRecord(jsonList, appID); + getIconImage: function(jsonList, appID) { + var bestRecord = this.getBestRecord(jsonList, appID); if(bestRecord === 0) return "snail_shadow"; - let animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_TEST); + var animalLevel = Animal.animalLevelIDByRecord(bestRecord, Animal.TYPE_TEST); return Animal.SPECIES_DATA[animalLevel].species + Animal.SPRITE_NAMES.icon; - } + }, - downloadListSucceeded(replyJSON) { + downloadListSucceeded: function(replyJSON) { // console.log(replyJSON); - let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP; + var buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP; - let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length; - let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length; + var koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length; + var englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length; - for(let i = 0; i < koreanTypingPracticeAppCount; i++) { - let activeApp = replyJSON.KoreanAppList[i]; + for(var i = 0; i < koreanTypingPracticeAppCount; i++) { + var activeApp = replyJSON.KoreanAppList[i]; - let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount); - let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount, + var posX = this.getButtonPosX(i, koreanTypingPracticeAppCount); + var posY = this.getButtonPosY(i, koreanTypingPracticeAppCount, TypingAppButton.BUTTON_UPPER_POS_Y ); - let typingTestButton = new TypingAppButton( + var typingTestButton = new TypingAppButton( TypingAppButton.TYPE_TEST_KOREAN, posX, posY, - self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), + this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), activeApp.KoreanName, - (function() { - sessionStorageManager.playingAppID = activeApp.AppID; - sessionStorageManager.playingAppName = activeApp.AppName; - sessionStorageManager.playingAppKoreanName = activeApp.KoreanName; - location.href = '../../web/client/start.html'; - }) + { + AppID: activeApp.AppID, + AppName: activeApp.AppName, + KoreanName: activeApp.KoreanName + } ); - if(!self.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList)) - typingTestButton.inputEnabled = false; + if(!this.hasApp(activeApp.AppID, replyJSON.KoreanActiveAppList)) + typingTestButton.setInputEnabled(false); } - for(let i = 0; i < englishTypingPracticeAppCount; i++) { - let activeApp = replyJSON.EnglishAppList[i]; + for(var i = 0; i < englishTypingPracticeAppCount; i++) { + var activeApp = replyJSON.EnglishAppList[i]; - let posX = self.getButtonPosX(i, englishTypingPracticeAppCount); - let posY = self.getButtonPosY(i, englishTypingPracticeAppCount, + var posX = this.getButtonPosX(i, englishTypingPracticeAppCount); + var posY = this.getButtonPosY(i, englishTypingPracticeAppCount, TypingAppButton.BUTTON_LOWER_POS_Y ); - let typingTestButton = new TypingAppButton( + var typingTestButton = new TypingAppButton( TypingAppButton.TYPE_TEST_ENGLISH, posX, posY, - self.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), + this.getIconImage(replyJSON.KoreanHighScoreList, activeApp.AppID), activeApp.KoreanName, - (function() { - sessionStorageManager.playingAppID = activeApp.AppID; - sessionStorageManager.playingAppName = activeApp.AppName; - sessionStorageManager.playingAppKoreanName = activeApp.KoreanName; - location.href = '../../web/client/start.html'; - }) + { + AppID: activeApp.AppID, + AppName: activeApp.AppName, + KoreanName: activeApp.KoreanName + } ); - if(!self.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList)) - typingTestButton.inputEnabled = false; + if(!this.hasApp(activeApp.AppID, replyJSON.EnglishActiveAppList)) + typingTestButton.setInputEnabled(false); } - } + }, - getButtonPosX(index, buttonCount) { - let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap ); + getButtonPosX: function(index, buttonCount) { + var gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap ); // console.log("maxColumnNum : " + maxColumnNum); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let columnIndex = index % maxColumnNum; + var columnIndex = index % maxColumnNum; // console.log("columnIndex : " + columnIndex); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let columnCountForThisRow = 0; + var columnCountForThisRow = 0; if(rowIndex < rowCount - 1) columnCountForThisRow = maxColumnNum; else columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex); // console.log("columnCountForThisRow : " + columnCountForThisRow); - let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); + var startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) ); return startX + gap * columnIndex; - } + }, - getButtonPosY(index, buttonCount, startPosY) { - let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP; + getButtonPosY: function(index, buttonCount, startPosY) { + var rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP; - let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; - let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap ); + var columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + var maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap ); // console.log("maxColumnNum : " + maxColumnNum); // console.log("buttonCount : " + buttonCount); - let rowCount = Math.ceil(buttonCount / maxColumnNum); + var rowCount = Math.ceil(buttonCount / maxColumnNum); // console.log("rowCount : " + rowCount); - let rowIndex = Math.floor(index / maxColumnNum); + var rowIndex = Math.floor(index / maxColumnNum); // console.log("rowIndex : " + rowIndex); - let startY = startPosY - ( (rowGap / 2) * (rowCount - 1) ); + var startY = startPosY - ( (rowGap / 2) * (rowCount - 1) ); return startY + rowGap * rowIndex; - } + }, - downloadListFailed(replyJSON) { + downloadListFailed: function(replyJSON) { console.log('download app list failed, jsonData : ' + JSON.stringify(replyJSON)); } diff --git a/src/game/menu/welcome_player_text.js b/src/game/menu/welcome_player_text.js index fe4f1ac..f3113a7 100644 --- a/src/game/menu/welcome_player_text.js +++ b/src/game/menu/welcome_player_text.js @@ -1,30 +1,34 @@ -class WelcomePlayerText extends Phaser.Text { +WelcomePlayerText.prototype = Object.create(Phaser.Text.prototype); +WelcomePlayerText.constructor = WelcomePlayerText; - constructor(playerName) { - super(game, game.world.width / 2, game.world.height / 2 - 40, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT); +function WelcomePlayerText(playerName) { + Phaser.Text.call( + this, game, + game.world.width / 2, game.world.height / 2 - 40, + "어서오세요, " + playerName + "님", + WelcomePlayerText.DEFAULT_TEXT_FONT + ); - this.anchor.set(0.5); - this.inputEnabled = false; + this.anchor.set(0.5); + this.inputEnabled = false; - var grd = this.context.createLinearGradient(0, 0, 0, this.height); - grd.addColorStop(0, '#8ED6FF'); - grd.addColorStop(1, '#4C6CB3'); - this.fill = grd; - this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - this.stroke = '#000'; - this.strokeThickness = 5; + var grd = this.context.createLinearGradient(0, 0, 0, this.height); + grd.addColorStop(0, '#8ED6FF'); + grd.addColorStop(1, '#4C6CB3'); + this.fill = grd; + this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.stroke = '#000'; + this.strokeThickness = 5; - this.alpha = 1; - let tweenAlpha = game.add.tween(this); - tweenAlpha.to( { alpha: 0 }, 2000, Phaser.Easing.Back.In, true); + this.alpha = 1; + let tweenAlpha = game.add.tween(this); + tweenAlpha.to( { alpha: 0 }, 2000, Phaser.Easing.Back.In, true); - game.add.existing(this); - }; - - destroySelf() { - this.destroy(); - } + game.add.existing(this); +} +WelcomePlayerText.prototype.destroySelf = function() { + this.destroy(); } WelcomePlayerText.DEFAULT_TEXT_FONT = { @@ -32,4 +36,4 @@ WelcomePlayerText.DEFAULT_TEXT_FONT = { boundsAlignH: "center", // left, center. right boundsAlignV: "middle", // top, middle, bottom fill: "#fff" -}; \ No newline at end of file +} \ No newline at end of file diff --git a/src/game/mouse/space_invaders/game.js b/src/game/mouse/space_invaders/game.js index 93d5470..327fd99 100644 --- a/src/game/mouse/space_invaders/game.js +++ b/src/game/mouse/space_invaders/game.js @@ -4,21 +4,19 @@ class Game { create() { - let self = this; - this.game.stage.backgroundColor = "#000000"; // '#4d4d4d'; sessionStorageManager.isNewBestRecrd = false; // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { sessionStorageManager.resetPlayingAppData(); location.href = '../../web/client/menu_app.html'; }); screenTopUI.makeFullScreenButton(); - let scoreBoard = new ScoreBoard(); + var scoreBoard = new ScoreBoard(); scoreManager.addOnChangeScoreListener( function(score) { sessionStorageManager.record = score; scoreBoard.printScore(NumberUtil.numberWithCommas(score)); @@ -30,19 +28,19 @@ class Game { screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord); }); - let heartGauge = new HeartGauge(heartManager); + var heartGauge = new HeartGauge(heartManager); heartManager.addOnChangeGameOverListener( - function() { self.gameOver(); } + (function() { this.gameOver(); }).bind(this) ); heartGauge.start(); // game stage - let stars = game.add.group(); + var stars = game.add.group(); - for (let i = 0; i < 128; i++) + for (var i = 0; i < 128; i++) { - let randomY = game.rnd.integerInRange(60, GAME_SCREEN_SIZE.y - 80); + var randomY = game.rnd.integerInRange(60, GAME_SCREEN_SIZE.y - 80); stars.create(game.world.randomX, randomY, 'star'); } @@ -55,13 +53,13 @@ class Game { // contents this.aliens = []; - for(let i = 0; i < 10; i++) { - let alien = new Alien(150 + 80 * i, 150, - (function() { self.activateNextAlien(); }), // onGoOnstage + for(var i = 0; i < 10; i++) { + var alien = new Alien(150 + 80 * i, 150, + (function() { this.activateNextAlien(); }).bind(this), // onGoOnstage (function(sprite) { - scoreManager.plusScore(self.getScore()); - let scoreText = new ScoreText(sprite.x, sprite.y, self.getScore()); - }), // this.onAlienFired, + scoreManager.plusScore(this.getScore()); + var scoreText = new ScoreText(sprite.x, sprite.y, this.getScore()); + }).bind(this), // this.onAlienFired, this.onAlienEscaped ); alien.goWaitingRoom(); @@ -73,7 +71,7 @@ class Game { // bottom ui - let screenBottomUI = new ScreenBottomUI(); + var screenBottomUI = new ScreenBottomUI(); screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord); screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName); screenBottomUI.printRightText(sessionStorageManager.playerName); @@ -109,7 +107,7 @@ class Game { this.countDownText.text = this.countDownNumber.toString(); this.countDownText.alpha = 1; - let countDownTween = game.add.tween(this.countDownText); + var countDownTween = game.add.tween(this.countDownText); countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true); countDownTween.onComplete.add(this.tweenCountDown, this); @@ -125,7 +123,7 @@ class Game { gameOver() { this.alienTimer.stop(); - let gameOverText = new GameOverText(); + var gameOverText = new GameOverText(); game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this); } diff --git a/src/game/start/start.js b/src/game/start/start.js index 4e78cb8..3520c40 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -16,7 +16,7 @@ class Start { // top ui - let screenTopUI = new ScreenTopUI(); + var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( function() { if(isTypingPracticeStage()) location.href = '../../web/client/menu_typing_practice.html'; @@ -45,7 +45,7 @@ class Start { // bottom ui - let screenBottomUI = new ScreenBottomUI(); + var screenBottomUI = new ScreenBottomUI(); screenBottomUI.printLeftText("오늘의 최고 기록 : "); screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName); screenBottomUI.printRightText(sessionStorageManager.playerName); @@ -54,38 +54,34 @@ class Start { sessionStorageManager.maestroID, sessionStorageManager.playerID, sessionStorageManager.playingAppID, - function(replyJSON) { + (function(replyJSON) { sessionStorageManager.bestRecord = Number(replyJSON["BestRecord"]); screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord); - }, - function(replyJSON) { // no data + }).bind(this), + (function(replyJSON) { // no data sessionStorageManager.bestRecord = 0; screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord); - } + }).bind(this) ); } loadHowToPlay(appID) { - let self = this; - this.dbConnectManager.requestHowToPlay( sessionStorageManager.playingAppID, // space_invaders app ID - function(jsonData) { - let howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n"); - self.howToPlay.printHowToPlay(howToPlayText); - }, - function(jsonData) { - self.howToPlay.printHowToPlay("No data"); - } + (function(jsonData) { + var howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n"); + this.howToPlay.printHowToPlay(howToPlayText); + }).bind(this), + (function(jsonData) { + this.howToPlay.printHowToPlay("No data"); + }).bind(this) ); } loadChart() { - let self = this; - - let today = new Date(); - let date = DateUtil.getYYYYMMDD(today); + var today = new Date(); + var date = DateUtil.getYYYYMMDD(today); this.dbConnectManager.requestPlayerHistory( sessionStorageManager.maestroID, date, @@ -95,19 +91,19 @@ class Start { return; } - let underValue = historyRecordManager.underValueForGraph(); - let upperValue = historyRecordManager.upperValueForGraph(); + var underValue = historyRecordManager.underValueForGraph(); + var upperValue = historyRecordManager.upperValueForGraph(); - let minValue = underValue - (upperValue - underValue) / 10; - let maxValue = upperValue;// + (upperValue - underValue) / 10; + var minValue = underValue - (upperValue - underValue) / 10; + var maxValue = upperValue;// + (upperValue - underValue) / 10; - let countRecord = historyRecordManager.count; - for(let i = 0; i < Chart.CHART_COUNT; i++) { + var countRecord = historyRecordManager.count; + for(var i = 0; i < Chart.CHART_COUNT; i++) { // if(i > 6) // break; - let historyRecord = historyRecordManager.getAt(i); - self.chart.drawRecordGraph( + var historyRecord = historyRecordManager.getAt(i); + this.chart.drawRecordGraph( i, historyRecord === undefined ? "-" : historyRecord.date, historyRecord === undefined ? "" : historyRecord.bestRecord, @@ -115,20 +111,20 @@ class Start { ); } - self.chart.printChartBaseLine(); + this.chart.printChartBaseLine(); }) ); } calcDate(daysBefore) { - let date = new Date(); + var date = new Date(); date.setDate(date.getDate() - daysBefore); return date; } printSampleChart() { - let minValue = 0; - let maxValue = 1000; + var minValue = 0; + var maxValue = 1000; this.chart.drawRecordGraph(0, this.calcDate(1), 980, minValue, maxValue); this.chart.drawRecordGraph(1, this.calcDate(2), 760, minValue, maxValue); this.chart.drawRecordGraph(2, this.calcDate(5), 740, minValue, maxValue); @@ -141,14 +137,14 @@ class Start { } makeStartButton() { - let setting = new RoundRectButtonSetting(game.world.centerX, game.world.centerY, 200, 100); + var setting = new RoundRectButtonSetting(game.world.centerX, game.world.centerY, 200, 100); setting.fontStyle.fontWeight = "bold"; - let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage); + var startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage); } makeRankingButton() { - let setting = new RoundRectButtonSetting(game.world.centerX + 160, game.world.centerY, 60, 60); + var setting = new RoundRectButtonSetting(game.world.centerX + 160, game.world.centerY, 60, 60); setting.fontStyle = { font: "18px Arial", boundsAlignH: "center", // left, center. right @@ -156,7 +152,7 @@ class Start { fill: "#fff" }; - let rankingButton = new RoundRectButton( + var rankingButton = new RoundRectButton( setting, RoundRectButton.NONE_ICON, "순위\n보기", (function() { location.href = '../../web/client/ranking.html';