Fix: apply RoundRectButton

src/game/global/define_variables_global.js

@@ -16,8 +16,7 @@ function isReleaseMode() {
 }
 
 
-const GAME_SCREEN_SIZE = { x: 1024, y: 768 
+const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
-}
 
 
 let playerName;

src/game/lib/input_type_text.js

@@ -1,41 +1,6 @@
-var InputTypeText = function(x, y) {
+class InputTypeText {
-  var bmd = game.add.bitmapData(400, 50);    
-  var myInput = game.add.sprite(x, y, bmd);
 
-  myInput.canvasInput = new CanvasInput({
+	constructor(x, y) {
-    canvas: bmd.canvas,
-    fontSize: 30,
-    fontFamily: 'Arial',
-    fontColor: '#212121',
-    fontWeight: 'bold',
-    width: 400,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: '#000',
-    borderRadius: 3,
-    boxShadow: '1px 1px 0px #fff',
-    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
-    placeHolder: 'Enter message here...'
-  });
-  myInput.inputEnabled = true;
-  myInput.input.useHandCursor = true;    
-  myInput.events.onInputUp.add(this.inputFocus, this);
-
-  return myInput;
-};
-
-InputTypeText.prototype = {
-  inputFocus: function(sprite){
-    sprite.canvasInput.focus();
-  }
-};
-
-/*
-var inputFocus = function(sprite){
-  sprite.canvasInput.focus();
-}
-
-var createInput = function(x, y){
 		var bmd = game.add.bitmapData(400, 50);
 		var myInput = game.add.sprite(x, y, bmd);
 
@@ -60,7 +25,11 @@ var createInput = function(x, y){
 
 		return myInput;
 	}
-*/
+
+	inputFocus(sprite){
+		sprite.canvasInput.focus();
+	}
+}
 
 
 /*!

src/game/login/login.js

@@ -1,22 +1,30 @@
 /////////////////////////////
 // Login
 
-var Login = {
+let Login = {
+
+	self: {},
 
 	create: function() {
-		var self = this;
+		self = this;
 
 		this.game.stage.backgroundColor = '#4d4d4d';
 
-		var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
+		// let phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
-		phaser.anchor.set(0.5);
+		// phaser.anchor.set(0.5);
-		phaser.alpha = 0.1;
+		// phaser.alpha = 0.1;
-		game.stage.backgroundColor = '#4d4d4d';
+		// game.stage.backgroundColor = '#4d4d4d';
 
+		this.makeInputTypeTexts();
+
+		this.makeButton();
+	},
+
+	makeInputTypeTexts: function() {
 		// name
-		var textX = this.game.world.centerX - 360;
+		let textX = this.game.world.centerX - 360;
-		var inputX = this.game.world.centerX + 60;
+		let inputX = this.game.world.centerX + 60;
-		var nameTextY = 340;
+		const nameTextY = 340;
 		game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -35,7 +43,7 @@ var Login = {
 		}
 
 		// birthday
-		var birthdayTextY = 400;
+		const birthdayTextY = 400;
 		game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -53,43 +61,21 @@ var Login = {
 			}
 		}
 
-
 		this.inputTextName.canvasInput.focus();
 		// this.inputTextBirthday.canvasInput.focus();
+	},
 
-		// start button
+	makeButton: function() {
-		/*
-		var textStyle = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
-		var buttonText = game.add.text(0, 0, "시작", textStyle);
-		buttonText.addColor("#a0d", 0);
-		buttonText.anchor.setTo(0.5, 0.4);
-
-		var startButton = game.add.button(game.world.centerX, game.world.centerY + 140, 'button', this.startMenu, this, 2, 1, 0);
-		startButton.anchor.set(0.5);
-		startButton.inputEnabled = true;
-		startButton.input.priorityId = 1;
-		startButton.input.useHandCursor = true;
-		startButton.addChild(buttonText);
-		*/
-
 		let setting = new RoundRectButtonSetting(200, 100);
-		setting.fontStyle = {
+		setting.fontStyle.fontWeight = "bold";
-			fontSize: "30px",
-			align: "center",
-			fontWeight: "",
-			stroke: "red",
-			strokeThickness: 5
-		};
 
-		let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu);
+		let startButton = new RoundRectButton(setting, "시작", this.startMenu);
 		startButton.move(game.world.centerX, game.world.centerY + 140);
 	},
 
 	startMenu: function() {
-		var self = this;
+		playerName = self.inputTextName.canvasInput._value;
-
+		let birthday = self.inputTextBirthday.canvasInput._value;
-		playerName = this.inputTextName.canvasInput._value;
-		var birthday = this.inputTextBirthday.canvasInput._value;
 
 		xhr = new XMLHttpRequest();
 		xhr.onreadystatechange = function() {
@@ -98,12 +84,13 @@ var Login = {
 			// console.log("xhr.status : " + xhr.status);
 			if(xhr.readyState == 4 && xhr.status == 200) {
 				// console.log(xhr.responseText);
-				var jsonData = JSON.parse(xhr.responseText);
+				let jsonData = JSON.parse(xhr.responseText);
 				// console.log(JSON.stringify(jsonData));
 
 				// console.log(jsonData);
 				if(jsonData != null && jsonData["UserID"] != null) {
 					// login successed
+
 					self.loginSucceeded(jsonData);
 				} else {
 					// login failed
@@ -113,12 +100,12 @@ var Login = {
 		}
 		xhr.open('POST', 'login.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-		var param = 'name=' + playerName + '&birthday=' + birthday;
+		let param = 'name=' + playerName + '&birthday=' + birthday;
 		// console.log(param);
 		xhr.send(param);
 
 		/*
-		var params = {
+		let params = {
 			'name': this.inputTextName.canvasInput._value,
 			'birthday': this.inputTextBirthday.canvasInput._value
 		};
@@ -126,7 +113,7 @@ var Login = {
 		console.log(JSON.stringify(params));
 
 		xhr.setRequestHeader("Content-type", "application/json");
-		// var data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
+		// let data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
 		xhr.send(data);
 		xhr.send(JSON.stringify(params));
 

study/RoundRectButton/round_rect_button_main.js

@@ -2,7 +2,8 @@
 // Main game
 
 var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
-  {preload:preload, create:create, update:update, render:render});
+	{preload:preload, create:create, update:update, render:render}
+);
 
 function preload() {
 	// game.load.image('phaser', '../../resources/image/phaser.png');