Add: global - Login

src/game/global/define_variables_global.js

@@ -0,0 +1,30 @@
+const LANGUAGE_KOREAN		= "korean";
+const LANGUAGE_ENGLISH	= "english";
+
+const MODE_RELEASE		= "release";
+const MODE_DEBUG			= "debug";
+const runMode = MODE_DEBUG;
+
+function isDebugMode() {
+	// console.log("debug mode ? " + runMode);
+	return runMode == MODE_DEBUG ? true : false;
+}
+
+function isReleaseMode() {
+	// console.log("release mode ? " + runMode);
+	return runMode == MODE_RELEASE ? true : false;
+}
+
+
+const GAME_SCREEN_SIZE = { x: 1024, y: 768 
+}
+
+
+let playerName;
+let playerUserID;
+let bestRecord = 0;
+let playingStageData;
+
+let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+
+let backButtonPosition = { x: 100, y: 70 };

src/game/global/loading/loading.js

@@ -0,0 +1,114 @@
+/////////////////////////////
+// Loading
+
+// var x = 32;
+// var y = 80;
+
+var Loading = {
+
+	preload: function() {
+		this.game.load.image('loadingbar', './image/phaser.png');
+	},
+
+	create: function() {
+		// console.log('Loading');
+		
+		this.game.stage.backgroundColor = '#4d4d4d';
+
+		//	Progress report
+    	this.textProgress = game.add.text(game.world.centerX, 100, '로딩중 . . .', textStyleBasic);
+		this.textProgress.anchor.setTo(0.5, 0.4);
+		this.textProgress.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// Preload bar
+		this.preloadBar = this.add.sprite(game.world.centerX, game.world.centerY, 'loadingbar');
+		this.preloadBar.anchor.setTo(0.5);
+		this.preloadBar.alpha = 0;
+
+		this.game.load.onFileComplete.add(this.fileComplete, this);
+		this.game.load.onLoadComplete.add(this.loadComplete, this);
+
+		this.startLoading();
+	},
+
+	startLoading: function() {
+		// this.game.load.image('a', './image/phaser.png');
+		// this.game.load.image('b', './image/phaser.png');
+		// this.game.load.image('c', './image/phaser.png');
+		// this.game.load.image('d', './image/phaser.png');
+		// this.game.load.image('e', './image/phaser.png');
+		// this.game.load.image('g', './image/phaser.png');
+		// this.game.load.image('e', './image/phaser.png');
+		// this.game.load.image('f', './image/phaser.png');
+		// this.game.load.image('g', './image/phaser.png');
+		// this.game.load.image('h', './image/phaser.png');
+
+		this.game.load.image('phaser', './image/phaser.png');
+		this.game.load.spritesheet('button', './image/button_basic.png', 200, 100);
+		this.game.load.image('star', './image/star_particle.png');
+		this.game.load.image('medal_gold', './image/medal_gold.png');
+		this.game.load.image('medal_silver', './image/medal_silver.png');
+		this.game.load.image('medal_bronze', './image/medal_bronze.png');
+
+		this.game.load.start();
+	},
+
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		this.preloadBar.alpha = progress / 100;
+
+		// console.log('progress : ' + progress);
+
+		/*
+		text.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
+
+		var newImage = game.add.image(x, y, cacheKey);
+		newImage.scale.set(0.3);
+
+		x += newImage.width + 20;
+		if (x > 700)
+		{
+			x = 32;
+			y += 332;
+		}
+		*/
+	},
+
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		this.preloadBar.alpha = 1;
+
+		if(isReleaseMode()) {
+			this.state.start('Login');
+			return;
+		}
+
+		this.state.start('Login');
+		// this.startMenu();
+		// this.startTypingTestStage();
+		// this.startTypingTestResult();
+	},
+
+	startMenu: function() {
+		this.setupTestData();
+		this.state.start('Menu');
+	},
+
+	startTypingTestStage: function() {
+		this.setupTestData();
+		this.state.start('TypingTestStage');
+	},
+
+	startTypingTestResult: function() {
+		this.setupTestData();
+		this.state.start('TypingTestResult');
+	},
+
+	setupTestData: function() {
+		playerUserID = 1;
+		playerName = "박지상";
+
+		bestRecord = 300;
+		typingRecordTotal = 400;
+		playingStageData = new StageData(LANGUAGE_KOREAN, 1);
+	}
+
+}

