Fix: ES5 -> ES6 class

src/game/global/global_variables.js

@@ -22,11 +22,11 @@ const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
 
 let sessionStorageManager = new SessionStorageManager();
 {
-	if(isDebugMode()) {
+	// if(isDebugMode()) {
-		sessionStorageManager.playerName = "박지상";
+	// 	sessionStorageManager.playerName = "박지상";
-		sessionStorageManager.playerUserID = 1;
+	// 	sessionStorageManager.playerUserID = 1;
-		sessionStorageManager.playingAppName = "space_invaders";
+	// 	sessionStorageManager.playingAppName = "space_invaders";
-	}
+	// }
 	
 	console.log("playerName : " + sessionStorageManager.playerName);
 	console.log("playerUserID : " + sessionStorageManager.playerUserID);

src/game/login/login.js

@@ -1,15 +1,13 @@
 /////////////////////////////
 // Login
 
-let Login = {
+class Login {
 
-	self: {},
+	preload() {
-
-	preload: function() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	},
+	}
 
-	create: function() {
+	create() {
 		self = this;
 
 		sessionStorageManager.clear();
@@ -25,9 +23,9 @@ let Login = {
 
 		this.makeInputTypeTexts();
 		this.makeButton();
-	},
+	}
 
-	makeInputTypeTexts: function() {
+	makeInputTypeTexts() {
 		// name
 		let textX = this.game.world.centerX - 360;
 		let inputX = this.game.world.centerX + 60;
@@ -70,21 +68,21 @@ let Login = {
 
 		this.inputTextName.canvasInput.focus();
 		// this.inputTextBirthday.canvasInput.focus();
-	},
+	}
 
-	makeButton: function() {
+	makeButton() {
 		let setting = new RoundRectButtonSetting(200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
 		let startButton = new RoundRectButton(setting, "시작", this.startMenu);
 		startButton.move(game.world.centerX, game.world.centerY + 140);
-	},
+	}
 
-	startMenu: function() {
+	startMenu() {
 		sessionStorageManager.playerName = self.inputTextName.canvasInput._value;
 		let birthday = self.inputTextBirthday.canvasInput._value;
 
-		xhr = new XMLHttpRequest();
+		let xhr = new XMLHttpRequest();
 		xhr.onreadystatechange = function() {
 			// console.log("onreadystatechange : " + xhr);
 			// console.log("xhr.readyState : " + xhr.readyState);
@@ -126,20 +124,20 @@ let Login = {
 
 		// xhr.send(null);
 		*/
-	},
+	}
 
-	loginSucceeded: function(jsonData) {
+	loginSucceeded(jsonData) {
 		sessionStorageManager.playerUserID = jsonData['UserID'];
 
 		sessionStorageManager.playingAppName = "menu";
 		location.href = '../../web/client/menu_app.html';
-	},
+	}
 
-	loginFailed: function(jsonData) {
+	loginFailed(jsonData) {
 		sessionStorageManager.clear();
 
 		// show retry message
 		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
 	}
 
-}
+}

src/game/login/main.js

@@ -3,7 +3,7 @@
 
 const CONTENT_ID = "Login";
 
-var game = new Phaser.Game(
+let game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );

src/game/menu/main_menu_app.js

@@ -3,7 +3,7 @@
 
 const CONTENT_ID = "Menu";
 
-var game = new Phaser.Game(
+let game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );

src/game/menu/menu_app.js

@@ -1,13 +1,13 @@
 /////////////////////////////
 // MenuApp
 
-let MenuApp = {
+class MenuApp {
 
-	preload: function() {
+	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	},
+	}
 
-	create: function() {
+	create() {
 		this.game.stage.backgroundColor = '#4d4d4d';
 
 		// top
@@ -46,9 +46,9 @@ let MenuApp = {
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
 		// this.loadTypingStageData();
-	},
+	}
 
-	loadTypingStageData: function() {
+	loadTypingStageData() {
 		var self = this;
 
 		xhr = new XMLHttpRequest();
@@ -65,9 +65,9 @@ let MenuApp = {
 		xhr.open('GET', 'activated_stage_list.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 		xhr.send();
-	},
+	}
 
-	updateStageButton: function(jsonData) {
+	updateStageButton(jsonData) {
 		// console.log(JSON.stringify(jsonData));
 
 		for(var i = 0; i < jsonData.length; i++) {
@@ -79,9 +79,9 @@ let MenuApp = {
 				jsonData[i]["Activated"]
 			);
 		}
-	},
+	}
 
-	activateStageButton: function(stageName, isActivated) {
+	activateStageButton(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";
@@ -106,9 +106,9 @@ let MenuApp = {
 				}
 			}
 		}
-	},
+	}
 
-	startStage: function() {
+	startStage() {
 		var language = this.name.substring(0, 1) == "k" ? LANGUAGE_KOREAN : LANGUAGE_ENGLISH;
 		var level = this.name.substring(1);
 
@@ -116,6 +116,6 @@ let MenuApp = {
 		// console.log(playingStageData);
 
 		this.startState('TypingTestStage');
-	},
+	}
 
 }

src/game/mouse/space_invaders/game.js

@@ -28,6 +28,34 @@ class Game {
 		let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
 		screenBottom.printBottomCenterText(playingAppName);
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
+
+		this.countDown();
+	}
+
+	countDown() {
+		const style = { font: "bold 200px Arial", fill: "#fff",/* align: "center",*/ boundsAlignH: "center", boundsAlignV: "middle" };
+		this.countDownText = game.add.text(0, 0, "", style);
+		this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
+		this.countDownText.stroke = "#333";
+		this.countDownText.strokeThickness = 50;
+
+		this.countDownNumber = 3;
+		this.tweenCountDown();
+	}
+
+	tweenCountDown() {
+		console.log(this.countDownNumber);
+		if(this.countDownNumber === 0)
+			return;
+
+		this.countDownText.text = this.countDownNumber.toString();
+		this.countDownText.alpha = 1;
+
+		let countDownTween = game.add.tween(this.countDownText);
+		countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+		countDownTween.onComplete.add(this.tweenCountDown, this);
+
+		this.countDownNumber--;
 	}
 
 

src/game/start/main.js

@@ -3,7 +3,7 @@
 
 const CONTENT_ID = "Start";
 
-var game = new Phaser.Game(
+let game = new Phaser.Game(
 	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
 	Phaser.CANVAS, CONTENT_ID
 );

src/game/start/start.js

@@ -1,13 +1,13 @@
 /////////////////////////////
 // Start
 
-let Start = {
+class Start {
 
-	preload: function() {
+	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	},
+	}
 
-	create: function() {
+	create() {
 		this.historyRecordManager = new HistoryRecordManager();
 
 		this.game.stage.backgroundColor = '#4d4d4d';
@@ -39,25 +39,25 @@ let Start = {
 		screenBottom.printBottomRightText(sessionStorageManager.playerName);
 
 		// this.loadTypingStageData();
-	},
+	}
 
 	printHowToPlay(text) {
 		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
-		howToPlayText = game.add.text(0, 0, appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName), style);
+		let howToPlayText = game.add.text(0, 0, appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName), style);
 		howToPlayText.setTextBounds(100, 100, game.world.width - 100, 200);
 		howToPlayText.stroke = "#333";
 		howToPlayText.strokeThickness = 5;
-	},
+	}
 
-	makeStartButton: function() {
+	makeStartButton() {
 		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);
-	},
+	}
 
-	loadHistoryRecords: function() {
+	loadHistoryRecords() {
 		this.historyRecordManager.clear();
 
 		this.historyRecordManager.push(new HistoryRecordData("05/10", 15460));
@@ -65,9 +65,9 @@ let Start = {
 		this.historyRecordManager.push(new HistoryRecordData("05/12", 16460));
 		this.historyRecordManager.push(new HistoryRecordData("05/13", 15060));
 		this.historyRecordManager.push(new HistoryRecordData("05/14", 19800));
-	},
+	}
 
-	printHistoryRecords: function(historyRecords) {
+	printHistoryRecords(historyRecords) {
 		let underValue = this.historyRecordManager.underValueForGraph();
 		let upperValue = this.historyRecordManager.upperValueForGraph();
 
@@ -79,9 +79,9 @@ let Start = {
 		this.chartGraphics.lineStyle(3, 0xffd900, 1);
 		this.chartGraphics.moveTo(0, 0);
 		this.chartGraphics.lineTo(game.world.width - 200, 0);
-	},
+	}
 
-	printRecord: function(index, date, record, min, max) {
+	printRecord(index, date, record, min, max) {
 		const CHART_GAP_PX	= 180;
 		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
 
@@ -99,10 +99,10 @@ let Start = {
 		this.chartGraphics.lineStyle(50, 0xdddddd, 1);
 		this.chartGraphics.moveTo(50 + index * CHART_GAP_PX, 0);
 		this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * ( (record - min) / (max - min) ));
-	},
+	}
 
 
-	loadTypingStageData: function() {
+	loadTypingStageData() {
 		var self = this;
 
 		xhr = new XMLHttpRequest();
@@ -119,10 +119,10 @@ let Start = {
 		xhr.open('GET', 'activated_stage_list.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 		xhr.send();
-	},
+	}
 
-	startStage: function() {
+	startStage() {
 		location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html";
-	},
+	}
 
 }