diff --git a/resources/image/ui/hand_left.png b/resources/image/ui/hand_left.png
new file mode 100644
index 0000000..5e0165e
Binary files /dev/null and b/resources/image/ui/hand_left.png differ
diff --git a/resources/image/ui/hand_right.png b/resources/image/ui/hand_right.png
new file mode 100644
index 0000000..2ba1716
Binary files /dev/null and b/resources/image/ui/hand_right.png differ
diff --git a/src/game/lib/app_button.js b/src/game/lib/app_button.js
index 19991e1..1a53262 100644
--- a/src/game/lib/app_button.js
+++ b/src/game/lib/app_button.js
@@ -1,76 +1,8 @@
class AppButton {
- constructor(x, y, setting, iconName, buttonText, clickEvent) {
- /*
- let setting = new RoundRectButtonSetting(150, 150);
- setting.fontStyle.boundsAlignH = "center"; // left, center. right
- setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
- setting.strokeWidthPx = 5;
-
- if(type === AppButton.TYPE_MOUSE) {
- setting.setStrokeColor(
- 0xaa6666,
- 0x884444,
- 0x884444,
- 0x333333
- );
- setting.setButtonColor(
- 0xffdddd,
- 0xddaaaa,
- 0xddaaaa,
- 0x666666
- );
- setting.setTextColor(
- "#a66",
- "#844",
- "#844",
- "#333"
- );
- } else { // TYPE_TYPING
- setting.setStrokeColor(
- 0x444488,
- 0x6666aa,
- 0x6666aa,
- 0x333333
- );
- setting.setButtonColor(
- 0xaaaadd,
- 0xddddff,
- 0xddddff,
- 0x666666
- );
- setting.setTextColor(
- "#844",
- "#a66",
- "#a66",
- "#333"
- );
- }
- */
-
+ constructor(setting, iconName, buttonText, clickEvent) {
this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
- this.move(x, y);
-
- // 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);
- // }
-
- // if(buttonText.length > 0) {
- // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
- // let icon_text = game.add.text(0, 0, buttonText, style);
- // icon_text.setTextBounds(x - 50, y - 50, 100, 100);
- // icon_text.stroke = "#333";
- // icon_text.strokeThickness = 5;
- // }
}
-
- move(x, y) {
- this.button.move(x, y);
- }
-
}
AppButton.TYPE_MOUSE_APP = 0;
diff --git a/src/game/lib/back_button.js b/src/game/lib/back_button.js
index 7a72570..f5c7a6f 100644
--- a/src/game/lib/back_button.js
+++ b/src/game/lib/back_button.js
@@ -1,7 +1,7 @@
class BackButton {
constructor(clickEvent) {
- let setting = new RoundRectButtonSetting(50, 50);
+ 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;
@@ -28,7 +28,6 @@ class BackButton {
setting,
RoundRectButton.NONE_ICON, "<", clickEvent
);
- button.move(30, 30);
}
}
\ No newline at end of file
diff --git a/src/game/lib/fullscreen_button.js b/src/game/lib/fullscreen_button.js
index cf72739..108c7f8 100644
--- a/src/game/lib/fullscreen_button.js
+++ b/src/game/lib/fullscreen_button.js
@@ -5,7 +5,7 @@ class FullscreenButton {
this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
- let setting = new RoundRectButtonSetting(50, 50);
+ let setting = new RoundRectButtonSetting(this.game.world.width - 30, 30, 50, 50);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 3;
@@ -32,7 +32,6 @@ class FullscreenButton {
setting, RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
() => this.clickEvent()
);
- button.move(this.game.world.width - 30, 30);
let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
icon_fullscreen.width = 20;
diff --git a/src/game/lib/game_app_button.js b/src/game/lib/game_app_button.js
index 6384e1b..308a6ce 100644
--- a/src/game/lib/game_app_button.js
+++ b/src/game/lib/game_app_button.js
@@ -1,7 +1,7 @@
class GameAppButton extends AppButton {
constructor(x, y, type, iconName, buttonText, clickEvent) {
- let setting = new RoundRectButtonSetting(GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT);
+ let 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;
@@ -47,28 +47,7 @@ class GameAppButton extends AppButton {
);
}
- // this.button = new RoundRectButton(setting, buttonText, clickEvent);
- super(x, y, setting, iconName, buttonText, clickEvent);
- this.move(x, y);
-
- // 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);
- // }
-
- // if(appText.length > 0) {
- // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
- // let icon_text = game.add.text(0, 0, appText, style);
- // icon_text.setTextBounds(x - 50, y - 50, 100, 100);
- // icon_text.stroke = "#333";
- // icon_text.strokeThickness = 5;
- // }
- }
-
- move(x, y) {
- this.button.move(x, y);
+ super(setting, iconName, buttonText, clickEvent);
}
}
diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js
index 137dddc..b435a95 100644
--- a/src/game/lib/round_rect_button.js
+++ b/src/game/lib/round_rect_button.js
@@ -1,6 +1,8 @@
class RoundRectButtonSetting {
- constructor(width, height, roundAmount) {
+ constructor(x, y, width, height, roundAmount) {
+ this.x = x;
+ this.y = y;
this.width = width;
this.height = height;
this.roundAmount = 0;
@@ -120,20 +122,24 @@ class RoundRectButton {
target.events.onInputUp.add(function() { this.mouseOver(); }, this);
}
- makeButtonStroke() {
+ 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(0, 0, btnTexture);
+ return game.add.sprite(
+ this.setting.x - this.setting.width / 2,
+ this.setting.y - this.setting.height / 2,
+ btnTexture
+ );
}
- makeButtonSprite() {
+ 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);
+ let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
let btnTexture = new Phaser.Graphics()
.beginFill(0xffffff)
@@ -141,7 +147,12 @@ class RoundRectButton {
.endFill()
.generateTexture();
- return game.add.sprite(0, 0, btnTexture);
+ // 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) {
diff --git a/src/game/lib/typing_practice_button.js b/src/game/lib/typing_practice_button.js
index 9f27573..ff78864 100644
--- a/src/game/lib/typing_practice_button.js
+++ b/src/game/lib/typing_practice_button.js
@@ -1,7 +1,7 @@
class TypingPracticeButton extends AppButton {
constructor(x, y, type, iconName, buttonText, clickEvent) {
- let setting = new RoundRectButtonSetting(TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
+ let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
@@ -46,9 +46,7 @@ class TypingPracticeButton extends AppButton {
);
}
- // this.button = new RoundRectButton(setting, buttonText, clickEvent);
- super(x, y, setting, iconName, buttonText, clickEvent);
- this.move(x, y);
+ super(setting, iconName, buttonText, clickEvent);
if(iconName.length > 0) {
let icon_fullscreen = game.add.sprite(0, 0, iconName);
@@ -56,18 +54,6 @@ class TypingPracticeButton extends AppButton {
icon_fullscreen.height = 80;
this.button.setIcon(icon_fullscreen);
}
-
- // if(appText.length > 0) {
- // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
- // let icon_text = game.add.text(0, 0, appText, style);
- // icon_text.setTextBounds(x - 50, y - 50, 100, 100);
- // icon_text.stroke = "#333";
- // icon_text.strokeThickness = 5;
- // }
- }
-
- move(x, y) {
- this.button.move(x, y);
}
}
diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js
index 90e0b48..c1d91d0 100644
--- a/src/game/typing/practice/game.js
+++ b/src/game/typing/practice/game.js
@@ -50,6 +50,21 @@ class TypingPractice {
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.addColor(textPreviewColor[0], 0);
+
+ this.hand_left = game.add.image(300, 600, "hand_left");
+ this.hand_left.scale.set(2);
+ this.hand_left.anchor.set(0.5);
+
+ this.hand_right = game.add.image(700, 600, "hand_right");
+ this.hand_right.scale.set(2);
+ this.hand_right.anchor.set(0.5);
+
+ let mask = game.add.graphics();
+ mask.beginFill(0xffffff);
+ mask.drawRect(100, 300, 1028, 400);
+ this.hand_left.mask = mask;
+ this.hand_right.mask = mask;
+
// bottom
let screenBottom = new ScreenBottom();
screenBottom.makeBottomLine();
diff --git a/src/game/typing/practice/key_button.js b/src/game/typing/practice/key_button.js
new file mode 100644
index 0000000..992522e
--- /dev/null
+++ b/src/game/typing/practice/key_button.js
@@ -0,0 +1,83 @@
+class KeyButton {
+
+
+ // constructor(x, y, )
+ constructor(x, y, setting, iconName, buttonText, clickEvent) {
+ /*
+ let setting = new RoundRectButtonSetting(150, 150);
+ setting.fontStyle.boundsAlignH = "center"; // left, center. right
+ setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
+ setting.strokeWidthPx = 5;
+
+ if(type === KeyButton.TYPE_MOUSE) {
+ setting.setStrokeColor(
+ 0xaa6666,
+ 0x884444,
+ 0x884444,
+ 0x333333
+ );
+ setting.setButtonColor(
+ 0xffdddd,
+ 0xddaaaa,
+ 0xddaaaa,
+ 0x666666
+ );
+ setting.setTextColor(
+ "#a66",
+ "#844",
+ "#844",
+ "#333"
+ );
+ } else { // TYPE_TYPING
+ setting.setStrokeColor(
+ 0x444488,
+ 0x6666aa,
+ 0x6666aa,
+ 0x333333
+ );
+ setting.setButtonColor(
+ 0xaaaadd,
+ 0xddddff,
+ 0xddddff,
+ 0x666666
+ );
+ setting.setTextColor(
+ "#844",
+ "#a66",
+ "#a66",
+ "#333"
+ );
+ }
+ */
+
+ this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
+ this.move(x, y);
+
+ // 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);
+ // }
+
+ // if(buttonText.length > 0) {
+ // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+ // let icon_text = game.add.text(0, 0, buttonText, style);
+ // icon_text.setTextBounds(x - 50, y - 50, 100, 100);
+ // icon_text.stroke = "#333";
+ // icon_text.strokeThickness = 5;
+ // }
+ }
+
+ move(x, y) {
+ this.button.move(x, y);
+ }
+
+}
+
+KeyButton.TYPE_MOUSE_APP = 0;
+KeyButton.TYPE_TYPING_PRACTICE = 1;
+KeyButton.TYPE_TYPING_APP = 2;
+
+KeyButton.NONE_ICON = "";
+KeyButton.NONE_BUTTON_TEXT = "";
\ No newline at end of file
diff --git a/src/game/typing/practice/loading.js b/src/game/typing/practice/loading.js
index 16ae580..fe21c13 100644
--- a/src/game/typing/practice/loading.js
+++ b/src/game/typing/practice/loading.js
@@ -34,6 +34,8 @@ class Loading {
startLoading() {
this.game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+ this.game.load.image('hand_left', '../../../resources/image/ui/hand_left.png');
+ this.game.load.image('hand_right', '../../../resources/image/ui/hand_right.png');
// this.game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');
diff --git a/src/web/client/typing_practice.html b/src/web/client/typing_practice.html
index 5cfc9df..7be7554 100644
--- a/src/web/client/typing_practice.html
+++ b/src/web/client/typing_practice.html
@@ -49,8 +49,9 @@
-
+
+