src/game/login/login.js

@@ -0,0 +1,149 @@
+/////////////////////////////
+// Login
+
+var Login = {
+
+	create: function() {
+		var self = this;
+
+		this.game.stage.backgroundColor = '#4d4d4d';
+		
+		var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
+		phaser.anchor.set(0.5);
+		phaser.alpha = 0.1;
+		game.stage.backgroundColor = '#4d4d4d';
+
+		// name
+		var textX = this.game.world.centerX - 360;
+		var inputX = this.game.world.centerX + 60;
+		var nameTextY = 340;
+		game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
+		.setTextBounds(0, 0, 200, 0)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+		.boundsAlignH = 'right';
+
+		this.inputTextName = new InputTypeText(inputX, nameTextY);
+		this.inputTextName.anchor.set(0.5);
+		this.inputTextName.canvasInput.value('');
+		if(isDebugMode()) {
+			this.inputTextName.canvasInput.value('박지상');
+		}
+		this.inputTextName.canvasInput._onkeyup = function() {
+			if(event.keyCode == Phaser.Keyboard.ENTER) {
+				self.startMenu();
+			}
+		}
+
+		// birthday
+		var birthdayTextY = 400;
+		game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
+		.setTextBounds(0, 0, 200, 0)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+		.boundsAlignH = 'right';
+
+		this.inputTextBirthday = new InputTypeText(inputX, birthdayTextY);
+		this.inputTextBirthday.anchor.set(0.5);
+		this.inputTextBirthday.canvasInput.value('');
+		if(isDebugMode()) {
+			this.inputTextBirthday.canvasInput.value('760621');
+		}
+		this.inputTextBirthday.canvasInput._onkeyup = function() {
+			if(event.keyCode == Phaser.Keyboard.ENTER) {
+				self.startMenu();
+			}
+		}
+	
+
+		this.inputTextName.canvasInput.focus();
+		// this.inputTextBirthday.canvasInput.focus();
+
+		// start button
+		/*
+		var textStyle = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+		var buttonText = game.add.text(0, 0, "시작", textStyle);
+		buttonText.addColor("#a0d", 0);
+		buttonText.anchor.setTo(0.5, 0.4);
+
+		var startButton = game.add.button(game.world.centerX, game.world.centerY + 140, 'button', this.startMenu, this, 2, 1, 0);
+		startButton.anchor.set(0.5);
+		startButton.inputEnabled = true;
+		startButton.input.priorityId = 1;
+		startButton.input.useHandCursor = true;
+		startButton.addChild(buttonText);
+		*/
+
+		let setting = new RoundRectButtonSetting(200, 100);
+		setting.fontStyle = {
+			fontSize: "30px",
+			align: "center",
+			fontWeight: "",
+			stroke: "red",
+			strokeThickness: 5
+		};
+
+		let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu);
+		startButton.move(game.world.centerX, game.world.centerY + 140);
+	},
+
+	startMenu: function() {
+		var self = this;
+
+		playerName = this.inputTextName.canvasInput._value;
+		var birthday = this.inputTextBirthday.canvasInput._value;
+
+		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);
+				// console.log(JSON.stringify(jsonData));
+
+				// console.log(jsonData);
+				if(jsonData != null && jsonData["UserID"] != null) {
+					// login successed
+					self.loginSucceeded(jsonData);
+				} else {
+					// login failed
+					self.loginFailed(jsonData);
+				}
+			}
+		}
+		xhr.open('POST', 'login.php', true);
+		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+		var param = 'name=' + playerName + '&birthday=' + birthday;
+		// console.log(param);
+		xhr.send(param);
+
+		/*
+		var params = {
+			'name': this.inputTextName.canvasInput._value,
+			'birthday': this.inputTextBirthday.canvasInput._value
+		};
+		console.log(params);
+		console.log(JSON.stringify(params));
+
+		xhr.setRequestHeader("Content-type", "application/json");
+		// var data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
+		xhr.send(data);
+		xhr.send(JSON.stringify(params));
+
+		// xhr.send(null);
+		*/
+	},
+
+	loginSucceeded: function(jsonData) {
+		playerUserID = jsonData['UserID'];
+		// console.log('playerUserID : ' + playerUserID);
+
+		this.state.start('Menu');
+	},
+
+	loginFailed: function(jsonData) {
+		// show retry message
+		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
+	}
+
+}

