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/lib/button/back_button.js
+30 -26
View File
@@ -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);
}
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() {
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);
}
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) {
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;
src/game/lib/button/round_rect_button.js
+199 -203
View File
@@ -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 = "";
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) {
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;
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) {
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;