Add: ScreenBottom

src/game/global/define_variables_global.js

@@ -25,14 +25,11 @@ let bestRecord = 0;
 
 {
 	playerName = sessionStorage.getItem("playerName");
-	console.log("playerName");
+	console.log("playerName : " + playerName);
-	console.log(playerName);
 	playerUserID = sessionStorage.getItem("playerUserID");
-	console.log("playerUserID");
+	console.log("playerUserID : " + playerUserID);
-	console.log(playerUserID);
 	bestRecord = sessionStorage.getItem("bestRecord");
-	console.log("bestRecord");
+	console.log("bestRecord : " + bestRecord);
-	console.log(bestRecord);
 }
 
 let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };

src/game/global/screen_bottom.js

@@ -0,0 +1,62 @@
+/////////////////////////////
+// Screen bottom
+
+class ScreenBottom {
+
+	constructor(game) {
+		this.game = game;
+
+		this.BOTTOM_BAR_HEIGHT					= 50;
+		this.BOTTOM_BAR_NAME_WIDTH				= 200;
+		this.BOTTOM_BAR_TEXT_OFFSET				= 10;
+
+		this.bottomAreaPositionY = this.game.world.height - this.BOTTOM_BAR_HEIGHT;
+	}
+
+	makeBottomLine() {
+		this.game.add.graphics()
+			.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";
+		textStyleInfo.boundsAlignH = "right";
+	}
+
+	printBottomLeftText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+
+		let posX = this.BOTTOM_BAR_TEXT_OFFSET;
+		this.game.add.text(posX, this.bottomAreaPositionY, text, style)
+			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
+
+	printBottomCenterText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" };
+
+		let posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT;
+		this.game.add.text(0, this.bottomAreaPositionY, text, style)
+			.setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
+
+	printBottomRightText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" };
+
+		let posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET;
+		this.game.add.text(posX, this.bottomAreaPositionY, text, style)
+			.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
+
+}

src/game/login/login.js

@@ -24,7 +24,7 @@ let Login = {
 		// name
 		let textX = this.game.world.centerX - 360;
 		let inputX = this.game.world.centerX + 60;
-		const nameTextY = 340;
+		let nameTextY = 340;
 		game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -98,7 +98,7 @@ let Login = {
 				}
 			}
 		}
