From 8d9e3c49b3d4a66a47bae38aaddcc1b2a065ae23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Sun, 6 May 2018 18:47:17 +0900 Subject: [PATCH] Add: ScreenBottom --- src/game/global/define_variables_global.js | 9 +- src/game/global/screen_bottom.js | 62 +++++++++++ src/game/login/login.js | 13 ++- src/game/menu/menu_app.js | 119 ++------------------- src/web/client/menu_app.html | 1 + src/web/client/php/check_user.php | 31 ++++++ src/web/client/php/connect_db.php | 24 +++++ src/web/client/php/connect_test_db.php | 15 +++ src/web/client/php/send_error_code.php | 10 ++ 9 files changed, 162 insertions(+), 122 deletions(-) create mode 100644 src/game/global/screen_bottom.js create mode 100644 src/web/client/php/check_user.php create mode 100644 src/web/client/php/connect_db.php create mode 100644 src/web/client/php/connect_test_db.php create mode 100644 src/web/client/php/send_error_code.php diff --git a/src/game/global/define_variables_global.js b/src/game/global/define_variables_global.js index 39bc002..402823d 100644 --- a/src/game/global/define_variables_global.js +++ b/src/game/global/define_variables_global.js @@ -25,14 +25,11 @@ let bestRecord = 0; { playerName = sessionStorage.getItem("playerName"); - console.log("playerName"); - console.log(playerName); + console.log("playerName : " + playerName); playerUserID = sessionStorage.getItem("playerUserID"); - console.log("playerUserID"); - console.log(playerUserID); + console.log("playerUserID : " + playerUserID); bestRecord = sessionStorage.getItem("bestRecord"); - console.log("bestRecord"); - console.log(bestRecord); + console.log("bestRecord : " + bestRecord); } let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }; diff --git a/src/game/global/screen_bottom.js b/src/game/global/screen_bottom.js new file mode 100644 index 0000000..bb09966 --- /dev/null +++ b/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); + } + +} \ No newline at end of file diff --git a/src/game/login/login.js b/src/game/login/login.js index 5494d62..896ac7a 100644 --- a/src/game/login/login.js +++ b/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); - // let userID = sessionStorage.getItem("UserID"); - // console.log("userID : " + userID); + sessionStorage.setItem("playerName", playerName); + sessionStorage.setItem("playerUserID", playerUserID); + 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)); } diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index b89f319..afa3bae 100644 --- a/src/game/menu/menu_app.js +++ b/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(); - bar.beginFill(0x000000, 0.2); - bar.drawRect(0, 0, 1000, 80); + let screenBottom = new ScreenBottom(game); + screenBottom.makeBottomLine(); + screenBottom.printBottomLeftText(playerName); + screenBottom.printBottomCenterText("메뉴"); + screenBottom.printBottomRightText(playerName); - var newTextStyle = $.extend( {}, textStyleBasic); - 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(); + // this.loadTypingStageData(); }, loadTypingStageData: function() { diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 9c4c3cd..5e555e0 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -12,6 +12,7 @@ + diff --git a/src/web/client/php/check_user.php b/src/web/client/php/check_user.php new file mode 100644 index 0000000..75915e5 --- /dev/null +++ b/src/web/client/php/check_user.php @@ -0,0 +1,31 @@ +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); + +?> \ No newline at end of file diff --git a/src/web/client/php/connect_db.php b/src/web/client/php/connect_db.php new file mode 100644 index 0000000..fb5041e --- /dev/null +++ b/src/web/client/php/connect_db.php @@ -0,0 +1,24 @@ +connect_error) { + send_error_code("Connection failed: ".$db_conn->connect_error); + exit; +} + +$query = "USE jisangs"; +$result = mysqli_query($db_conn, $query); + +?> \ No newline at end of file diff --git a/src/web/client/php/connect_test_db.php b/src/web/client/php/connect_test_db.php new file mode 100644 index 0000000..2c9884d --- /dev/null +++ b/src/web/client/php/connect_test_db.php @@ -0,0 +1,15 @@ +connect_error) { + send_error_code("Connection failed: ".$db_conn->connect_error); + exit; +} + +?> \ No newline at end of file diff --git a/src/web/client/php/send_error_code.php b/src/web/client/php/send_error_code.php new file mode 100644 index 0000000..d3eeb28 --- /dev/null +++ b/src/web/client/php/send_error_code.php @@ -0,0 +1,10 @@ + $error_code + ); + echo json_encode($returnValue, JSON_UNESCAPED_UNICODE); +} + +?> \ No newline at end of file