Add: start (page)

src/game/global/define_variables_global.js

@@ -19,17 +19,14 @@ function isReleaseMode() {
 const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
 
 
-let playerName;
-let playerUserID;
-let bestRecord = 0;
+let sessingPlayerName;
+let sessionPlayerUserID;
 
 {
-	playerName = sessionStorage.getItem("playerName");
-	console.log("playerName : " + playerName);
-	playerUserID = sessionStorage.getItem("playerUserID");
-	console.log("playerUserID : " + playerUserID);
-	bestRecord = sessionStorage.getItem("bestRecord");
-	console.log("bestRecord : " + bestRecord);
+	sessionPlayerName = sessionStorage.getItem("playerName");
+	console.log("playerName : " + sessionPlayerName);
+	sessionPlayerUserID = sessionStorage.getItem("playerUserID");
+	console.log("playerUserID : " + sessionPlayerUserID);
 }
 
 let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };

src/game/login/login.js

@@ -79,7 +79,7 @@ let Login = {
 	},
 
 	startMenu: function() {
-		playerName = self.inputTextName.canvasInput._value;
+		sessionPlayerName = self.inputTextName.canvasInput._value;
 		let birthday = self.inputTextBirthday.canvasInput._value;
 
 		xhr = new XMLHttpRequest();
@@ -105,7 +105,7 @@ let Login = {
 		}
 		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;
+		let param = 'name=' + sessionPlayerName + '&birthday=' + birthday;
 		// console.log(param);
 		xhr.send(param);
 
@@ -127,12 +127,12 @@ let Login = {
 	},
 
 	loginSucceeded: function(jsonData) {
-		playerUserID = jsonData['UserID'];
+		sessionPlayerUserID = jsonData['UserID'];
 		// console.log('playerUserID : ' + playerUserID);
 		// this.state.start('Menu');
 
-		sessionStorage.setItem("playerName", playerName);
-		sessionStorage.setItem("playerUserID", playerUserID);
+		sessionStorage.setItem("playerName", sessionPlayerName);
+		sessionStorage.setItem("playerUserID", sessionPlayerUserID);
 		console.log("playerName : " + sessionStorage.getItem("playerName"));
 		console.log("playerUserID : " + sessionStorage.getItem("playerUserID"));
 

src/game/menu/menu_app.js

@@ -24,7 +24,7 @@ let MenuApp = {
 		// app icons
 		let space_invaders = new AppButton(AppButton.TYPE_MOUSE, "icon_fullscreen",
 			() => {
-				console.log("space invaders");
+				location.href = '../../web/client/start.html';
 			}
 		);
 		space_invaders.move(400, 400);
@@ -42,7 +42,7 @@ let MenuApp = {
 		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("게임 진행 정보");
 		screenBottom.printBottomCenterText("메뉴");
-		screenBottom.printBottomRightText(playerName);
+		screenBottom.printBottomRightText(sessionPlayerName);
 
 		// this.loadTypingStageData();
 	},

src/game/start/main.js

@@ -0,0 +1,12 @@
+/////////////////////////////
+// Main game
+
+const CONTENT_ID = "Start";
+
+var game = new Phaser.Game(
+	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
+	Phaser.CANVAS, CONTENT_ID
+);
+
+game.state.add('Start', Start);
+game.state.start('Start');

src/game/start/start.js

@@ -0,0 +1,69 @@
+/////////////////////////////
+// Start
+
+let Start = {
+
+	preload: function() {
+		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+	},
+
+	create: function() {
+		this.game.stage.backgroundColor = '#4d4d4d';
+
+		// top
+		let backButton = new BackButton( () => {
+			location.href = '../../web/client/menu_app.html';
+		});
+
+		let fullscreenButton = new FullscreenButton(this.game);
+
+
+		// contents
+		this.makeStartButton();
+
+
+		// bottom
+		let screenBottom = new ScreenBottom(game);
+		screenBottom.makeBottomLine();
+		// screenBottom.printBottomLeftText("게임 진행 정보");
+		screenBottom.printBottomCenterText("Game name");
+		screenBottom.printBottomRightText(sessionPlayerName);
+
+		// this.loadTypingStageData();
+	},
+
+	makeStartButton: function() {
+		let setting = new RoundRectButtonSetting(200, 100);
+		setting.fontStyle.fontWeight = "bold";
+
+		let startButton = new RoundRectButton(setting, "시작", this.startStage);
+		startButton.move(game.world.centerX, game.world.centerY);
+	},
+
+
+
+	loadTypingStageData: function() {
+		var self = this;
+
+		xhr = new XMLHttpRequest();
+		xhr.onreadystatechange = function() {
+			// console.log("onreadystatechange : " + xhr);
+			// console.log("xhr.readyState : " + xhr.readyState);
+			// console.log("xhr.status : " + xhr.status);
+			if(xhr.readyState == 4 && xhr.status == 200) {
+				// console.log(xhr.responseText);
+				var jsonData = JSON.parse(xhr.responseText);
+				self.updateStageButton(jsonData);
+			}
+		}
+		xhr.open('GET', 'activated_stage_list.php', true);
+		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+		xhr.send();
+	},
+
+	startStage: function() {
+		console.log("startStage");
+		// this.startState('TypingTestStage');
+	},
+
+}

src/web/client/start.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>준비</title>
+
+
+		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
+
+		<!-- global source files -->
+		<script src="../../game/global/define_variables_global.js"></script>
+
+		<!-- library source files -->
+		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/lib/back_button.js"></script>
+		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/screen_bottom.js"></script>
+
+		<!-- source files -->
+		<script src="../../game/start/start.js"></script>
+		<script src="../../game/start/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Start" style="text-align:center;" />
+	</body>
+</html>