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

Fix: ES6 -> ES5 (imcompleted)

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