Add: setup UI

src/game/setup/setup.js

@@ -20,8 +20,8 @@ var Setup = {
 		this.keyboardShortcut.addCallback(
 			Phaser.KeyCode.ENTER,	// keyCode
 			null,	// keyDownHandler
-			(function() { this.startMenu(); }).bind(this),	// keyUpHandler
-			"start"	// callerClassName
+			(function() { this.checkNewEnterCode(); }).bind(this),	// keyUpHandler
+			"checkNewEnterCode"	// callerClassName
 		);
 
 		// top ui
@@ -31,8 +31,12 @@ var Setup = {
 		screenTopUI.makeFullScreenButton();
 
 
-/*
 		var textX = this.game.world.centerX - 320;
+		this.makePrevEnterCodeText(textX, 300);
+		this.makeNewEnterCodeInput(textX, 360);
+
+		this.makeCheckEnterCodeButton(game.world.centerX, game.world.centerY + 100);
+/*
 		this.makeMaestroNameText(textX, 200);
 		this.makeNameText(textX, 300);
 		this.makeEnterCodeText(textX, 360);
@@ -55,6 +59,16 @@ var Setup = {
 		*/
 
 		this.makeInfoText();
+		this.infoText.text = "새로운 입장번호를 입력하신 후, [ 변경 ] 버튼을 눌러주세요.";
+
+
+		// bottom ui
+		var screenBottomUI = new ScreenBottomUI();
+		// ScreenBottomUI.printLeftText("게임 진행 정보");
+		// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
+		// ScreenBottomUI.printCenterText(playingAppName);
+		screenBottomUI.printCenterText("설정");
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 	},
 
 	back: function() {
@@ -63,6 +77,58 @@ var Setup = {
 		location.href = '../../web/client/menu_app.html';
 	},
 
+	makePrevEnterCodeText: function(x, y) {
+		this.makeTextField(x, y, "현재의 입장번호 :");
+		this.makeTextField(x + 200 + 40, y, "111111");
+	},
+
+	makeNewEnterCodeInput: function(x, y) {
+		this.makeTextField(x, y, "새로운 입장번호 :");
+		this.inputTextEnterCode = this.makeInputTypeText(x + 20, y, "");
+		this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ ENTER ]키를 누르세요");
+	},
+
+
+
+	makeTextField: function(x, y, text) {
+		var textfield = game.add.text(x, y, text, this.textStyle)
+			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		textfield.anchor.x = 0;
+		textfield.anchor.y = 0.5;
+
+		return textfield;
+	},
+
+	makeCheckEnterCodeButton: function(x, y) {
+		var setting = new RoundRectButtonSetting(x, y, 200, 100);
+		setting.fontStyle.fontWeight = "bold";
+
+		var startButton = new RoundRectButton(
+			setting,
+			RoundRectButton.NONE_ICON, "변경",
+			(function() { this.checkNewEnterCode(); }).bind(this)
+		);
+		startButton.addShortcutText("Enter");
+	},
+
+	makeInputTypeText: function(x, y, text) {
+		var inputText = new InputTypeText(x + 420, y);
+		inputText.anchor.set(0.5);
+		inputText.canvasInput.value('');
+		if(isDebugMode()) {
+			inputText.canvasInput.value(text);
+		}
+		inputText.canvasInput._onkeyup = (function() {
+			if(event.keyCode == Phaser.Keyboard.ENTER) {
+				this.startMenu();
+			}
+		}).bind(this);
+
+		return inputText;
+	},
+
+
+/*
 	makeMaestroNameText: function(x, y) {
 		this.makeTextField(x, y, "마에스트로 계정 :");
 		this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
@@ -81,13 +147,6 @@ var Setup = {
 		this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
 	},
 
-	makeTextField: function(x, y, text) {
-		return game.add.text(x, y, text, this.textStyle)
-		.setTextBounds(0, 0, 200, 0)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-		.boundsAlignH = 'right';
-	},
-
 	makeInputTypeText: function(x, y, text) {
 		var inputText = new InputTypeText(x + 420, y);
 		inputText.anchor.set(0.5);
@@ -116,6 +175,9 @@ var Setup = {
 		startButton.addShortcutText("Enter");
 	},
 
+	*/
+
+
 	makeInfoText: function(x, y) {
 		var textStyle = { font: "30px Arial", fill: "#faa" };
 		this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
@@ -125,7 +187,7 @@ var Setup = {
 	},
 
 
-	startMenu: function() {
+	checkNewEnterCode: function() {
 		var maestroName = this.inputTextMaestroName.canvasInput._value;
 		sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
 		var enterCode = this.inputTextEnterCode.canvasInput._value;

src/web/client/setup.html

@@ -44,6 +44,7 @@
 
 		<script src="../../game/lib/text/input_type_text.js?update_date=191224"></script>
 		<script src="../../game/lib/text/screen_top_ui.js?update_date=191224"></script>
+		<script src="../../game/lib/text/screen_bottom_ui.js"></script>
 
 		<script src="../../game/lib/keyboard_shortcut.js"></script>
 		<script src="../../game/lib/button/round_rect_button.js"></script>