-		xhr.open('POST', 'login.php', true);
+		xhr.open('POST', '../../web/client/php/check_user.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 		let param = 'name=' + playerName + '&birthday=' + birthday;
 		// console.log(param);
@@ -126,14 +126,17 @@ let Login = {
 		// console.log('playerUserID : ' + playerUserID);
 		// this.state.start('Menu');
 
-		sessionStorage.setItem("UserID", playerUserID);
+		sessionStorage.setItem("playerName", playerName);
-		// let userID = sessionStorage.getItem("UserID");
+		sessionStorage.setItem("playerUserID", playerUserID);
-		// console.log("userID : " + userID);
+		console.log("playerName : " + sessionStorage.getItem("playerName"));
+		console.log("playerUserID : " + sessionStorage.getItem("playerUserID"));
 
 		location.href = '../../web/client/menu_app.html';
 	},
 
 	loginFailed: function(jsonData) {
+		sessionStorage.removeItem("playerName");
+		sessionStorage.removeItem("playerUserID");
 		// show retry message
 		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
 	}

src/game/menu/menu_app.js

@@ -1,121 +1,18 @@
 /////////////////////////////
 // MenuApp
 
-var MenuApp = {
+let MenuApp = {
 
 	create: function() {
-		this.stageButtonArray = [];
+		this.game.stage.backgroundColor = '#4d4d4d';
 
-		var bar = game.add.graphics();
+		let screenBottom = new ScreenBottom(game);
-		bar.beginFill(0x000000, 0.2);
+		screenBottom.makeBottomLine();
-		bar.drawRect(0, 0, 1000, 80);
+		screenBottom.printBottomLeftText(playerName);
+		screenBottom.printBottomCenterText("메뉴");
+		screenBottom.printBottomRightText(playerName);
 
-		var newTextStyle = $.extend( {}, textStyleBasic);
+		// this.loadTypingStageData();
-		newTextStyle.font = "bold 64px Arial";
-
-		var textPlayerName = game.add.text(0, 2, "연습 내용", newTextStyle)
-		.setTextBounds(0, 0, 1000, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		var phaser = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
-		phaser.anchor.set(0.5);
-		phaser.alpha = 0.1;
-		game.stage.backgroundColor = '#4d4d4d';
-
-		// korean
-		var buttonPosX = 280;
-		var buttonKoreanPosY = 140;	// 380;
-
-		game.add.text(0, 2, "한글", newTextStyle)
-		.setTextBounds(0, buttonKoreanPosY + 20, 200, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		for(var i = 0; i < 4; i++) {
-			var button = new TextButton(buttonPosX + i * 200, buttonKoreanPosY,
-				koreanLessonTitle[i], this.startStage);
-			button.name = "k" + (i + 1);
-			button.scaleTo(0.9);
-			this.stageButtonArray.push(button);
-		}
-
-		for(var i = 0; i < 4; i++) {
-			var button = new TextButton(buttonPosX + i * 200, buttonKoreanPosY + 100,
-				koreanLessonTitle[i + 4], this.startStage);
-			button.name = "k" + (i + 5);
-			button.scaleTo(0.9);
-			this.stageButtonArray.push(button);
-		}
-
-		var button = new TextButton(buttonPosX, buttonKoreanPosY + 200,
-			koreanLessonTitle[8], this.startStage);
-		button.name = "k9";
-		button.scaleTo(0.9);
-		this.stageButtonArray.push(button);
-
-		var button = new TextButton(buttonPosX + 200, buttonKoreanPosY + 200,
-			koreanLessonTitle[9], this.startStage);
-		button.name = "k10";
-		button.scaleTo(0.9);
-		this.stageButtonArray.push(button);
-
-
-		// english
-		var buttonEnglishPosY = 480;
-
-		game.add.text(0, 2, "영문", newTextStyle)
-		.setTextBounds(0, buttonEnglishPosY + 20, 200, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		for(var i = 0; i < 3; i++) {
-			var button = new TextButton(buttonPosX + i * 200, buttonEnglishPosY,
-				englishLessonTitle[i], this.startStage);
-			button.name = "e" + (i + 1);
-			button.scaleTo(0.9);
-			this.stageButtonArray.push(button);
-		}
-
-		for(var i = 0; i < 3; i++) {
-			var button = new TextButton(buttonPosX + i * 200, buttonEnglishPosY + 100,
-				englishLessonTitle[i + 3], this.startStage);
-			button.name = "e" + (i + 4);
-			button.scaleTo(0.9);
-			this.stageButtonArray.push(button);
-		}
-
-		var button = new TextButton(buttonPosX, buttonEnglishPosY + 200,
-			englishLessonTitle[8], this.startStage);
-		button.name = "e9";
-		button.scaleTo(0.9);
-		this.stageButtonArray.push(button);
-
-		var button = new TextButton(buttonPosX + 200, buttonEnglishPosY + 200,
-			englishLessonTitle[9], this.startStage);
-		button.name = "e10";
-		button.scaleTo(0.9);
-		this.stageButtonArray.push(button);
-
-		// for(var i = 0; i < this.stageButtonArray.length; i++) {
-		// 	console.log("button name : " + this.stageButtonArray[i].name);
-		// }
-
-		// bottom
-		var bottomAreaPositionY = 750;
-
-		var bar = game.add.graphics();
-		bar.beginFill(0xffffff, 0.1);
-		bar.drawRect(0, bottomAreaPositionY, 1000, 50);
-
-		var textStyleInfo = $.extend( {}, textStyleBasic);
-		textStyleInfo.font = "32px Arial";
-		textStyleInfo.align = "right";
-		textStyleInfo.boundsAlignH = "right";
-
-		var textPlayerName = game.add.text(800 - OFFSET_RIGHT_ALIGN, bottomAreaPositionY - 12, playerName, textStyleInfo)
-		.setTextBounds(0, 0, 200, 80)
-		.addColor('#ffffff', 0);
-		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		this.loadTypingStageData();
 	},
 
 	loadTypingStageData: function() {

src/web/client/menu_app.html

@@ -12,6 +12,7 @@
 		<script src="../../game/lib/input_type_text.js"></script>
 		<script src="../../game/lib/round_rect_button.js"></script>
 		<script src="../../game/global/define_variables_global.js"></script>
+		<script src="../../game/global/screen_bottom.js"></script>
 
 		<!-- Space Invaders : source files -->
 		<script src="../../game/menu/menu_app.js"></script>

src/web/client/php/check_user.php

@@ -0,0 +1,31 @@
+<?php
+header('Content-Type: application/json');
+
+include "send_error_code.php";
+
+$name = $_POST["name"];
+$birthday = $_POST["birthday"];
+if(!is_numeric($birthday)) {
+    send_error_code('생년월일이 숫자가 아닙니다. : '.$birthday);
+    exit;
+} else if(strlen($birthday) != 6) {
+    send_error_code('6자리 숫자값을 정확히 입력하세요 : YYMMDD (예 : 120131) : '.$birthday);
+    exit;
+}
+
+include "connect_db.php";
+
+$return_array = array();
+
+$query = "SELECT UserID FROM afterschool_user WHERE Name=? AND Birthday=?";
+$stmt = $db_conn->prepare($query);
+$stmt->bind_param('ss', $name, $birthday);
+$stmt->execute();
+$stmt->bind_result($user_id);
+// while($stmt->fetch())
+$stmt->fetch();
+
+$jsonUserData["UserID"] = $user_id;
+echo json_encode($jsonUserData, JSON_UNESCAPED_UNICODE);
+
+?>

src/web/client/php/connect_db.php

@@ -0,0 +1,24 @@
+<?php
+
+$hasServiceDBSetting = file_exists("./service_db_setting.php");
+
+if($hasServiceDBSetting == true) {
+	include("./service_db_setting.php");
+} else {
+	$db_host = "localhost";
+	$db_user = "afterschool";
+	$db_passwd = "sEobMPuJ2A8KTfwU";
+	$db_name = "jisangs";
+}
+
+$db_conn = new mysqli($db_host, $db_user, $db_passwd, $db_name);
+
+if ($db_conn->connect_error) {
+    send_error_code("Connection failed: ".$db_conn->connect_error);
+    exit;
+}
+
+$query = "USE jisangs";
+$result = mysqli_query($db_conn, $query);
+
+?>

src/web/client/php/connect_test_db.php

@@ -0,0 +1,15 @@
+<?php
+
+$db_host = "localhost";
+$db_user = "afterschool";
+$db_passwd = "sEobMPuJ2A8KTfwU";
+$db_name = "jisangs";
+
+$db_conn = new mysqli($db_host, $db_user, $db_passwd, $db_name);
+
+if ($db_conn->connect_error) {
+    send_error_code("Connection failed: ".$db_conn->connect_error);
+    exit;
+}
+
+?>

src/web/client/php/send_error_code.php

@@ -0,0 +1,10 @@
+<?php
+
+function send_error_code($error_code) {
+    $returnValue = array(
+        'error' => $error_code
+    );
+    echo json_encode($returnValue, JSON_UNESCAPED_UNICODE);
+}
+
+?>