src/game/login/main.js

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

src/game/menu/menu_app.js

@@ -0,0 +1,191 @@
+/////////////////////////////
+// Menu
+
+var Menu = {
+
+	create: function() {
+		this.stageButtonArray = [];
+
+		var bar = game.add.graphics();
+		bar.beginFill(0x000000, 0.2);
+		bar.drawRect(0, 0, 1000, 80);
+
+		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();
+	},
+
+	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();
+	},
+
+	updateStageButton: function(jsonData) {
+		// console.log(JSON.stringify(jsonData));
+
+		for(var i = 0; i < jsonData.length; i++) {
+			// console.log(jsonData[i]["StageName"] + " : " + jsonData[i]["Activated"]);
+
+			this.activateStageButton(
+				// jsonData[i]["Language"],
+				jsonData[i]["StageName"],
+				jsonData[i]["Activated"]
+			);
+		}
+	},
+
+	activateStageButton: function(stageName, isActivated) {
+		for(var i = 0; i < this.stageButtonArray.length; i++) {
+			var buttonName = this.stageButtonArray[i].name;
+			var buttonLanguage = buttonName.charAt(0) == "k" ? "korean" : "english";
+			var buttonStageName = getStageCodeByStageNo(buttonName.substring(1));
+			var buttonNewName = buttonLanguage + "_" + buttonStageName;
+			// console.log("buttonNewName : " + buttonNewName);
+
+			if(buttonNewName == stageName) {
+				if(isActivated == true) {
+					// console.log("stageName : " + stageName);
+
+					this.stageButtonArray[i].startButton.alpha = 1;
+					this.stageButtonArray[i].startButton.inputEnabled = true;
+					return;
+				} else {
+					// console.log("this.stageButtonArray[" + i + "].name : " + this.stageButtonArray[i].name);
+					// console.log("buttonNewName : " + buttonNewName);
+
+					this.stageButtonArray[i].startButton.alpha = 0.3;
+					this.stageButtonArray[i].startButton.inputEnabled = false;
+					return;
+				}
+			}
+		}
+	},
+
+	startStage: function() {
+		var language = this.name.substring(0, 1) == "k" ? LANGUAGE_KOREAN : LANGUAGE_ENGLISH;
+		var level = this.name.substring(1);
+
+		playingStageData = new StageData(language, level);
+		// console.log(playingStageData);
+		
+		this.startState('TypingTestStage');
+	}
+
+}

src/game/mouse/space_invaders/main.js

@@ -0,0 +1,12 @@
+/////////////////////////////
+// Main game
+
+const CONTENT_ID = "Space Invaders";
+
+var game = new Phaser.Game(960, 540, Phaser.CANVAS, CONTENT_ID);
+
+game.state.add('Loading', Loading);
+game.state.start('Loading');
+
+// game.state.add('Login', Login);
+// game.state.add('Menu', Menu);

src/web/client/login.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Login</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/lib/input_type_text.js"></script>
+		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/global/define_variables_global.js"></script>
+
+		<!-- Space Invaders : source files -->
+		<script src="../../game/login/login.js"></script>
+		<script src="../../game/login/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Space Invaders" style="text-align:center;" />
+	</body>
+</html>

src/web/client/space_invaders.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Space Invaders</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>
+		<script src="../../game/global/loading/loading.js"></script>
+
+		<!-- Space Invaders : source files -->
+		<script src="../../game/mouse/space_invaders/define_variables.js"></script>
+		<script src="../../game/mouse/space_invaders/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Space Invaders" style="text-align:center;" />
+	</body>
+</html>