Add: input score group

src/game/license_timer/game.js

@@ -25,12 +25,13 @@ var LicenseTimer = {
 
 		this.makeTimer();
 
+		this.makeInputScoreGroup();
 
 		// bottom ui
 		this.screenBottomUI = new ScreenBottomUI();
-		// screenBottomUI.printLeftText();
+		// this.screenBottomUI.printLeftText();
 		this.screenBottomUI.printCenterText("점수 등록은 선생님에게 부탁하세요.");
-		// screenBottomUI.printRightText();
+		this.screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 	},
 
 
@@ -48,19 +49,13 @@ var LicenseTimer = {
 	},
 
 	makeTimer: function() {
-		// top
+		// bar
 		var bar = game.add.graphics();
 		bar.beginFill(0x000000, 0.2);
 		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 180);
 
 		// Timer
 		var timerCenterX = game.world.centerX - 30;
-		var timerTextStyle = { font: "bold 120px Arial", fill: "#fff", align: "center"};
-		this.timerText = game.add.text(timerCenterX, 160, "00:00:00", timerTextStyle);
-		this.timerText.anchor.set(0.5);
-		// .setTextBounds(-200, 0, 400, 200)
-		this.timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
 		var watchPosY = 100;
 		var watchTextStyle = { font: "24px Arial", fill: "#555", align: "center"};
 		this.hourText = game.add.text(timerCenterX - 175, watchPosY, "시간", watchTextStyle);
@@ -72,6 +67,12 @@ var LicenseTimer = {
 		this.secText = game.add.text(timerCenterX + 170, watchPosY, "초", watchTextStyle);
 		this.secText.anchor.set(0.5);
 
+		var timerTextStyle = { font: "bold 120px Arial", fill: "#fff", align: "center"};
+		this.timerText = game.add.text(timerCenterX, 160, "00:00:00", timerTextStyle);
+		this.timerText.anchor.set(0.5);
+		// .setTextBounds(-200, 0, 400, 200)
+		this.timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
 
 		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
@@ -140,6 +141,91 @@ var LicenseTimer = {
 
 	},
 
+	makeInputScoreGroup: function() {
+		var InputScoreGruopPosY = GAME_SCREEN_SIZE.y - 120;
+		// bar
+		var bar = game.add.graphics();
+		bar.beginFill(0x000000, 0.2);
+		bar.drawRect(0, InputScoreGruopPosY, GAME_SCREEN_SIZE.x, 70);
+
+		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+
+		// subject input text
+		this.inputTextSubject = new InputTypeText(220, InputScoreGruopPosY + 35);
+		this.setInputTextWidth(this.inputTextSubject, 300);
+		this.inputTextSubject.anchor.set(0.5);
+		this.inputTextSubject.canvasInput.value(this.subject);
+		this.inputTextSubject.canvasInput.focus();
+		this.inputTextSubject.canvasInput.placeHolder("과목 입력");
+
+		var titleTextStyle = { font: "36px Arial", fill: "#fff", align: "center"};
+		this.titleText = game.add.text(350, InputScoreGruopPosY + 40, "과목에서", titleTextStyle);
+		this.titleText.anchor.set(0, 0.5);
+
+
+		// subject input text
+		this.inputTextScore = new InputTypeText(game.world.centerX + 200, InputScoreGruopPosY + 35);
+		this.setInputTextWidth(this.inputTextScore, 200);
+		this.inputTextScore.anchor.set(0.5);
+		this.inputTextScore.canvasInput.value('');
+		this.inputTextScore.canvasInput.focus();
+		this.inputTextScore.canvasInput.placeHolder("점수 입력");
+		// inputTextScore.canvasInput._onkeydown = this.checkInputText;
+		// inputTextScore.canvasInput._onkeyup = function() {
+		// this.inputTextScore.canvasInput._onkeyup = function() {
+		// 	self.checkTypingContents(event);
+		// }
+
+		this.titleText = game.add.text(740, InputScoreGruopPosY + 40, "점 획득", titleTextStyle);
+		this.titleText.anchor.set(0, 0.5);
+
+
+		// set timer buttons
+		setting.x = GAME_SCREEN_SIZE.x - 80;
+		setting.y = InputScoreGruopPosY + 35;
+		setting.width = 100;
+		setting.height = 50;
+		var set60SecButton = new RoundRectButton(
+			setting,
+			null, "저장",
+			(function() { console.log("save score"); }).bind(this)
+		);
+
+	},
+
+	setInputTextWidth(inputText, width) {
+		inputText.canvasInput.width = width;
+		console.log(inputText.canvasInput);
+		inputText.canvasInput._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+		inputText.canvasInput._hiddenInput.style.width = self._width + 'px';
+
+		inputText.canvasInput._width = width;
+		inputText.canvasInput._calcWH();
+		inputText.canvasInput._updateCanvasWH();
+		inputText.canvasInput.render();
+	},
+
+	makeInputTypeText: function(x, y, text) {
+		var inputText = new InputTypeText(x, 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;
+	},
+
+
 	back: function() {
 		sessionStorageManager.resetPlayingAppData();
 		// location.href = '../../web/client/menu_typing_test.html';