Add: BackButton

src/game/lib/back_button.js

@@ -0,0 +1,28 @@
+class BackButton {
+
+	constructor(clickEvent) {
+		let setting = new RoundRectButtonSetting(50, 50);
+		setting.setStrokeColor(
+			0x884444,
+			0xaa6666,
+			0xaa6666,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xddaaaa,
+			0xffdddd,
+			0xffdddd,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		this.button = new RoundRectButton(setting, "<", clickEvent);
+		this.button.move(30, 30);
+	}
+
+}

src/game/lib/round_rect_button.js

@@ -10,14 +10,45 @@ class RoundRectButtonSetting {
 		} else {
 			this.roundAmount = roundAmount;
 		}
+		this.strokeWidth = 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.out = out;
+		this.strokeColors.over = over;
+		this.strokeColors.odownut = down;
+		this.strokeColors.disabled = disabled;
+	}
+
+	setButtonColor(out, over, down, disabled) {
+		this.buttonColors.out = out;
+		this.buttonColors.over = over;
+		this.buttonColors.odownut = down;
+		this.buttonColors.disabled = disabled;
+	}
+
+	setTextColor(out, over, down, disabled) {
+		this.textColors.out = out;
+		this.textColors.over = over;
+		this.textColors.odownut = down;
+		this.textColors.disabled = disabled;
+	}
+
 }
 
+RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
+	out: 0x666666,
+	over: 0x333333,
+	down: 0x333333,
+	disabled: 0x666666
+};
+
 RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
 	out: 0xffffff,
 	over: 0xddffdd,
@@ -34,11 +65,13 @@ RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
 
 RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
 	font: "30px Arial",
-	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
 	fill: "#fff"
 };
 
-RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10;  // pixels
+RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
+RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
 
 
 
@@ -47,54 +80,52 @@ class RoundRectButton {
 		this.setting = roundRectSetting;
 		this.clickEvent = clickEvent;
 
-		this.button = this.makeSprite();
+		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();
 		this.button.addChild(this.text);
-		this.button.anchor.setTo(0.5, 0.5);
+		// this.button.anchor.setTo(0.5, 0.5);
-
+		this.button.inputEnabled = true;
-		this.inputEnabled = true;
+		this.setEventMethod(this.button);
-		this.setEventMethod();
 
 		this.mouseOut();
 	}
 
