Fix: RoundRectSetting.x, y

src/game/lib/app_button.js

@@ -1,76 +1,8 @@
 class AppButton {
 
-	constructor(x, y, setting, iconName, buttonText, clickEvent) {
+	constructor(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"
-			);
-		}
-		*/
-
 		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;

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);
 	}
 
 }

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;

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(setting, iconName, 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);
 	}
 
 }

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) {

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(setting, iconName, 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);
@@ -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);
 	}
 
 }

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();

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	= "";

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');

src/web/client/typing_practice.html

@@ -49,8 +49,9 @@
 		<script src="../../game/typing/word_list/english_word.js"></script>
 
 		<!-- Test typing : source files -->
-		<script src="../../game/typing/practice/content_progress.js"></script>
 		<script src="../../game/typing/practice/define_variables.js"></script>
+		<script src="../../game/typing/practice/content_progress.js"></script>
+		<script src="../../game/typing/practice/key_button.js"></script>
 		<script src="../../game/typing/practice/loading.js"></script>
 		<script src="../../game/typing/practice/game.js"></script>
 		<script src="../../game/typing/practice/main.js"></script>