-	setEventMethod() {
+	setEventMethod(target) {
-		this.button.events.onInputOver.add(function() {
+		target.events.onInputOver.add(function() { this.mouseOver(); }, this);
-			this.mouseOver();
+		target.events.onInputOut.add(function() { this.mouseOut(); }, this);
-		}, this);
+		target.events.onInputDown.add(function() {
-
-		this.button.events.onInputOut.add(function() {
-			this.mouseOut();
-		}, this);
-
-		this.button.events.onInputDown.add(function() {
 			this.mouseDown();
 
 			if(this.clickEvent) {
 				this.clickEvent();
 			}
 		}, this);
-
+		target.events.onInputUp.add(function() { this.mouseOver(); }, this);
-		this.button.events.onInputUp.add(function() {
-			this.mouseOver();
-		}, this);
 	}
 
-	makeSprite() {
+	makeButtonStroke() {
-		const STROKE_WIDTH_PX		= 5;
-
-		let width = this.setting.width - STROKE_WIDTH_PX * 2;
-		let height = this.setting.height - STROKE_WIDTH_PX * 2;
-		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
-		console.log("this.setting.roundAmount " + this.setting.roundAmount);
-		console.log("innerRoundAmount " + innerRoundAmount);
 		let btnTexture = new Phaser.Graphics()
-			.beginFill(0xaaaaaa)
+			.beginFill(0xffffff)
 			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
 			.endFill()
+			.generateTexture();
+
+		return game.add.sprite(0, 0, btnTexture);
+	}
+
+	makeButtonSprite() {
+		let width = this.setting.width - this.setting.strokeWidth * 2;
+		let height = this.setting.height - this.setting.strokeWidth * 2;
+		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
+		let btnTexture = new Phaser.Graphics()
 			.beginFill(0xffffff)
-			.drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
+			.drawRoundedRect(this.setting.strokeWidth, this.setting.strokeWidth, width, height, innerRoundAmount)
 			.endFill()
 			.generateTexture();
 
@@ -102,39 +133,48 @@ class RoundRectButton {
 	}
 
 	makeText(textContent) {
-		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
+		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
-		btnText.anchor.setTo(0.5);
+			.setTextBounds(0, 0, this.setting.width, this.setting.height);
-		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
+
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+		// btnText.anchor.setTo(0.5);
 
 		return btnText;
 	}
 
 
 	mouseOut() {
-		this.button.tint = this.setting.buttonColors.out;
 		this.text.fill = this.setting.textColors.out;
+		this.buttonStroke.tint = this.setting.strokeColors.out;
+		this.button.tint = this.setting.buttonColors.out;
 	}
 
 	mouseOver() {
-		this.button.tint = this.setting.buttonColors.over;
 		this.text.fill = this.setting.textColors.over;
+		this.buttonStroke.tint = this.setting.strokeColors.over;
+		this.button.tint = this.setting.buttonColors.over;
 	}
 
 	mouseDown() {
-		this.button.tint = this.setting.buttonColors.down;
 		this.text.fill = this.setting.textColors.down;
+		this.buttonStroke.tint = this.setting.strokeColors.down;
+		this.button.tint = this.setting.buttonColors.down;
 	}
 
 	buttonDisabled() {
-		this.button.tint = this.setting.buttonColors.disabled;
 		this.text.fill = this.setting.textColors.disabled;
+		this.buttonStroke.tint = this.setting.strokeColors.disabled;
+		this.button.tint = this.setting.buttonColors.disabled;
 	}
 
 
 
 	move(x, y) {
-		this.button.x = x;
+		this.buttonStroke.x = x - this.setting.width / 2;
-		this.button.y = y;
+		this.buttonStroke.y = y - this.setting.height / 2;
+
+		this.button.x = x  - this.setting.width / 2+ this.setting.strokeWidth;
+		this.button.y = y  - this.setting.height / 2+ this.setting.strokeWidth;
 	}
 
 	get inputEnabled() {
@@ -142,6 +182,7 @@ class RoundRectButton {
 	}
 
 	set inputEnabled(isEnabled) {
+		this.buttonStroke.inputEnabled = isEnabled;
 		this.button.inputEnabled = isEnabled;
 
 		if(isEnabled === true) {

src/game/lib/screen_bottom.js

@@ -18,11 +18,6 @@ class ScreenBottom {
 			.beginFill(0xffffff, 0.1)
 			.drawRect(0, this.bottomAreaPositionY, game.world.width, this.BOTTOM_BAR_HEIGHT);
 
-
-		this.printBottomLeftText(playerName);
-		this.printBottomCenterText("메뉴");
-		this.printBottomRightText(playerName);
-
 		let textStyleInfo = textStyleBasic;	//$.extend( {}, textStyleBasic);
 		textStyleInfo.font = "32px Arial";
 		textStyleInfo.align = "right";

src/game/menu/menu_app.js

@@ -6,9 +6,13 @@ let MenuApp = {
 	create: function() {
 		this.game.stage.backgroundColor = '#4d4d4d';
 
+		let backButton = new BackButton( () => {
+			location.href = '../../web/client/login.html';
+		});
+
 		let screenBottom = new ScreenBottom(game);
 		screenBottom.makeBottomLine();
-		screenBottom.printBottomLeftText(playerName);
+		screenBottom.printBottomLeftText("게임 진행 정보");
 		screenBottom.printBottomCenterText("메뉴");
 		screenBottom.printBottomRightText(playerName);
 
@@ -81,8 +85,8 @@ let MenuApp = {
 
 		playingStageData = new StageData(language, level);
 		// console.log(playingStageData);
-		
+
 		this.startState('TypingTestStage');
-	}
+	},
 
 }

src/web/client/menu_app.html

@@ -14,6 +14,7 @@
 		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
 		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 
 		<!-- source files -->