Fix: restructing session manager, ES6 -> ES5

src/game/global/global_variables.js

@@ -1,9 +1,9 @@
-const LANGUAGE_KOREAN		= "korean";
+var LANGUAGE_KOREAN		= "korean";
-const LANGUAGE_ENGLISH		= "english";
+var LANGUAGE_ENGLISH		= "english";
 
-const MODE_RELEASE			= "release";
+var MODE_RELEASE			= "release";
-const MODE_DEBUG			= "debug";
+var MODE_DEBUG			= "debug";
-const runMode = MODE_RELEASE;
+var runMode = MODE_RELEASE;
 
 function isDebugMode() {
 	// console.log("debug mode ? " + runMode);
@@ -16,7 +16,7 @@ function isReleaseMode() {
 }
 
 
-const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
+var GAME_SCREEN_SIZE = { x: 1024, y: 768 }
 
 
 

src/game/lib/animal.js

@@ -1,150 +1,147 @@
-class Animal {
+function Animal(type, x, y) {
+	this.animalType = type;
 
-	constructor(type, x, y) {
+	this.sprite = null;
-		this.animalType = type;
+	this.posX = x;
+	this.posY = y;
+}
 
-		this.sprite = null;
+Animal.prototype.loadSpriteNames = function() {
-		this.posX = x;
+	let spriteNames = {};
-		this.posY = y;
-	}
 
-	loadSpriteNames() {
+	spriteNames.icon = this.species.species + Animal.SPRITE_NAMES.icon;
-		let spriteNames = {};
 
-		spriteNames.icon = this.species.species + Animal.SPRITE_NAMES.icon;
+	spriteNames.run1 = this.species.species + Animal.SPRITE_NAMES.run1;
+	spriteNames.run2 = this.species.species + Animal.SPRITE_NAMES.run2;
 
-		spriteNames.run1 = this.species.species + Animal.SPRITE_NAMES.run1;
+	return spriteNames;
-		spriteNames.run2 = this.species.species + Animal.SPRITE_NAMES.run2;
+}
 
-		return spriteNames;
+Animal.prototype.setSpecies = function(species) {
-	}
+	this.species = species;
 
-	setSpecies(species) {
+	if(this.animalType === Animal.TYPE_ICON)
-		this.species = species;
+		return;
 
-		if(this.animalType === Animal.TYPE_ICON)
+	this.setupAnimation();
-			return;
+}
 
-		this.setupAnimation();
+Animal.prototype.tweenAnimation = function(animationType) {
-	}
+	switch(animationType) {
+		case Animal.ANIMATION_TYPE_CHANGE:
+		this.sprite.width = 200;
+		this.sprite.height = 200;
+		game.add.tween(this.sprite).to( { width: 150, height: 150 }, 500, Phaser.Easing.Bounce.Out, true);
+		break;
 
-	tweenAnimation(animationType) {
+		case Animal.ANIMATION_TYPE_DAMAGE:
-		switch(animationType) {
+		this.sprite.width = 200;
-			case Animal.ANIMATION_TYPE_CHANGE:
+		game.add.tween(this.sprite).to( { width: 150 }, 500, Phaser.Easing.Bounce.In, true);
-			this.sprite.width = 200;
+		// game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Elastic.Out, true);
-			this.sprite.height = 200;
+		break;
-			game.add.tween(this.sprite).to( { width: 150, height: 150 }, 500, Phaser.Easing.Bounce.Out, true);
-			break;
-
-			case Animal.ANIMATION_TYPE_DAMAGE:
-			this.sprite.width = 200;
-			game.add.tween(this.sprite).to( { width: 150 }, 500, Phaser.Easing.Bounce.In, true);
-			// game.add.tween(this.sprite).to( { width: 50 }, 500, Phaser.Easing.Elastic.Out, true);
-			break;
-
-		}
 
 	}
 
-	setupAnimation() {
+}
-		this.spriteFrameNames = this.loadSpriteNames();
-		this.playingSpriteFrameName = this.spriteFrameNames.run1;
-		this.animationFrameID = 1;
-		this.animationSpeedSec =  1000 / this.species.runningFPS;
 
-		if(this.sprite === null) {
+Animal.prototype.setupAnimation = function() {
-			this.sprite = game.add.sprite(this.posX, this.posY, this.spriteFrameNames.run1);
+	this.spriteFrameNames = this.loadSpriteNames();
-			this.sprite.anchor.set(0.5);
+	this.playingSpriteFrameName = this.spriteFrameNames.run1;
-			this.sprite.width = 150;
+	this.animationFrameID = 1;
-			this.sprite.height = 150;
+	this.animationSpeedSec =  1000 / this.species.runningFPS;
-		}
 
-		this.stopAnimation();
+	if(this.sprite === null) {
-		this.animateionUpdate();
+		this.sprite = game.add.sprite(this.posX, this.posY, this.spriteFrameNames.run1);
+		this.sprite.anchor.set(0.5);
+		this.sprite.width = 150;
+		this.sprite.height = 150;
 	}
 
-	startAnimation() {
+	this.stopAnimation();
-		if(this.timerEvent === null)
+	this.animateionUpdate();
-			this.timerEvent = game.time.events.loop(this.animationSpeedSec, this.animateionUpdate, this);
+}
+
+Animal.prototype.startAnimation = function() {
+	if(this.timerEvent === null)
+		this.timerEvent = game.time.events.loop(this.animationSpeedSec, this.animateionUpdate, this);
+}
+
+Animal.prototype.animateionUpdate = function() {
+	this.animationFrameID = 1 - this.animationFrameID;
+
+	if(this.animationFrameID === 0) {
+		this.sprite.loadTexture(this.spriteFrameNames.run2);
+	} else {
+		this.sprite.loadTexture(this.spriteFrameNames.run1);
+	}
+}
+
+Animal.prototype.stopAnimation = function() {
+	if(this.timerEvent !== null) {
+		game.time.events.remove(this.timerEvent);
+		this.timerEvent = null;
+	}
+}
+
+
+Animal.animalLevelIDByRecord = function(record, gameType) {
+	for(let i = Animal.SPECIES_DATA.length - 1; i > 0; i--) {
+		if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType))
+			return i;
 	}
 
-	animateionUpdate() {
+	return 0;
-		this.animationFrameID = 1 - this.animationFrameID;
+}
 
-		if(this.animationFrameID === 0) {
+Animal.typingCount = function(speciesData, gameType) {
-			this.sprite.loadTexture(this.spriteFrameNames.run2);
+	if(gameType === Animal.TYPE_PRACTICE)
-		} else {
+		return speciesData.practiceTypingCount;
-			this.sprite.loadTexture(this.spriteFrameNames.run1);
+	else
-		}
+		return speciesData.testTypingCount;
-	}
+}
 
-	stopAnimation() {
+Animal.loadResources = function() {
-		if(this.timerEvent !== null) {
+	game.load.image('snail_shadow',	'../../../resources/image/character/animal/snail/shadow.png');
-			game.time.events.remove(this.timerEvent);
-			this.timerEvent = null;
-		}
-	}
 
+	game.load.image('snail_icon',	'../../../resources/image/character/animal/snail/run2.png');
+	game.load.image('snail_run1',	'../../../resources/image/character/animal/snail/run1.png');
+	game.load.image('snail_run2',	'../../../resources/image/character/animal/snail/run2.png');
 
-	static animalLevelIDByRecord(record, gameType) {
+	game.load.image('turtle_icon',	'../../../resources/image/character/animal/turtle/run2.png');
-		for(let i = Animal.SPECIES_DATA.length - 1; i > 0; i--) {
+	game.load.image('turtle_run1',	'../../../resources/image/character/animal/turtle/run1.png');
-			if(record >= this.typingCount(Animal.SPECIES_DATA[i], gameType))
+	game.load.image('turtle_run2',	'../../../resources/image/character/animal/turtle/run2.png');
-				return i;
-		}
 
-		return 0;
+	game.load.image('cat_icon',	'../../../resources/image/character/animal/cat/run2.png');
-	}
+	game.load.image('cat_run1',	'../../../resources/image/character/animal/cat/run1.png');
+	game.load.image('cat_run2',	'../../../resources/image/character/animal/cat/run2.png');
 
-	static typingCount(speciesData, gameType) {
+	game.load.image('lion_icon',	'../../../resources/image/character/animal/lion/run2.png');
-		if(gameType === Animal.TYPE_PRACTICE)
+	game.load.image('lion_run1',	'../../../resources/image/character/animal/lion/run1.png');
-			return speciesData.practiceTypingCount;
+	game.load.image('lion_run2',	'../../../resources/image/character/animal/lion/run2.png');
-		else
-			return speciesData.testTypingCount;
-	}
 
-	static loadResources() {
+	game.load.image('rabbit_icon',	'../../../resources/image/character/animal/rabbit/run2.png');
-		game.load.image('snail_shadow',	'../../../resources/image/character/animal/snail/shadow.png');
+	game.load.image('rabbit_run1',	'../../../resources/image/character/animal/rabbit/run1.png');
+	game.load.image('rabbit_run2',	'../../../resources/image/character/animal/rabbit/run2.png');
 
-		game.load.image('snail_icon',	'../../../resources/image/character/animal/snail/run2.png');
+	game.load.image('ostrich_icon',	'../../../resources/image/character/animal/ostrich/run2.png');
-		game.load.image('snail_run1',	'../../../resources/image/character/animal/snail/run1.png');
+	game.load.image('ostrich_run1',	'../../../resources/image/character/animal/ostrich/run1.png');
-		game.load.image('snail_run2',	'../../../resources/image/character/animal/snail/run2.png');
+	game.load.image('ostrich_run2',	'../../../resources/image/character/animal/ostrich/run2.png');
 
-		game.load.image('turtle_icon',	'../../../resources/image/character/animal/turtle/run2.png');
+	game.load.image('horse_icon',	'../../../resources/image/character/animal/horse/run2.png');
-		game.load.image('turtle_run1',	'../../../resources/image/character/animal/turtle/run1.png');
+	game.load.image('horse_run1',	'../../../resources/image/character/animal/horse/run1.png');
-		game.load.image('turtle_run2',	'../../../resources/image/character/animal/turtle/run2.png');
+	game.load.image('horse_run2',	'../../../resources/image/character/animal/horse/run2.png');
 
-		game.load.image('cat_icon',	'../../../resources/image/character/animal/cat/run2.png');
+	game.load.image('dog_icon',	'../../../resources/image/character/animal/dog/run2.png');
-		game.load.image('cat_run1',	'../../../resources/image/character/animal/cat/run1.png');
+	game.load.image('dog_run1',	'../../../resources/image/character/animal/dog/run1.png');
-		game.load.image('cat_run2',	'../../../resources/image/character/animal/cat/run2.png');
+	game.load.image('dog_run2',	'../../../resources/image/character/animal/dog/run2.png');
 
-		game.load.image('lion_icon',	'../../../resources/image/character/animal/lion/run2.png');
+	game.load.image('cheetah_icon',	'../../../resources/image/character/animal/cheetah/run2.png');
-		game.load.image('lion_run1',	'../../../resources/image/character/animal/lion/run1.png');
+	game.load.image('cheetah_run1',	'../../../resources/image/character/animal/cheetah/run1.png');
-		game.load.image('lion_run2',	'../../../resources/image/character/animal/lion/run2.png');
+	game.load.image('cheetah_run2',	'../../../resources/image/character/animal/cheetah/run2.png');
 
-		game.load.image('rabbit_icon',	'../../../resources/image/character/animal/rabbit/run2.png');
+	game.load.image('eagle_icon',	'../../../resources/image/character/animal/eagle/run2.png');
-		game.load.image('rabbit_run1',	'../../../resources/image/character/animal/rabbit/run1.png');
+	game.load.image('eagle_run1',	'../../../resources/image/character/animal/eagle/run1.png');
-		game.load.image('rabbit_run2',	'../../../resources/image/character/animal/rabbit/run2.png');
+	game.load.image('eagle_run2',	'../../../resources/image/character/animal/eagle/run2.png');
-
-		game.load.image('ostrich_icon',	'../../../resources/image/character/animal/ostrich/run2.png');
-		game.load.image('ostrich_run1',	'../../../resources/image/character/animal/ostrich/run1.png');
-		game.load.image('ostrich_run2',	'../../../resources/image/character/animal/ostrich/run2.png');
-
-		game.load.image('horse_icon',	'../../../resources/image/character/animal/horse/run2.png');
-		game.load.image('horse_run1',	'../../../resources/image/character/animal/horse/run1.png');
-		game.load.image('horse_run2',	'../../../resources/image/character/animal/horse/run2.png');
-
-		game.load.image('dog_icon',	'../../../resources/image/character/animal/dog/run2.png');
-		game.load.image('dog_run1',	'../../../resources/image/character/animal/dog/run1.png');
-		game.load.image('dog_run2',	'../../../resources/image/character/animal/dog/run2.png');
-
-		game.load.image('cheetah_icon',	'../../../resources/image/character/animal/cheetah/run2.png');
-		game.load.image('cheetah_run1',	'../../../resources/image/character/animal/cheetah/run1.png');
-		game.load.image('cheetah_run2',	'../../../resources/image/character/animal/cheetah/run2.png');
-
-		game.load.image('eagle_icon',	'../../../resources/image/character/animal/eagle/run2.png');
-		game.load.image('eagle_run1',	'../../../resources/image/character/animal/eagle/run1.png');
-		game.load.image('eagle_run2',	'../../../resources/image/character/animal/eagle/run2.png');
-	}
 }
 
 
@@ -159,16 +156,16 @@ Animal.ANIMATION_TYPE_DAMAGE	= 1;
 
 
 Animal.SPECIES_DATA = [
-	{ "species" : "snail", "runningFPS" : 1.1, "practiceTypingCount" : 0, "testTypingCount" : 0 },
+{ "species" : "snail", "runningFPS" : 1.1, "practiceTypingCount" : 0, "testTypingCount" : 0 },
-	{ "species" : "turtle", "runningFPS" : 2.2, "practiceTypingCount" : 5, "testTypingCount" : 20 },
+{ "species" : "turtle", "runningFPS" : 2.2, "practiceTypingCount" : 5, "testTypingCount" : 20 },
-	{ "species" : "cat", "runningFPS" : 3.3, "practiceTypingCount" : 10, "testTypingCount" : 50 },
+{ "species" : "cat", "runningFPS" : 3.3, "practiceTypingCount" : 10, "testTypingCount" : 50 },
-	{ "species" : "lion", "runningFPS" : 4.4, "practiceTypingCount" : 15, "testTypingCount" : 100 },
+{ "species" : "lion", "runningFPS" : 4.4, "practiceTypingCount" : 15, "testTypingCount" : 100 },
-	{ "species" : "rabbit", "runningFPS" : 5.5, "practiceTypingCount" : 20, "testTypingCount" : 200 },
+{ "species" : "rabbit", "runningFPS" : 5.5, "practiceTypingCount" : 20, "testTypingCount" : 200 },
-	{ "species" : "ostrich", "runningFPS" : 7.7, "practiceTypingCount" : 25, "testTypingCount" : 300 },
+{ "species" : "ostrich", "runningFPS" : 7.7, "practiceTypingCount" : 25, "testTypingCount" : 300 },
-	{ "species" : "horse", "runningFPS" : 9.9, "practiceTypingCount" : 30, "testTypingCount" : 400 },
+{ "species" : "horse", "runningFPS" : 9.9, "practiceTypingCount" : 30, "testTypingCount" : 400 },
-	{ "species" : "dog", "runningFPS" : 12.2, "practiceTypingCount" : 35, "testTypingCount" : 500 },
+{ "species" : "dog", "runningFPS" : 12.2, "practiceTypingCount" : 35, "testTypingCount" : 500 },
-	{ "species" : "cheetah", "runningFPS" : 16, "practiceTypingCount" : 40, "testTypingCount" : 600 },
+{ "species" : "cheetah", "runningFPS" : 16, "practiceTypingCount" : 40, "testTypingCount" : 600 },
-	{ "species" : "eagle", "runningFPS" : 20, "practiceTypingCount" : 50, "testTypingCount" : 700 }
+{ "species" : "eagle", "runningFPS" : 20, "practiceTypingCount" : 50, "testTypingCount" : 700 }
 ];
 
 Animal.SPRITE_NAMES = {

src/game/lib/announce_box.js

@@ -1,52 +1,45 @@
-/////////////////////////////
+function AnnounceBox(x, y) {
-// Chart
+	this.posX = x;
+	this.posY = y;
+}
 
-class AnnounceBox {
+AnnounceBox.prototype.drawText = function(posX, posY, text) {
+	const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
 
-	constructor(x, y) {
+	let textObject = game.add.text(
-		this.posX = x;
+		posX, posY,
-		this.posY = y;
+		text, style
-	}
+	);
+	textObject.anchor.set(0.5);
+	textObject.stroke = "#333";
+	textObject.strokeThickness = 3;
 
-	drawText(posX, posY, text) {
+	return textObject;
-		const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+}
 
-		let textObject = game.add.text(
+AnnounceBox.prototype.getFontStyle = function() {
-			posX, posY,
+	return { font: "32px Arial", fill: "#fff" };
-			text, style
+}
-		);
-		textObject.anchor.set(0.5);
-		textObject.stroke = "#333";
-		textObject.strokeThickness = 3;
 
-		return textObject;
+AnnounceBox.prototype.drawBox = function(text) {
-	}
+	this.graphics = game.add.graphics(this.posX, this.posY);
+	this.graphics.alpha = 0.8;
 
-	getFontStyle() {
+	this.graphics.beginFill(0x303030);
-		return { font: "32px Arial", fill: "#fff" };
+	this.graphics.lineStyle(4, 0x880000, 1);
-	}
+	this.graphics.moveTo(0, -190);
+	this.graphics.lineTo(game.world.width / 2, -170);
+	this.graphics.lineTo(game.world.width - this.posX * 2, -190);
+	this.graphics.lineTo(game.world.width - this.posX * 2, 50);
+	this.graphics.lineTo(game.world.width / 2, 30);
+	this.graphics.lineTo(0, 50);
+	this.graphics.endFill();
 
-	drawBox(text) {
+	let announceText = this.drawText(
-		this.graphics = game.add.graphics(this.posX, this.posY);
+		game.world.width / 2, this.posY - 75,
-		this.graphics.alpha = 0.8;
+		text
-
+	);
-		this.graphics.beginFill(0x303030);
+	announceText.addColor("#ff0000", 0);
-		this.graphics.lineStyle(4, 0x880000, 1);
+	announceText.stroke = "#330000";
-		this.graphics.moveTo(0, -190);
-		this.graphics.lineTo(game.world.width / 2, -170);
-		this.graphics.lineTo(game.world.width - this.posX * 2, -190);
-		this.graphics.lineTo(game.world.width - this.posX * 2, 50);
-		this.graphics.lineTo(game.world.width / 2, 30);
-		this.graphics.lineTo(0, 50);
-		this.graphics.endFill();
-
-		let announceText = this.drawText(
-			game.world.width / 2, this.posY - 75,
-			text
-		);
-		announceText.addColor("#ff0000", 0);
-		announceText.stroke = "#330000";
-
-	}
 
 }

src/game/lib/app_info_manager.js

@@ -1,77 +1,69 @@
-class AppInfo {
+function AppInfo(appID, appName, koreanName, howToPlay) {
-
+	this.appID = appID;
-	constructor(appID, appName, koreanName, howToPlay) {
+	this.appName = appName;
-		this.appID = appID;
-		this.appName = appName;
-
-		this.koreanName = koreanName;
-		this.isActivated = false;
-		this.howToPlay = howToPlay;
-	}
 
+	this.koreanName = koreanName;
+	this.isActivated = false;
+	this.howToPlay = howToPlay;
 }
 
 
-class AppInfoManager {
+function AppInfoManager() {
-
+	this.appInfoMap = new Map();
-	constructor() {
-		this.appInfoMap = new Map();
-
-		this.registerAppInfoList();
-	}
-
-	registerAppInfoList() {
-		// menu
-		this.registerAppInfo(new AppInfo("test", "테스트", ""));
-		this.registerAppInfo(new AppInfo("login", "로그인", ""));
-		this.registerAppInfo(new AppInfo("menu", "메뉴", ""));
-
-		// typing
-		this.registerAppInfo(new AppInfo("korean_basic", "기본 자리", ""));
-		this.registerAppInfo(new AppInfo("korean_left_upper", "왼손 윗글쇠", ""));
-		this.registerAppInfo(new AppInfo("korean_second_finger", "검지 글쇠", ""));
-		this.registerAppInfo(new AppInfo("korean_right_upper", "오른손 윗글쇠", ""));
-		this.registerAppInfo(new AppInfo("korean_left_lower", "왼손 밑글쇠", ""));
-		this.registerAppInfo(new AppInfo("korean_right_lower", "오른손 밑글쇠", ""));
-		this.registerAppInfo(new AppInfo("korean_left_upper_double", "쌍자음", ""));
-		this.registerAppInfo(new AppInfo("korean_right_upper_double", "쌍모음", ""));
-
-		this.registerAppInfo(new AppInfo("english_basic", "기본 자리", ""));
-		this.registerAppInfo(new AppInfo("english_left_upper", "왼손 윗글쇠", ""));
-		this.registerAppInfo(new AppInfo("english_second_finger", "검지 글쇠", ""));
-		this.registerAppInfo(new AppInfo("english_right_upper", "오른손 윗글쇠", ""));
-		this.registerAppInfo(new AppInfo("english_left_lower", "왼손 밑글쇠", ""));
-		this.registerAppInfo(new AppInfo("english_right_lower", "오른손 밑글쇠", ""));
-
-		// mouse
-		this.registerAppInfo(new AppInfo("space_invaders", "외계인 침공",
-			"외계인이 나타났다!\n마우스 왼쪽 버튼으로\n외계인을 클릭해서 물리쳐 주세요."
-		));
-		this.registerAppInfo(new AppInfo("card_matching", "카드 짝 맞추기",
-			"외계인이 나타났다 사라집니다.\n\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n\n물리쳐 주세요."
-		));
-	}
-
-	setHowToPlay(appName, text) {
-		this.appInfoMap[appName].howToPlay = text;
-	}
-
-	registerAppInfo(appInfo) {
-		return this.appInfoMap[appInfo.appName] = appInfo;
-	}
-
-	getAppkoreanName(appName) {
-		if(appName === null)
-			return "";
-
-		return this.appInfoMap[appName].koreanName;
-	}
-
-	getHowToPlayText(appName) {
-		if(appName === null)
-			return "";
-
-		return this.appInfoMap[appName].howToPlay;
-	}
 
+	this.registerAppInfoList();
+}
+
+AppInfoManager.prototype.registerAppInfoList = function() {
+	// menu
+	this.registerAppInfo(new AppInfo("test", "테스트", ""));
+	this.registerAppInfo(new AppInfo("login", "로그인", ""));
+	this.registerAppInfo(new AppInfo("menu", "메뉴", ""));
+
+	// typing
+	this.registerAppInfo(new AppInfo("korean_basic", "기본 자리", ""));
+	this.registerAppInfo(new AppInfo("korean_left_upper", "왼손 윗글쇠", ""));
+	this.registerAppInfo(new AppInfo("korean_second_finger", "검지 글쇠", ""));
+	this.registerAppInfo(new AppInfo("korean_right_upper", "오른손 윗글쇠", ""));
+	this.registerAppInfo(new AppInfo("korean_left_lower", "왼손 밑글쇠", ""));
+	this.registerAppInfo(new AppInfo("korean_right_lower", "오른손 밑글쇠", ""));
+	this.registerAppInfo(new AppInfo("korean_left_upper_double", "쌍자음", ""));
+	this.registerAppInfo(new AppInfo("korean_right_upper_double", "쌍모음", ""));
+
+	this.registerAppInfo(new AppInfo("english_basic", "기본 자리", ""));
+	this.registerAppInfo(new AppInfo("english_left_upper", "왼손 윗글쇠", ""));
+	this.registerAppInfo(new AppInfo("english_second_finger", "검지 글쇠", ""));
+	this.registerAppInfo(new AppInfo("english_right_upper", "오른손 윗글쇠", ""));
+	this.registerAppInfo(new AppInfo("english_left_lower", "왼손 밑글쇠", ""));
+	this.registerAppInfo(new AppInfo("english_right_lower", "오른손 밑글쇠", ""));
+
+	// mouse
+	this.registerAppInfo(new AppInfo("space_invaders", "외계인 침공",
+		"외계인이 나타났다!\n마우스 왼쪽 버튼으로\n외계인을 클릭해서 물리쳐 주세요."
+	));
+	this.registerAppInfo(new AppInfo("card_matching", "카드 짝 맞추기",
+		"외계인이 나타났다 사라집니다.\n\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n\n물리쳐 주세요."
+	));
+}
+
+AppInfoManager.prototype.setHowToPlay = function(appName, text) {
+	this.appInfoMap[appName].howToPlay = text;
+}
+
+AppInfoManager.prototype.registerAppInfo = function(appInfo) {
+	return this.appInfoMap[appInfo.appName] = appInfo;
+}
+
+AppInfoManager.prototype.getAppkoreanName = function(appName) {
+	if(appName === null)
+		return "";
+
+	return this.appInfoMap[appName].koreanName;
+}
+
+AppInfoManager.prototype.getHowToPlayText = function(appName) {
+	if(appName === null)
+		return "";
+
+	return this.appInfoMap[appName].howToPlay;
 }

src/game/lib/button/game_app_button.js

@@ -79,9 +79,9 @@ function GameAppButton(x, y, type, iconName, buttonText, appInfo) {
 
 
 GameAppButton.prototype.clickEvent = function() {
-	sessionStorageManager.getPlayingAppID() = this.appInfo.AppID;
+	sessionStorageManager.setPlayingAppID(this.appInfo.AppID);
-	sessionStorageManager.getPlayingAppName() = this.appInfo.AppName;
+	sessionStorageManager.setPlayingAppName(this.appInfo.AppName);
-	sessionStorageManager.getPlayingAppKoreanName() = this.appInfo.KoreanName;
+	sessionStorageManager.setPlayingAppKoreanName(this.appInfo.KoreanName);
 
 	location.href = '../../web/client/start.html';
 }

src/game/lib/chart.js

@@ -1,62 +1,56 @@
-/////////////////////////////
+function Chart() {
-// Chart
+	this.chartGraphics = game.add.graphics(0, 0);
-
-class Chart {
-
-	constructor() {
-		this.chartGraphics = game.add.graphics(0, 0);
-	}
-
-	printChartBaseLine() {
-		this.chartGraphics.lineStyle(3, 0xffd900, 1);
-		this.chartGraphics.moveTo(100, Chart.CHART_LINE_Y);
-		this.chartGraphics.lineTo(game.world.width - 100, Chart.CHART_LINE_Y);
-	}
-
-	drawRecordGraph(index, date, bestRecord, min, max) {
-		let reverseIndex = (Chart.CHART_COUNT - 1) - index;
-		let posX = Chart.CHART_LINE_START_X + Chart.CHART_GRAPH_OFFSET_X + reverseIndex * Chart.CHART_GAP_PX;
-		let posY = Chart.CHART_LINE_Y;
-
-		this.drawText(
-			posX, posY + Chart.CHART_DATE_OFFSET_Y,
-			date === "-" ? "-" : StringUtil.printMonthDay(date)
-		);
-
-		if(bestRecord === "")
-			return;
-
-		this.drawText(
-			posX, posY - Chart.CHART_HEIGHT - Chart.CHART_RECORD_OFFSET_Y,
-			StringUtil.getRecordTextWithoutUnit(bestRecord) + StringUtil.getScoreUnit(sessionStorageManager.playingAppID),
-		);
-
-		// chart
-		this.chartGraphics.lineStyle(50, 0xdddddd, 1);
-		this.chartGraphics.moveTo(posX, posY);
-		this.chartGraphics.lineTo(posX, posY - Chart.CHART_HEIGHT * ( (bestRecord - min) / (max - min) ));
-	}
-
-	drawText(posX, posY, text) {
-		const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
-
-		let textObject = game.add.text(
-			posX, posY,
-			text, style
-		);
-		textObject.anchor.set(0.5);
-		textObject.stroke = "#333";
-		textObject.strokeThickness = 3;
-
-		return textObject;
-	}
-
-	getFontStyle() {
-		return { font: "32px Arial", fill: "#fff" };
-	}
-
 }
 
+Chart.prototype.printChartBaseLine = function() {
+	this.chartGraphics.lineStyle(3, 0xffd900, 1);
+	this.chartGraphics.moveTo(100, Chart.CHART_LINE_Y);
+	this.chartGraphics.lineTo(game.world.width - 100, Chart.CHART_LINE_Y);
+}
+
+Chart.prototype.drawRecordGraph = function(index, date, bestRecord, min, max) {
+	var reverseIndex = (Chart.CHART_COUNT - 1) - index;
+	var posX = Chart.CHART_LINE_START_X + Chart.CHART_GRAPH_OFFSET_X + reverseIndex * Chart.CHART_GAP_PX;
+	var posY = Chart.CHART_LINE_Y;
+
+	this.drawText(
+		posX, posY + Chart.CHART_DATE_OFFSET_Y,
+		date === "-" ? "-" : StringUtil.printMonthDay(date)
+	);
+
+	if(bestRecord === "")
+		return;
+
+	this.drawText(
+		posX, posY - Chart.CHART_HEIGHT - Chart.CHART_RECORD_OFFSET_Y,
+		StringUtil.getRecordTextWithoutUnit(bestRecord) + StringUtil.getScoreUnit(sessionStorageManager.playingAppID),
+	);
+
+	// chart
+	this.chartGraphics.lineStyle(50, 0xdddddd, 1);
+	this.chartGraphics.moveTo(posX, posY);
+	this.chartGraphics.lineTo(posX, posY - Chart.CHART_HEIGHT * ( (bestRecord - min) / (max - min) ));
+}
+
+Chart.prototype.drawText = function(posX, posY, text) {
+	const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+
+	var textObject = game.add.text(
+		posX, posY,
+		text, style
+	);
+	textObject.anchor.set(0.5);
+	textObject.stroke = "#333";
+	textObject.strokeThickness = 3;
+
+	return textObject;
+}
+
+Chart.prototype.getFontStyle = function() {
+	return { font: "32px Arial", fill: "#fff" };
+}
+
+
 Chart.CHART_COUNT			= 7;
 
 Chart.CHART_LINE_START_X	= 100;

src/game/lib/date_util.js

@@ -1,14 +1,13 @@
-class DateUtil {
+function DateUtil() {
-
+}
-	static getYYYYMMDD(date) {
+
-		// return date.toISOString().slice(0,10);
+DateUtil.getYYYYMMDD = function(date) {
-		return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+	// return date.toISOString().slice(0,10);
-	}
+	return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
-
+}
-	static getHHMMSS(date) {
+
-		return StringUtil.getNumberStartWithZero(date.getHours(), 2) + ":"
+DateUtil.getHHMMSS = function(date) {
-			+ StringUtil.getNumberStartWithZero(date.getMinutes(), 2) + ":"
+	return StringUtil.getNumberStartWithZero(date.getHours(), 2) + ":"
-			+ StringUtil.getNumberStartWithZero(date.getSeconds(), 2);
+		+ StringUtil.getNumberStartWithZero(date.getMinutes(), 2) + ":"
-	}
+		+ StringUtil.getNumberStartWithZero(date.getSeconds(), 2);
-
 }

src/game/lib/db_connect_manager.js

@@ -1,458 +1,453 @@
-class DBConnectManager {
+function DBConnectManager() {
+	this.path = this.getPath();
+	this.directoryName = this.getDirectoryName(this.path);
+	this.phpPath = this.getPHPPath(this.directoryName);
 
-	constructor() {
+	this.maestroID = 0;
-		this.path = this.getPath();
+	this.playerID = 0;
-		this.directoryName = this.getDirectoryName(this.path);
+	this.appName = "";
-		this.phpPath = this.getPHPPath(this.directoryName);
+	this.dateAndTime = null;
+}
 
-		this.maestroID = 0;
+DBConnectManager.prototype.setMaestroID = function(maestroID) {
-		this.playerID = 0;
+	this.maestroID = maestroID;
-		this.appName = "";
+}
-		this.dateAndTime = null;
-	}
 
-	setMaestroID(maestroID) {
+DBConnectManager.prototype.setPlayerID = function(playerID) {
-		this.maestroID = maestroID;
+	this.playerID = playerID;
-	}
+}
 
-	setPlayerID(playerID) {
+DBConnectManager.prototype.setAppName = function(appName) {
-		this.playerID = playerID;
+	this.appName = appName;
-	}
+}
 
-	setAppName(appName) {
+DBConnectManager.prototype.setDateTime = function(date, time) {
-		this.appName = appName;
+	this.dateAndTime = date + time;
-	}
+}
 
-	setDateTime(date, time) {
+DBConnectManager.prototype.resetDateTime = function() {
-		this.dateAndTime = date + time;
+	this.dateAndTime = null;
-	}
+}
 
-	resetDateTime() {
+DBConnectManager.prototype.getPath = function() {
-		this.dateAndTime = null;
+	return window.location.pathname;
-	}
+}
 
-	getPath() {
+DBConnectManager.prototype.getDirectoryName = function(path) {
-		return window.location.pathname;
+	var pathAndFileNames = path.split("/");
-	}
+	return pathAndFileNames[pathAndFileNames.length - 2];
+}
 
-	getDirectoryName(path) {
+DBConnectManager.prototype.getPHPPath = function(directoryName) {
-		let pathAndFileNames = path.split("/");
+	if(directoryName === "test")	// mouse_typing/test/
-		return pathAndFileNames[pathAndFileNames.length - 2];
+		return "../src/web/";
-	}
+	else	// mousetyping/src/web/client/
+		return "../";
+}
 
-	getPHPPath(directoryName) {
+DBConnectManager.prototype.requestCheckPlayerLogin = function(maestroName, playerName, enterCode, onSucceededListener, onFailedListener) {
-		if(directoryName === "test")	// mouse_typing/test/
+	var xhr = new XMLHttpRequest();
-			return "../src/web/";
+	xhr.open("POST", this.phpPath + "server/player/login.php", true);
-		else	// mousetyping/src/web/client/
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-			return "../";
+	xhr.onreadystatechange = function() {
-	}
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
 
-	requestCheckPlayerLogin(maestroName, playerName, enterCode, onSucceededListener, onFailedListener) {
+			if(replyJSON != null && replyJSON["PlayerID"] != null)
-		let xhr = new XMLHttpRequest();
+				onSucceededListener(replyJSON);
-		xhr.open("POST", this.phpPath + "server/player/login.php", true);
+			else
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+				onFailedListener(replyJSON);
-		xhr.onreadystatechange = function() {
+		}
-			if(xhr.readyState == 4 && xhr.status == 200) {
+	};
-				let replyJSON = JSON.parse(xhr.responseText);
+	xhr.send("maestro_name=" + maestroName + "&name=" + playerName + "&enter_code=" + enterCode);
+}
 
-				if(replyJSON != null && replyJSON["PlayerID"] != null)
+/*
-					onSucceededListener(replyJSON);
+DBConnectManager.prototype.requestAppList = function(maestroID, onSucceededListener, onFailedListener) {
-				else
+	var xhr = new XMLHttpRequest();
-					onFailedListener(replyJSON);
+	xhr.open("POST", this.phpPath + "server/app/app_data.php", true);
-			}
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		};
+	xhr.onreadystatechange = function() {
-		xhr.send("maestro_name=" + maestroName + "&name=" + playerName + "&enter_code=" + enterCode);
+		if(xhr.readyState == 4 && xhr.status == 200) {
-	}
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send("maestro_id=" + maestroID);
+}
+
+DBConnectManager.prototype.requestActiveAppList = function(maestroID, onSucceededListener, onFailedListener) {
+	var xhr = new XMLHttpRequest();
+	xhr.open("POST", this.phpPath + "server/app/active_app.php", true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send("maestro_id=" + maestroID);
+}
+*/
+
+DBConnectManager.prototype.requestMenuAppList = function(maestroID, onSucceededListener, onFailedListener) {
+	var xhr = new XMLHttpRequest();
+	xhr.open("POST", this.phpPath + "server/app/menu_active_app_list.php", true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send("maestro_id=" + maestroID);
+}
+
+DBConnectManager.prototype.requestTypingPracticeAppList = function(maestroID, playerID, onSucceededListener, onFailedListener) {
+	var xhr = new XMLHttpRequest();
+	xhr.open("POST", this.phpPath + "server/app/menu_active_typing_practice_app_list.php", true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send("maestro_id=" + maestroID + "&player_id=" + playerID);
+}
+
+DBConnectManager.prototype.requestTypingTestAppList = function(maestroID, playerID, onSucceededListener, onFailedListener) {
+	var xhr = new XMLHttpRequest();
+	xhr.open("POST", this.phpPath + "server/app/menu_active_typing_test_app_list.php", true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send("maestro_id=" + maestroID + "&player_id=" + playerID);
+}
+
+DBConnectManager.prototype.requestPlayerHistory = function(maestroID, date, listener) {
+	var historyRecordManager = new HistoryRecordManager();
 
 	/*
-	requestAppList(maestroID, onSucceededListener, onFailedListener) {
+	if(isDebugMode()) {
-		let xhr = new XMLHttpRequest();
+		this.loadTempPlayerHistory(historyRecordManager);
-		xhr.open("POST", this.phpPath + "server/app/app_data.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
 
-				if(replyJSON != null)
+		if(listener !== null)
-					onSucceededListener(replyJSON);
+			listener(historyRecordManager);
-				else
-					onFailedListener(replyJSON);
-			}
-		};
-		xhr.send("maestro_id=" + maestroID);
-	}
 
-	requestActiveAppList(maestroID, onSucceededListener, onFailedListener) {
+		return;
-		let xhr = new XMLHttpRequest();
-		xhr.open("POST", this.phpPath + "server/app/active_app.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
-
-				if(replyJSON != null)
-					onSucceededListener(replyJSON);
-				else
-					onFailedListener(replyJSON);
-			}
-		};
-		xhr.send("maestro_id=" + maestroID);
 	}
 	*/
 
-	requestMenuAppList(maestroID, onSucceededListener, onFailedListener) {
+	var self = this;
-		let xhr = new XMLHttpRequest();
-		xhr.open("POST", this.phpPath + "server/app/menu_active_app_list.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
 
-				if(replyJSON != null)
+	var xhr = new XMLHttpRequest();
-					onSucceededListener(replyJSON);
+	xhr.open("POST", this.phpPath + "server/record/history_record.php", true);
-				else
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-					onFailedListener(replyJSON);
+	xhr.onreadystatechange = function() {
-			}
+		if(xhr.readyState == 4 && xhr.status == 200) {
-		};
+			var replyJSON = JSON.parse(xhr.responseText);
-		xhr.send("maestro_id=" + maestroID);
-	}
 
-	requestTypingPracticeAppList(maestroID, playerID, onSucceededListener, onFailedListener) {
+			if(replyJSON != null)
-		let xhr = new XMLHttpRequest();
+				listener(self.parseJSONtoHistoryRecord(replyJSON));
-		xhr.open("POST", this.phpPath + "server/app/menu_active_typing_practice_app_list.php", true);
+			else
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+				onFailedListener(replyJSON);
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
-
-				if(replyJSON != null)
-					onSucceededListener(replyJSON);
-				else
-					onFailedListener(replyJSON);
-			}
-		};
-		xhr.send("maestro_id=" + maestroID + "&player_id=" + playerID);
-	}
-
-	requestTypingTestAppList(maestroID, playerID, onSucceededListener, onFailedListener) {
-		let xhr = new XMLHttpRequest();
-		xhr.open("POST", this.phpPath + "server/app/menu_active_typing_test_app_list.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
-
-				if(replyJSON != null)
-					onSucceededListener(replyJSON);
-				else
-					onFailedListener(replyJSON);
-			}
-		};
-		xhr.send("maestro_id=" + maestroID + "&player_id=" + playerID);
-	}
-
-	requestPlayerHistory(maestroID, date, listener) {
-		let historyRecordManager = new HistoryRecordManager();
-
-		/*
-		if(isDebugMode()) {
-			this.loadTempPlayerHistory(historyRecordManager);
-
-			if(listener !== null)
-				listener(historyRecordManager);
-
-			return;
 		}
-		*/
+	};
+	var params = "MaestroID=" + sessionStorageManager.getMaestroID()
+		+ "&AppID=" + sessionStorageManager.getPlayingAppID()
+		+ "&PlayerID=" + sessionStorageManager.getPlayerID()
+		+ "&Date=" + date;
+	xhr.send(params);
+}
 
-		let self = this;
+DBConnectManager.prototype.parseJSONtoHistoryRecord = function(json) {
-
+	var historyRecordManager = new HistoryRecordManager();
-		let xhr = new XMLHttpRequest();
-		xhr.open("POST", this.phpPath + "server/record/history_record.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
-
-				if(replyJSON != null)
-					listener(self.parseJSONtoHistoryRecord(replyJSON));
-				else
-					onFailedListener(replyJSON);
-			}
-		};
-		let params = "MaestroID=" + sessionStorageManager.maestroID
-			+ "&AppID=" + sessionStorageManager.playingAppID
-			+ "&PlayerID=" + sessionStorageManager.playerID
-			+ "&Date=" + date;
-		xhr.send(params);
-	}
-
-	parseJSONtoHistoryRecord(json) {
-		let historyRecordManager = new HistoryRecordManager();
-
-		if(typeof json === "undefined")
-			return historyRecordManager;
-
-		if(typeof json.history === "undefined")
-			return historyRecordManager;
-
-		let count = json.history.length;
-		for(let i = 0; i < count; i++) {
-			let record = new HistoryRecord(
-				json.history[i]["Date"],
-				json.history[i]["AppName"],
-				json.history[i]["HighScore"]
-			);
-			historyRecordManager.push(record);
-		}
 
+	if(typeof json === "undefined")
 		return historyRecordManager;
 
+	if(typeof json.history === "undefined")
+		return historyRecordManager;
+
+	var count = json.history.length;
+	for(var i = 0; i < count; i++) {
+		var record = new HistoryRecord(
+			json.history[i]["Date"],
+			json.history[i]["AppName"],
+			json.history[i]["HighScore"]
+		);
+		historyRecordManager.push(record);
+	}
+
+	return historyRecordManager;
+
 /*
-		var startIndex = 0;
+	var startIndex = 0;
-		var endIndex = jsonRankingList.length;
+	var endIndex = jsonRankingList.length;
 
-		var recordArray = [];
+	var recordArray = [];
-		for(var i = startIndex; i < endIndex; i++) {
+	for(var i = startIndex; i < endIndex; i++) {
-			var bestRecordRow = [];
+		var bestRecordRow = [];
-			var strDate = jsonRankingList[i]['Date'];
+		var strDate = jsonRankingList[i]['Date'];
-			var dateArray = strDate.split("-");
+		var dateArray = strDate.split("-");
-			var recordDate = new Date(dateArray[0], dateArray[1], dateArray[2]);
+		var recordDate = new Date(dateArray[0], dateArray[1], dateArray[2]);
-			bestRecordRow[0] = recordDate.getMonth() + "월 " + recordDate.getDate() + "일";
+		bestRecordRow[0] = recordDate.getMonth() + "월 " + recordDate.getDate() + "일";
-			bestRecordRow[1] = Math.floor(jsonRankingList[i]['BestRecord']);
+		bestRecordRow[1] = Math.floor(jsonRankingList[i]['BestRecord']);
-			bestRecordRow[2] = getStageNameForKorean(jsonRankingList[i]['StageName']);
+		bestRecordRow[2] = getStageNameForKorean(jsonRankingList[i]['StageName']);
-			// console.log("$BestRecordRow : " + bestRecordRow[0] + ", "  + bestRecordRow[1] + ", "  + bestRecordRow[2]);
+		// console.log("$BestRecordRow : " + bestRecordRow[0] + ", "  + bestRecordRow[1] + ", "  + bestRecordRow[2]);
 
-			recordArray.push(bestRecordRow);
+		recordArray.push(bestRecordRow);
-		}
+	}
 
-		return recordArray;
+	return recordArray;
 */
+}
+
+DBConnectManager.prototype.requestRanking = function(type, maestroID, date, time, listener) {
+	var rankingRecordManager = new RankingRecordManager();
+
+	/*
+	if(isDebugMode()) {
+		this.loadTempRanking(rankingRecordManager);
+
+		if(listener !== null)
+			listener(rankingRecordManager);
+
+		return;
 	}
+	*/
 
-	requestRanking(type, maestroID, date, time, listener) {
+	var self = this;
-		let rankingRecordManager = new RankingRecordManager();
 
-		/*
+	var xhr = new XMLHttpRequest();
-		if(isDebugMode()) {
+	xhr.open("POST", this.getRankingRecordUrl(type), true);
-			this.loadTempRanking(rankingRecordManager);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
 
-			if(listener !== null)
+			if(replyJSON != null) {
-				listener(rankingRecordManager);
+				listener(type, self.parseJSONtoRankingRecord(type, replyJSON));
-
-			return;
-		}
-		*/
-
-		let self = this;
-
-		let xhr = new XMLHttpRequest();
-		xhr.open("POST", this.getRankingRecordUrl(type), true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
-
-				if(replyJSON != null) {
-					listener(type, self.parseJSONtoRankingRecord(type, replyJSON));
-				}
-				else
-					onFailedListener(replyJSON);
 			}
-		};
+			else
-		let params = "MaestroID=" + sessionStorageManager.maestroID
+				onFailedListener(replyJSON);
-			+ "&AppID=" + sessionStorageManager.playingAppID
+		}
-			+ "&Date=" + date
+	};
-			+ "&Time=" + time;
+	var params = "MaestroID=" + sessionStorageManager.getMaestroID()
-		xhr.send(params);
+		+ "&AppID=" + sessionStorageManager.getPlayingAppID()
+		+ "&Date=" + date
+		+ "&Time=" + time;
+	xhr.send(params);
+}
+
+DBConnectManager.prototype.getRankingRecordUrl = function(type) {
+	var rankingRecordURL = this.phpPath;
+
+	switch(type) {
+		case DBConnectManager.TYPE_MY_RANKING_HOUR:
+		case DBConnectManager.TYPE_ALL_RANKING_HOUR:
+		rankingRecordURL += "server/record/ranking_record_hour.php";
+		break;
+
+		case DBConnectManager.TYPE_MY_RANKING_DAY:
+		case DBConnectManager.TYPE_ALL_RANKING_DAY:
+		rankingRecordURL += "server/record/ranking_record_day.php";
+		break;
+
+		case DBConnectManager.TYPE_MY_RANKING_MONTH:
+		case DBConnectManager.TYPE_ALL_RANKING_MONTH:
+		rankingRecordURL += "server/record/ranking_record_month.php";
+		break;
 	}
 
-	getRankingRecordUrl(type) {
+	return rankingRecordURL;
-		let rankingRecordURL = this.phpPath;
+}
 
-		switch(type) {
+DBConnectManager.prototype.parseJSONtoRankingRecord = function(type, json) {
-			case DBConnectManager.TYPE_MY_RANKING_HOUR:
+	var rankingRecordManager = new RankingRecordManager();
-			case DBConnectManager.TYPE_ALL_RANKING_HOUR:
-			rankingRecordURL += "server/record/ranking_record_hour.php";
-			break;
-
-			case DBConnectManager.TYPE_MY_RANKING_DAY:
-			case DBConnectManager.TYPE_ALL_RANKING_DAY:
-			rankingRecordURL += "server/record/ranking_record_day.php";
-			break;
-
-			case DBConnectManager.TYPE_MY_RANKING_MONTH:
-			case DBConnectManager.TYPE_ALL_RANKING_MONTH:
-			rankingRecordURL += "server/record/ranking_record_month.php";
-			break;
-		}
-
-		return rankingRecordURL;
-	}
-
-	parseJSONtoRankingRecord(type, json) {
-		let rankingRecordManager = new RankingRecordManager();
-
-		if(typeof json === "undefined")
-			return rankingRecordManager;
-
-		let replyJSON = null;
-		switch(type) {
-			case DBConnectManager.TYPE_MY_RANKING_HOUR:
-			case DBConnectManager.TYPE_ALL_RANKING_HOUR:
-			replyJSON = json.rankingHour;
-			break;
-
-			case DBConnectManager.TYPE_MY_RANKING_DAY:
-			case DBConnectManager.TYPE_ALL_RANKING_DAY:
-			replyJSON = json.rankingDay;
-			break;
-
-			case DBConnectManager.TYPE_MY_RANKING_MONTH:
-			case DBConnectManager.TYPE_ALL_RANKING_MONTH:
-			replyJSON = json.rankingMonth;
-			break;
-		}
-
-		if(replyJSON === null)
-			return rankingRecordManager;
-
-		let count = replyJSON.length;
-		for(let i = 0; i < count; i++) {
-			let record = new RankingRecord(
-				i + 1,
-				replyJSON[i]["PlayerID"],
-				replyJSON[i]["Name"],
-				replyJSON[i]["HighScore"]
-			);
-			rankingRecordManager.push(record);
-		}
 
+	if(typeof json === "undefined")
 		return rankingRecordManager;
+
+	var replyJSON = null;
+	switch(type) {
+		case DBConnectManager.TYPE_MY_RANKING_HOUR:
+		case DBConnectManager.TYPE_ALL_RANKING_HOUR:
+		replyJSON = json.rankingHour;
+		break;
+
+		case DBConnectManager.TYPE_MY_RANKING_DAY:
+		case DBConnectManager.TYPE_ALL_RANKING_DAY:
+		replyJSON = json.rankingDay;
+		break;
+
+		case DBConnectManager.TYPE_MY_RANKING_MONTH:
+		case DBConnectManager.TYPE_ALL_RANKING_MONTH:
+		replyJSON = json.rankingMonth;
+		break;
 	}
 
+	if(replyJSON === null)
+		return rankingRecordManager;
 
-	onFailed(errorMessage) {
+	var count = replyJSON.length;
-		console.log("failed : " + errorMessage);
+	for(var i = 0; i < count; i++) {
+		var record = new RankingRecord(
+			i + 1,
+			replyJSON[i]["PlayerID"],
+			replyJSON[i]["Name"],
+			replyJSON[i]["HighScore"]
+		);
+		rankingRecordManager.push(record);
 	}
 
+	return rankingRecordManager;
+}
 
-	makeXHRWithParam(url, param, onSucceededListener, onFailedListener) {
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
 
-				if(replyJSON != null && replyJSON["PlayerID"] != null)
+DBConnectManager.prototype.onFailed = function(errorMessage) {
-					onSucceededListener(replyJSON);
+	console.log("failed : " + errorMessage);
-				else
+}
-					onFailedListener(replyJSON);
+
-			}
+
+DBConnectManager.prototype.makeXHRWithParam = function(url, param, onSucceededListener, onFailedListener) {
+	xhr.onreadystatechange = function() {
+		if(xhr.readyState == 4 && xhr.status == 200) {
+			var replyJSON = JSON.parse(xhr.responseText);
+
+			if(replyJSON != null && replyJSON["PlayerID"] != null)
+				onSucceededListener(replyJSON);
+			else
+				onFailedListener(replyJSON);
 		}
-
-		return xhr;
 	}
 
-	requestHowToPlay(appID, onSucceededListener, onFailedListener) {
+	return xhr;
-		let xhr = new XMLHttpRequest();
+}
-		xhr.open("POST", this.phpPath + "server/app/how_to_play.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
-			if(xhr.readyState == 4 && xhr.status == 200) {
-				let replyJSON = JSON.parse(xhr.responseText);
 
-				if(replyJSON != null && replyJSON["HowToPlay"] != null)
+DBConnectManager.prototype.requestHowToPlay = function(appID, onSucceededListener, onFailedListener) {
-					onSucceededListener(replyJSON);
+	var xhr = new XMLHttpRequest();
-				else
+	xhr.open("POST", this.phpPath + "server/app/how_to_play.php", true);
-					onFailedListener(replyJSON);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-			}
+	xhr.onreadystatechange = function() {
-		};
+		if(xhr.readyState == 4 && xhr.status == 200) {
-		xhr.send("AppID=" + appID);
+			var replyJSON = JSON.parse(xhr.responseText);
-	}
 
-	updateTodayBestRecord(maestroID, playerID, appID, record) {
+			if(replyJSON != null && replyJSON["HowToPlay"] != null)
-		let xhr = new XMLHttpRequest();
+				onSucceededListener(replyJSON);
-		xhr.open("POST", this.phpPath + "server/record/update_best_record.php", true);
+			else
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+				onFailedListener(replyJSON);
-		xhr.send(
+		}
-			"MaestroID=" + maestroID
+	};
-			+ "&PlayerID=" + playerID
+	xhr.send("AppID=" + appID);
-			+ "&AppID=" + appID
+}
-			+ "&BestRecord=" + record
-		);
-	}
 
-	requestTodayBestRecord(maestroID, playerID, appID, onSucceededListener, onFailedListener) {
+DBConnectManager.prototype.updateTodayBestRecord = function(maestroID, playerID, appID, record) {
-		let xhr = new XMLHttpRequest();
+	var xhr = new XMLHttpRequest();
-		xhr.open("POST", this.phpPath + "server/record/request_best_record.php", true);
+	xhr.open("POST", this.phpPath + "server/record/update_best_record.php", true);
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-		xhr.onreadystatechange = function() {
+	xhr.send(
-			if(xhr.readyState == 4 && xhr.status == 200) {
+		"MaestroID=" + maestroID
-				let replyJSON = JSON.parse(xhr.responseText);
+		+ "&PlayerID=" + playerID
+		+ "&AppID=" + appID
+		+ "&BestRecord=" + record
+	);
+}
 
-				if(replyJSON != null && replyJSON["BestRecord"] != null)
+DBConnectManager.prototype.requestTodayBestRecord = function(maestroID, playerID, appID, onSucceededListener, onFailedListener) {
-					onSucceededListener(replyJSON);
+	var xhr = new XMLHttpRequest();
-				else
+	xhr.open("POST", this.phpPath + "server/record/request_best_record.php", true);
-					onFailedListener(replyJSON);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-			}
+	xhr.onreadystatechange = function() {
-		};
+		if(xhr.readyState == 4 && xhr.status == 200) {
-		xhr.send(
+			var replyJSON = JSON.parse(xhr.responseText);
-			"MaestroID=" + maestroID
-			+ "&PlayerID=" + playerID
-			+ "&AppID=" + appID
-		);
-	}
 
-	requestAppRanking(maestroID, appID, onSucceededListener, onFailedListener) {
+			if(replyJSON != null && replyJSON["BestRecord"] != null)
-		let xhr = new XMLHttpRequest();
+				onSucceededListener(replyJSON);
-		xhr.open("POST", this.phpPath + "server/record/app_ranking.php", true);
+			else
-		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+				onFailedListener(replyJSON);
-		xhr.onreadystatechange = function() {
+		}
-			if(xhr.readyState == 4 && xhr.status == 200) {
+	};
-				let replyJSON = JSON.parse(xhr.responseText);
+	xhr.send(
+		"MaestroID=" + maestroID
+		+ "&PlayerID=" + playerID
+		+ "&AppID=" + appID
+	);
+}
 
-				if(replyJSON != null)
+DBConnectManager.prototype.requestAppRanking = function(maestroID, appID, onSucceededListener, onFailedListener) {
-					onSucceededListener(replyJSON);
+	var xhr = new XMLHttpRequest();
-				else
+	xhr.open("POST", this.phpPath + "server/record/app_ranking.php", true);
-					onFailedListener(replyJSON);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-			}
+	xhr.onreadystatechange = function() {
-		};
+		if(xhr.readyState == 4 && xhr.status == 200) {
-		xhr.send(
+			var replyJSON = JSON.parse(xhr.responseText);
-			"MaestroID=" + maestroID
+
-			+ "&AppID=" + appID
+			if(replyJSON != null)
-		);
+				onSucceededListener(replyJSON);
-	}
+			else
+				onFailedListener(replyJSON);
+		}
+	};
+	xhr.send(
+		"MaestroID=" + maestroID
+		+ "&AppID=" + appID
+	);
+}
 
 
+DBConnectManager.prototype.loadTempPlayerHistory = function(historyRecordManager) {
+	historyRecordManager.push(new HistoryRecord("05/14", "space_invaders", 14460));
+	historyRecordManager.push(new HistoryRecord("05/13", "space_invaders", 12860));
+	historyRecordManager.push(new HistoryRecord("05/12", "typing_english_basic", 15460));
+	historyRecordManager.push(new HistoryRecord("05/11", "typing_korean_basic", 13040));
+	historyRecordManager.push(new HistoryRecord("05/10", "space_invaders", 15460));
+	historyRecordManager.push(new HistoryRecord("05/09", "typing_english_basic", 14607));
+	historyRecordManager.push(new HistoryRecord("05/08", "typing_korean_basic", 13058));
+}
 
-	loadTempPlayerHistory(historyRecordManager) {
+DBConnectManager.prototype.loadTempRanking = function(rankingRecordManager) {
-		historyRecordManager.push(new HistoryRecord("05/14", "space_invaders", 14460));
+	rankingRecordManager.push(new RankingRecord(1, 7, "강경모", 4400));
-		historyRecordManager.push(new HistoryRecord("05/13", "space_invaders", 12860));
+	rankingRecordManager.push(new RankingRecord(2, 2, "강성태", 3400));
-		historyRecordManager.push(new HistoryRecord("05/12", "typing_english_basic", 15460));
+	rankingRecordManager.push(new RankingRecord(3, 3, "김기덕", 2400));
-		historyRecordManager.push(new HistoryRecord("05/11", "typing_korean_basic", 13040));
+	rankingRecordManager.push(new RankingRecord(4, 4, "김남희", 1400));
-		historyRecordManager.push(new HistoryRecord("05/10", "space_invaders", 15460));
+	rankingRecordManager.push(new RankingRecord(5, 5, "고봉순", 900));
-		historyRecordManager.push(new HistoryRecord("05/09", "typing_english_basic", 14607));
+	rankingRecordManager.push(new RankingRecord(6, 6, "파르마", 800));
-		historyRecordManager.push(new HistoryRecord("05/08", "typing_korean_basic", 13058));
+	rankingRecordManager.push(new RankingRecord(7, 1, "박지상", 700));
-	}
+	rankingRecordManager.push(new RankingRecord(8, 8, "신현주", 600));
-
+	rankingRecordManager.push(new RankingRecord(9, 9, "꼬봉이", 500));
-	loadTempRanking(rankingRecordManager) {
+	rankingRecordManager.push(new RankingRecord(10, 10, "거북이", 400));
-		rankingRecordManager.push(new RankingRecord(1, 7, "강경모", 4400));
+	rankingRecordManager.push(new RankingRecord(11, 11, "다람쥐", 300));
-		rankingRecordManager.push(new RankingRecord(2, 2, "강성태", 3400));
+	rankingRecordManager.push(new RankingRecord(12, 12, "사시미", 200));
-		rankingRecordManager.push(new RankingRecord(3, 3, "김기덕", 2400));
+	rankingRecordManager.push(new RankingRecord(13, 13, "태권도", 100));
-		rankingRecordManager.push(new RankingRecord(4, 4, "김남희", 1400));
+	rankingRecordManager.push(new RankingRecord(14, 14, "합기도", 40));
-		rankingRecordManager.push(new RankingRecord(5, 5, "고봉순", 900));
+	rankingRecordManager.push(new RankingRecord(15, 15, "우습지", 10));
-		rankingRecordManager.push(new RankingRecord(6, 6, "파르마", 800));
+	rankingRecordManager.push(new RankingRecord(16, 16, "하하하", 4));
-		rankingRecordManager.push(new RankingRecord(7, 1, "박지상", 700));
-		rankingRecordManager.push(new RankingRecord(8, 8, "신현주", 600));
-		rankingRecordManager.push(new RankingRecord(9, 9, "꼬봉이", 500));
-		rankingRecordManager.push(new RankingRecord(10, 10, "거북이", 400));
-		rankingRecordManager.push(new RankingRecord(11, 11, "다람쥐", 300));
-		rankingRecordManager.push(new RankingRecord(12, 12, "사시미", 200));
-		rankingRecordManager.push(new RankingRecord(13, 13, "태권도", 100));
-		rankingRecordManager.push(new RankingRecord(14, 14, "합기도", 40));
-		rankingRecordManager.push(new RankingRecord(15, 15, "우습지", 10));
-		rankingRecordManager.push(new RankingRecord(16, 16, "하하하", 4));
-	}
-
 }
 
 DBConnectManager.TYPE_MY_RANKING_HOUR		= 0;

src/game/lib/game_over_text.js

@@ -1,38 +1,38 @@
-class GameOverText extends Phaser.Text {
+GameOverText.prototype = Object.create(Phaser.Text.prototype);
+GameOverText.constructor = GameOverText;
 
-	constructor() {
+function GameOverText() {
-		super(
+	Phaser.Text.call(
-			game,
+		this, game,
-			game.world.width / 2,
+		game.world.width / 2,
-			game.world.height / 2 - GameOverText.MOVE_AMOUNT_PX,
+		game.world.height / 2 - GameOverText.MOVE_AMOUNT_PX,
-			"게임 오버",
+		"게임 오버",
-			GameOverText.DEFAULT_TEXT_FONT
+		GameOverText.DEFAULT_TEXT_FONT
-		);
+	);
-		// super(game, 600, 300, "게임 오버", GameOverText.DEFAULT_TEXT_FONT);
+	// super(game, 600, 300, "게임 오버", GameOverText.DEFAULT_TEXT_FONT);
 
-		this.anchor.set(0.5);
+	this.anchor.set(0.5);
-		this.inputEnabled = false;
+	this.inputEnabled = false;
 
-		var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
-		grd.addColorStop(0, '#FFD68E');
+	grd.addColorStop(0, '#FFD68E');
-		grd.addColorStop(1, '#B34C00');
+	grd.addColorStop(1, '#B34C00');
-		this.fill = grd;
+	this.fill = grd;
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		this.stroke = '#000';
+	this.stroke = '#000';
-		this.strokeThickness = 10;
+	this.strokeThickness = 10;
 
 
-		this.alpha = 0;
+	this.alpha = 0;
-		let tweenAlpha = game.add.tween(this);
+	var tweenAlpha = game.add.tween(this);
-		tweenAlpha.to( { alpha: 1 }, GameOverText.TWEEN_ALPHA_TIME, Phaser.Easing.Linear.None, true);
+	tweenAlpha.to( { alpha: 1 }, GameOverText.TWEEN_ALPHA_TIME, Phaser.Easing.Linear.None, true);
 
-		let tweenMove = game.add.tween(this);
+	var tweenMove = game.add.tween(this);
-		tweenMove.to( { y: game.world.height / 2 }, GameOverText.TWEEN_MOVE_TIME, Phaser.Easing.Bounce.Out, true);
+	tweenMove.to( { y: game.world.height / 2 }, GameOverText.TWEEN_MOVE_TIME, Phaser.Easing.Bounce.Out, true);
 
-		game.add.existing(this);
+	game.add.existing(this);
-	};
+};
 
-}
 
 GameOverText.DEFAULT_TEXT_FONT = {
 	font: "bold 100px Arial",

src/game/lib/heart_gauge.js

@@ -1,50 +1,47 @@
-class HeartGauge {
+function HeartGauge(heartManager) {
+	this.heartManager = heartManager;
+	this.hearts = [];
 
-	constructor(heartManager) {
+	var self = this;
-		this.heartManager = heartManager;
+	this.heartManager.addOnChangeCountListener(
-		this.hearts = [];
+		function() { self.onChangeCountListener(); }
+	);
 
-		let self = this;
+	this.heartManager.addOnChangeMaxCountListener(
-		this.heartManager.addOnChangeCountListener(
+		function() { self.onChangeMaxCountListener(); }
-			function() { self.onChangeCountListener(); }
+	);
-		);
 
-		this.heartManager.addOnChangeMaxCountListener(
+	var startPosX = GAME_SCREEN_SIZE.x - HeartGauge.GAP * 4;
-			function() { self.onChangeMaxCountListener(); }
+	var posY = 30;
-		);
+	for(var i = 0; i < HeartManager.HEART_MAX_COUNT; i++) {
-
+		var heart = game.add.sprite(startPosX - i * HeartGauge.GAP, posY, "heart_full");
-		let startPosX = GAME_SCREEN_SIZE.x - HeartGauge.GAP * 4;
+		heart.anchor.set(0.5);
-		let posY = 30;
+		heart.scale.set(HeartGauge.HEART_SCALE);
-		for(let i = 0; i < HeartManager.HEART_MAX_COUNT; i++) {
+		heart.alpha = 0;
-			let heart = game.add.sprite(startPosX - i * HeartGauge.GAP, posY, "heart_full");
+		this.hearts.push(heart);
-			heart.anchor.set(0.5);
-			heart.scale.set(HeartGauge.HEART_SCALE);
-			heart.alpha = 0;
-			this.hearts.push(heart);
-		}
-	};
-
-	onChangeCountListener() {
-		this.updateHearts();
 	}
+};
 
-	onChangeMaxCountListener() {
+HeartGauge.prototype.onChangeCountListener = function() {
-		this.updateHearts();
+	this.updateHearts();
-	}
+}
 
-	start() {
+HeartGauge.prototype.onChangeMaxCountListener = function() {
-		this.updateHearts();
+	this.updateHearts();
-	}
+}
 
-	updateHearts() {
+HeartGauge.prototype.start = function() {
-		for(let i = 0; i < this.heartManager.getMaxCount(); i++) {
+	this.updateHearts();
-			if(i < this.heartManager.getCount())
+}
-				this.hearts[i].loadTexture("heart_full");
-			else
-				this.hearts[i].loadTexture("heart_empty");
 
-			this.hearts[i].alpha = 1;
+HeartGauge.prototype.updateHearts = function() {
-		}
+	for(var i = 0; i < this.heartManager.getMaxCount(); i++) {
+		if(i < this.heartManager.getCount())
+			this.hearts[i].loadTexture("heart_full");
+		else
+			this.hearts[i].loadTexture("heart_empty");
+
+		this.hearts[i].alpha = 1;
 	}
 }
 

src/game/lib/heart_manager.js

@@ -1,105 +1,102 @@
-class HeartManager {
+function HeartManager() {
+	this.countHearts = HeartManager.DEFAULT_COUNT;
+	this.countMaxHearts = HeartManager.DEFAULT_COUNT;
 
-	constructor() {
+	this.onChangeCountListeners = [];
-		this.countHearts = HeartManager.DEFAULT_COUNT;
+	this.onChangeMaxCountListeners = [];
-		this.countMaxHearts = HeartManager.DEFAULT_COUNT;
+	this.onChangeGameOverListeners = [];
+}
 
-		this.onChangeCountListeners = [];
+HeartManager.prototype.callListener = function(functionArray) {
-		this.onChangeMaxCountListeners = [];
+	if(functionArray.length > 0) {
-		this.onChangeGameOverListeners = [];
+		for(var i = 0; i < functionArray.length; i++) {
-	}
+			functionArray[i](this.score);
-
-	callListener(functionArray) {
-		if(functionArray.length > 0) {
-			for(let i = 0; i < functionArray.length; i++) {
-				functionArray[i](this.score);
-			}
 		}
 	}
+}
 
-	addOnChangeCountListener(onChangeFunction) {
+HeartManager.prototype.addOnChangeCountListener = function(onChangeFunction) {
-		this.onChangeCountListeners.push(onChangeFunction);
+	this.onChangeCountListeners.push(onChangeFunction);
-	}
+}
 
-	removeOnChangeCountListener(onChangeFunction) {
+HeartManager.prototype.removeOnChangeCountListener = function(onChangeFunction) {
-		let itemIndex = this.onChangeCountListeners.indexOf(onChangeFunction);
+	var itemIndex = this.onChangeCountListeners.indexOf(onChangeFunction);
-		if(itemIndex > -1)
+	if(itemIndex > -1)
-			this.onChangeCountListeners.splice(itemIndex, 1);
+		this.onChangeCountListeners.splice(itemIndex, 1);
-	}
+}
 
-	addOnChangeMaxCountListener(onChangeMaxFunction) {
+HeartManager.prototype.addOnChangeMaxCountListener = function(onChangeMaxFunction) {
-		this.onChangeMaxCountListeners.push(onChangeMaxFunction);
+	this.onChangeMaxCountListeners.push(onChangeMaxFunction);
-	}
+}
 
-	removeOnChangeMaxCountListener(onChangeMaxFunction) {
+HeartManager.prototype.removeOnChangeMaxCountListener = function(onChangeMaxFunction) {
-		let itemIndex = this.onChangeMaxCountListeners.indexOf(onChangeMaxFunction);
+	var itemIndex = this.onChangeMaxCountListeners.indexOf(onChangeMaxFunction);
-		if(itemIndex > -1)
+	if(itemIndex > -1)
-			this.onChangeMaxCountListeners.splice(itemIndex, 1);
+		this.onChangeMaxCountListeners.splice(itemIndex, 1);
-	}
+}
 
-	addOnChangeGameOverListener(onChangeGameOverFunction) {
+HeartManager.prototype.addOnChangeGameOverListener = function(onChangeGameOverFunction) {
-		this.onChangeGameOverListeners.push(onChangeGameOverFunction);
+	this.onChangeGameOverListeners.push(onChangeGameOverFunction);
-	}
+}
 
-	removeOnChangeHighScoreListener(onChangeGameOverFunction) {
+HeartManager.prototype.removeOnChangeHighScoreListener = function(onChangeGameOverFunction) {
-		let itemIndex = this.onChangeGameOverListeners.indexOf(onChangeGameOverFunction);
+	var itemIndex = this.onChangeGameOverListeners.indexOf(onChangeGameOverFunction);
-		if(itemIndex > -1)
+	if(itemIndex > -1)
-			this.onChangeGameOverListeners.splice(itemIndex, 1);
+		this.onChangeGameOverListeners.splice(itemIndex, 1);
-	}
+}
 
-	removeAllListeners() {
+HeartManager.prototype.removeAllListeners = function() {
-		this.onChangeCountListeners = [];
+	this.onChangeCountListeners = [];
-		this.onChangeMaxCountListeners = [];
+	this.onChangeMaxCountListeners = [];
-		this.onChangeGameOverListeners = [];
+	this.onChangeGameOverListeners = [];
-	}
+}
 
 
-	setCount(amount) {
+HeartManager.prototype.setCount = function(amount) {
-		let beforeCountHearts = this.countHearts;
+	var beforeCountHearts = this.countHearts;
-		this.countHearts = amount;
+	this.countHearts = amount;
-		if(this.countHearts < 0)
+	if(this.countHearts < 0)
-			this.countHearts = 0;
+		this.countHearts = 0;
-		else if(this.countHearts > this.countMaxHearts)
+	else if(this.countHearts > this.countMaxHearts)
-			this.countHearts = this.countMaxHearts;
+		this.countHearts = this.countMaxHearts;
 
-		if(beforeCountHearts !== this.countHearts)
+	if(beforeCountHearts !== this.countHearts)
-			this.callListener(this.onChangeCountListeners);
+		this.callListener(this.onChangeCountListeners);
 
-		if(this.countHearts === 0)
+	if(this.countHearts === 0)
-			this.callListener(this.onChangeGameOverListeners);
+		this.callListener(this.onChangeGameOverListeners);
-	}
+}
 
-	getCount() {
+HeartManager.prototype.getCount = function() {
-		return this.countHearts;
+	return this.countHearts;
-	}
+}
 
-	setMaxCount(amount) {
+HeartManager.prototype.setMaxCount = function(amount) {
-		let beforeCountHearts = this.countMaxHearts;
+	var beforeCountHearts = this.countMaxHearts;
-		this.countMaxHearts = amount;
+	this.countMaxHearts = amount;
-		if(this.countMaxHearts > HeartManager.HEART_MAX_COUNT)
+	if(this.countMaxHearts > HeartManager.HEART_MAX_COUNT)
-			this.countMaxHearts = HeartManager.HEART_MAX_COUNT;
+		this.countMaxHearts = HeartManager.HEART_MAX_COUNT;
 
-		if(beforeCountHearts !== this.countMaxHearts)
+	if(beforeCountHearts !== this.countMaxHearts)
-			this.callListener(this.onChangeMaxCountListeners);
+		this.callListener(this.onChangeMaxCountListeners);
 
-		if(this.countHearts > this.countMaxHearts)
+	if(this.countHearts > this.countMaxHearts)
-			this.setCount(this.countMaxHearts);
+		this.setCount(this.countMaxHearts);
-	}
+}
 
-	getMaxCount() {
+HeartManager.prototype.getMaxCount = function() {
-		return this.countMaxHearts;
+	return this.countMaxHearts;
-	}
+}
 
-	addHearts(amount) {
+HeartManager.prototype.addHearts = function(amount) {
-		this.setCount(this.countHearts + amount);
+	this.setCount(this.countHearts + amount);
-
-	}
-
-	breakHearts(amount) {
-		this.addHearts(-1 * amount);
-	}
 
 }
 
+HeartManager.prototype.breakHearts = function(amount) {
+	this.addHearts(-1 * amount);
+}
+
+
 HeartManager.DEFAULT_COUNT			= 3;
 HeartManager.HEART_MAX_COUNT		= 5;

src/game/lib/history_record_manager.js

@@ -1,87 +1,79 @@
-class HistoryRecord {
+function HistoryRecord(date, appName, bestRecord) {
-
+	this.date = date;
-	constructor(date, appName, bestRecord) {
+	this.appName = appName;
-		this.date = date;
+	this.bestRecord = bestRecord;
-		this.appName = appName;
-		this.bestRecord = bestRecord;
-	}
 }
 
 
 
-class HistoryRecordManager {
+function HistoryRecordManager() {
-
+	this.clear();
-	constructor() {
+}
-		this.clear();
+
-	}
+HistoryRecordManager.prototype.push = function(HistoryRecord) {
-
+	this.historyRecords.push(HistoryRecord);
-	push(HistoryRecord) {
+
-		this.historyRecords.push(HistoryRecord);
+	this.minValueOfRecord = this.minValueOfArray();
-
+	this.maxValueOfRecord = this.maxValueOfArray();
-		this.minValueOfRecord = this.minValueOfArray();
+}
-		this.maxValueOfRecord = this.maxValueOfArray();
+
-	}
+HistoryRecordManager.prototype.clear = function() {
-
+	this.historyRecords = [];
-	clear() {
+
-		this.historyRecords = [];
+	this.minValueOfRecord = 0;
-
+	this.maxValueOfRecord = 0;
-		this.minValueOfRecord = 0;
+}
-		this.maxValueOfRecord = 0;
+
-	}
+HistoryRecordManager.prototype.getCount = function() {
-
+	return this.historyRecords.length;
-	get count() {
+}
-		return this.historyRecords.length;
+
-	}
+HistoryRecordManager.prototype.getAt = function(index) {
-
+	return this.historyRecords[index];
-	getAt(index) {
+}
-		return this.historyRecords[index];
+
-	}
+HistoryRecordManager.prototype.getDateAt = function(index) {
-
+	return this.historyRecords[index].date;
-	getDateAt(index) {
+}
-		return this.historyRecords[index].date;
+
-	}
+HistoryRecordManager.prototype.getAppNameAt = function(index) {
-
+	return this.historyRecords[index].appName;
-	getAppNameAt(index) {
+}
-		return this.historyRecords[index].appName;
+
-	}
+HistoryRecordManager.prototype.getBestRecordAt = function(index) {
-
+	return this.historyRecords[index].bestRecord;
-	getBestRecordAt(index) {
+}
-		return this.historyRecords[index].bestRecord;
+
-	}
+HistoryRecordManager.prototype.minValueOfArray = function() {
-
+	var numberArray = this.getBestRecordArray(this.historyRecords);
-	minValueOfArray() {
+	return Math.min.apply(Math, numberArray);
-		let numberArray = this.getBestRecordArray(this.historyRecords);
+}
-		return Math.min.apply(Math, numberArray);
+
-	}
+HistoryRecordManager.prototype.maxValueOfArray = function() {
-
+	var numberArray = this.getBestRecordArray(this.historyRecords);
-	maxValueOfArray() {
+	return Math.max.apply(Math, numberArray);
-		let numberArray = this.getBestRecordArray(this.historyRecords);
+}
-		return Math.max.apply(Math, numberArray);
+
-	}
+HistoryRecordManager.prototype.underValueForGraph = function() {
-
+	var minNumberOfDigits = NumberUtil.numberOfDigits(this.minValueOfRecord);
-	underValueForGraph() {
+	var underMinValue =
-		let minNumberOfDigits = NumberUtil.numberOfDigits(this.minValueOfRecord);
+		Math.floor( (this.minValueOfRecord / Math.pow(10, minNumberOfDigits - 2) ) )
-		let underMinValue =
+		* Math.pow(10, minNumberOfDigits - 2 );
-			Math.floor( (this.minValueOfRecord / Math.pow(10, minNumberOfDigits - 2) ) )
+	return underMinValue;
-			* Math.pow(10, minNumberOfDigits - 2 );
+}
-		return underMinValue;
+
-	}
+HistoryRecordManager.prototype.upperValueForGraph = function() {
-
+	var maxNumberOfDigits = NumberUtil.numberOfDigits(this.maxValueOfRecord);
-	upperValueForGraph() {
+	var underMaxValue =
-		let maxNumberOfDigits = NumberUtil.numberOfDigits(this.maxValueOfRecord);
+		Math.ceil( (this.maxValueOfRecord / Math.pow(10, maxNumberOfDigits - 2) ) )
-		let underMaxValue =
+		* Math.pow(10, maxNumberOfDigits - 2);
-			Math.ceil( (this.maxValueOfRecord / Math.pow(10, maxNumberOfDigits - 2) ) )
+	return underMaxValue;
-			* Math.pow(10, maxNumberOfDigits - 2);
+}
-		return underMaxValue;
+
-	}
+HistoryRecordManager.prototype.getBestRecordArray = function() {
-
+	var numberArray = [];
-	getBestRecordArray() {
+	for(var data of this.historyRecords) {
-		let numberArray = [];
+		numberArray.push(data.bestRecord);
-		for(let data of this.historyRecords) {
+	}
-			numberArray.push(data.bestRecord);
+	return numberArray;
-		}
-		return numberArray;
-	}
-
-
 }

src/game/lib/how_to_play.js

@@ -1,27 +1,21 @@
-/////////////////////////////
+function HowToPlay(x, y) {
-// How to play text
+	this.howToPlayText = game.add.text(
-
+		game.world.centerX, game.world.centerY - HowToPlay.TEXT_OFFSET_X,
-class HowToPlay {
+		"", this.getFontStyle()
-
+	);
-	constructor() {
+	this.howToPlayText.anchor.set(0.5);
-		this.howToPlayText = game.add.text(
+	this.howToPlayText.stroke = "#333";
-			game.world.centerX, game.world.centerY - HowToPlay.TEXT_OFFSET_X,
+	this.howToPlayText.strokeThickness = 3;
-			"", this.getFontStyle()
+	this.howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		);
-		this.howToPlayText.anchor.set(0.5);
-		this.howToPlayText.stroke = "#333";
-		this.howToPlayText.strokeThickness = 3;
-		this.howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-	}
-
-	printHowToPlay(text) {
-		this.howToPlayText.text = text;
-	}
-
-	getFontStyle() {
-		return { font: "32px Arial", fill: "#fff" };
-	}
-
 }
 
+HowToPlay.prototype.printHowToPlay = function(text) {
+	this.howToPlayText.text = text;
+}
+
+HowToPlay.prototype.getFontStyle = function() {
+	return { font: "32px Arial", fill: "#fff" };
+}
+
+
 HowToPlay.TEXT_OFFSET_X		= 200;

src/game/lib/input_type_text.js

@@ -1,37 +1,36 @@
-class InputTypeText {
+function InputTypeText(x, y) {
+	var bmd = game.add.bitmapData(400, 50);
+	var myInput = game.add.sprite(x, y, bmd);
 
-	constructor(x, y) {
+	myInput.canvasInput = new CanvasInput({
-		var bmd = game.add.bitmapData(400, 50);
+		canvas: bmd.canvas,
-		var myInput = game.add.sprite(x, y, bmd);
+		fontSize: 30,
+		fontFamily: 'Arial',
+		fontColor: '#212121',
+		fontWeight: 'bold',
+		width: 400,
+		padding: 8,
+		borderWidth: 1,
+		borderColor: '#000',
+		borderRadius: 3,
+		boxShadow: '1px 1px 0px #fff',
+		innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
+		placeHolder: 'Enter message here...'
+	});
+	myInput.inputEnabled = true;
+	myInput.input.useHandCursor = true;
+	myInput.events.onInputUp.add(
+		(function(sprite) {
+			sprite.canvasInput.focus();
+		}).bind(this),
+		this
+	);
 
-		myInput.canvasInput = new CanvasInput({
+	return myInput;
-			canvas: bmd.canvas,
-			fontSize: 30,
-			fontFamily: 'Arial',
-			fontColor: '#212121',
-			fontWeight: 'bold',
-			width: 400,
-			padding: 8,
-			borderWidth: 1,
-			borderColor: '#000',
-			borderRadius: 3,
-			boxShadow: '1px 1px 0px #fff',
-			innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
-			placeHolder: 'Enter message here...'
-		});
-		myInput.inputEnabled = true;
-		myInput.input.useHandCursor = true;
-		myInput.events.onInputUp.add(this.inputFocus, this);
-
-		return myInput;
-	}
-
-	inputFocus(sprite){
-		sprite.canvasInput.focus();
-	}
 }
 
 
+
 /*!
  *  CanvasInput v1.2.0
  *  https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

src/game/lib/number_util.js

@@ -1,24 +1,24 @@
-class NumberUtil {
+function NumberUtil() {
-
+}
-	static numberWithCommas(x) {
+
-		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
-	}
+NumberUtil.numberWithCommas = function(x) {
-
+	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-	static numberOfDigits(number) {
+}
-		if(number === 1000)
+
-			return 4;
+NumberUtil.numberOfDigits = function(number) {
-
+	if(number === 1000)
-		return Math.floor(Math.log(number) / Math.LN10 + 1);	// bug : 1000 -> expected 4 but 3
+		return 4;
-	}
+
-
+	return Math.floor(Math.log(number) / Math.LN10 + 1);	// bug : 1000 -> expected 4 but 3
-	static getRecordText(value) {
+}
-		let number = Math.floor(value);
+
-		let numberWithCommas = NumberUtil.numberWithCommas(number);
+NumberUtil.getRecordText = function(value) {
-
+	var number = Math.floor(value);
-		if(isTypingGame())
+	var numberWithCommas = NumberUtil.numberWithCommas(number);
-			return numberWithCommas + " 타";
+
-		else
+	if(isTypingGame())
-			return numberWithCommas + " 점";
+		return numberWithCommas + " 타";
-	}
+	else
-
+		return numberWithCommas + " 점";
 }

src/game/lib/ranking_record_manager.js

@@ -1,51 +1,43 @@
-class RankingRecord {
+function RankingRecord(rank, playerID, playerName, bestRecord) {
-
+	this.rank = rank;
-	constructor(rank, playerID, playerName, bestRecord) {
+	this.playerID = playerID;
-		this.rank = rank;
+	this.playerName = playerName;
-		this.playerID = playerID;
+	this.bestRecord = bestRecord;
-		this.playerName = playerName;
-		this.bestRecord = bestRecord;
-	}
 }
 
 
-
+function RankingRecordManager() {
-class RankingRecordManager {
+	this.clear();
-
+}
-	constructor() {
+
-		this.clear();
+RankingRecordManager.prototype.push = function(RankingRecord) {
-	}
+	this.rankingRecords.push(RankingRecord);
-
+}
-	push(RankingRecord) {
+
-		this.rankingRecords.push(RankingRecord);
+RankingRecordManager.prototype.clear = function() {
-	}
+	this.rankingRecords = [];
-
+}
-	clear() {
+
-		this.rankingRecords = [];
+RankingRecordManager.prototype.getCount = function() {
-	}
+	return this.rankingRecords.length;
-
+}
-	get count() {
+
-		return this.rankingRecords.length;
+RankingRecordManager.prototype.getAt = function(index) {
-	}
+	return this.rankingRecords[index];
-
+}
-	getAt(index) {
+
-		return this.rankingRecords[index];
+RankingRecordManager.prototype.getRankAt = function(index) {
-	}
+	return this.rankingRecords[index].rank;
-
+}
-	getRankAt(index) {
+
-		return this.rankingRecords[index].rank;
+RankingRecordManager.prototype.getPlayerIDAt = function(index) {
-	}
+	return this.rankingRecords[index].playerID;
-
+}
-	getPlayerIDAt(index) {
+
-		return this.rankingRecords[index].playerID;
+RankingRecordManager.prototype.getPlayerNameAt = function(index) {
-	}
+	return this.rankingRecords[index].playerName;
-
+}
-	getPlayerNameAt(index) {
+
-		return this.rankingRecords[index].playerName;
+RankingRecordManager.prototype.getBestRecordAt = function(index) {
-	}
+	return this.rankingRecords[index].bestRecord;
-
-	getBestRecordAt(index) {
-		return this.rankingRecords[index].bestRecord;
-	}
-
 }

src/game/lib/score_board.js

@@ -1,35 +1,32 @@
-class ScoreBoard {
+function ScoreBoard() {
+	var fontStyle = ScoreBoard.DEFAULT_TEXT_FONT;
 
-	constructor() {
+	fontStyle.align = "right";
-		let fontStyle = ScoreBoard.DEFAULT_TEXT_FONT;
+	fontStyle.boundsAlignH = "right";
+	this.label = game.add.text(0, 0, "점수 : ", fontStyle)
+		.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
 
-		fontStyle.align = "right";
+	fontStyle.align = "left";
-		fontStyle.boundsAlignH = "right";
+	fontStyle.boundsAlignH = "left";
-		this.label = game.add.text(0, 0, "점수 : ", fontStyle)
+	this.scoreText = game.add.text(game.world.width / 2, 0, "0", fontStyle)
-			.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
+		.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
 
-		fontStyle.align = "left";
+	// var grd = this.label.context.createLinearGradient(0, 0, 0, ScoreBoard.FONT_HEIGHT_PX);
-		fontStyle.boundsAlignH = "left";
+	// grd.addColorStop(0, '#8ED6FF');
-		this.scoreText = game.add.text(game.world.width / 2, 0, "0", fontStyle)
+	// grd.addColorStop(1, '#004CB3');
-			.setTextBounds(0, 0, game.world.width / 2, ScoreBoard.FONT_HEIGHT_PX);
+	// this.label.fill = grd;
+	// this.scoreText.fill = grd;
 
-		// var grd = this.label.context.createLinearGradient(0, 0, 0, ScoreBoard.FONT_HEIGHT_PX);
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// grd.addColorStop(0, '#8ED6FF');
+	// this.label.stroke = '#000';
-		// grd.addColorStop(1, '#004CB3');
+	// this.label.strokeThickness = 3;
-		// this.label.fill = grd;
+};
-		// this.scoreText.fill = grd;
-
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// this.label.stroke = '#000';
-		// this.label.strokeThickness = 3;
-	};
-
-	printScore(score) {
-		this.scoreText.text = score;
-	}
 
+ScoreBoard.prototype.printScore = function(score) {
+	this.scoreText.text = score;
 }
 
+
 ScoreBoard.FONT_HEIGHT_PX		= 70;
 
 ScoreBoard.DEFAULT_TEXT_FONT	= {

src/game/lib/score_manager.js

@@ -1,85 +1,81 @@
-class ScoreManager {
+function ScoreManager() {
+	this.onChangeScoreListeners = [];
+	this.onChangeHighScoreListeners = [];
 
-	constructor() {
+	this.resetScore();
-		this.onChangeScoreListeners = [];
+}
-		this.onChangeHighScoreListeners = [];
 
-		this.resetScore();
+ScoreManager.prototype.resetScore = function() {
-	}
+	// this.score = Number(sessionStorageManager.record);
+	this.score = 0;
+	sessionStorageManager.record = this.score;
 
-	resetScore() {
+	if(sessionStorageManager.bestRecord === null)
-		// this.score = Number(sessionStorageManager.record);
+		this.highScore = 0;
-		this.score = 0;
+	else
-		sessionStorageManager.record = this.score;
+		this.highScore = Number(sessionStorageManager.bestRecord);
+}
 
-		if(sessionStorageManager.bestRecord === null)
+ScoreManager.prototype.callListener = function(functionArray) {
-			this.highScore = 0;
+	if(functionArray.length > 0) {
-		else
+		for(var i = 0; i < functionArray.length; i++) {
-			this.highScore = Number(sessionStorageManager.bestRecord);
+			functionArray[i](this.score);
-	}
-
-	callListener(functionArray) {
-		if(functionArray.length > 0) {
-			for(let i = 0; i < functionArray.length; i++) {
-				functionArray[i](this.score);
-			}
 		}
 	}
-
+}
-	addOnChangeScoreListener(onChangeFunction) {
+
-		this.onChangeScoreListeners.push(onChangeFunction);
+ScoreManager.prototype.addOnChangeScoreListener = function(onChangeFunction) {
-	}
+	this.onChangeScoreListeners.push(onChangeFunction);
-
+}
-	removeOnChangeScoreListener(onChangeFunction) {
+
-		let itemIndex = this.onChangeScoreListeners.indexOf(onChangeFunction);
+ScoreManager.prototype.removeOnChangeScoreListener = function(onChangeFunction) {
-		if(itemIndex > -1)
+	var itemIndex = this.onChangeScoreListeners.indexOf(onChangeFunction);
-			this.onChangeScoreListeners.splice(itemIndex, 1);
+	if(itemIndex > -1)
-	}
+		this.onChangeScoreListeners.splice(itemIndex, 1);
-
+}
-	addOnChangeHighScoreListener(onChangeHighScoreFunction) {
+
-		this.onChangeHighScoreListeners.push(onChangeHighScoreFunction);
+ScoreManager.prototype.addOnChangeHighScoreListener = function(onChangeHighScoreFunction) {
-	}
+	this.onChangeHighScoreListeners.push(onChangeHighScoreFunction);
-
+}
-	removeOnChangeHighScoreListener(onChangeHighScoreFunction) {
+
-		let itemIndex = this.onChangeHighScoreListeners.indexOf(onChangeHighScoreFunction);
+ScoreManager.prototype.removeOnChangeHighScoreListener = function(onChangeHighScoreFunction) {
-		if(itemIndex > -1)
+	var itemIndex = this.onChangeHighScoreListeners.indexOf(onChangeHighScoreFunction);
-			this.onChangeHighScoreListeners.splice(itemIndex, 1);
+	if(itemIndex > -1)
-	}
+		this.onChangeHighScoreListeners.splice(itemIndex, 1);
-
+}
-	removeAllListeners() {
+
-		this.onChangeScoreListeners = [];
+ScoreManager.prototype.removeAllListeners = function() {
-		this.onChangeHighScoreListeners = [];
+	this.onChangeScoreListeners = [];
-	}
+	this.onChangeHighScoreListeners = [];
-
+}
-
+
-	getScore() {
+
-		return this.score;
+ScoreManager.prototype.getScore = function() {
-	}
+	return this.score;
-
+}
-	getHighScore() {
+
-		return this.highScore;
+ScoreManager.prototype.getHighScore = function() {
-	}
+	return this.highScore;
-
+}
-
+
-	plusScore(amount) {
+
-		this.setScore(this.score + amount);
+ScoreManager.prototype.plusScore = function(amount) {
-	}
+	this.setScore(this.score + amount);
-
+}
-	minusScore(amount) {
+
-		this.plusScore(-1 * amount);
+ScoreManager.prototype.minusScore = function(amount) {
-	}
+	this.plusScore(-1 * amount);
-
+}
-	setScore(value) {
+
-		let beforeScore = this.score;
+ScoreManager.prototype.setScore = function(value) {
-		this.score = value;
+	var beforeScore = this.score;
-
+	this.score = value;
-		// update score
+
-		if(beforeScore !== this.score)
+	// update score
-			this.callListener(this.onChangeScoreListeners);
+	if(beforeScore !== this.score)
-
+		this.callListener(this.onChangeScoreListeners);
-		// update high score
+
-		if(this.score > this.highScore)
+	// update high score
-			this.callListener(this.onChangeHighScoreListeners);
+	if(this.score > this.highScore)
-	}
+		this.callListener(this.onChangeHighScoreListeners);
-
 }

src/game/lib/score_text.js

@@ -1,36 +1,37 @@
-class ScoreText extends Phaser.Text {
+ScoreText.prototype = Object.create(Phaser.Text.prototype);
+ScoreText.constructor = ScoreText;
 
-	constructor(x, y, score) {
+function ScoreText(x, y, score) {
-		super(game, x, y, "+" + NumberUtil.numberWithCommas(score), ScoreText.DEFAULT_TEXT_FONT);
+	// super(game, x, y, "+" + NumberUtil.numberWithCommas(score), ScoreText.DEFAULT_TEXT_FONT);
+	Phaser.Text.call(this, game, x, y, "+" + NumberUtil.numberWithCommas(score), ScoreText.DEFAULT_TEXT_FONT);
 
-		this.anchor.set(0.5);
+	this.anchor.set(0.5);
-		this.inputEnabled = false;
+	this.inputEnabled = false;
 
-		var grd = this.context.createLinearGradient(0, 0, 0, this.height);
+	var grd = this.context.createLinearGradient(0, 0, 0, this.height);
-		grd.addColorStop(0, '#8ED6FF');
+	grd.addColorStop(0, '#8ED6FF');
-		grd.addColorStop(1, '#004CB3');
+	grd.addColorStop(1, '#004CB3');
-		this.fill = grd;
+	this.fill = grd;
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		this.stroke = '#fff';
+	this.stroke = '#fff';
-		this.strokeThickness = 5;
+	this.strokeThickness = 5;
 
 
-		let tweenAlpha = game.add.tween(this);
+	var tweenAlpha = game.add.tween(this);
-		tweenAlpha.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+	tweenAlpha.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
 
-		let tweenMoveUp = game.add.tween(this);
+	var tweenMoveUp = game.add.tween(this);
-		tweenMoveUp.to( { y: this.y - ScoreText.MOVE_UP_AMOUNT_PX }, 1000, Phaser.Easing.Linear.None, true);
+	tweenMoveUp.to( { y: this.y - ScoreText.MOVE_UP_AMOUNT_PX }, 1000, Phaser.Easing.Linear.None, true);
-		tweenMoveUp.onComplete.addOnce(this.destroySelf, this);
+	tweenMoveUp.onComplete.addOnce(this.destroySelf, this);
 
-		game.add.existing(this);
+	game.add.existing(this);
-	};
+};
-
-	destroySelf() {
-		this.destroy();
-	}
 
+ScoreText.prototype.destroySelf = function() {
+	this.destroy();
 }
 
+
 ScoreText.DEFAULT_TEXT_FONT = {
 	font: "30px Arial",
 	boundsAlignH: "center",		// left, center. right

src/game/lib/screen_bottom_ui.js

@@ -1,84 +1,78 @@
-/////////////////////////////
+function ScreenBottomUI() {
-// Screen bottom
+	this.dbConnectManager = new DBConnectManager();
 
-class ScreenBottomUI {
+	this.bottomBarCenterY = game.world.height - ScreenBottomUI.BG_HEIGHT / 2;
-
-	constructor() {
-		this.dbConnectManager = new DBConnectManager();
-
-		this.bottomBarCenterY = game.world.height - ScreenBottomUI.BG_HEIGHT / 2;
-
-		this.drawBG();
-		this.leftText = this.printText(this.leftText, "", "left");
-		this.centerText = this.printText(this.centerText, "", "center");
-		this.rightText = this.printText(this.rightText, "", "right");
-	}
-
-	drawBG() {
-		game.add.graphics()
-			.beginFill(0x303030, 1)
-			.drawRect(
-				0, game.world.height - ScreenBottomUI.BG_HEIGHT,
-				game.world.width, ScreenBottomUI.BG_HEIGHT
-			);
-	}
-
-	printLeftText(text) {
-		this.leftText.text = text;
-	}
-
-	printCenterText(text) {
-		this.centerText.text = text;
-	}
-
-	printRightText(text) {
-		this.rightText.text = text;
-	}
-
-	printText(textObject, text, align) {
-		if(textObject !== null && textObject !== undefined) {
-			textObject.text = "";
-			textObject = null;
-		}
-
-		let posX = 0;
-		let anchorValue = 0;
-		switch(align) {
-			case "left":
-			posX = ScreenBottomUI.TEXT_OFFSET;
-			break;
-
-			case "center":
-			posX = game.world.centerX;
-			anchorValue = 0.5;
-			break;
-
-			case "right":
-			posX = game.world.width - ScreenBottomUI.TEXT_OFFSET;
-			anchorValue = 1;
-			break;
-		}
-
-		textObject = game.add.text(posX, this.bottomBarCenterY, text, this.getFontStyle());
-
-		textObject.anchor.x = anchorValue;
-		textObject.anchor.y = 0.5;
-
-		return textObject;
-	}
-
-	printLeftTextWithBestRecord(bestRecord) {
-		let roundUpBestRecord = Math.round(bestRecord);
-		let highScoreWithCommas = NumberUtil.numberWithCommas(roundUpBestRecord);
-		this.printLeftText("오늘의 최고 기록 : " + highScoreWithCommas);
-	}
-
-	getFontStyle() {
-		return { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
-	}
 
+	this.drawBG();
+	this.leftText = this.printText(this.leftText, "", "left");
+	this.centerText = this.printText(this.centerText, "", "center");
+	this.rightText = this.printText(this.rightText, "", "right");
 }
 
+ScreenBottomUI.prototype.drawBG = function() {
+	game.add.graphics()
+		.beginFill(0x303030, 1)
+		.drawRect(
+			0, game.world.height - ScreenBottomUI.BG_HEIGHT,
+			game.world.width, ScreenBottomUI.BG_HEIGHT
+		);
+}
+
+ScreenBottomUI.prototype.printLeftText = function(text) {
+	this.leftText.text = text;
+}
+
+ScreenBottomUI.prototype.printCenterText = function(text) {
+	this.centerText.text = text;
+}
+
+ScreenBottomUI.prototype.printRightText = function(text) {
+	this.rightText.text = text;
+}
+
+ScreenBottomUI.prototype.printText = function(textObject, text, align) {
+	if(textObject !== null && textObject !== undefined) {
+		textObject.text = "";
+		textObject = null;
+	}
+
+	var posX = 0;
+	var anchorValue = 0;
+	switch(align) {
+		case "left":
+		posX = ScreenBottomUI.TEXT_OFFSET;
+		break;
+
+		case "center":
+		posX = game.world.centerX;
+		anchorValue = 0.5;
+		break;
+
+		case "right":
+		posX = game.world.width - ScreenBottomUI.TEXT_OFFSET;
+		anchorValue = 1;
+		break;
+	}
+
+	textObject = game.add.text(posX, this.bottomBarCenterY, text, this.getFontStyle());
+
+	textObject.anchor.x = anchorValue;
+	textObject.anchor.y = 0.5;
+
+	return textObject;
+}
+
+ScreenBottomUI.prototype.printLeftTextWithBestRecord = function(bestRecord) {
+	var roundUpBestRecord = Math.round(bestRecord);
+	var highScoreWithCommas = NumberUtil.numberWithCommas(roundUpBestRecord);
+	this.printLeftText("오늘의 최고 기록 : " + highScoreWithCommas);
+}
+
+ScreenBottomUI.prototype.getFontStyle = function() {
+	return { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+}
+
+
 ScreenBottomUI.BG_HEIGHT					= 50;
 
 ScreenBottomUI.NAME_WIDTH				= 200;

src/game/lib/screen_top_ui.js

@@ -1,29 +1,22 @@
-/////////////////////////////
+function ScreenTopUI() {
-// Screen top ui
+	this.drawBG();
+}
 
-class ScreenTopUI {
+ScreenTopUI.prototype.drawBG = function() {
+	game.add.graphics()
+		.beginFill(0x303030, 1)
+		.drawRect(
+			0, 0,
+			game.world.width, ScreenTopUI.BG_HEIGHT
+		);
+}
 
-	constructor() {
+ScreenTopUI.prototype.makeBackButton = function(eventHandler) {
-		this.drawBG();
+	this.backButton = new BackButton(eventHandler);
-	}
+}
-
-	drawBG() {
-		game.add.graphics()
-			.beginFill(0x303030, 1)
-			.drawRect(
-				0, 0,
-				game.world.width, ScreenTopUI.BG_HEIGHT
-			);
-	}
-
-	makeBackButton(eventHandler) {
-		this.backButton = new BackButton(eventHandler);
-	}
-
-	makeFullScreenButton() {
-		// this.fullscreenButton = new FullscreenButton();
-	}
 
+ScreenTopUI.prototype.makeFullScreenButton = function() {
+	// this.fullscreenButton = new FullscreenButton();
 }
 
 

src/game/lib/session_storage_manager.js

@@ -100,11 +100,11 @@ SessionStorageManager.prototype.getIsNewBestRecord = function() {
 }
 
 SessionStorageManager.prototype.resetPlayingAppData = function() {
-	this.removeItem(playingAppID);
+	this.removeItem("playingAppID");
-	this.removeItem(playingAppName);
+	this.removeItem("playingAppName");
-	this.removeItem(playingAppKoreanName);
+	this.removeItem("playingAppKoreanName");
-	this.removeItem(record);
+	this.removeItem("record");
-	this.removeItem(bestRecord);
+	this.removeItem("bestRecord");
 }
 
 

src/game/lib/string_util.js

@@ -1,96 +1,93 @@
-class StringUtil {
+function StringUtil() {
-
+}
-	static printMonthDay(date) {
+
-		let dateTime = new Date(date);
+StringUtil.printMonthDay = function(date) {
-		return (dateTime.getMonth() + 1) + "월 " + dateTime.getDate() + "일";
+	let dateTime = new Date(date);
-	}
+	return (dateTime.getMonth() + 1) + "월 " + dateTime.getDate() + "일";
-
+}
-	static getRecordTextWithoutUnit(value) {
+
-		let number = Math.floor(value);
+StringUtil.getRecordTextWithoutUnit = function(value) {
-		return NumberUtil.numberWithCommas(number);
+	let number = Math.floor(value);
-	}
+	return NumberUtil.numberWithCommas(number);
-
+}
-	static getRecordTextWithUnit(value) {
+
-		let number = Math.floor(value);
+StringUtil.getRecordTextWithUnit = function(value) {
-		let numberWithCommas = NumberUtil.numberWithCommas(number);
+	let number = Math.floor(value);
-
+	let numberWithCommas = NumberUtil.numberWithCommas(number);
-		if(isTypingGame())
+
-			return numberWithCommas + " 타";
+	if(isTypingGame())
-		else
+		return numberWithCommas + " 타";
-			return numberWithCommas + " 점";
+	else
-	}
+		return numberWithCommas + " 점";
-
+}
-	static getNumberStartWithZero(number, digitCount) {
+
-		let n = number + '';
+StringUtil.getNumberStartWithZero = function(number, digitCount) {
-		return n.length >= digitCount ? n : new Array(digitCount - n.length + 1).join('0') + n;
+	let n = number + '';
-	}
+	return n.length >= digitCount ? n : new Array(digitCount - n.length + 1).join('0') + n;
-
+}
-
+
-	static toKoreanAlphabets(text) {
+StringUtil.toKoreanAlphabets = function(text) {
-		const cCho = [ 'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ];
+	const cCho = [ 'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ];
-		const cJung = [ 'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ' ];
+	const cJung = [ 'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ' ];
-		const cJong = [ '', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ];
+	const cJong = [ '', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ];
-
+
-		let cho, jung, jong;
+	let cho, jung, jong;
-		let str = text;
+	let str = text;
-		let cnt = str.length;
+	let cnt = str.length;
-		let chars = [], cCode;
+	let chars = [], cCode;
-
+
-		for (let i = 0; i < cnt; i++) {
+	for (let i = 0; i < cnt; i++) {
-			cCode = str.charCodeAt(i);
+		cCode = str.charCodeAt(i);
-			// if (cCode == 32) { continue; } // 한글이 아닌 경우
+		// if (cCode == 32) { continue; } // 한글이 아닌 경우
-			if (cCode < 0xAC00 || cCode > 0xD7A3) {
+		if (cCode < 0xAC00 || cCode > 0xD7A3) {
-				chars.push(str.charAt(i));
+			chars.push(str.charAt(i));
-				continue;
+			continue;
-			}
+		}
-			cCode = str.charCodeAt(i) - 0xAC00;
+		cCode = str.charCodeAt(i) - 0xAC00;
-			jong = cCode % 28; // 종성
+		jong = cCode % 28; // 종성
-			jung = ((cCode - jong) / 28 ) % 21; // 중성
+		jung = ((cCode - jong) / 28 ) % 21; // 중성
-			cho = (((cCode - jong) / 28 ) - jung ) / 21; // 초성
+		cho = (((cCode - jong) / 28 ) - jung ) / 21; // 초성
-
+
-			chars.push(cCho[cho], cJung[jung]);
+		chars.push(cCho[cho], cJung[jung]);
-			if (cJong[jong] !== '') {
+		if (cJong[jong] !== '') {
-				chars.push(cJong[jong]);
+			chars.push(cJong[jong]);
-			}
+		}
-		}
+	}
-		return chars;
+	return chars;
-	};
+};
-
+
-
+StringUtil.getUnicodeAlphabetCount = function(text) {
-	static getUnicodeAlphabetCount(text) {
+	let chars = StringUtil.toKoreanAlphabets(text);
-		let chars = StringUtil.toKoreanAlphabets(text);
+	// console.log('char : ' + chars);
-		// console.log('char : ' + chars);
+
-
+	let doubleJaum = [
-		let doubleJaum = [
+		'ㄲ', 'ㅉ', 'ㄸ', 'ㄲ', 'ㅆ',
-			'ㄲ', 'ㅉ', 'ㄸ', 'ㄲ', 'ㅆ',
+		'ㄳ', 'ㄵ', 'ㄶ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅄ'
-			'ㄳ', 'ㄵ', 'ㄶ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅄ'
+	];
-		];
+	let doubleMoum = [
-		let doubleMoum = [
+		'ㅒ', 'ㅖ',
-			'ㅒ', 'ㅖ',
+		'ㅘ', 'ㅙ', 'ㅚ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅢ'
-			'ㅘ', 'ㅙ', 'ㅚ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅢ'
+	];
-		];
+
-
+	let alphabetCount = 0;
-		let alphabetCount = 0;
+	let alphabet;
-		let alphabet;
+	for(let i = 0; i < chars.length; i++) {
-		for(let i = 0; i < chars.length; i++) {
+		alphabet = chars[i];
-			alphabet = chars[i];
+		if(doubleJaum.indexOf(alphabet) > -1 || doubleMoum.indexOf(alphabet) > -1) {
-			if(doubleJaum.indexOf(alphabet) > -1 || doubleMoum.indexOf(alphabet) > -1) {
+			// console.log('double alphabet : ' + alphabet);
-				// console.log('double alphabet : ' + alphabet);
+			alphabetCount += 2;
-				alphabetCount += 2;
+		}
-			}
+		else
-			else
+			alphabetCount++;
-				alphabetCount++;
+	}
-		}
+
-
+	// return chars;
-		// return chars;
+	return alphabetCount;
-		return alphabetCount;
+};
-	};
+
-
+StringUtil.getScoreUnit = function(playingAppID) {
-	static getScoreUnit(playingAppID) {
+	if(playingAppID < 100)
-		if(playingAppID < 100)
+		return " 타";
-			return " 타";
+	else
-		else
+		return " 점";
-			return " 점";
-	}
-
 }

src/game/login/login.js

@@ -1,13 +1,10 @@
-/////////////////////////////
+var Login = {
-// Login
 
-class Login {
+	preload: function() {
-
-	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	}
+	},
 
-	create() {
+	create: function() {
 		sessionStorageManager.clear();
 
 		this.game.stage.backgroundColor = '#4d4d4d';
@@ -24,12 +21,12 @@ class Login {
 
 
 		var textX = this.game.world.centerX - 320;
-		if(sessionStorageManager.maestroID === null)
+		if(sessionStorageManager.getMaestroID() === null)
 			this.makeMaestroNameText(textX, 200);
 		this.makeNameText(textX, 300);
 		this.makeEnterCodeText(textX, 360);
 
-		if(sessionStorageManager.maestroID === null)
+		if(sessionStorageManager.getMaestroID() === null)
 			this.inputTextMaestroName.canvasInput.focus();
 		else
 			this.inputTextName.canvasInput.focus();
@@ -37,31 +34,31 @@ class Login {
 		this.makeStartButton(game.world.centerX, game.world.centerY + 100);
 
 		this.makeInfoText();
-	}
+	},
 
-	makeMaestroNameText(x, y) {
+	makeMaestroNameText: function(x, y) {
 		this.makeTextField(x, y, "마에스트로 계정 :");
 		this.inputTextMaestroName = this.makeInputTypeText(x, y, "jisangs");
-	}
+	},
 
-	makeNameText(x, y) {
+	makeNameText: function(x, y) {
 		this.makeTextField(x, y, "이름 :");
 		this.inputTextName = this.makeInputTypeText(x, y, "박지상");
-	}
+	},
 
-	makeEnterCodeText(x, y) {
+	makeEnterCodeText: function(x, y) {
 		this.makeTextField(x, y, "입장번호 :");
 		this.inputTextEnterCode = this.makeInputTypeText(x, y, "760621");
-	}
+	},
 
-	makeTextField(x, y, text) {
+	makeTextField: function(x, y, text) {
 		return game.add.text(x, y, text, this.textStyle)
 		.setTextBounds(0, 0, 200, 0)
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 		.boundsAlignH = 'right';
-	}
+	},
 
-	makeInputTypeText(x, y, text) {
+	makeInputTypeText: function(x, y, text) {
 		var inputText = new InputTypeText(x + 420, y);
 		inputText.anchor.set(0.5);
 		inputText.canvasInput.value('');
@@ -75,9 +72,9 @@ class Login {
 		}
 
 		return inputText;
-	}
+	},
 
-	makeStartButton(x, y) {
+	makeStartButton: function(x, y) {
 		var setting = new RoundRectButtonSetting(x, y, 200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
@@ -86,26 +83,26 @@ class Login {
 			RoundRectButton.NONE_ICON, "시작",
 			(function() { this.startMenu(); }).bind(this)
 		);
-	}
+	},
 
-	makeInfoText(x, y) {
+	makeInfoText: function(x, y) {
 		var textStyle = { font: "30px Arial", fill: "#faa" };
 		this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
 		this.infoText.anchor.set(0.5);
 		this.infoText.stroke = "#333";
 		this.infoText.strokeThickness = 3;
-	}
+	},
 
 
-	startMenu() {
+	startMenu: function() {
 		var maestroName = this.inputTextMaestroName.canvasInput._value;
-		sessionStorageManager.playerName = this.inputTextName.canvasInput._value;
+		sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
 		var enterCode = this.inputTextEnterCode.canvasInput._value;
 
 		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestCheckPlayerLogin(
 			maestroName,
-			sessionStorageManager.playerName,
+			sessionStorageManager.getPlayerName(),
 			enterCode,
 			(function(jsonData) {
 				this.loginSucceeded(jsonData);
@@ -114,23 +111,23 @@ class Login {
 				this.loginFailed(jsonData);
 			}).bind(this)
 		);
-	}
+	},
 
-	loginSucceeded(jsonData) {
+	loginSucceeded: function(jsonData) {
-		sessionStorageManager.maestroID = jsonData['MaestroID'];
+		sessionStorageManager.setMaestroID(jsonData['MaestroID']);
-		sessionStorageManager.maestroAccountType = jsonData['MaestroAccountType'];
+		sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
-		sessionStorageManager.playerID = jsonData['PlayerID'];
+		sessionStorageManager.setPlayerID(jsonData['PlayerID']);
-		sessionStorageManager.playerName = jsonData['PlayerName'];
+		sessionStorageManager.setPlayerName(jsonData['PlayerName']);
-		sessionStorageManager.playerAccountType = jsonData['PlayerAccountType'];
+		sessionStorageManager.setPlayerAccountType(jsonData['PlayerAccountType']);
 
-		sessionStorageManager.playingAppName = "menu";
+		sessionStorageManager.setPlayingAppName("menu");
 		location.href = '../../web/client/menu_app.html';
 
 		// console.log("===== after login =====");
 		// console.log(sessionStorageManager.playerID);
-	}
+	},
 
-	loginFailed(jsonData) {
+	loginFailed: function(jsonData) {
 		sessionStorageManager.clear();
 
 		// show retry message

src/game/menu/menu_typing_practice.js

@@ -69,7 +69,7 @@ var MenuTypingPractice = {
 		var screenBottomUI = new ScreenBottomUI();
 		// screenBottomUI.printLeftText("게임 진행 정보");
 		screenBottomUI.printCenterText("메뉴 > 타자 연습");
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
 		this.makeActiveTypingPracticeAppButtons();
@@ -79,8 +79,8 @@ var MenuTypingPractice = {
 	makeActiveTypingPracticeAppButtons: function() {
 		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestTypingPracticeAppList(
-			sessionStorageManager.maestroID,
+			sessionStorageManager.getMaestroID(),
-			sessionStorageManager.playerID,
+			sessionStorageManager.getPlayerID(),
 			(function(replyJSON) {
 				this.downloadListSucceeded(replyJSON);
 			}).bind(this),

src/game/menu/menu_typing_test.js

@@ -72,15 +72,15 @@ var MenuTypingTest = {
 		var screenBottomUI = new ScreenBottomUI();
 		// screenBottomUI.printLeftText("게임 진행 정보");
 		screenBottomUI.printCenterText("메뉴 > 타자 시험");
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 	},
 
 
 	makeActiveTypingTestAppButtons: function() {
 		var dbConnectManager = new DBConnectManager();
 		dbConnectManager.requestTypingTestAppList(
-			sessionStorageManager.maestroID,
+			sessionStorageManager.getMaestroID(),
-			sessionStorageManager.playerID,
+			sessionStorageManager.getPlayerID(),
 			// self.downloadListSucceeded,
 			// self.downloadListFailed
 			(function(replyJSON) {

src/game/mouse/space_invaders/game.js

@@ -6,7 +6,7 @@ class Game {
 	create() {
 		this.game.stage.backgroundColor = "#000000";	// '#4d4d4d';
 
-		sessionStorageManager.isNewBestRecrd = false;
+		sessionStorageManager.setIsNewBestRecord(false);
 
 		// top ui
 		var screenTopUI = new ScreenTopUI();
@@ -18,14 +18,14 @@ class Game {
 
 		var scoreBoard = new ScoreBoard();
 		scoreManager.addOnChangeScoreListener( function(score) {
-			sessionStorageManager.record = score;
+			sessionStorageManager.setRecord(score);
 			scoreBoard.printScore(NumberUtil.numberWithCommas(score));
 		});
 		scoreManager.addOnChangeHighScoreListener( function(highScore) {
 			console.log(highScore);
-			sessionStorageManager.bestRecord = highScore;
+			sessionStorageManager.setBestRecord(highScore);
-			sessionStorageManager.isNewBestRecrd = true;
+			sessionStorageManager.setIsNewBestRecrd(true);
-			screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+			screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
 		});
 
 		var heartGauge = new HeartGauge(heartManager);
@@ -72,9 +72,9 @@ class Game {
 
 		// bottom ui
 		var screenBottomUI = new ScreenBottomUI();
-		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
-		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
 		this.startGame();

src/game/ranking/ranking.js

@@ -1,13 +1,10 @@
-/////////////////////////////
+var Ranking = {
-// Ranking
 
-class Ranking {
+	preload: function() {
-
-	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
-	}
+	},
 
-	create() {
+	create: function() {
 		self = this;
 
 		this.dbConnectManager = new DBConnectManager();
@@ -17,20 +14,20 @@ class Ranking {
 
 		this.game.stage.backgroundColor = '#4d4d4d';
 
-		// let phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
+		// var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
 		// phaser.anchor.set(0.5);
 		// phaser.alpha = 0.1;
 
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			location.href = '../../web/client/start.html';
 		});
 		screenTopUI.makeFullScreenButton();
 
 
-		let resultTextStyle = textStyleBasic;
+		var resultTextStyle = textStyleBasic;
 		resultTextStyle.font = "bold 42px Arial";
 
 		this.textTitle = game.add.text(GAME_SCREEN_SIZE.x / 2, 32, "수업시간 순위", resultTextStyle)
@@ -42,38 +39,38 @@ class Ranking {
 		// contents
 
 		// rank
-		let rankAreaPositionX = 160;
+		var rankAreaPositionX = 160;
-		let rankAreaPositionY = 90;
+		var rankAreaPositionY = 90;
-		let style = { font: "34px Arial", fill: "#fff", tabs: [ 60, 160, 160 ] };
+		var style = { font: "34px Arial", fill: "#fff", tabs: [ 60, 160, 160 ] };
 		this.textRanking1to10 = game.add.text(rankAreaPositionX, rankAreaPositionY , '', style)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 		this.textRanking11to20 = game.add.text(rankAreaPositionX + 420, rankAreaPositionY, '', style)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
 
-		let buttonPositionY = 640;
+		var buttonPositionY = 640;
-		let buttonHour = this.makeTextButton(game.world.centerX - 220, buttonPositionY, "수업시간 순위", this.showRankingHour);
+		var buttonHour = this.makeTextButton(game.world.centerX - 220, buttonPositionY, "수업시간 순위", this.showRankingHour);
 		// buttonHour.inputEnabled = false;
-		let buttonDay = this.makeTextButton(game.world.centerX, buttonPositionY, "오늘의 순위", this.showRankingDay);
+		var buttonDay = this.makeTextButton(game.world.centerX, buttonPositionY, "오늘의 순위", this.showRankingDay);
 		// buttonDay.inputEnabled = false;
-		let buttonMonth = this.makeTextButton(game.world.centerX + 220, buttonPositionY, "이달의 순위", this.showRankingMonth);
+		var buttonMonth = this.makeTextButton(game.world.centerX + 220, buttonPositionY, "이달의 순위", this.showRankingMonth);
 		// buttonMonth.inputEnabled = false;
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		// ScreenBottomUI.printLeftText("게임 진행 정보");
-		// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
+		// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.getPlayingAppName());
 		// ScreenBottomUI.printCenterText(playingAppName);
 		screenBottomUI.printCenterText("랭킹");
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 		this.getRecordToRankingServer();
 		game.time.events.loop(Phaser.Timer.SECOND * 10, this.getRecordToRankingServer, this);
-	}
+	},
 
-	makeTextButton(x, y, buttonText, eventListener) {
+	makeTextButton: function(x, y, buttonText, eventListener) {
-		let setting = new RoundRectButtonSetting(x, y, 200, 100);
+		var setting = new RoundRectButtonSetting(x, y, 200, 100);
 		setting.fontStyle.fontWeight = "bold";
 		switch(buttonText) {
 			case "수업시간 순위":
@@ -142,15 +139,15 @@ class Ranking {
 		}
 
 		return new RoundRectButton(setting, RoundRectButton.NONE_ICON, buttonText, eventListener);
-	}
+	},
 
-	getRecordToRankingServer() {
+	getRecordToRankingServer: function() {
 		// console.log("getRecordToRankingServer : " + this.mode);
-		let self = this;
+		var self = this;
 
 		this.dbConnectManager.requestAppRanking(
-			sessionStorageManager.maestroID,
+			sessionStorageManager.getMaestroID(),
-			sessionStorageManager.playingAppID,
+			sessionStorageManager.getPlayingAppID(),
 			(function(jsonData) {
 				self.showRanking(jsonData);
 			}),
@@ -158,48 +155,48 @@ class Ranking {
 				self.showRanking(null);
 			})
 		);
-	}
+	},
 
-	showRankingHour() {
+	showRankingHour: function() {
 		self.mode = Ranking.MODE_HOUR;
 		self.textTitle.text = "수업시간 순위";
 		self.textTitle.addColor("#ff6666", 0);
 		self.getRecordToRankingServer();
-	}
+	},
 
-	showRankingDay() {
+	showRankingDay: function() {
 		self.mode = Ranking.MODE_DAY;
 		self.textTitle.text = "오늘의 순위";
 		self.textTitle.addColor("#9999ff", 0);
 		self.getRecordToRankingServer();
-	}
+	},
 
-	showRankingMonth() {
+	showRankingMonth: function() {
 		self.mode = Ranking.MODE_MONTH;
 		self.textTitle.text = "이달의 순위";
 		self.textTitle.addColor("#99ff99", 0);
 		self.getRecordToRankingServer();
-	}
+	},
 
-	showRanking(jsonRankingData) {
+	showRanking: function(jsonRankingData) {
 		// console.log(jsonRankingData);
 
-		if(sessionStorageManager.maestroAccountType == 101) {
+		if(sessionStorageManager.getMaestroAccountType() == 101) {
-			let recordArray = this.getDummyRankList();
+			var recordArray = this.getDummyRankList();
 			this.printRanking(recordArray);
 
 			return;
 		}
 
 		if(jsonRankingData === null) {
-			let rankEmpty = [ ];
+			var rankEmpty = [ ];
 			this.textRanking1to10.parseList(rankEmpty);
 			this.textRanking11to20.parseList(rankEmpty);
 
 			return;
 		}
 
-		let jsonRankingList = null;
+		var jsonRankingList = null;
 		if(this.mode === Ranking.MODE_HOUR)
 			jsonRankingList = jsonRankingData.rankingHour;
 		else if(this.mode === Ranking.MODE_DAY)
@@ -208,22 +205,22 @@ class Ranking {
 			jsonRankingList = jsonRankingData.rankingMonth;
 
 		if(jsonRankingList === null) {
-			let rankEmpty = [ ];
+			var rankEmpty = [ ];
 			this.textRanking1to10.parseList(rankEmpty);
 			this.textRanking11to20.parseList(rankEmpty);
 
 			return;
 		}
 
-		let recordArray = this.getRankingArrayFromJSON(jsonRankingList);
+		var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
 		this.printRanking(recordArray);
-	}
+	},
 
 
-	printRanking(recordArray) {
+	printRanking: function(recordArray) {
-		let recordTop10 = [];
+		var recordTop10 = [];
-		let recordTop20 = [];
+		var recordTop20 = [];
-		for(let i = 0; i < 10; i++) {
+		for(var i = 0; i < 10; i++) {
 			if(i < recordArray.length)
 				recordTop10.push(recordArray[i]);
 			if(i + 10 < recordArray.length)
@@ -231,17 +228,17 @@ class Ranking {
 		}
 		this.textRanking1to10.parseList(recordTop10);
 		this.textRanking11to20.parseList(recordTop20);
-	}
+	},
 
-	getRankingArrayFromJSON(jsonRankingList) {
+	getRankingArrayFromJSON: function(jsonRankingList) {
 		// if(isDebugMode())
 		//	return this.getDummyRankList();
 
-		let rankingListCount = jsonRankingList.length;
+		var rankingListCount = jsonRankingList.length;
 
-		let recordArray = [];
+		var recordArray = [];
-		for(let i = 0; i < rankingListCount; i++) {
+		for(var i = 0; i < rankingListCount; i++) {
-			let bestRecordRow = [];
+			var bestRecordRow = [];
 			// bestRecordRow[0] = jsonRankingList[i]['UserID'];
 			bestRecordRow[0] = i + 1;
 			bestRecordRow[1] = jsonRankingList[i]['Name'];
@@ -252,10 +249,10 @@ class Ranking {
 		}
 
 		return recordArray;
-	}
+	},
 
-	getDummyRankList() {
+	getDummyRankList: function() {
-		let dummyRankList = [
+		var dummyRankList = [
 			[ '1', 'test1', '400' ],
 			[ '2', 'test2', '300' ],
 			[ '3', 'test3', '200' ],

src/game/result/history_board.js

@@ -1,111 +1,104 @@
-/////////////////////////////
+function HistoryBoard(type) {
-// History board
+	if(type === RecordBoard.TYPE_SAMPLE) {
-
+		this.printSample();
-class HistoryBoard {
+		return;
-
-	constructor(type) {
-		if(type === RecordBoard.TYPE_SAMPLE) {
-			this.printSample();
-			return;
-		}
-
-		this.todayBestRecord = 0;
-
-		this.dbConnectManager = new DBConnectManager();
-
-		let arrayTabStyle = { font: "20px Arial", fill: "#fff", align: "left", tabs: [ 40, 80, 120 ] };
-
-		let posX = 40;
-		let posY = game.world.height / 2 - 10;
-		this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		let today = new Date();
-		let date = DateUtil.getYYYYMMDD(today);
-		this.dbConnectManager.requestPlayerHistory(
-			sessionStorageManager.maestroID,
-			date,
-			(function(historyRecordManager) {
-				if(historyRecordManager.count == 0) {
-					console.log("history board - no data");
-					return;
-				}
-
-				for(let i = 0; i < historyRecordManager.count; i++) {
-					let data = historyRecordManager.getAt(i);
-					this.printRecord(i, data.date, data.bestRecord);
-
-					if(date == data.date)
-						this.todayBestRecord = data.bestRecord;
-				}
-			})
-		);
 	}
 
-	calcDate(daysBefore) {
+	this.todayBestRecord = 0;
-		let date = new Date();
-		date.setDate(date.getDate() - daysBefore);
-		return date;
-	}
 
+	this.dbConnectManager = new DBConnectManager();
 
-	printRecord(index, date, bestRecord) {
+	var arrayTabStyle = { font: "20px Arial", fill: "#fff", align: "left", tabs: [ 40, 80, 120 ] };
-		if(sessionStorageManager.playingAppName.indexOf("typing") < 0)
-			this.printMouseAppHistory(index, date, bestRecord);
-		else
-			this.printTypingAppHistory(index, date, appName, bestRecord);
-	}
 
-	printMouseAppHistory(index, date, bestRecord) {
+	var posX = 40;
-		let posX = 60;
+	var posY = game.world.height / 2 - 10;
-		let posY = game.world.height / 2 + 90 + 30 * index;
+	this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
-		var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
+	var today = new Date();
+	var date = DateUtil.getYYYYMMDD(today);
+	this.dbConnectManager.requestPlayerHistory(
+		sessionStorageManager.getMaestroID(),
+		date,
+		(function(historyRecordManager) {
+			if(historyRecordManager.getCount() == 0) {
+				console.log("history board - no data");
+				return;
+			}
 
-		style.boundsAlignH = "center";
+			for(var i = 0; i < historyRecordManager.getCount(); i++) {
-		game.add.text(posX, posY, StringUtil.printMonthDay(date), style)
+				var data = historyRecordManager.getAt(i);
-			.setTextBounds(0, 0, 100, 60)
+				this.printRecord(i, data.date, data.bestRecord);
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		style.boundsAlignH = "right";
-		game.add.text(posX + 80, posY, StringUtil.getRecordTextWithoutUnit(bestRecord), style)
-			.setTextBounds(0, 0, 100, 60)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-	}
-
-	printTypingAppHistory(index, date, appName, bestRecord) {
-		let posX = 60;
-		let posY = game.world.height / 2 + 90 + 30 * index;
-
-		var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
-
-		style.boundsAlignH = "center";
-		game.add.text(posX, posY, date, style)
-			.setTextBounds(0, 0, 40, 40)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		game.add.text(posX + 60, posY, appName, style)
-			.setTextBounds(0, 0, 60, 60)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		style.boundsAlignH = "right";
-		game.add.text(posX + 120, posY, StringUtil.getRecordTextWithoutUnit(bestRecord), style)
-			.setTextBounds(0, 0, 80, 60)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-	}
-
-	printSample() {
-		this.printRecord(0, DateUtil.getYYYYMMDD(this.calcDate(2)), 1270);
-		this.printRecord(1, DateUtil.getYYYYMMDD(this.calcDate(3)), 1150);
-		this.printRecord(2, DateUtil.getYYYYMMDD(this.calcDate(5)), 1080);
-		this.printRecord(3, DateUtil.getYYYYMMDD(this.calcDate(7)), 960);
-		this.printRecord(4, DateUtil.getYYYYMMDD(this.calcDate(10)), 1020);
-		this.printRecord(5, DateUtil.getYYYYMMDD(this.calcDate(15)), 840);
-		this.printRecord(6, DateUtil.getYYYYMMDD(this.calcDate(20)), 760);
-	}
-
-	todayBestRecord() {
-		return this.todayBestRecord;
-	}
 
+				if(date == data.date)
+					this.todayBestRecord = data.bestRecord;
+			}
+		}).bind(this)
+	);
+}
+
+HistoryBoard.prototype.calcDate = function(daysBefore) {
+	var date = new Date();
+	date.setDate(date.getDate() - daysBefore);
+	return date;
+}
+
+
+HistoryBoard.prototype.printRecord = function(index, date, bestRecord) {
+	if(sessionStorageManager.getPlayingAppName().indexOf("typing") < 0)
+		this.printMouseAppHistory(index, date, bestRecord);
+	else
+		this.printTypingAppHistory(index, date, appName, bestRecord);
+}
+
+HistoryBoard.prototype.printMouseAppHistory = function(index, date, bestRecord) {
+	var posX = 60;
+	var posY = game.world.height / 2 + 90 + 30 * index;
+
+	var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
+
+	style.boundsAlignH = "center";
+	game.add.text(posX, posY, StringUtil.printMonthDay(date), style)
+		.setTextBounds(0, 0, 100, 60)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+	style.boundsAlignH = "right";
+	game.add.text(posX + 80, posY, StringUtil.getRecordTextWithoutUnit(bestRecord), style)
+		.setTextBounds(0, 0, 100, 60)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+}
+
+HistoryBoard.prototype.printTypingAppHistory = function(index, date, appName, bestRecord) {
+	var posX = 60;
+	var posY = game.world.height / 2 + 90 + 30 * index;
+
+	var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
+
+	style.boundsAlignH = "center";
+	game.add.text(posX, posY, date, style)
+		.setTextBounds(0, 0, 40, 40)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+	game.add.text(posX + 60, posY, appName, style)
+		.setTextBounds(0, 0, 60, 60)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+	style.boundsAlignH = "right";
+	game.add.text(posX + 120, posY, StringUtil.getRecordTextWithoutUnit(bestRecord), style)
+		.setTextBounds(0, 0, 80, 60)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+}
+
+HistoryBoard.prototype.printSample = function() {
+	this.printRecord(0, DateUtil.getYYYYMMDD(this.calcDate(2)), 1270);
+	this.printRecord(1, DateUtil.getYYYYMMDD(this.calcDate(3)), 1150);
+	this.printRecord(2, DateUtil.getYYYYMMDD(this.calcDate(5)), 1080);
+	this.printRecord(3, DateUtil.getYYYYMMDD(this.calcDate(7)), 960);
+	this.printRecord(4, DateUtil.getYYYYMMDD(this.calcDate(10)), 1020);
+	this.printRecord(5, DateUtil.getYYYYMMDD(this.calcDate(15)), 840);
+	this.printRecord(6, DateUtil.getYYYYMMDD(this.calcDate(20)), 760);
+}
+
+HistoryBoard.prototype.todayBestRecord = function() {
+	return this.todayBestRecord;
 }

src/game/result/ranking_board.js

@@ -1,268 +1,261 @@
-/////////////////////////////
+function RankingBoard(type) {
-// Ranking board
+	if(type === RecordBoard.TYPE_SAMPLE) {
-
+		this.printSample();
-class RankingBoard {
+		return;
-
-	constructor(type) {
-		if(type === RecordBoard.TYPE_SAMPLE) {
-			this.printSample();
-			return;
-		}
-
-		this.makeMedalSprites();
-
-		this.dbConnectManager = new DBConnectManager();
-		this.requestRanking(DBConnectManager.TYPE_MY_RANKING_HOUR);
-		this.requestRanking(DBConnectManager.TYPE_MY_RANKING_DAY);
-		this.requestRanking(DBConnectManager.TYPE_MY_RANKING_MONTH);
 	}
 
+	this.makeMedalSprites();
 
-	requestRanking(type) {
+	this.dbConnectManager = new DBConnectManager();
-		let today = new Date();
+	this.requestRanking(DBConnectManager.TYPE_MY_RANKING_HOUR);
-		let date = DateUtil.getYYYYMMDD(today);
+	this.requestRanking(DBConnectManager.TYPE_MY_RANKING_DAY);
-		let time = DateUtil.getHHMMSS(today);
+	this.requestRanking(DBConnectManager.TYPE_MY_RANKING_MONTH);
-		this.dbConnectManager.requestRanking(
+}
-			type, sessionStorageManager.maestroID, date, time,
+
-			(type, rankingRecordManager) => {
+
-				if(rankingRecordManager.count == 0) {
+RankingBoard.prototype.requestRanking = function(type) {
-					console.log("ranking board - no data");
+	var today = new Date();
-					return;
+	var date = DateUtil.getYYYYMMDD(today);
-				}
+	var time = DateUtil.getHHMMSS(today);
-
+	this.dbConnectManager.requestRanking(
-				let beginIndex = this.getBeginIndex(rankingRecordManager);
+		type, sessionStorageManager.getMaestroID(), date, time,
-				let endIndex = this.getEndIndex(rankingRecordManager);
+		(function(type, rankingRecordManager) {
-
+			if(rankingRecordManager.getCount() == 0) {
-				for(let i = 0; i < endIndex - beginIndex; i++) {
+				console.log("ranking board - no data");
-					let index = beginIndex + i;
+				return;
-					let data = rankingRecordManager.getAt(index);
+			}
-					this.printRecord(type, i, data);
+
-				}
+			var beginIndex = this.getBeginIndex(rankingRecordManager);
-
+			var endIndex = this.getEndIndex(rankingRecordManager);
-				switch(type) {
+
-					case DBConnectManager.TYPE_MY_RANKING_HOUR:
+			for(var i = 0; i < endIndex - beginIndex; i++) {
-					this.showMedal(this.medalHour, this.getMyRank(rankingRecordManager));
+				var index = beginIndex + i;
-					break;
+				var data = rankingRecordManager.getAt(index);
-
+				this.printRecord(type, i, data);
-					case DBConnectManager.TYPE_MY_RANKING_DAY:
+			}
-					this.showMedal(this.medalDay, this.getMyRank(rankingRecordManager));
+
-					break;
+			switch(type) {
-
+				case DBConnectManager.TYPE_MY_RANKING_HOUR:
-					case DBConnectManager.TYPE_MY_RANKING_MONTH:
+				this.showMedal(this.medalHour, this.getMyRank(rankingRecordManager));
-					this.showMedal(this.medalMonth, this.getMyRank(rankingRecordManager));
+				break;
-					break;
+
-
+				case DBConnectManager.TYPE_MY_RANKING_DAY:
-				}
+				this.showMedal(this.medalDay, this.getMyRank(rankingRecordManager));
-			}
+				break;
-		);
+
-	}
+				case DBConnectManager.TYPE_MY_RANKING_MONTH:
-
+				this.showMedal(this.medalMonth, this.getMyRank(rankingRecordManager));
-	getMyRank(rankingRecordManager) {
+				break;
-		let playerID = Number(sessionStorageManager.playerID);
+
-
+			}
-		for(let i = 0; i < rankingRecordManager.count; i++) {
+		}).bind(this)
-			let data = rankingRecordManager.getAt(i);
+	);
-			let playerIDNo = Number(data["playerID"]);
+}
-			if(playerIDNo === playerID)
+
-				return i + 1;
+RankingBoard.prototype.getMyRank = function(rankingRecordManager) {
-		}
+	var playerID = Number(sessionStorageManager.getPlayerID());
-
+
-		return -1;
+	for(var i = 0; i < rankingRecordManager.getCount(); i++) {
-	}
+		var data = rankingRecordManager.getAt(i);
-
+		var playerIDNo = Number(data["playerID"]);
-	getBeginIndex(rankingRecordManager) {
+		if(playerIDNo === playerID)
-		let rankingRecordCount = rankingRecordManager.count;
+			return i + 1;
-		let myRank = this.getMyRank(rankingRecordManager);
+	}
-		let myRankIndex = myRank - 1;
+
-
+	return -1;
-		let startIndex = 0;
+}
-		let endIndex = rankingRecordCount;
+
-		if(rankingRecordCount > 7) {
+RankingBoard.prototype.getBeginIndex = function(rankingRecordManager) {
-			if(myRank < rankingRecordCount - 3) {		// my rank is better than the worst 3
+	var rankingRecordCount = rankingRecordManager.getCount();
-				if(myRank < 5) {
+	var myRank = this.getMyRank(rankingRecordManager);
-					startIndex = 0;
+	var myRankIndex = myRank - 1;
-					endIndex = rankingRecordCount > 7 ? 7 : rankingRecordCount;
+
-				} else {
+	var startIndex = 0;
-					startIndex = myRankIndex - 3;
+	var endIndex = rankingRecordCount;
-					endIndex = myRankIndex + 4;
+	if(rankingRecordCount > 7) {
-				}
+		if(myRank < rankingRecordCount - 3) {		// my rank is better than the worst 3
-			} else {		// my rank is in the worst 3
+			if(myRank < 5) {
-				startIndex = rankingRecordCount > 7 ? rankingRecordCount - 7 : 0;
+				startIndex = 0;
-				endIndex = rankingRecordCount;
+				endIndex = rankingRecordCount > 7 ? 7 : rankingRecordCount;
-			}
+			} else {
-		}
+				startIndex = myRankIndex - 3;
-
+				endIndex = myRankIndex + 4;
-		return startIndex;
+			}
-	}
+		} else {		// my rank is in the worst 3
-
+			startIndex = rankingRecordCount > 7 ? rankingRecordCount - 7 : 0;
-	getEndIndex(rankingRecordManager) {
+			endIndex = rankingRecordCount;
-		let rankingRecordCount = rankingRecordManager.count;
+		}
-		let myRank = this.getMyRank(rankingRecordManager);
+	}
-		let myRankIndex = myRank - 1;
+
-
+	return startIndex;
-		let startIndex = 0;
+}
-		let endIndex = rankingRecordCount;
+
-		if(rankingRecordCount > 7) {
+RankingBoard.prototype.getEndIndex = function(rankingRecordManager) {
-			if(myRank < rankingRecordCount - 3) {		// my rank is better than the worst 3
+	var rankingRecordCount = rankingRecordManager.getCount();
-				if(myRank < 5) {
+	var myRank = this.getMyRank(rankingRecordManager);
-					startIndex = 0;
+	var myRankIndex = myRank - 1;
-					endIndex = rankingRecordCount > 7 ? 7 : rankingRecordCount;
+
-				} else {
+	var startIndex = 0;
-					startIndex = myRankIndex - 3;
+	var endIndex = rankingRecordCount;
-					endIndex = myRankIndex + 4;
+	if(rankingRecordCount > 7) {
-				}
+		if(myRank < rankingRecordCount - 3) {		// my rank is better than the worst 3
-			} else {		// my rank is in the worst 3
+			if(myRank < 5) {
-				startIndex = rankingRecordCount > 7 ? rankingRecordCount - 7 : 0;
+				startIndex = 0;
-				endIndex = rankingRecordCount;
+				endIndex = rankingRecordCount > 7 ? 7 : rankingRecordCount;
-			}
+			} else {
-		}
+				startIndex = myRankIndex - 3;
-
+				endIndex = myRankIndex + 4;
-		return endIndex;
+			}
-	}
+		} else {		// my rank is in the worst 3
-
+			startIndex = rankingRecordCount > 7 ? rankingRecordCount - 7 : 0;
-
+			endIndex = rankingRecordCount;
-	printRecord(type, index, data) {
+		}
-		var style = { font: "20px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
+	}
-
+
-		// rank
+	return endIndex;
-		style.boundsAlignH = "right";
+}
-		let rankText = game.add.text(this.getPosX(type), this.getPosY(index), data.rank, style);
+
-			// .setTextBounds(0, 0, 40, 40)
+
-		rankText.anchor.set(1, 0);
+RankingBoard.prototype.printRecord = function(type, index, data) {
-		rankText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	var style = { font: "20px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
-
+
-		// player name
+	// rank
-		let playerNameText = game.add.text(this.getPosX(type) + 20, this.getPosY(index), data.playerName, style);
+	style.boundsAlignH = "right";
-			// .setTextBounds(0, 0, 60, 60)
+	var rankText = game.add.text(this.getPosX(type), this.getPosY(index), data.rank, style);
-		playerNameText.anchor.set(0, 0);
+		// .setTextBounds(0, 0, 40, 40)
-		playerNameText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	rankText.anchor.set(1, 0);
-
+	rankText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// bestRecord
+
-		let bestRecord = StringUtil.getRecordTextWithoutUnit(data.bestRecord);
+	// player name
-		style.boundsAlignH = "right";
+	var playerNameText = game.add.text(this.getPosX(type) + 20, this.getPosY(index), data.playerName, style);
-		let recordText = game.add.text(this.getPosX(type) + 180, this.getPosY(index), bestRecord, style);
+		// .setTextBounds(0, 0, 60, 60)
-			// .setTextBounds(0, 0, 80, 60)
+	playerNameText.anchor.set(0, 0);
-		recordText.anchor.set(1, 0);
+	playerNameText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		recordText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
-	}
+	// bestRecord
-
+	var bestRecord = StringUtil.getRecordTextWithoutUnit(data.bestRecord);
-	getPosX(type) {
+	style.boundsAlignH = "right";
-		let posX = 0;
+	var recordText = game.add.text(this.getPosX(type) + 180, this.getPosY(index), bestRecord, style);
-
+		// .setTextBounds(0, 0, 80, 60)
-		switch(type) {
+	recordText.anchor.set(1, 0);
-			case DBConnectManager.TYPE_MY_RANKING_HOUR:
+	recordText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-			case DBConnectManager.TYPE_ALL_RANKING_HOUR:
+}
-			posX = 330;
+
-			break;
+RankingBoard.prototype.getPosX = function(type) {
-
+	var posX = 0;
-			case DBConnectManager.TYPE_MY_RANKING_DAY:
+
-			case DBConnectManager.TYPE_ALL_RANKING_DAY:
+	switch(type) {
-			posX = 560;
+		case DBConnectManager.TYPE_MY_RANKING_HOUR:
-			break;
+		case DBConnectManager.TYPE_ALL_RANKING_HOUR:
-
+		posX = 330;
-			case DBConnectManager.TYPE_MY_RANKING_MONTH:
+		break;
-			case DBConnectManager.TYPE_ALL_RANKING_MONTH:
+
-			posX = 790;
+		case DBConnectManager.TYPE_MY_RANKING_DAY:
-		}
+		case DBConnectManager.TYPE_ALL_RANKING_DAY:
-
+		posX = 560;
-		return posX;
+		break;
-	}
+
-
+		case DBConnectManager.TYPE_MY_RANKING_MONTH:
-	getPosY(index) {
+		case DBConnectManager.TYPE_ALL_RANKING_MONTH:
-		return game.world.height / 2 + 90 + 30 * index;
+		posX = 790;
-	}
+	}
-
+
-	printSample() {
+	return posX;
-		// TYPE_MY_RANKING_HOUR
+}
-		this.printRecord(
+
-			DBConnectManager.TYPE_MY_RANKING_HOUR, 0,
+RankingBoard.prototype.getPosY = function(index) {
-			new RankingRecord(1, 0, "홍길동", 1080)
+	return game.world.height / 2 + 90 + 30 * index;
-		);
+}
-		this.printRecord(
+
-			DBConnectManager.TYPE_MY_RANKING_HOUR, 1,
+RankingBoard.prototype.printSample = function() {
-			new RankingRecord(2, 0, "3-1김영희", 860)
+	// TYPE_MY_RANKING_HOUR
-		);
+	this.printRecord(
-		this.printRecord(
+		DBConnectManager.TYPE_MY_RANKING_HOUR, 0,
-			DBConnectManager.TYPE_MY_RANKING_HOUR, 2,
+		new RankingRecord(1, 0, "홍길동", 1080)
-			new RankingRecord(3, 0, "6-3이철수", 480)
+	);
-		);
+	this.printRecord(
-
+		DBConnectManager.TYPE_MY_RANKING_HOUR, 1,
-
+		new RankingRecord(2, 0, "3-1김영희", 860)
-		// TYPE_MY_RANKING_DAY
+	);
-		this.printRecord(
+	this.printRecord(
-			DBConnectManager.TYPE_MY_RANKING_DAY, 0,
+		DBConnectManager.TYPE_MY_RANKING_HOUR, 2,
-			new RankingRecord(1, 0, "050215", 1580)
+		new RankingRecord(3, 0, "6-3이철수", 480)
-		);
+	);
-		this.printRecord(
+
-			DBConnectManager.TYPE_MY_RANKING_DAY, 1,
+
-			new RankingRecord(2, 0, "홍길동", 1080)
+	// TYPE_MY_RANKING_DAY
-		);
+	this.printRecord(
-		this.printRecord(
+		DBConnectManager.TYPE_MY_RANKING_DAY, 0,
-			DBConnectManager.TYPE_MY_RANKING_DAY, 2,
+		new RankingRecord(1, 0, "050215", 1580)
-			new RankingRecord(3, 0, "3-1김영희", 860)
+	);
-		);
+	this.printRecord(
-		this.printRecord(
+		DBConnectManager.TYPE_MY_RANKING_DAY, 1,
-			DBConnectManager.TYPE_MY_RANKING_DAY, 3,
+		new RankingRecord(2, 0, "홍길동", 1080)
-			new RankingRecord(4, 0, "6-3이철수", 480)
+	);
-		);
+	this.printRecord(
-
+		DBConnectManager.TYPE_MY_RANKING_DAY, 2,
-		// TYPE_MY_RANKING_MONTH
+		new RankingRecord(3, 0, "3-1김영희", 860)
-		this.printRecord(
+	);
-			DBConnectManager.TYPE_MY_RANKING_MONTH, 0,
+	this.printRecord(
-			new RankingRecord(1, 0, "050215", 1580)
+		DBConnectManager.TYPE_MY_RANKING_DAY, 3,
-		);
+		new RankingRecord(4, 0, "6-3이철수", 480)
-		this.printRecord(
+	);
-			DBConnectManager.TYPE_MY_RANKING_MONTH, 1,
+
-			new RankingRecord(2, 0, "홍길동", 1080)
+	// TYPE_MY_RANKING_MONTH
-		);
+	this.printRecord(
-		this.printRecord(
+		DBConnectManager.TYPE_MY_RANKING_MONTH, 0,
-			DBConnectManager.TYPE_MY_RANKING_MONTH, 2,
+		new RankingRecord(1, 0, "050215", 1580)
-			new RankingRecord(3, 0, "3-1김영희", 860)
+	);
-		);
+	this.printRecord(
-		this.printRecord(
+		DBConnectManager.TYPE_MY_RANKING_MONTH, 1,
-			DBConnectManager.TYPE_MY_RANKING_MONTH, 3,
+		new RankingRecord(2, 0, "홍길동", 1080)
-			new RankingRecord(4, 0, "6-3이철수", 480)
+	);
-		);
+	this.printRecord(
-	}
+		DBConnectManager.TYPE_MY_RANKING_MONTH, 2,
-
+		new RankingRecord(3, 0, "3-1김영희", 860)
-
+	);
-	static loadResources() {
+	this.printRecord(
-		game.load.image('medal_gold', '../../../resources/image/ui/medal_gold.png');
+		DBConnectManager.TYPE_MY_RANKING_MONTH, 3,
-		game.load.image('medal_silver', '../../../resources/image/ui/medal_silver.png');
+		new RankingRecord(4, 0, "6-3이철수", 480)
-		game.load.image('medal_bronze', '../../../resources/image/ui/medal_bronze.png');
+	);
-	}
+}
-
+
-	makeMedalSprites() {
+
-		let rankAreaPositionY = 630;
+RankingBoard.loadResources = function() {
-		this.medalHour = game.add.image(425, rankAreaPositionY, 'medal_gold');
+	game.load.image('medal_gold', '../../../resources/image/ui/medal_gold.png');
-		this.medalHour.anchor.set(0.5);
+	game.load.image('medal_silver', '../../../resources/image/ui/medal_silver.png');
-		this.medalHour.alpha = 0;
+	game.load.image('medal_bronze', '../../../resources/image/ui/medal_bronze.png');
-
+}
-		this.medalDay = game.add.image(655, rankAreaPositionY, 'medal_gold');
+
-		this.medalDay.anchor.set(0.5);
+RankingBoard.prototype.makeMedalSprites = function() {
-		this.medalDay.alpha = 0;
+	var rankAreaPositionY = 630;
-
+	this.medalHour = game.add.image(425, rankAreaPositionY, 'medal_gold');
-		this.medalMonth = game.add.image(885, rankAreaPositionY, 'medal_gold');
+	this.medalHour.anchor.set(0.5);
-		this.medalMonth.anchor.set(0.5);
+	this.medalHour.alpha = 0;
-		this.medalMonth.alpha = 0;
+
-	}
+	this.medalDay = game.add.image(655, rankAreaPositionY, 'medal_gold');
-
+	this.medalDay.anchor.set(0.5);
-	showMedal(medal, myRank) {
+	this.medalDay.alpha = 0;
-		if(myRank > 3) {
+
-			medal.alpha = 0;
+	this.medalMonth = game.add.image(885, rankAreaPositionY, 'medal_gold');
-			return;
+	this.medalMonth.anchor.set(0.5);
-		}
+	this.medalMonth.alpha = 0;
-
+}
-		if(myRank == 1)
+
-			medal.loadTexture("medal_gold");
+RankingBoard.prototype.showMedal = function(medal, myRank) {
-		else if(myRank == 2)
+	if(myRank > 3) {
-			medal.loadTexture("medal_silver");
+		medal.alpha = 0;
-		else if(myRank == 3)
+		return;
-			medal.loadTexture("medal_bronze");
+	}
-
+
-		medal.alpha = 1;
+	if(myRank == 1)
-		medal.scale.setTo(0.5);
+		medal.loadTexture("medal_gold");
-		game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true);
+	else if(myRank == 2)
-	}
+		medal.loadTexture("medal_silver");
-
+	else if(myRank == 3)
+		medal.loadTexture("medal_bronze");
+
+	medal.alpha = 1;
+	medal.scale.setTo(0.5);
+	game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true);
 }

src/game/result/record_board.js

@@ -1,58 +1,52 @@
-/////////////////////////////
+function RecordBoard(type) {
-// Record board
+	this.chartGraphics = game.add.graphics(0, 0);
 
-class RecordBoard {
+	this.printRecordBoardHeader();
-
+	this.printSeperator();
-	constructor(type) {
-		this.chartGraphics = game.add.graphics(0, 0);
-
-		this.printRecordBoardHeader();
-		this.printSeperator();
-
-		let historyBoard = new HistoryBoard(type);
-		let rankingBoard = new RankingBoard(type);
-	}
-
-
-	printRecordBoardHeader() {
-		let posX = 60;
-		let posY = game.world.height / 2 + 20;
-
-		var bar = game.add.graphics();
-		bar.beginFill(0x444444);
-		bar.drawRect(0, posY, game.world.width, RecordBoard.HEADER_BAR_HEIGHT_PX);
-
-		const style = { font: "32px Arial", fill: "#ffc", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
-		this.printHeader(posX, posY, "최근의 내 기록", style);
-
-		posX = 320;
-		style.fill = "#fff";
-		this.printHeader(posX, posY, "수업시간 순위", style);
-
-		posX = 550;
-		this.printHeader(posX, posY, "오늘의 순위", style);
-
-		posX = 770;
-		this.printHeader(posX, posY, "이달의 순위", style);
-	}
-
-	printHeader(x, y, title, style) {
-		game.add.text(x, y, title, style)
-			.setTextBounds(0, 0, 200, RecordBoard.HEADER_BAR_HEIGHT_PX)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-	}
-
-	printSeperator() {
-		const posX = 290;
-		const posY = 480;
-
-		this.chartGraphics.lineStyle(3, 0x444444, 1);
-		this.chartGraphics.moveTo(posX, posY);
-		this.chartGraphics.lineTo(posX, posY + 200);
-	}
 
+	var historyBoard = new HistoryBoard(type);
+	var rankingBoard = new RankingBoard(type);
 }
 
+
+RecordBoard.prototype.printRecordBoardHeader = function() {
+	var posX = 60;
+	var posY = game.world.height / 2 + 20;
+
+	var bar = game.add.graphics();
+	bar.beginFill(0x444444);
+	bar.drawRect(0, posY, game.world.width, RecordBoard.HEADER_BAR_HEIGHT_PX);
+
+	const style = { font: "32px Arial", fill: "#ffc", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+	this.printHeader(posX, posY, "최근의 내 기록", style);
+
+	posX = 320;
+	style.fill = "#fff";
+	this.printHeader(posX, posY, "수업시간 순위", style);
+
+	posX = 550;
+	this.printHeader(posX, posY, "오늘의 순위", style);
+
+	posX = 770;
+	this.printHeader(posX, posY, "이달의 순위", style);
+}
+
+RecordBoard.prototype.printHeader = function(x, y, title, style) {
+	game.add.text(x, y, title, style)
+		.setTextBounds(0, 0, 200, RecordBoard.HEADER_BAR_HEIGHT_PX)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+}
+
+RecordBoard.prototype.printSeperator = function() {
+	const posX = 290;
+	const posY = 480;
+
+	this.chartGraphics.lineStyle(3, 0x444444, 1);
+	this.chartGraphics.moveTo(posX, posY);
+	this.chartGraphics.lineTo(posX, posY + 200);
+}
+
+
 RecordBoard.HEADER_BAR_HEIGHT_PX		= 60;
 
 RecordBoard.TYPE_SAMPLE			= "sample";

src/game/result/result.js

@@ -1,25 +1,22 @@
-/////////////////////////////
+var Result = {
-// Result
 
-class Result {
+	preload: function() {
-
-	preload() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
 
 		Animal.loadResources();
 
 		RankingBoard.loadResources();
 		game.load.image('star', '../../../resources/image/ui/star_particle.png');
-	}
+	},
 
-	create() {
+	create: function() {
 		this.dbConnectManager = new DBConnectManager();
 
 		this.game.stage.backgroundColor = '#4d4d4d';
 		this.chartGraphics = game.add.graphics(100, game.world.height - 120);
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			if(isTypingPracticeStage())
 				location.href = '../../web/client/menu_typing_practice.html';
@@ -39,126 +36,126 @@ class Result {
 
 		this.makeRestartButton();
 
-		if(sessionStorageManager.maestroAccountType >= 100) {	// experience account
+		if(sessionStorageManager.getMaestroAccountType() >= 100) {	// experience account
-			let recordBoard = new RecordBoard(RecordBoard.TYPE_SAMPLE);
+			var recordBoard = new RecordBoard(RecordBoard.TYPE_SAMPLE);
 			this.announceBox = new AnnounceBox(50, 648);
 			this.announceBox.drawBox("체험 계정에서는 기록이 저장되지 않습니다.");
 		} else {
-			let recordBoard = new RecordBoard(RecordBoard.TYPE_DB);
+			var recordBoard = new RecordBoard(RecordBoard.TYPE_DB);
 			this.printTodayBestRecord();
 		}
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
-		screenBottomUI.printLeftTextWithBestRecord(Math.floor(sessionStorageManager.bestRecord));
+		screenBottomUI.printLeftTextWithBestRecord(Math.floor(sessionStorageManager.getBestRecord()));
-		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
-	}
+	},
 
-	printRecord() {
+	printRecord: function() {
 		const style = { font: "bold 38px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
-		let titleText = game.add.text(game.world.width / 2, 35, "결과", style);
+		var titleText = game.add.text(game.world.width / 2, 35, "결과", style);
 		titleText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 		titleText.anchor.set(0.5);
 
 
-		let x = game.world.width / 2;
+		var x = game.world.width / 2;
-		let y = 150;
+		var y = 150;
-		if(sessionStorageManager.record === null)
+		if(sessionStorageManager.getRecord() === null)
-			sessionStorageManager.record = 0;
+			sessionStorageManager.setRecord(0);
-		let record = NumberUtil.numberWithCommas(Math.floor(sessionStorageManager.record));
+		var record = NumberUtil.numberWithCommas(Math.floor(sessionStorageManager.getRecord()));
 		style.font = "80px Arial";
 
-		if(sessionStorageManager.playingAppID < 100) {
+		if(sessionStorageManager.getPlayingAppID() < 100) {
-			let leftAnimal = new Animal(Animal.TYPE_ANIMATION, game.world.centerX - 200, 150);
+			var leftAnimal = new Animal(Animal.TYPE_ANIMATION, game.world.centerX - 200, 150);
-			let animalLevelID = 0;
+			var animalLevelID = 0;
-			if(sessionStorageManager.playingAppID < 20)
+			if(sessionStorageManager.getPlayingAppID() < 20)
-				animalLevelID = Animal.animalLevelIDByRecord(sessionStorageManager.record, Animal.TYPE_PRACTICE);
+				animalLevelID = Animal.animalLevelIDByRecord(sessionStorageManager.getRecord(), Animal.TYPE_PRACTICE);
 			else
-				animalLevelID = Animal.animalLevelIDByRecord(sessionStorageManager.record, Animal.TYPE_TEST);
+				animalLevelID = Animal.animalLevelIDByRecord(sessionStorageManager.getRecord(), Animal.TYPE_TEST);
 			leftAnimal.setSpecies(Animal.SPECIES_DATA[animalLevelID]);;
 			// leftAnimal.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
 			leftAnimal.startAnimation();
 
-			let rightAnimal = new Animal(Animal.TYPE_ANIMATION, game.world.centerX + 200, 150);
+			var rightAnimal = new Animal(Animal.TYPE_ANIMATION, game.world.centerX + 200, 150);
 			rightAnimal.setSpecies(Animal.SPECIES_DATA[animalLevelID]);;
 			// rightAnimal.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
 			rightAnimal.startAnimation();
 		}
 
-		let scoreText = game.add.text(
+		var scoreText = game.add.text(
 			x, y,
-			record + StringUtil.getScoreUnit(sessionStorageManager.playingAppID),
+			record + StringUtil.getScoreUnit(sessionStorageManager.getPlayingAppID()),
 			style
 		);
 		scoreText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 		scoreText.anchor.set(0.5);
-	}
+	},
 
-	recordUnit() {
+	recordUnit: function() {
-		let recordUnit = "";
+		var recordUnit = "";
-		if(sessionStorageManager.playingAppID >= 100)
+		if(sessionStorageManager.getPlayingAppID() >= 100)
 			return "점";
 		else
 			return "타";
-	}
+	},
 
-	printTodayBestRecord() {
+	printTodayBestRecord: function() {
-		let newRecordEmitter = game.add.emitter(game.world.centerX, 140, 300);
+		var newRecordEmitter = game.add.emitter(game.world.centerX, 140, 300);
 		newRecordEmitter.makeParticles('star');
 		newRecordEmitter.gravity = 300;
 
-		let style = { font: "32px Arial", fill: "#ff0", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+		var style = { font: "32px Arial", fill: "#ff0", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
-		let bestRecordText = game.add.text(game.world.centerX, 220, "", style);
+		var bestRecordText = game.add.text(game.world.centerX, 220, "", style);
 		bestRecordText.anchor.set(0.5);
 		bestRecordText.stroke = "#333";
 		bestRecordText.strokeThickness = 5;
 
-		if(sessionStorageManager.bestRecord === null)
+		if(sessionStorageManager.getBestRecord() === 'undefined')
-			sessionStorageManager.bestRecord = 0;
+			sessionStorageManager.setBestRecord(0);
 
-		let todayBestRecord = 0;
+		var todayBestRecord = 0;
-		let flooredBestRecord = Math.floor(sessionStorageManager.bestRecord);
+		var flooredBestRecord = Math.floor(sessionStorageManager.getBestRecord());
-		let bestRecordWithCommas = NumberUtil.numberWithCommas(flooredBestRecord);
+		var bestRecordWithCommas = NumberUtil.numberWithCommas(flooredBestRecord);
 
-		if(sessionStorageManager.record >= sessionStorageManager.bestRecord) {
+		if(sessionStorageManager.getRecord() >= sessionStorageManager.getBestRecord()) {
-			sessionStorageManager.bestRecord = sessionStorageManager.record;
+			sessionStorageManager.setBestRecord(sessionStorageManager.getRecord());
 
 			bestRecordText.text = "! : .  오늘 최고 기록  . : !";
 			newRecordEmitter.start(true, 2000, null, 20);
 		} else {
 			bestRecordText.text = "";
 		}
-	}
+	},
 
-	uploadRecord() {
+	uploadRecord: function() {
-		if(sessionStorageManager.maestroAccountType >= 100) {	// experience account
+		if(sessionStorageManager.getMaestroAccountType() >= 100) {	// experience account
 			return;
 		}
 
 		this.dbConnectManager.updateTodayBestRecord(
-			sessionStorageManager.maestroID,
+			sessionStorageManager.getMaestroID(),
-			sessionStorageManager.playerID,
+			sessionStorageManager.getPlayerID(),
-			sessionStorageManager.playingAppID,
+			sessionStorageManager.getPlayingAppID(),
-			sessionStorageManager.record
+			sessionStorageManager.getRecord()
 		);
-	}
+	},
 
-	makeRestartButton() {
+	makeRestartButton: function() {
-		let setting = new RoundRectButtonSetting(game.world.centerX, game.world.height / 2 - 70, 200, 100);
+		var setting = new RoundRectButtonSetting(game.world.centerX, game.world.height / 2 - 70, 200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "다시 시작", this.restartStage);
+		var startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "다시 시작", this.restartStage);
-	}
+	},
 
-	restartStage() {
+	restartStage: function() {
-		if(sessionStorageManager.playingAppName.indexOf("practice_") == 0) {
+		if(sessionStorageManager.getPlayingAppName().indexOf("practice_") == 0) {
 			location.href = "../../web/client/typing_practice.html";
-		} else if(sessionStorageManager.playingAppName.indexOf("test_") == 0) {
+		} else if(sessionStorageManager.getPlayingAppName().indexOf("test_") == 0) {
 			location.href = "../../web/client/typing_test.html";
 		} else {
-			location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html";
+			location.href = "../../web/client/" + sessionStorageManager.getPlayingAppName() + ".html";
 		}
 	}
 

src/game/start/start.js

@@ -35,6 +35,7 @@ class Start {
 		this.makeStartButton();
 		this.makeRankingButton();
 
+		console.log(sessionStorageManager.getMaestroAccountType());
 		if(sessionStorageManager.getMaestroAccountType() >= 100) {	// experience account
 			this.printSampleChart();
 			this.announceBox = new AnnounceBox(50, 648);
@@ -55,11 +56,11 @@ class Start {
 			sessionStorageManager.getPlayerID(),
 			sessionStorageManager.getPlayingAppID(),
 			(function(replyJSON) {
-				sessionStorageManager.getBestRecord() = Number(replyJSON["BestRecord"]);
+				sessionStorageManager.setBestRecord(Number(replyJSON["BestRecord"]));
 				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
 			}).bind(this),
 			(function(replyJSON) {	// no data
-				sessionStorageManager.getBestRecord() = 0;
+				sessionStorageManager.setBestRecord(0);
 				screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
 			}).bind(this)
 		);
@@ -112,7 +113,7 @@ class Start {
 				}
 
 				this.chart.printChartBaseLine();
-			})
+			}).bind(this)
 		);
 	}
 

src/game/typing/practice/game.js

@@ -1,20 +1,16 @@
-/////////////////////////////
+var TypingPractice = {
-// TypingPractice
+	create: function() {
-
+		var self = this;
-class TypingPractice {
-
-	create() {
-		self = this;
 
 		this.isOnStage = false;
 
 		this.initTypingData();
-		sessionStorageManager.isNewBestRecrd = false;
+		sessionStorageManager.setIsNewBestRecord(false);
 
 		game.stage.backgroundColor = '#4d4d4d';
 
 		// top ui
-		let screenTopUI = new ScreenTopUI();
+		var screenTopUI = new ScreenTopUI();
 		screenTopUI.makeBackButton( function() {
 			sessionStorageManager.resetPlayingAppData();
 			location.href = '../../web/client/menu_typing_practice.html';
@@ -38,10 +34,10 @@ class TypingPractice {
 
 
 		// typing content
-		let typingContentBG = new TypingContentBG();
+		var typingContentBG = new TypingContentBG();
 		typingContentBG.makePracticeContentBG();
 
-		let TYPING_CONTENT_Y = 200;
+		var TYPING_CONTENT_Y = 200;
 
 		textStyleBasic.font = "bold 84px Times New Roman";
 		this.textTypingContent = game.add.text(game.world.centerX, TYPING_CONTENT_Y, "", textStyleBasic)
@@ -56,11 +52,11 @@ class TypingPractice {
 
 
 		// textStyleBasic.font = "32px Arial";
-		let OFFSET_WORD_X = 70;
+		var OFFSET_WORD_X = 70;
 
-		let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
+		var textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
 		this.textTypingContentsDone = [];
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
 			this.textTypingContentsDone[i] = game.add.text(
 				game.world.centerX - 200 - i * OFFSET_WORD_X, TYPING_CONTENT_Y,
 				"", textStyleBasic
@@ -69,9 +65,9 @@ class TypingPractice {
 			this.textTypingContentsDone[i].anchor.set(0.5);
 		}
 
-		let textPreviewColor = [ '#666666', '#888888', '#777777' ];
+		var textPreviewColor = [ '#666666', '#888888', '#777777' ];
 		this.textTypingContentPreview = [];
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
 			this.textTypingContentPreview[i] = game.add.text(
 				game.world.centerX + 200 + i * OFFSET_WORD_X,
 				TYPING_CONTENT_Y, "", textStyleBasic
@@ -83,7 +79,7 @@ class TypingPractice {
 		// keyboard
 		this.keyMapper = new KeyMapper();
 		this.keyboard = null;
-		if(sessionStorageManager.playingAppName.indexOf("korean") > 0)
+		if(sessionStorageManager.getPlayingAppName().indexOf("korean") > 0)
 			this.keyboard = new Keyboard(this.keyMapper, Keyboard.KOREAN);
 		else
 			this.keyboard = new Keyboard(this.keyMapper, Keyboard.ENGLISH);
@@ -103,29 +99,29 @@ class TypingPractice {
 
 
 		// bottom ui
-		let screenBottomUI = new ScreenBottomUI();
+		var screenBottomUI = new ScreenBottomUI();
 		// screenBottomUI.printBottomUILeftText("");
-		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
 		this.startGame();
 		// this.countDown();
-	}
+	},
 
-	startGame() {
+	startGame: function() {
 		this.isOnStage = true;
 		this.stageTimer.start();
 
 		this.showTypingPracticeContents();
 		this.showHighlightKey();
 		this.moveHands();
-	}
+	},
 
-	gameOver() {
+	gameOver: function() {
 		this.isOnStage = false;
 
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
 			this.textTypingContentsDone[i].text = "";
 		}
 
@@ -135,7 +131,7 @@ class TypingPractice {
 		this.textTypingContent.addColor(TypingPractice.COLOR_CONTENT_RIGHT, 0);
 		this.textTypingContent.text = "= 연습 끝 =";
 
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
 			this.textTypingContentPreview[i].text = "";
 		}
 
@@ -144,22 +140,22 @@ class TypingPractice {
 
 		this.animalOnTitle.stopAnimation();
 
-		let gameOverText = new GameOverText();
+		var gameOverText = new GameOverText();
 		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
-	}
+	},
 
-	goResult() {
+	goResult: function() {
-		sessionStorageManager.record = this.typingScore.score();
+		sessionStorageManager.setRecord(this.typingScore.score());
-		if(sessionStorageManager.record > sessionStorageManager.bestRecord)
+		if(sessionStorageManager.getRecord() > sessionStorageManager.getBestRecord())
-			sessionStorageManager.bestRecord = sessionStorageManager.record;
+			sessionStorageManager.setBestRecord(sessionStorageManager.getRecord());
 
 		location.href = '../../web/client/result.html';
-	}
+	},
 
-	initTypingData() {
+	initTypingData: function() {
-		let typingTextMan = new TypingTextManager();
+		var typingTextMan = new TypingTextManager();
 
-		let typingPracticeContents = this.loadPracticeContent();
+		var typingPracticeContents = this.loadPracticeContent();
 		// console.log(typingPracticeContents);
 		typingTextMan.makePracticeContents(typingPracticeContents, 30);
 		this.typingRandomContents = typingTextMan.getContents();
@@ -168,17 +164,17 @@ class TypingPractice {
 		this.typingIndex = 0;
 
 		this.playingAnimalIndex = 0;
-	}
+	},
 
 
-	loadPracticeContent() {
+	loadPracticeContent: function() {
-		let appName = "";
+		var appName = "";
 		if(isTypingTestStage())
-			appName = sessionStorageManager.playingAppName.substring(5);
+			appName = sessionStorageManager.getPlayingAppName().substring(5);
 		else if(isTypingPracticeStage())
-			appName = sessionStorageManager.playingAppName.substring(9);
+			appName = sessionStorageManager.getPlayingAppName().substring(9);
 
-		let testContent = [];
+		var testContent = [];
 
 		switch(appName) {
 			case "korean_basic":
@@ -260,11 +256,11 @@ class TypingPractice {
 		}
 
 		return testContent;
-	}
+	},
 
-	showTypingPracticeContents() {
+	showTypingPracticeContents: function() {
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
-			let doneIndex = this.typingIndex - i - 1;
+			var doneIndex = this.typingIndex - i - 1;
 			if(doneIndex < 0) {
 				this.textTypingContentsDone[i].text = "";
 			} else {
@@ -279,43 +275,43 @@ class TypingPractice {
 
 		this.textTypingContent.text = this.typingRandomContents[this.typingIndex];
 
-		for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+		for(var i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
-			let previewIndex = this.typingIndex + i + 1;
+			var previewIndex = this.typingIndex + i + 1;
 			if(previewIndex < this.typingRandomContents.length)
 				this.textTypingContentPreview[i].text = this.typingRandomContents[previewIndex];
 			else
 				this.textTypingContentPreview[i].text = "";
 		}
-	}
+	},
 
-	hideHighlightKey() {
+	hideHighlightKey: function() {
-		let prevText = this.typingRandomContents[this.typingIndex];
+		var prevText = this.typingRandomContents[this.typingIndex];
 		if(prevText === undefined)
 			return;
 
 		this.keyboard.hideHighlight(prevText);
-	}
+	},
 
-	showHighlightKey() {
+	showHighlightKey: function() {
-		let typingText = this.typingRandomContents[this.typingIndex];
+		var typingText = this.typingRandomContents[this.typingIndex];
 		if(typingText === undefined)
 			return;
 
 		this.keyboard.showHighlight(typingText, this.leftHand, this.rightHand);
-	}
+	},
 
-	moveHands() {
+	moveHands: function() {
-		let typingText = this.typingRandomContents[this.typingIndex];
+		var typingText = this.typingRandomContents[this.typingIndex];
 		if(typingText === undefined)
 			return;
 
-		let key = this.keyboard.getKeyOfText(typingText);
+		var key = this.keyboard.getKeyOfText(typingText);
-		let handSide = key.handSide;
+		var handSide = key.handSide;
 		if(handSide === KeyButton.LEFT_HAND) {
 			this.leftHand.moveTo(key);
 
 			if(this.keyMapper.isShiftText(typingText)) {
-				let shiftRightKey = this.keyboard.getKey("ShiftRight");
+				var shiftRightKey = this.keyboard.getKey("ShiftRight");
 				shiftRightKey.showHighlight();
 				this.rightHand.moveTo(shiftRightKey);
 			} else {
@@ -325,42 +321,42 @@ class TypingPractice {
 			this.rightHand.moveTo(key);
 
 			if(this.keyMapper.isShiftText(typingText)) {
-				let shiftLeftKey = this.keyboard.getKey("ShiftLeft");
+				var shiftLeftKey = this.keyboard.getKey("ShiftLeft");
 				shiftLeftKey.showHighlight();
 				this.leftHand.moveTo(shiftLeftKey);
 			} else {
 				this.leftHand.moveToDefaultPosition();
 			}
 		}
-	}
+	},
 
-	getKeyCode(text) {
+	getKeyCode: function(text) {
 		return this.keyMapper.getKeyIDOfText(text);
-	}
+	},
 
-	isKeyPressed(inputContent, typingContent) {
+	isKeyPressed: function(inputContent, typingContent) {
-		let inputContentKeyCode = this.getKeyCode(inputContent);
+		var inputContentKeyCode = this.getKeyCode(inputContent);
-		let typingContentKeyCode = this.getKeyCode(typingContent);
+		var typingContentKeyCode = this.getKeyCode(typingContent);
 
 		if(inputContentKeyCode !== typingContentKeyCode)
 			return false;
 
-		let isShiftInputContent = this.shiftKey.isDown;
+		var isShiftInputContent = this.shiftKey.isDown;
-		let isShiftTypingContent = this.keyMapper.isShiftText(typingContent);
+		var isShiftTypingContent = this.keyMapper.isShiftText(typingContent);
 
 		if(isShiftInputContent !== isShiftTypingContent)
 			return false;
 
 		return true;
-	}
+	},
 
-	checkTypingContents(evnet) {
+	checkTypingContents: function(evnet) {
-		let inputContent = event.key;
+		var inputContent = event.key;
-		let typingContent = this.typingRandomContents[this.typingIndex];
+		var typingContent = this.typingRandomContents[this.typingIndex];
 
 		if(this.isKeyPressed(inputContent, typingContent)) {
 			this.typingScore.increase();
-			let animalLevelID = Animal.animalLevelIDByRecord(this.typingScore.score(), Animal.TYPE_PRACTICE);
+			var animalLevelID = Animal.animalLevelIDByRecord(this.typingScore.score(), Animal.TYPE_PRACTICE);
 			if(animalLevelID > this.playingAnimalIndex) {
 				this.playingAnimalIndex = animalLevelID;
 				this.animalOnTitle.setSpecies(Animal.SPECIES_DATA[this.playingAnimalIndex]);;
@@ -380,10 +376,9 @@ class TypingPractice {
 			this.animalOnTitle.startAnimation();
 			this.animalOnTitle.tweenAnimation(Animal.ANIMATION_TYPE_DAMAGE);
 		}
-	}
+	},
 
-
+	playNextContent: function() {
-	playNextContent() {
 		this.hideHighlightKey();
 
 		this.typingIndex++;
@@ -391,7 +386,6 @@ class TypingPractice {
 		this.showHighlightKey();
 		this.moveHands();
 	}
-
 }
 
 

src/game/typing/practice/hand.js

@@ -1,266 +1,263 @@
-class Hand {
+function Hand(keyMapper) {
+	this.keyMapper = keyMapper;
+	this.pressingFinger = KeyButton.NONE_FINGER;
+	this.prevFingerSprite = null;
 
-	constructor(keyMapper) {
+	this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
-		this.keyMapper = keyMapper;
+	this.hand.anchor.set(0.5);
-		this.pressingFinger = KeyButton.NONE_FINGER;
+	this.hand.scale.set(2);
-		this.prevFingerSprite = null;
 
-		this.hand = game.add.image(0, Hand.DEFAULT_Y_PX, "hand_palm");
+	this.thumb = game.add.image(0, 0, "hand_thumb");
-		this.hand.anchor.set(0.5);
+	this.thumb.alpha = 0.5;
-		this.hand.scale.set(2);
+	this.hand.addChild(this.thumb);
 
-		this.thumb = game.add.image(0, 0, "hand_thumb");
+	this.index_finger = game.add.image(0, 0, "hand_index_finger");
-		this.thumb.alpha = 0.5;
+	this.index_finger.alpha = 0.5;
-		this.hand.addChild(this.thumb);
+	this.hand.addChild(this.index_finger);
 
-		this.index_finger = game.add.image(0, 0, "hand_index_finger");
+	this.middle_finger = game.add.image(0, 0, "hand_middle_finger");
-		this.index_finger.alpha = 0.5;
+	this.middle_finger.alpha = 0.5;
-		this.hand.addChild(this.index_finger);
+	this.hand.addChild(this.middle_finger);
 
-		this.middle_finger = game.add.image(0, 0, "hand_middle_finger");
+	this.ring_filger = game.add.image(0, 0, "hand_little_finger");
-		this.middle_finger.alpha = 0.5;
+	this.ring_filger.alpha = 0.5;
-		this.hand.addChild(this.middle_finger);
+	this.hand.addChild(this.ring_filger);
 
-		this.ring_filger = game.add.image(0, 0, "hand_little_finger");
+	this.little_finger = game.add.image(0, 0, "hand_ring_finger");
-		this.ring_filger.alpha = 0.5;
+	this.little_finger.alpha = 0.5;
-		this.hand.addChild(this.ring_filger);
+	this.hand.addChild(this.little_finger);
-
-		this.little_finger = game.add.image(0, 0, "hand_ring_finger");
-		this.little_finger.alpha = 0.5;
-		this.hand.addChild(this.little_finger);
-
-		let mask = game.add.graphics();
-		mask.beginFill(0xffffff);
-		mask.drawRect(100, 300, 1028, 360);
-		this.hand.mask = mask;
-	}
-
-	move(sprite, x, y) {
-		sprite.x = x;
-		sprite.y = y;
-	}
-
-	moveTo(key) {
-	}
-
-	moveToDefaultPosition() {
-		this.moveRow(3, null);
-		this.unhighlightOffFinger(KeyButton.NONE_FINGER);
-	}
-
-
-	moveRow(rowNo, key) {
-		let rowIndex = rowNo - 1;
-		this.hand.y = Hand.DEFAULT_Y_PX + Keyboard.DEFAULT_KEY_SIZE_PX * rowIndex;
-
-		this.moveColumn(rowNo, key);
-	}
-
-	moveColumn(rowNo, key) {
-	}
-
-
-	getFingerSprite(fingerNo) {
-		let fingerSprite = null;
-		switch(fingerNo) {
-			case KeyButton.THUMB:
-			fingerSprite = this.thumb;
-			break;
-			case KeyButton.INDEX_FINGER:
-			case KeyButton.INDEX_FINGER_BASELINE:
-			fingerSprite = this.index_finger;
-			break;
-			case KeyButton.MIDDLE_FINGER:
-			fingerSprite = this.middle_finger;
-			break;
-			case KeyButton.RING_FINGER:
-			fingerSprite = this.ring_filger;
-			break;
-			case KeyButton.LITTLE_FINGER:
-			fingerSprite = this.little_finger;
-			break;
-		}
-		return fingerSprite;
-	}
-
-	highlightOnFinger(fingerNo) {
-		// console.log(fingerNo);
-		let pressingFingerSprite = this.getFingerSprite(fingerNo);
-		if(pressingFingerSprite === this.prevFingerSprite)
-			return;
-
-		if(this.prevFingerSprite !== null)
-			this.unhighlightOffFinger();
-
-		if(pressingFingerSprite !== null) {
-			// console.log(pressingFingerSprite);
-			pressingFingerSprite.tint = 0xffff00;
-			pressingFingerSprite.alpha = 1;
-		}
-
-		this.prevFingerSprite = pressingFingerSprite;
-	}
-
-	unhighlightOffFinger() {
-		if(this.prevFingerSprite === null)
-			return;
-		this.prevFingerSprite.tint = 0xffffff;
-		this.prevFingerSprite.alpha = 0.5;
-
-		this.prevFingerSprite = null;
-	}
 
+	var mask = game.add.graphics();
+	mask.beginFill(0xffffff);
+	mask.drawRect(100, 300, 1028, 360);
+	this.hand.mask = mask;
 }
 
+Hand.prototype.move = function(sprite, x, y) {
+	sprite.x = x;
+	sprite.y = y;
+}
+
+Hand.prototype.moveTo = function(key) {
+}
+
+Hand.prototype.moveToDefaultPosition = function() {
+	this.moveRow(3, null);
+	this.unhighlightOffFinger(KeyButton.NONE_FINGER);
+}
+
+
+Hand.prototype.moveRow = function(rowNo, key) {
+	var rowIndex = rowNo - 1;
+	this.hand.y = Hand.DEFAULT_Y_PX + Keyboard.DEFAULT_KEY_SIZE_PX * rowIndex;
+
+	this.moveColumn(rowNo, key);
+}
+
+Hand.prototype.moveColumn = function(rowNo, key) {
+}
+
+
+Hand.prototype.getFingerSprite = function(fingerNo) {
+	var fingerSprite = null;
+	switch(fingerNo) {
+		case KeyButton.THUMB:
+		fingerSprite = this.thumb;
+		break;
+		case KeyButton.INDEX_FINGER:
+		case KeyButton.INDEX_FINGER_BASELINE:
+		fingerSprite = this.index_finger;
+		break;
+		case KeyButton.MIDDLE_FINGER:
+		fingerSprite = this.middle_finger;
+		break;
+		case KeyButton.RING_FINGER:
+		fingerSprite = this.ring_filger;
+		break;
+		case KeyButton.LITTLE_FINGER:
+		fingerSprite = this.little_finger;
+		break;
+	}
+	return fingerSprite;
+}
+
+Hand.prototype.highlightOnFinger = function(fingerNo) {
+	// console.log(fingerNo);
+	var pressingFingerSprite = this.getFingerSprite(fingerNo);
+	if(pressingFingerSprite === this.prevFingerSprite)
+		return;
+
+	if(this.prevFingerSprite !== null)
+		this.unhighlightOffFinger();
+
+	if(pressingFingerSprite !== null) {
+		// console.log(pressingFingerSprite);
+		pressingFingerSprite.tint = 0xffff00;
+		pressingFingerSprite.alpha = 1;
+	}
+
+	this.prevFingerSprite = pressingFingerSprite;
+}
+
+Hand.prototype.unhighlightOffFinger = function() {
+	if(this.prevFingerSprite === null)
+		return;
+	this.prevFingerSprite.tint = 0xffffff;
+	this.prevFingerSprite.alpha = 0.5;
+
+	this.prevFingerSprite = null;
+}
+
+
 Hand.DEFAULT_Y_PX		= 540;	// 680;
 
 
 
-class LeftHand extends Hand {
+LeftHand.prototype = Object.create(Hand.prototype);
+LeftHand.constructor = LeftHand;
 
-	constructor(keyMapper) {
+function LeftHand(keyMapper) {
-		super(keyMapper);
+	Hand.call(this, keyMapper);
-
-		this.move(this.thumb, 126, -50);
-		this.move(this.index_finger, 96, -102);
-		this.move(this.middle_finger, 58, -116);
-		this.move(this.ring_filger, 32, -110);
-		this.move(this.little_finger, 4, -106);
-		this.moveToDefaultPosition();
-	}
-
-	moveTo(key) {
-		if(key === undefined)
-			return;
-
-		// console.log(key);
-		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
-
-		if(keyCode != "Space")
-			this.moveRow(key.row, key);
-		else
-			this.moveRow(3, key);
-
-		switch(key.keyCode) {
-			case "Key5":
-			case "KeyT":
-			case "KeyG":
-			case "KeyB":
-			this.moveColumn(5, key);
-			break;
-		}
-
-		this.highlightOnFinger(key.fingerType);
-	}
-
-	moveColumn(rowNo, key) {
-		let rowIndex = rowNo - 1;
-		this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
-
-		if(key === null)
-			return;
-
-		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
-		switch(keyCode) {
-			case "Key5":
-			case "KeyT":
-			case "KeyG":
-			case "KeyB":
-			this.hand.x += Keyboard.DEFAULT_KEY_SIZE_PX;
-			break;
-
-			case "ShiftLeft":
-			this.hand.x = LeftHand.DEFAULT_X_PX;
-			break;
-		}
-	}
 
+	this.move(this.thumb, 126, -50);
+	this.move(this.index_finger, 96, -102);
+	this.move(this.middle_finger, 58, -116);
+	this.move(this.ring_filger, 32, -110);
+	this.move(this.little_finger, 4, -106);
+	this.moveToDefaultPosition();
 }
 
+LeftHand.prototype.moveTo = function(key) {
+	if(key === undefined)
+		return;
+
+	// console.log(key);
+	var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+
+	if(keyCode != "Space")
+		this.moveRow(key.row, key);
+	else
+		this.moveRow(3, key);
+
+	switch(key.keyCode) {
+		case "Key5":
+		case "KeyT":
+		case "KeyG":
+		case "KeyB":
+		this.moveColumn(5, key);
+		break;
+	}
+
+	this.highlightOnFinger(key.fingerType);
+}
+
+LeftHand.prototype.moveColumn = function(rowNo, key) {
+	var rowIndex = rowNo - 1;
+	this.hand.x = LeftHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
+
+	if(key === null)
+		return;
+
+	var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+	switch(keyCode) {
+		case "Key5":
+		case "KeyT":
+		case "KeyG":
+		case "KeyB":
+		this.hand.x += Keyboard.DEFAULT_KEY_SIZE_PX;
+		break;
+
+		case "ShiftLeft":
+		this.hand.x = LeftHand.DEFAULT_X_PX;
+		break;
+	}
+}
+
+
 LeftHand.DEFAULT_X_PX	= 100;
 
 
 
-class RightHand extends Hand {
+RightHand.prototype = Object.create(Hand.prototype);
+RightHand.constructor = RightHand;
 
-	constructor(keyMapper) {
+function RightHand(keyMapper) {
-		super(keyMapper);
+	Hand.call(this, keyMapper);
 
-		this.hand.scale.x *= -1;
+	this.hand.scale.x *= -1;
-
-		this.move(this.thumb, 126, -50);
-		this.move(this.index_finger, 96, -102);
-		this.move(this.middle_finger, 58, -116);
-		this.move(this.ring_filger, 32, -110);
-		this.move(this.little_finger, 4, -106);
-		this.moveToDefaultPosition();
-	}
-
-	moveTo(key) {
-		if(key === undefined)
-			return;
-
-		// console.log(key);
-		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
-
-		if(keyCode != "Space")
-			this.moveRow(key.row, key);
-		else
-			this.moveRow(3, key);
-
-		switch(key.keyCode) {
-			case "Key5":
-			case "KeyT":
-			case "KeyG":
-			case "KeyB":
-			this.moveColumn(5, key);
-			break;
-		}
-
-		this.highlightOnFinger(key.fingerType);
-	}
-
-	moveColumn(rowNo, key) {
-		let rowIndex = rowNo - 1;
-		this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
-
-		if(key === null)
-			return;
-
-		let keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
-		switch(keyCode) {
-			case "Key6":
-			case "KeyY":
-			case "KeyH":
-			case "KeyN":
-			this.hand.x -= Keyboard.DEFAULT_KEY_SIZE_PX;
-			break;
-
-			case "Minus":
-			case "BracketLeft":
-			case "Quote":
-			this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 3;
-			break;
-
-			case "Equal":
-			case "BracketRight":
-			this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 5;
-			break;
-
-			case "Backslash":
-			this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 7;
-			break;
-
-			case "Enter":
-			this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
-			break;
-
-			case "ShiftRight":
-			this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
-			break;
-		}
-	}
 
+	this.move(this.thumb, 126, -50);
+	this.move(this.index_finger, 96, -102);
+	this.move(this.middle_finger, 58, -116);
+	this.move(this.ring_filger, 32, -110);
+	this.move(this.little_finger, 4, -106);
+	this.moveToDefaultPosition();
 }
 
+RightHand.prototype.moveTo = function(key) {
+	if(key === undefined)
+		return;
+
+	// console.log(key);
+	var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+
+	if(keyCode != "Space")
+		this.moveRow(key.row, key);
+	else
+		this.moveRow(3, key);
+
+	switch(key.keyCode) {
+		case "Key5":
+		case "KeyT":
+		case "KeyG":
+		case "KeyB":
+		this.moveColumn(5, key);
+		break;
+	}
+
+	this.highlightOnFinger(key.fingerType);
+}
+
+RightHand.prototype.moveColumn = function(rowNo, key) {
+	var rowIndex = rowNo - 1;
+	this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * rowIndex;
+
+	if(key === null)
+		return;
+
+	var keyCode = this.keyMapper.getKeyIDOfText(key.normalText);
+	switch(keyCode) {
+		case "Key6":
+		case "KeyY":
+		case "KeyH":
+		case "KeyN":
+		this.hand.x -= Keyboard.DEFAULT_KEY_SIZE_PX;
+		break;
+
+		case "Minus":
+		case "BracketLeft":
+		case "Quote":
+		this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 3;
+		break;
+
+		case "Equal":
+		case "BracketRight":
+		this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 5;
+		break;
+
+		case "Backslash":
+		this.hand.x += (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 7;
+		break;
+
+		case "Enter":
+		this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
+		break;
+
+		case "ShiftRight":
+		this.hand.x = RightHand.DEFAULT_X_PX + (Keyboard.DEFAULT_KEY_SIZE_PX / 2) * 6;
+		break;
+	}
+}
+
+
 RightHand.DEFAULT_X_PX	= 810;

src/game/typing/practice/key_button.js

@@ -1,240 +1,237 @@
-class KeyButton {
+function KeyButton(x, y, width, height, normalText, shiftText, handSide, row, fingerType, alignType) {
+	this.normalText = normalText;
+	this.shiftText = shiftText;
+	this.handSide = handSide;
+	this.row = row;
+	this.fingerType = fingerType;
+	this.alignType = alignType;
 
-	constructor(x, y, width, height, normalText, shiftText, handSide, row, fingerType, alignType) {
+	this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX);
-		this.normalText = normalText;
+	this.setting.strokeWidthPx = 2;
-		this.shiftText = shiftText;
-		this.handSide = handSide;
-		this.row = row;
-		this.fingerType = fingerType;
-		this.alignType = alignType;
 
-		this.setting = new RoundRectButtonSetting(x, y, width, height, KeyButton.DEFALUT_ROUND_AMOUNT_PX);
+	this.buttonSolid = this.makeButtonSolidSprite(this.setting);
-		this.setting.strokeWidthPx = 2;
+	this.setNormalColor();
+	this.buttonStroke = this.makeButtonStrokeSprite(this.setting);
 
-		this.buttonSolid = this.makeButtonSolidSprite(this.setting);
+	this.baselineStroke = null;
-		this.setNormalColor();
+	if(fingerType == KeyButton.INDEX_FINGER_BASELINE) {
-		this.buttonStroke = this.makeButtonStrokeSprite(this.setting);
+		this.baselineStroke = this.makeBaselineStrokeSprite(this.setting, width, height);
-
+		this.buttonStroke.addChild(this.baselineStroke);
-		this.baselineStroke = null;
-		if(fingerType == KeyButton.INDEX_FINGER_BASELINE) {
-			this.baselineStroke = this.makeBaselineStrokeSprite(this.setting, width, height);
-			this.buttonStroke.addChild(this.baselineStroke);
-		}
-
-		this.buttonText = this.makeText(this.setting, this.normalText);
-		if(this.normalText.length > 0) {
-			this.buttonStroke.addChild(this.buttonText);
-		}
-
-		this.highlightButtonStroke = this.makeHighlightButtonStrokeSprite(this.setting);
-		this.highlightButtonStroke.alpha = 0;
 	}
 
-	makeButtonSolidSprite(setting) {
+	this.buttonText = this.makeText(this.setting, this.normalText);
-		let btnTexture = new Phaser.Graphics()
+	if(this.normalText.length > 0) {
-			.beginFill(0xffffff, 0.5)
+		this.buttonStroke.addChild(this.buttonText);
-			// .lineStyle(setting.strokeWidthPx, 0xFFffff, 1)
-			.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
-			.endFill()
-			.generateTexture();
-
-		return game.add.sprite(
-			setting.x,	// - setting.width / 2,
-			setting.y,	// - setting.height / 2,
-			btnTexture
-		);
-	}
-
-	makeButtonStrokeSprite(setting) {
-		let btnTexture = new Phaser.Graphics()
-			.lineStyle(setting.strokeWidthPx, 0xaaaaaa, 1)
-			.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
-			.generateTexture();
-
-		return game.add.sprite(
-			setting.x,	// - setting.width / 2,
-			setting.y,	// - setting.height / 2,
-			btnTexture
-		);
-	}
-
-	makeHighlightButtonStrokeSprite(setting) {
-		let strokeWidth = setting.strokeWidthPx * 2;
-		let btnTexture = new Phaser.Graphics()
-			.lineStyle(strokeWidth, 0xfffff00, 1)
-			.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
-			.generateTexture();
-
-		return game.add.sprite(
-			setting.x - strokeWidth / 4,
-			setting.y - strokeWidth / 4,
-			btnTexture
-		);
-	}
-
-	makeBaselineStrokeSprite(setting, width, height) {
-		let strokePx = setting.strokeWidthPx;
-
-		let baselineTexture = new Phaser.Graphics()
-			.lineStyle(2, 0x888888)
-			.moveTo(1, 1)
-			.lineTo(16, 1)
-			.lineStyle(2, 0xffffff)
-			.moveTo(0, 0)
-			.lineTo(15, 0)
-			.generateTexture();
-
-		let baselineSprite = game.add.sprite(
-				strokePx + setting.width / 2,
-				strokePx + setting.height - 6,
-				baselineTexture
-			);
-		baselineSprite.anchor.set(0.5);
-		return baselineSprite;
-	}
-
-	makeText(setting, textContent) {
-		let fontStyle = { };
-		if(this.alignType === KeyButton.NORMAL_KEY)
-			setting.fontStyle.font = "20px Courier New";
-		else
-			setting.fontStyle.font = "11px Courier New";
-
-		let OFFSET_X = 4, OFFSET_Y = 3;
-		let textPosX = 0, textPosY = 0;
-		switch(this.alignType) {
-			case KeyButton.NORMAL_KEY:
-			case KeyButton.NORMAL_FUNCTION_KEY:
-			textPosX = setting.strokeWidthPx + setting.width / 2;
-			textPosY = setting.strokeWidthPx + setting.height / 2 + OFFSET_Y;
-			break;
-
-			case KeyButton.LEFT_FUNCTION_KEY:
-			textPosX = setting.strokeWidthPx + OFFSET_X;
-			textPosY = setting.strokeWidthPx + setting.height;
-			break;
-
-			case KeyButton.CENTER_FUNCTION_KEY:
-			textPosX = setting.strokeWidthPx + setting.width / 2;
-			textPosY = setting.strokeWidthPx + setting.height;
-			break;
-
-			case KeyButton.RIGHT_FUNCTION_KEY:
-			textPosX = setting.strokeWidthPx + setting.width - OFFSET_X;
-			textPosY = setting.strokeWidthPx + setting.height;
-			break;
-		}
-
-		let buttonText = game.add.text(textPosX, textPosY, textContent, setting.fontStyle);
-		switch(this.alignType) {
-			case KeyButton.NORMAL_KEY:
-			case KeyButton.NORMAL_FUNCTION_KEY:
-			buttonText.anchor.set(0.5);
-			break;
-
-			case KeyButton.LEFT_FUNCTION_KEY:
-			buttonText.anchor.set(0, 1);
-			break;
-
-			case KeyButton.CENTER_FUNCTION_KEY:
-			buttonText.anchor.set(0.5, 1);
-			break;
-
-			case KeyButton.RIGHT_FUNCTION_KEY:
-			buttonText.anchor.set(1, 1);
-			break;
-		}
-
-		return buttonText;
-	}
-
-
-	setNormalColor() {
-		switch(this.fingerType) {
-			case KeyButton.THUMB:
-			this.buttonSolid.tint = 0x604d4d;
-			break;
-
-			case KeyButton.INDEX_FINGER:
-			case KeyButton.INDEX_FINGER_BASELINE:
-			this.buttonSolid.tint = 0x4d604d;
-			break;
-
-			case KeyButton.MIDDLE_FINGER:
-			this.buttonSolid.tint = 0x4d4d60;
-			break;
-
-			case KeyButton.RING_FINGER:
-			this.buttonSolid.tint = 0x60604d;
-			break;
-
-			case KeyButton.LITTLE_FINGER:
-			this.buttonSolid.tint = 0x4d6060;
-			break;
-
-			default:
-			this.buttonSolid.tint = 0x4d4d4d;
-			// this.buttonSolid.alpha = 0;
-		}
-	}
-
-	setTargetColor() {
-		switch(this.fingerType) {
-			case KeyButton.THUMB:
-			this.buttonSolid.tint = 0xff8080;
-			break;
-
-			case KeyButton.INDEX_FINGER:
-			case KeyButton.INDEX_FINGER_BASELINE:
-			this.buttonSolid.tint = 0x80ff80;
-			break;
-
-			case KeyButton.MIDDLE_FINGER:
-			this.buttonSolid.tint = 0x8080ff;
-			break;
-
-			case KeyButton.RING_FINGER:
-			this.buttonSolid.tint = 0xffff80;
-			break;
-
-			case KeyButton.LITTLE_FINGER:
-			this.buttonSolid.tint = 0x80ffff;
-			break;
-
-			default:
-			this.buttonSolid.tint = 0x202020;
-			// this.buttonSolid.alpha = 0;
-		}
-	}
-
-	setGoodPressColor() {
-		this.buttonSolid.tint = 0x0000ff;
-	}
-
-	setBadPressColor() {
-		this.buttonSolid.tint = 0xff0000;
-	}
-
-
-	showHighlight() {
-		this.highlightButtonStroke.alpha = 1;
-	}
-
-	hideHighlight() {
-		this.highlightButtonStroke.alpha = 0;
-	}
-
-
-	onShiftPressed() {
-		this.buttonText.text = this.shiftText;
-	}
-
-	onShiftUnpressed() {
-		this.buttonText.text = this.normalText;
 	}
 
+	this.highlightButtonStroke = this.makeHighlightButtonStrokeSprite(this.setting);
+	this.highlightButtonStroke.alpha = 0;
 }
 
+KeyButton.prototype.makeButtonSolidSprite = function(setting) {
+	var btnTexture = new Phaser.Graphics()
+		.beginFill(0xffffff, 0.5)
+		// .lineStyle(setting.strokeWidthPx, 0xFFffff, 1)
+		.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
+		.endFill()
+		.generateTexture();
+
+	return game.add.sprite(
+		setting.x,	// - setting.width / 2,
+		setting.y,	// - setting.height / 2,
+		btnTexture
+	);
+}
+
+KeyButton.prototype.makeButtonStrokeSprite = function(setting) {
+	var btnTexture = new Phaser.Graphics()
+		.lineStyle(setting.strokeWidthPx, 0xaaaaaa, 1)
+		.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
+		.generateTexture();
+
+	return game.add.sprite(
+		setting.x,	// - setting.width / 2,
+		setting.y,	// - setting.height / 2,
+		btnTexture
+	);
+}
+
+KeyButton.prototype.makeHighlightButtonStrokeSprite = function(setting) {
+	var strokeWidth = setting.strokeWidthPx * 2;
+	var btnTexture = new Phaser.Graphics()
+		.lineStyle(strokeWidth, 0xfffff00, 1)
+		.drawRoundedRect(0, 0, setting.width, setting.height, setting.roundAmount)
+		.generateTexture();
+
+	return game.add.sprite(
+		setting.x - strokeWidth / 4,
+		setting.y - strokeWidth / 4,
+		btnTexture
+	);
+}
+
+KeyButton.prototype.makeBaselineStrokeSprite = function(setting, width, height) {
+	var strokePx = setting.strokeWidthPx;
+
+	var baselineTexture = new Phaser.Graphics()
+		.lineStyle(2, 0x888888)
+		.moveTo(1, 1)
+		.lineTo(16, 1)
+		.lineStyle(2, 0xffffff)
+		.moveTo(0, 0)
+		.lineTo(15, 0)
+		.generateTexture();
+
+	var baselineSprite = game.add.sprite(
+			strokePx + setting.width / 2,
+			strokePx + setting.height - 6,
+			baselineTexture
+		);
+	baselineSprite.anchor.set(0.5);
+	return baselineSprite;
+}
+
+KeyButton.prototype.makeText = function(setting, textContent) {
+	var fontStyle = { };
+	if(this.alignType === KeyButton.NORMAL_KEY)
+		setting.fontStyle.font = "20px Courier New";
+	else
+		setting.fontStyle.font = "11px Courier New";
+
+	var OFFSET_X = 4, OFFSET_Y = 3;
+	var textPosX = 0, textPosY = 0;
+	switch(this.alignType) {
+		case KeyButton.NORMAL_KEY:
+		case KeyButton.NORMAL_FUNCTION_KEY:
+		textPosX = setting.strokeWidthPx + setting.width / 2;
+		textPosY = setting.strokeWidthPx + setting.height / 2 + OFFSET_Y;
+		break;
+
+		case KeyButton.LEFT_FUNCTION_KEY:
+		textPosX = setting.strokeWidthPx + OFFSET_X;
+		textPosY = setting.strokeWidthPx + setting.height;
+		break;
+
+		case KeyButton.CENTER_FUNCTION_KEY:
+		textPosX = setting.strokeWidthPx + setting.width / 2;
+		textPosY = setting.strokeWidthPx + setting.height;
+		break;
+
+		case KeyButton.RIGHT_FUNCTION_KEY:
+		textPosX = setting.strokeWidthPx + setting.width - OFFSET_X;
+		textPosY = setting.strokeWidthPx + setting.height;
+		break;
+	}
+
+	var buttonText = game.add.text(textPosX, textPosY, textContent, setting.fontStyle);
+	switch(this.alignType) {
+		case KeyButton.NORMAL_KEY:
+		case KeyButton.NORMAL_FUNCTION_KEY:
+		buttonText.anchor.set(0.5);
+		break;
+
+		case KeyButton.LEFT_FUNCTION_KEY:
+		buttonText.anchor.set(0, 1);
+		break;
+
+		case KeyButton.CENTER_FUNCTION_KEY:
+		buttonText.anchor.set(0.5, 1);
+		break;
+
+		case KeyButton.RIGHT_FUNCTION_KEY:
+		buttonText.anchor.set(1, 1);
+		break;
+	}
+
+	return buttonText;
+}
+
+
+KeyButton.prototype.setNormalColor = function() {
+	switch(this.fingerType) {
+		case KeyButton.THUMB:
+		this.buttonSolid.tint = 0x604d4d;
+		break;
+
+		case KeyButton.INDEX_FINGER:
+		case KeyButton.INDEX_FINGER_BASELINE:
+		this.buttonSolid.tint = 0x4d604d;
+		break;
+
+		case KeyButton.MIDDLE_FINGER:
+		this.buttonSolid.tint = 0x4d4d60;
+		break;
+
+		case KeyButton.RING_FINGER:
+		this.buttonSolid.tint = 0x60604d;
+		break;
+
+		case KeyButton.LITTLE_FINGER:
+		this.buttonSolid.tint = 0x4d6060;
+		break;
+
+		default:
+		this.buttonSolid.tint = 0x4d4d4d;
+		// this.buttonSolid.alpha = 0;
+	}
+}
+
+KeyButton.prototype.setTargetColor = function() {
+	switch(this.fingerType) {
+		case KeyButton.THUMB:
+		this.buttonSolid.tint = 0xff8080;
+		break;
+
+		case KeyButton.INDEX_FINGER:
+		case KeyButton.INDEX_FINGER_BASELINE:
+		this.buttonSolid.tint = 0x80ff80;
+		break;
+
+		case KeyButton.MIDDLE_FINGER:
+		this.buttonSolid.tint = 0x8080ff;
+		break;
+
+		case KeyButton.RING_FINGER:
+		this.buttonSolid.tint = 0xffff80;
+		break;
+
+		case KeyButton.LITTLE_FINGER:
+		this.buttonSolid.tint = 0x80ffff;
+		break;
+
+		default:
+		this.buttonSolid.tint = 0x202020;
+		// this.buttonSolid.alpha = 0;
+	}
+}
+
+KeyButton.prototype.setGoodPressColor = function() {
+	this.buttonSolid.tint = 0x0000ff;
+}
+
+KeyButton.prototype.setBadPressColor = function() {
+	this.buttonSolid.tint = 0xff0000;
+}
+
+
+KeyButton.prototype.showHighlight = function() {
+	this.highlightButtonStroke.alpha = 1;
+}
+
+KeyButton.prototype.hideHighlight = function() {
+	this.highlightButtonStroke.alpha = 0;
+}
+
+
+KeyButton.prototype.onShiftPressed = function() {
+	this.buttonText.text = this.shiftText;
+}
+
+KeyButton.prototype.onShiftUnpressed = function() {
+	this.buttonText.text = this.normalText;
+}
+
+
 KeyButton.NONE_ICON					= "";
 KeyButton.NONE_BUTTON_TEXT			= "";
 

src/game/typing/practice/key_mapper.js

@@ -1,249 +1,237 @@
-class KeyData {
+function KeyData() {
+	this.functionKey = null;
+	this.englishKey = null;
+	this.koreanKey = null;
+}
 
-	constructor() {
+function KeyTextData(normalText, shiftText) {
-		this.functionKey = null;
+	this.normalText = normalText;
-		this.englishKey = null;
+	this.shiftText = shiftText;
-		this.koreanKey = null;
+}
+
+
+function KeyMapper() {
+	this.keyboardKeyMap = {};
+	this.inputKeyMap = {};
+
+	this.registerFunctionKey();
+	this.registerEnglishKey();
+	this.registerKoreanKey();
+}
+
+
+KeyMapper.prototype.registerFunctionKey = function() {
+	this.registerFunctionKeyTextData("Backquote", "`", "~");
+	this.registerFunctionKeyTextData("Digit1", "1", "!");
+	this.registerFunctionKeyTextData("Digit2", "2", "@");
+	this.registerFunctionKeyTextData("Digit3", "3", "#");
+	this.registerFunctionKeyTextData("Digit4", "4", "$");
+	this.registerFunctionKeyTextData("Digit5", "5", "%");
+	this.registerFunctionKeyTextData("Digit6", "6", "^");
+	this.registerFunctionKeyTextData("Digit7", "7", "&");
+	this.registerFunctionKeyTextData("Digit8", "8", "*");
+	this.registerFunctionKeyTextData("Digit9", "9", "(");
+	this.registerFunctionKeyTextData("Digit0", "0", ")");
+	this.registerFunctionKeyTextData("Minus", "-", "_");
+	this.registerFunctionKeyTextData("Equal", "=", "+");
+	this.registerFunctionKeyTextData("Backspace", "backspace", "backspace");
+
+	this.registerFunctionKeyTextData("Tab", "tab", "tab");
+	this.registerFunctionKeyTextData("BracketLeft", "[", "{");
+	this.registerFunctionKeyTextData("BracketRight", "]", "}");
+	this.registerFunctionKeyTextData("Backslash", "\\", "|");
+
+	this.registerFunctionKeyTextData("CapsLock", "caps lock", "caps lock");
+	this.registerFunctionKeyTextData("Semicolon", ";", ":");
+	this.registerFunctionKeyTextData("Quote", "'", "\"");
+	this.registerFunctionKeyTextData("Enter", "enter", "enter");
+
+	this.registerFunctionKeyTextData("ShiftLeft", "left_shift", "left_shift");
+	this.registerFunctionKeyTextData("ShiftRight", "right_shift", "right_shift");
+	this.registerFunctionKeyTextData("Comma", ",", "<");
+	this.registerFunctionKeyTextData("Period", ".", ">");
+	this.registerFunctionKeyTextData("Slash", "/", "?");
+
+	this.registerFunctionKeyTextData("ControlLeft", "ctrl", "ctrl");
+	this.registerFunctionKeyTextData("window", "window", "window");
+	this.registerFunctionKeyTextData("AltLeft", "alt", "alt");
+	this.registerFunctionKeyTextData("Chinese", "한자", "한자");
+	this.registerFunctionKeyTextData("Space", "space", "space");
+	this.registerFunctionKeyTextData("KoreanEnglish", "한/영", "한/영");
+	this.registerFunctionKeyTextData("AltRight", "alt", "alt");
+	this.registerFunctionKeyTextData("ControlRight", "ctrl", "ctrl");
+}
+
+KeyMapper.prototype.registerEnglishKey = function() {
+	this.registerEnglishKeyTextData("KeyQ", "q", "Q");
+	this.registerEnglishKeyTextData("KeyW", "w", "W");
+	this.registerEnglishKeyTextData("KeyE", "e", "E");
+	this.registerEnglishKeyTextData("KeyR", "r", "R");
+	this.registerEnglishKeyTextData("KeyT", "t", "T");
+	this.registerEnglishKeyTextData("KeyY", "y", "Y");
+	this.registerEnglishKeyTextData("KeyU", "u", "U");
+	this.registerEnglishKeyTextData("KeyI", "i", "I");
+	this.registerEnglishKeyTextData("KeyO", "o", "O");
+	this.registerEnglishKeyTextData("KeyP", "p", "P");
+
+	this.registerEnglishKeyTextData("KeyA", "a", "A");
+	this.registerEnglishKeyTextData("KeyS", "s", "S");
+	this.registerEnglishKeyTextData("KeyD", "d", "D");
+	this.registerEnglishKeyTextData("KeyF", "f", "F");
+	this.registerEnglishKeyTextData("KeyG", "g", "G");
+	this.registerEnglishKeyTextData("KeyH", "h", "H");
+	this.registerEnglishKeyTextData("KeyJ", "j", "J");
+	this.registerEnglishKeyTextData("KeyK", "k", "K");
+	this.registerEnglishKeyTextData("KeyL", "l", "L");
+
+	this.registerEnglishKeyTextData("KeyZ", "z", "Z");
+	this.registerEnglishKeyTextData("KeyX", "x", "X");
+	this.registerEnglishKeyTextData("KeyC", "c", "C");
+	this.registerEnglishKeyTextData("KeyV", "v", "V");
+	this.registerEnglishKeyTextData("KeyB", "b", "B");
+	this.registerEnglishKeyTextData("KeyN", "n", "N");
+	this.registerEnglishKeyTextData("KeyM", "m", "M");
+}
+
+KeyMapper.prototype.registerKoreanKey = function() {
+	this.registerKoreanKeyTextData("KeyQ", "ㅂ", "ㅃ");
+	this.registerKoreanKeyTextData("KeyW", "ㅈ", "ㅉ");
+	this.registerKoreanKeyTextData("KeyE", "ㄷ", "ㄸ");
+	this.registerKoreanKeyTextData("KeyR", "ㄱ", "ㄲ");
+	this.registerKoreanKeyTextData("KeyT", "ㅅ", "ㅆ");
+	this.registerKoreanKeyTextData("KeyY", "ㅛ", "ㅛ");
+	this.registerKoreanKeyTextData("KeyU", "ㅕ", "ㅕ");
+	this.registerKoreanKeyTextData("KeyI", "ㅑ", "ㅑ");
+	this.registerKoreanKeyTextData("KeyO", "ㅐ", "ㅒ");
+	this.registerKoreanKeyTextData("KeyP", "ㅔ", "ㅖ");
+
+	this.registerKoreanKeyTextData("KeyA", "ㅁ", "ㅁ");
+	this.registerKoreanKeyTextData("KeyS", "ㄴ", "ㄴ");
+	this.registerKoreanKeyTextData("KeyD", "ㅇ", "ㅇ");
+	this.registerKoreanKeyTextData("KeyF", "ㄹ", "ㄹ");
+	this.registerKoreanKeyTextData("KeyG", "ㅎ", "ㅎ");
+	this.registerKoreanKeyTextData("KeyH", "ㅗ", "ㅗ");
+	this.registerKoreanKeyTextData("KeyJ", "ㅓ", "ㅓ");
+	this.registerKoreanKeyTextData("KeyK", "ㅏ", "ㅏ");
+	this.registerKoreanKeyTextData("KeyL", "ㅣ", "ㅣ");
+
+	this.registerKoreanKeyTextData("KeyZ", "ㅋ", "ㅋ");
+	this.registerKoreanKeyTextData("KeyX", "ㅌ", "ㅌ");
+	this.registerKoreanKeyTextData("KeyC", "ㅊ", "ㅊ");
+	this.registerKoreanKeyTextData("KeyV", "ㅍ", "ㅍ");
+	this.registerKoreanKeyTextData("KeyB", "ㅠ", "ㅠ");
+	this.registerKoreanKeyTextData("KeyN", "ㅜ", "ㅜ");
+	this.registerKoreanKeyTextData("KeyM", "ㅡ", "ㅡ");
+}
+
+
+KeyMapper.prototype.registerFunctionKeyTextData = function(keyID, normalText, shiftText) {
+	if(this.keyboardKeyMap[keyID] === undefined) {
+		this.keyboardKeyMap[keyID] = new KeyData();
+	}
+	this.keyboardKeyMap[keyID].functionKey = new KeyTextData(normalText, shiftText);
+
+	if(this.inputKeyMap[keyID] === undefined)
+		this.inputKeyMap[keyID] = keyID;
+	if(this.inputKeyMap[normalText] === undefined)
+		this.inputKeyMap[normalText] = keyID;
+	if(this.inputKeyMap[shiftText] === undefined)
+		this.inputKeyMap[shiftText] = keyID;
+}
+
+KeyMapper.prototype.registerEnglishKeyTextData = function(keyID, normalText, shiftText) {
+	if(this.keyboardKeyMap[keyID] === undefined) {
+		this.keyboardKeyMap[keyID] = new KeyData();
+	}
+	this.keyboardKeyMap[keyID].englishKey = new KeyTextData(normalText, shiftText);
+
+	if(this.inputKeyMap[keyID] === undefined)
+		this.inputKeyMap[keyID] = keyID;
+	if(this.inputKeyMap[normalText] === undefined)
+		this.inputKeyMap[normalText] = keyID;
+	if(this.inputKeyMap[shiftText] === undefined)
+		this.inputKeyMap[shiftText] = keyID;
+}
+
+KeyMapper.prototype.registerKoreanKeyTextData = function(keyID, normalText, shiftText) {
+	if(this.keyboardKeyMap[keyID] === undefined) {
+		this.keyboardKeyMap[keyID] = new KeyData();
+	}
+	this.keyboardKeyMap[keyID].koreanKey = new KeyTextData(normalText, shiftText);
+
+	if(this.inputKeyMap[keyID] === undefined)
+		this.inputKeyMap[keyID] = keyID;
+	if(this.inputKeyMap[normalText] === undefined)
+		this.inputKeyMap[normalText] = keyID;
+	if(this.inputKeyMap[shiftText] === undefined)
+		this.inputKeyMap[shiftText] = keyID;
+}
+
+
+KeyMapper.prototype.getNormalText = function(keyID, language) {
+	if(this.keyboardKeyMap[keyID] === undefined) {
+		console.log(keyID);
+		return "?";
+	}
+
+	// console.log(keyID);
+	// console.log(language);
+	// console.log(this.keyboardKeyMap[keyID]);
+	var keyData = this.keyboardKeyMap[keyID];
+	if(language === Keyboard.ENGLISH && keyData.englishKey !== null) {
+		return keyData.englishKey.normalText;
+	}
+	else if(language === Keyboard.KOREAN && keyData.koreanKey !== null) {
+		return keyData.koreanKey.normalText;
+	}
+	else if(keyData.functionKey !== undefined) {
+		return keyData.functionKey.normalText;
+	}
+	else {
+		return "?";
 	}
 }
 
-class KeyTextData {
+KeyMapper.prototype.getShiftText = function(keyID, language) {
-
+	if(this.keyboardKeyMap[keyID] === undefined) {
-	constructor(normalText, shiftText) {
+		console.log(keyID);
-		this.normalText = normalText;
+		return "?";
-		this.shiftText = shiftText;
 	}
 
+	// console.log(keyID);
+	// console.log(language);
+	// console.log(this.keyboardKeyMap[keyID]);
+	var keyData = this.keyboardKeyMap[keyID];
+	if(language === Keyboard.ENGLISH && keyData.englishKey !== null) {
+		return keyData.englishKey.shiftText;
+	}
+	else if(language === Keyboard.KOREAN && keyData.koreanKey !== null) {
+		return keyData.koreanKey.shiftText;
+	}
+	else if(keyData.functionKey !== undefined) {
+		return keyData.functionKey.shiftText;
+	}
+	else {
+		return "?";
+	}
 }
 
 
 
-class KeyMapper {
+KeyMapper.prototype.getKeyIDOfText = function(text) {
-
+	return this.inputKeyMap[text];
-	constructor() {
+}
-		this.keyboardKeyMap = {};
+
-		this.inputKeyMap = {};
+KeyMapper.prototype.isShiftText = function(text) {
-
+	var keyID = this.getKeyIDOfText(text);
-		this.registerFunctionKey();
+	var keyData = this.keyboardKeyMap[keyID];
-		this.registerEnglishKey();
+
-		this.registerKoreanKey();
+	if(keyData.englishKey !== null && keyData.englishKey.shiftText === text)
-	}
+		return true;
-
+	else if(keyData.koreanKey !== null && keyData.koreanKey.shiftText === text && keyData.koreanKey.normalText !== text)
-
+		return true;
-	registerFunctionKey() {
+	else if(keyData.functionKey !== null && keyData.functionKey.shiftText === text)
-		this.registerFunctionKeyTextData("Backquote", "`", "~");
+		return true;
-		this.registerFunctionKeyTextData("Digit1", "1", "!");
+
-		this.registerFunctionKeyTextData("Digit2", "2", "@");
+	return false;
-		this.registerFunctionKeyTextData("Digit3", "3", "#");
-		this.registerFunctionKeyTextData("Digit4", "4", "$");
-		this.registerFunctionKeyTextData("Digit5", "5", "%");
-		this.registerFunctionKeyTextData("Digit6", "6", "^");
-		this.registerFunctionKeyTextData("Digit7", "7", "&");
-		this.registerFunctionKeyTextData("Digit8", "8", "*");
-		this.registerFunctionKeyTextData("Digit9", "9", "(");
-		this.registerFunctionKeyTextData("Digit0", "0", ")");
-		this.registerFunctionKeyTextData("Minus", "-", "_");
-		this.registerFunctionKeyTextData("Equal", "=", "+");
-		this.registerFunctionKeyTextData("Backspace", "backspace", "backspace");
-
-		this.registerFunctionKeyTextData("Tab", "tab", "tab");
-		this.registerFunctionKeyTextData("BracketLeft", "[", "{");
-		this.registerFunctionKeyTextData("BracketRight", "]", "}");
-		this.registerFunctionKeyTextData("Backslash", "\\", "|");
-
-		this.registerFunctionKeyTextData("CapsLock", "caps lock", "caps lock");
-		this.registerFunctionKeyTextData("Semicolon", ";", ":");
-		this.registerFunctionKeyTextData("Quote", "'", "\"");
-		this.registerFunctionKeyTextData("Enter", "enter", "enter");
-
-		this.registerFunctionKeyTextData("ShiftLeft", "left_shift", "left_shift");
-		this.registerFunctionKeyTextData("ShiftRight", "right_shift", "right_shift");
-		this.registerFunctionKeyTextData("Comma", ",", "<");
-		this.registerFunctionKeyTextData("Period", ".", ">");
-		this.registerFunctionKeyTextData("Slash", "/", "?");
-
-		this.registerFunctionKeyTextData("ControlLeft", "ctrl", "ctrl");
-		this.registerFunctionKeyTextData("window", "window", "window");
-		this.registerFunctionKeyTextData("AltLeft", "alt", "alt");
-		this.registerFunctionKeyTextData("Chinese", "한자", "한자");
-		this.registerFunctionKeyTextData("Space", "space", "space");
-		this.registerFunctionKeyTextData("KoreanEnglish", "한/영", "한/영");
-		this.registerFunctionKeyTextData("AltRight", "alt", "alt");
-		this.registerFunctionKeyTextData("ControlRight", "ctrl", "ctrl");
-	}
-
-	registerEnglishKey() {
-		this.registerEnglishKeyTextData("KeyQ", "q", "Q");
-		this.registerEnglishKeyTextData("KeyW", "w", "W");
-		this.registerEnglishKeyTextData("KeyE", "e", "E");
-		this.registerEnglishKeyTextData("KeyR", "r", "R");
-		this.registerEnglishKeyTextData("KeyT", "t", "T");
-		this.registerEnglishKeyTextData("KeyY", "y", "Y");
-		this.registerEnglishKeyTextData("KeyU", "u", "U");
-		this.registerEnglishKeyTextData("KeyI", "i", "I");
-		this.registerEnglishKeyTextData("KeyO", "o", "O");
-		this.registerEnglishKeyTextData("KeyP", "p", "P");
-
-		this.registerEnglishKeyTextData("KeyA", "a", "A");
-		this.registerEnglishKeyTextData("KeyS", "s", "S");
-		this.registerEnglishKeyTextData("KeyD", "d", "D");
-		this.registerEnglishKeyTextData("KeyF", "f", "F");
-		this.registerEnglishKeyTextData("KeyG", "g", "G");
-		this.registerEnglishKeyTextData("KeyH", "h", "H");
-		this.registerEnglishKeyTextData("KeyJ", "j", "J");
-		this.registerEnglishKeyTextData("KeyK", "k", "K");
-		this.registerEnglishKeyTextData("KeyL", "l", "L");
-
-		this.registerEnglishKeyTextData("KeyZ", "z", "Z");
-		this.registerEnglishKeyTextData("KeyX", "x", "X");
-		this.registerEnglishKeyTextData("KeyC", "c", "C");
-		this.registerEnglishKeyTextData("KeyV", "v", "V");
-		this.registerEnglishKeyTextData("KeyB", "b", "B");
-		this.registerEnglishKeyTextData("KeyN", "n", "N");
-		this.registerEnglishKeyTextData("KeyM", "m", "M");
-	}
-
-	registerKoreanKey() {
-		this.registerKoreanKeyTextData("KeyQ", "ㅂ", "ㅃ");
-		this.registerKoreanKeyTextData("KeyW", "ㅈ", "ㅉ");
-		this.registerKoreanKeyTextData("KeyE", "ㄷ", "ㄸ");
-		this.registerKoreanKeyTextData("KeyR", "ㄱ", "ㄲ");
-		this.registerKoreanKeyTextData("KeyT", "ㅅ", "ㅆ");
-		this.registerKoreanKeyTextData("KeyY", "ㅛ", "ㅛ");
-		this.registerKoreanKeyTextData("KeyU", "ㅕ", "ㅕ");
-		this.registerKoreanKeyTextData("KeyI", "ㅑ", "ㅑ");
-		this.registerKoreanKeyTextData("KeyO", "ㅐ", "ㅒ");
-		this.registerKoreanKeyTextData("KeyP", "ㅔ", "ㅖ");
-
-		this.registerKoreanKeyTextData("KeyA", "ㅁ", "ㅁ");
-		this.registerKoreanKeyTextData("KeyS", "ㄴ", "ㄴ");
-		this.registerKoreanKeyTextData("KeyD", "ㅇ", "ㅇ");
-		this.registerKoreanKeyTextData("KeyF", "ㄹ", "ㄹ");
-		this.registerKoreanKeyTextData("KeyG", "ㅎ", "ㅎ");
-		this.registerKoreanKeyTextData("KeyH", "ㅗ", "ㅗ");
-		this.registerKoreanKeyTextData("KeyJ", "ㅓ", "ㅓ");
-		this.registerKoreanKeyTextData("KeyK", "ㅏ", "ㅏ");
-		this.registerKoreanKeyTextData("KeyL", "ㅣ", "ㅣ");
-
-		this.registerKoreanKeyTextData("KeyZ", "ㅋ", "ㅋ");
-		this.registerKoreanKeyTextData("KeyX", "ㅌ", "ㅌ");
-		this.registerKoreanKeyTextData("KeyC", "ㅊ", "ㅊ");
-		this.registerKoreanKeyTextData("KeyV", "ㅍ", "ㅍ");
-		this.registerKoreanKeyTextData("KeyB", "ㅠ", "ㅠ");
-		this.registerKoreanKeyTextData("KeyN", "ㅜ", "ㅜ");
-		this.registerKoreanKeyTextData("KeyM", "ㅡ", "ㅡ");
-	}
-
-
-	registerFunctionKeyTextData(keyID, normalText, shiftText) {
-		if(this.keyboardKeyMap[keyID] === undefined) {
-			this.keyboardKeyMap[keyID] = new KeyData();
-		}
-		this.keyboardKeyMap[keyID].functionKey = new KeyTextData(normalText, shiftText);
-
-		if(this.inputKeyMap[keyID] === undefined)
-			this.inputKeyMap[keyID] = keyID;
-		if(this.inputKeyMap[normalText] === undefined)
-			this.inputKeyMap[normalText] = keyID;
-		if(this.inputKeyMap[shiftText] === undefined)
-			this.inputKeyMap[shiftText] = keyID;
-	}
-
-	registerEnglishKeyTextData(keyID, normalText, shiftText) {
-		if(this.keyboardKeyMap[keyID] === undefined) {
-			this.keyboardKeyMap[keyID] = new KeyData();
-		}
-		this.keyboardKeyMap[keyID].englishKey = new KeyTextData(normalText, shiftText);
-
-		if(this.inputKeyMap[keyID] === undefined)
-			this.inputKeyMap[keyID] = keyID;
-		if(this.inputKeyMap[normalText] === undefined)
-			this.inputKeyMap[normalText] = keyID;
-		if(this.inputKeyMap[shiftText] === undefined)
-			this.inputKeyMap[shiftText] = keyID;
-	}
-
-	registerKoreanKeyTextData(keyID, normalText, shiftText) {
-		if(this.keyboardKeyMap[keyID] === undefined) {
-			this.keyboardKeyMap[keyID] = new KeyData();
-		}
-		this.keyboardKeyMap[keyID].koreanKey = new KeyTextData(normalText, shiftText);
-
-		if(this.inputKeyMap[keyID] === undefined)
-			this.inputKeyMap[keyID] = keyID;
-		if(this.inputKeyMap[normalText] === undefined)
-			this.inputKeyMap[normalText] = keyID;
-		if(this.inputKeyMap[shiftText] === undefined)
-			this.inputKeyMap[shiftText] = keyID;
-	}
-
-
-	getNormalText(keyID, language) {
-		if(this.keyboardKeyMap[keyID] === undefined) {
-			console.log(keyID);
-			return "?";
-		}
-
-		// console.log(keyID);
-		// console.log(language);
-		// console.log(this.keyboardKeyMap[keyID]);
-		let keyData = this.keyboardKeyMap[keyID];
-		if(language === Keyboard.ENGLISH && keyData.englishKey !== null) {
-			return keyData.englishKey.normalText;
-		}
-		else if(language === Keyboard.KOREAN && keyData.koreanKey !== null) {
-			return keyData.koreanKey.normalText;
-		}
-		else if(keyData.functionKey !== undefined) {
-			return keyData.functionKey.normalText;
-		}
-		else {
-			return "?";
-		}
-	}
-
-	getShiftText(keyID, language) {
-		if(this.keyboardKeyMap[keyID] === undefined) {
-			console.log(keyID);
-			return "?";
-		}
-
-		// console.log(keyID);
-		// console.log(language);
-		// console.log(this.keyboardKeyMap[keyID]);
-		let keyData = this.keyboardKeyMap[keyID];
-		if(language === Keyboard.ENGLISH && keyData.englishKey !== null) {
-			return keyData.englishKey.shiftText;
-		}
-		else if(language === Keyboard.KOREAN && keyData.koreanKey !== null) {
-			return keyData.koreanKey.shiftText;
-		}
-		else if(keyData.functionKey !== undefined) {
-			return keyData.functionKey.shiftText;
-		}
-		else {
-			return "?";
-		}
-	}
-
-
-
-	getKeyIDOfText(text) {
-		return this.inputKeyMap[text];
-	}
-
-	isShiftText(text) {
-		let keyID = this.getKeyIDOfText(text);
-		let keyData = this.keyboardKeyMap[keyID];
-
-		if(keyData.englishKey !== null && keyData.englishKey.shiftText === text)
-			return true;
-		else if(keyData.koreanKey !== null && keyData.koreanKey.shiftText === text && keyData.koreanKey.normalText !== text)
-			return true;
-		else if(keyData.functionKey !== null && keyData.functionKey.shiftText === text)
-			return true;
-
-		return false;
-	}
-
 }

src/game/typing/practice/keyboard.js

@@ -1,421 +1,417 @@
-class Keyboard {
+function Keyboard(keyMapper, language) {
+	this.keyMapper = keyMapper;
+	this.language = language;
 
-	constructor(keyMapper, language) {
+	this.keyIndex = 0;
-		this.keyMapper = keyMapper;
+	this.keyDataList = [];
-		this.language = language;
+	this.keyList = [];
 
-		this.keyIndex = 0;
+	this.allKeyHash = {};
-		this.keyDataList = [];
+	this.normalKeyHash = {};
-		this.keyList = [];
 
-		this.allKeyHash = {};
+	this.keyUpReservations = [];
-		this.normalKeyHash = {};
 
-		this.keyUpReservations = [];
+	this.highlightKey = null;
-
+	this.highlightShiftKey = null;
-		this.highlightKey = null;
-		this.highlightShiftKey = null;
 
 
-		game.input.keyboard.addCallbacks(this, this.keyDown, this.keyUp, null);
+	game.input.keyboard.addCallbacks(this, this.keyDown, this.keyUp, null);
-		// game.input.keyboard.processKeyDown = this.keyDown;
+	// game.input.keyboard.processKeyDown = this.keyDown;
-		// game.input.keyboard.processKeyUp = this.keyUp;
+	// game.input.keyboard.processKeyUp = this.keyUp;
 
 
-		let shiftKey = game.input.keyboard.addKey(Phaser.KeyCode.SHIFT);
+	var shiftKey = game.input.keyboard.addKey(Phaser.KeyCode.SHIFT);
-		shiftKey.onDown.add(this.shifted, this);
+	shiftKey.onDown.add(this.shifted, this);
-		shiftKey.onUp.add(this.unshifted, this);
+	shiftKey.onUp.add(this.unshifted, this);
 
-		this.initKeyData();
+	this.initKeyData();
 
-		for(let i = 0; i < this.keyDataList.length; i++) {
+	for(var i = 0; i < this.keyDataList.length; i++) {
-			this.keyList[i] = new KeyButton(
+		this.keyList[i] = new KeyButton(
-				this.keyDataList[i].x,
+			this.keyDataList[i].x,
-				this.keyDataList[i].y,
+			this.keyDataList[i].y,
-				this.keyDataList[i].width,
+			this.keyDataList[i].width,
-				this.keyDataList[i].height,
+			this.keyDataList[i].height,
-				this.keyDataList[i].normalText,
+			this.keyDataList[i].normalText,
-				this.keyDataList[i].shiftText,
+			this.keyDataList[i].shiftText,
-				this.keyDataList[i].handSide,
+			this.keyDataList[i].handSide,
-				this.keyDataList[i].row,
+			this.keyDataList[i].row,
-				this.keyDataList[i].fingerType,
+			this.keyDataList[i].fingerType,
-				this.keyDataList[i].alignType,
+			this.keyDataList[i].alignType,
-			);
+		);
 
-			this.allKeyHash[this.keyDataList[i].keyID] = this.keyList[i];
+		this.allKeyHash[this.keyDataList[i].keyID] = this.keyList[i];
-		}
+	}
+}
+
+Keyboard.prototype.hideHighlight = function(text) {
+	var keyID = this.keyMapper.getKeyIDOfText(text);
+	this.allKeyHash[keyID].hideHighlight();
+
+	if(!this.keyMapper.isShiftText(text))
+		return;
+
+	var handSide = this.allKeyHash[keyID].handSide;
+	if(handSide === KeyButton.LEFT_HAND)
+		this.allKeyHash["ShiftRight"].hideHighlight();
+	else
+		this.allKeyHash["ShiftLeft"].hideHighlight();
+}
+
+Keyboard.prototype.showHighlight = function(text) {
+	var keyID = this.keyMapper.getKeyIDOfText(text);
+	var key = this.allKeyHash[keyID];
+	key.showHighlight();
+}
+
+Keyboard.prototype.getKeyOfText = function(text) {
+	var keyID = this.keyMapper.getKeyIDOfText(text);
+	return this.allKeyHash[keyID];
+}
+
+Keyboard.prototype.getKey = function(keyID) {
+	return this.allKeyHash[keyID];
+}
+
+Keyboard.prototype.keyDown = function(char) {
+	var keyCode = char.code;
+	this.setPressedSprite(keyCode);
+}
+
+Keyboard.prototype.setPressedSprite = function(keyCode) {
+	var keyID = this.keyMapper.getKeyIDOfText(keyCode);
+	var key = this.allKeyHash[keyID];
+	if(key === undefined) {
+		console.log(keyCode+ " is pressed but not registered to KeyMapper");
+		return;
 	}
 
-	hideHighlight(text) {
+	switch(keyCode) {
-		let keyID = this.keyMapper.getKeyIDOfText(text);
+		case "Tab":
-		this.allKeyHash[keyID].hideHighlight();
+		case "CapsLock":
-
+		case "MetaLeft":
-		if(!this.keyMapper.isShiftText(text))
+		case "MetaRight":
-			return;
+		console.log(keyCode + " is pressed but not show");
-
+		return;
-		let handSide = this.allKeyHash[keyID].handSide;
-		if(handSide === KeyButton.LEFT_HAND)
-			this.allKeyHash["ShiftRight"].hideHighlight();
-		else
-			this.allKeyHash["ShiftLeft"].hideHighlight();
 	}
 
-	showHighlight(text) {
+	key.setTargetColor();
-		let keyID = this.keyMapper.getKeyIDOfText(text);
+}
-		let key = this.allKeyHash[keyID];
+
-		key.showHighlight();
+Keyboard.prototype.keyUp = function(char) {
+	var keyCode = char.code;
+	this.setNormalSprite(keyCode);
+}
+
+Keyboard.prototype.setNormalSprite = function(keyCode) {
+	var keyID = this.keyMapper.getKeyIDOfText(keyCode);
+	var key = this.allKeyHash[keyID];
+	if(key !== undefined)
+		key.setNormalColor();
+}
+
+
+
+Keyboard.prototype.shifted = function() {
+	for(var i = 0; i < this.keyDataList.length; i++) {
+		this.keyList[i].onShiftPressed();
 	}
+}
 
-	getKeyOfText(text) {
+Keyboard.prototype.unshifted = function() {
-		let keyID = this.keyMapper.getKeyIDOfText(text);
+	for(var i = 0; i < this.keyDataList.length; i++) {
-		return this.allKeyHash[keyID];
+		this.keyList[i].onShiftUnpressed();
 	}
+}
 
-	getKey(keyID) {
-		return this.allKeyHash[keyID];
-	}
 
-	keyDown(char) {
+Keyboard.prototype.keyPress = function(char) {
-		let keyCode = char.code;
+	// self.checkTypingContents(event);
-		this.setPressedSprite(keyCode);
+	// console.log(char);
-	}
+	if(game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
+		console.log("shift is pressed");
+}
 
-	setPressedSprite(keyCode) {
-		let keyID = this.keyMapper.getKeyIDOfText(keyCode);
-		let key = this.allKeyHash[keyID];
-		if(key === undefined) {
-			console.log(keyCode+ " is pressed but not registered to KeyMapper");
-			return;
-		}
 
-		switch(keyCode) {
+Keyboard.prototype.makeKeyDataObject = function(keyID, normalText, shiftText, handSide, row, fingerType, x, y, width, height, alignType) {
-			case "Tab":
+	var keyDataObject = {};
-			case "CapsLock":
+	keyDataObject.keyID = keyID;
-			case "MetaLeft":
+	keyDataObject.normalText = normalText;
-			case "MetaRight":
+	keyDataObject.shiftText = shiftText;
-			console.log(keyCode + " is pressed but not show");
+	keyDataObject.handSide = handSide;
-			return;
+	keyDataObject.row = row;
-		}
+	keyDataObject.fingerType = fingerType;
+	keyDataObject.x = x;
+	keyDataObject.y = y;
+	keyDataObject.width = width;
+	keyDataObject.height = height;
+	keyDataObject.alignType = alignType;
 
-		key.setTargetColor();
+	return keyDataObject;
-	}
+}
 
-	keyUp(char) {
+Keyboard.prototype.makeNextNormalKeyDataObject = function(keyID, prevKeyData, normalText, shiftText, handSide, fingerType) {
-		let keyCode = char.code;
+	return this.makeKeyDataObject(
-		this.setNormalSprite(keyCode);
+		keyID,
-	}
+		normalText,
+		shiftText,
+		handSide,
+		prevKeyData.row,
+		fingerType,
+		prevKeyData.x + prevKeyData.width + Keyboard.KEY_GAP_PX,
+		prevKeyData.y,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.NORMAL_KEY
+	);
+}
 
-	setNormalSprite(keyCode) {
+
-		let keyID = this.keyMapper.getKeyIDOfText(keyCode);
+Keyboard.prototype.addFunctionKeyData = function(keyID, handSide, row, fingerType, x, y, width, height, type) {
-		let key = this.allKeyHash[keyID];
+	var normalText = this.keyMapper.getNormalText(keyID, this.language);
-		if(key !== undefined)
+	var shiftText = this.keyMapper.getShiftText(keyID, this.language);
-			key.setNormalColor();
+
-	}
+	var newKey = this.makeKeyDataObject(
+		keyID,
+		normalText, shiftText,
+		handSide, row, fingerType,
+		x, y,
+		width, height,
+		type
+	);
+	this.keyDataList[this.keyIndex] = newKey;
+	this.keyIndex++;
+}
+
+Keyboard.prototype.addNextFunctionKeyData = function(keyID, handSide, fingerType, width, height, type) {
+	var prevKey = this.keyDataList[this.keyIndex - 1];
+	var normalText = this.keyMapper.getNormalText(keyID, this.language);
+	var shiftText = this.keyMapper.getShiftText(keyID, this.language);
+
+	var newKey = this.makeKeyDataObject(
+		keyID,
+		normalText, shiftText,
+		handSide, prevKey.row, fingerType,
+		prevKey.x + prevKey.width + Keyboard.KEY_GAP_PX, prevKey.y,
+		width, height,
+		type
+	);
+	this.keyDataList[this.keyIndex] = newKey;
+	this.keyIndex++;
+
+	// this.normalKeyHash[keyID] = newKey;
+}
+
+Keyboard.prototype.addNextNormalKeyData = function(keyID, handSide, fingerType) {
+	var prevKey = this.keyDataList[this.keyIndex - 1];
+	var normalText = this.keyMapper.getNormalText(keyID, this.language);
+	var shiftText = this.keyMapper.getShiftText(keyID, this.language);
+
+	var newKey = this.makeNextNormalKeyDataObject(
+		keyID,
+		prevKey,
+		normalText, shiftText,
+		handSide, fingerType
+	);
+	this.keyDataList[this.keyIndex] = newKey;
+	this.keyIndex++;
+
+	this.normalKeyHash[keyID] = newKey;
+}
 
 
 
-	shifted() {
+Keyboard.prototype.initKeyData = function(keyMapper) {
-		for(let i = 0; i < this.keyDataList.length; i++) {
+	// row 1
-			this.keyList[i].onShiftPressed();
+	this.addFunctionKeyData(
-		}
+		"Backquote",
-	}
+		KeyButton.LEFT_HAND,
+		Keyboard.ROW_1,
+		KeyButton.LITTLE_FINGER,
+		Keyboard.KEYBOARD_OFFSET_POX_X,
+		Keyboard.ROW_1_POX_Y,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.NORMAL_FUNCTION_KEY
+	);
+	this.addNextNormalKeyData("Digit1", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("Digit2", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("Digit3", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("Digit4", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("Digit5", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("Digit6", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("Digit7", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("Digit8", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("Digit9", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("Digit0", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("Minus", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("Equal", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextFunctionKeyData(
+		"Backspace",
+		KeyButton.RIGHT_HAND,
+		KeyButton.LITTLE_FINGER,
+		Keyboard.BACKSPACE_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.RIGHT_FUNCTION_KEY
+	);
 
-	unshifted() {
+	// row 2
-		for(let i = 0; i < this.keyDataList.length; i++) {
+	this.addFunctionKeyData(
-			this.keyList[i].onShiftUnpressed();
+		"Tab",
-		}
+		KeyButton.LEFT_HAND,
-	}
+		Keyboard.ROW_2,
+		KeyButton.NONE_FINGER,
+		Keyboard.KEYBOARD_OFFSET_POX_X,
+		Keyboard.ROW_2_POX_Y,
+		Keyboard.TAB_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextNormalKeyData("KeyQ", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("KeyW", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("KeyE", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("KeyR", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyT", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyY", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyU", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyI", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("KeyO", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("KeyP", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("BracketLeft", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("BracketRight", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("Backslash", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
 
+	// row 3
+	this.addFunctionKeyData(
+		"CapsLock",
+		KeyButton.LEFT_HAND,
+		Keyboard.ROW_3,
+		KeyButton.NONE_FINGER,
+		Keyboard.KEYBOARD_OFFSET_POX_X,
+		Keyboard.ROW_3_POX_Y,
+		Keyboard.CAPS_LOCK_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextNormalKeyData("KeyA", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("KeyS", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("KeyD", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("KeyF", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER_BASELINE);
+	this.addNextNormalKeyData("KeyG", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyH", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
+	this.addNextNormalKeyData("KeyJ", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER_BASELINE);
+	this.addNextNormalKeyData("KeyK", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
+	this.addNextNormalKeyData("KeyL", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
+	this.addNextNormalKeyData("Semicolon", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextNormalKeyData("Quote", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
+	this.addNextFunctionKeyData(
+		"Enter",
+		KeyButton.RIGHT_HAND,
+		KeyButton.LITTLE_FINGER,
+		Keyboard.ENTER_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.RIGHT_FUNCTION_KEY
+	);
 
-	keyPress(char) {
+	// row 4
-		// self.checkTypingContents(event);
+	this.addFunctionKeyData(
-		// console.log(char);
+		"ShiftLeft",
-		if(game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
+		KeyButton.LEFT_HAND,
-			console.log("shift is pressed");
+		Keyboard.ROW_4,
-	}
+		KeyButton.LITTLE_FINGER,
-
+		Keyboard.KEYBOARD_OFFSET_POX_X,
-
+		Keyboard.ROW_4_POX_Y,
-	makeKeyDataObject(keyID, normalText, shiftText, handSide, row, fingerType, x, y, width, height, alignType) {
+		Keyboard.SHIFT_KEY_WIDTH_PX,
-		let keyDataObject = {};
+		Keyboard.DEFAULT_KEY_SIZE_PX,
-		keyDataObject.keyID = keyID;
+		KeyButton.LEFT_FUNCTION_KEY
-		keyDataObject.normalText = normalText;
+	);
-		keyDataObject.shiftText = shiftText;
+	this.addNextNormalKeyData("KeyZ", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
-		keyDataObject.handSide = handSide;
+	this.addNextNormalKeyData("KeyX", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
-		keyDataObject.row = row;
+	this.addNextNormalKeyData("KeyC", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
-		keyDataObject.fingerType = fingerType;
+	this.addNextNormalKeyData("KeyV", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		keyDataObject.x = x;
+	this.addNextNormalKeyData("KeyB", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		keyDataObject.y = y;
+	this.addNextNormalKeyData("KeyN", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		keyDataObject.width = width;
+	this.addNextNormalKeyData("KeyM", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		keyDataObject.height = height;
+	this.addNextNormalKeyData("Comma", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
-		keyDataObject.alignType = alignType;
+	this.addNextNormalKeyData("Period", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
-
+	this.addNextNormalKeyData("Slash", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		return keyDataObject;
+	this.addNextFunctionKeyData(
-	}
+		"ShiftRight",
-
+		KeyButton.RIGHT_HAND,
-	makeNextNormalKeyDataObject(keyID, prevKeyData, normalText, shiftText, handSide, fingerType) {
+		KeyButton.LITTLE_FINGER,
-		return this.makeKeyDataObject(
+		Keyboard.SHIFT_KEY_WIDTH_PX,
-			keyID,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
-			normalText,
+		KeyButton.RIGHT_FUNCTION_KEY
-			shiftText,
+	);
-			handSide,
-			prevKeyData.row,
-			fingerType,
-			prevKeyData.x + prevKeyData.width + Keyboard.KEY_GAP_PX,
-			prevKeyData.y,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.NORMAL_KEY
-		);
-	}
-
-
-	addFunctionKeyData(keyID, handSide, row, fingerType, x, y, width, height, type) {
-		let normalText = this.keyMapper.getNormalText(keyID, this.language);
-		let shiftText = this.keyMapper.getShiftText(keyID, this.language);
-
-		let newKey = this.makeKeyDataObject(
-			keyID,
-			normalText, shiftText,
-			handSide, row, fingerType,
-			x, y,
-			width, height,
-			type
-		);
-		this.keyDataList[this.keyIndex] = newKey;
-		this.keyIndex++;
-	}
-
-	addNextFunctionKeyData(keyID, handSide, fingerType, width, height, type) {
-		let prevKey = this.keyDataList[this.keyIndex - 1];
-		let normalText = this.keyMapper.getNormalText(keyID, this.language);
-		let shiftText = this.keyMapper.getShiftText(keyID, this.language);
-
-		let newKey = this.makeKeyDataObject(
-			keyID,
-			normalText, shiftText,
-			handSide, prevKey.row, fingerType,
-			prevKey.x + prevKey.width + Keyboard.KEY_GAP_PX, prevKey.y,
-			width, height,
-			type
-		);
-		this.keyDataList[this.keyIndex] = newKey;
-		this.keyIndex++;
-
-		// this.normalKeyHash[keyID] = newKey;
-	}
-
-	addNextNormalKeyData(keyID, handSide, fingerType) {
-		let prevKey = this.keyDataList[this.keyIndex - 1];
-		let normalText = this.keyMapper.getNormalText(keyID, this.language);
-		let shiftText = this.keyMapper.getShiftText(keyID, this.language);
-
-		let newKey = this.makeNextNormalKeyDataObject(
-			keyID,
-			prevKey,
-			normalText, shiftText,
-			handSide, fingerType
-		);
-		this.keyDataList[this.keyIndex] = newKey;
-		this.keyIndex++;
-
-		this.normalKeyHash[keyID] = newKey;
-	}
-
-
-
-	initKeyData(keyMapper) {
-		// row 1
-		this.addFunctionKeyData(
-			"Backquote",
-			KeyButton.LEFT_HAND,
-			Keyboard.ROW_1,
-			KeyButton.LITTLE_FINGER,
-			Keyboard.KEYBOARD_OFFSET_POX_X,
-			Keyboard.ROW_1_POX_Y,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.NORMAL_FUNCTION_KEY
-		);
-		this.addNextNormalKeyData("Digit1", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("Digit2", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("Digit3", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("Digit4", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("Digit5", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("Digit6", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("Digit7", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("Digit8", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("Digit9", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("Digit0", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("Minus", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("Equal", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextFunctionKeyData(
-			"Backspace",
-			KeyButton.RIGHT_HAND,
-			KeyButton.LITTLE_FINGER,
-			Keyboard.BACKSPACE_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-
-		// row 2
-		this.addFunctionKeyData(
-			"Tab",
-			KeyButton.LEFT_HAND,
-			Keyboard.ROW_2,
-			KeyButton.NONE_FINGER,
-			Keyboard.KEYBOARD_OFFSET_POX_X,
-			Keyboard.ROW_2_POX_Y,
-			Keyboard.TAB_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextNormalKeyData("KeyQ", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("KeyW", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("KeyE", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("KeyR", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyT", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyY", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyU", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyI", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("KeyO", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("KeyP", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("BracketLeft", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("BracketRight", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("Backslash", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-
-		// row 3
-		this.addFunctionKeyData(
-			"CapsLock",
-			KeyButton.LEFT_HAND,
-			Keyboard.ROW_3,
-			KeyButton.NONE_FINGER,
-			Keyboard.KEYBOARD_OFFSET_POX_X,
-			Keyboard.ROW_3_POX_Y,
-			Keyboard.CAPS_LOCK_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextNormalKeyData("KeyA", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("KeyS", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("KeyD", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("KeyF", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER_BASELINE);
-		this.addNextNormalKeyData("KeyG", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyH", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyJ", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER_BASELINE);
-		this.addNextNormalKeyData("KeyK", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("KeyL", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("Semicolon", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("Quote", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextFunctionKeyData(
-			"Enter",
-			KeyButton.RIGHT_HAND,
-			KeyButton.LITTLE_FINGER,
-			Keyboard.ENTER_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-
-		// row 4
-		this.addFunctionKeyData(
-			"ShiftLeft",
-			KeyButton.LEFT_HAND,
-			Keyboard.ROW_4,
-			KeyButton.LITTLE_FINGER,
-			Keyboard.KEYBOARD_OFFSET_POX_X,
-			Keyboard.ROW_4_POX_Y,
-			Keyboard.SHIFT_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextNormalKeyData("KeyZ", KeyButton.LEFT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextNormalKeyData("KeyX", KeyButton.LEFT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("KeyC", KeyButton.LEFT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("KeyV", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyB", KeyButton.LEFT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyN", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("KeyM", KeyButton.RIGHT_HAND, KeyButton.INDEX_FINGER);
-		this.addNextNormalKeyData("Comma", KeyButton.RIGHT_HAND, KeyButton.MIDDLE_FINGER);
-		this.addNextNormalKeyData("Period", KeyButton.RIGHT_HAND, KeyButton.RING_FINGER);
-		this.addNextNormalKeyData("Slash", KeyButton.RIGHT_HAND, KeyButton.LITTLE_FINGER);
-		this.addNextFunctionKeyData(
-			"ShiftRight",
-			KeyButton.RIGHT_HAND,
-			KeyButton.LITTLE_FINGER,
-			Keyboard.SHIFT_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-
-		// row 5
-		this.addFunctionKeyData(
-			"ControlLeft",
-			KeyButton.LEFT_HAND,
-			Keyboard.ROW_5,
-			KeyButton.NONE_FINGER,
-			Keyboard.KEYBOARD_OFFSET_POX_X,
-			Keyboard.ROW_5_POX_Y,
-			Keyboard.CTRL_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"window",
-			KeyButton.LEFT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.WINDOW_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"AltLeft",
-			KeyButton.LEFT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.ALT_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"Chinese",
-			KeyButton.LEFT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.CHINESE_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.LEFT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"Space",
-			KeyButton.BOTH_HAND,
-			KeyButton.THUMB,
-			Keyboard.SPACE_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.CENTER_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"KoreanEnglish",
-			KeyButton.RIGHT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"AltRight",
-			KeyButton.RIGHT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.ALT_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-		this.addNextFunctionKeyData(
-			"ControlRight",
-			KeyButton.RIGHT_HAND,
-			KeyButton.NONE_FINGER,
-			Keyboard.CTRL_KEY_WIDTH_PX,
-			Keyboard.DEFAULT_KEY_SIZE_PX,
-			KeyButton.RIGHT_FUNCTION_KEY
-		);
-	}
 
+	// row 5
+	this.addFunctionKeyData(
+		"ControlLeft",
+		KeyButton.LEFT_HAND,
+		Keyboard.ROW_5,
+		KeyButton.NONE_FINGER,
+		Keyboard.KEYBOARD_OFFSET_POX_X,
+		Keyboard.ROW_5_POX_Y,
+		Keyboard.CTRL_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"window",
+		KeyButton.LEFT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.WINDOW_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"AltLeft",
+		KeyButton.LEFT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.ALT_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"Chinese",
+		KeyButton.LEFT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.CHINESE_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.LEFT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"Space",
+		KeyButton.BOTH_HAND,
+		KeyButton.THUMB,
+		Keyboard.SPACE_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.CENTER_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"KoreanEnglish",
+		KeyButton.RIGHT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.RIGHT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"AltRight",
+		KeyButton.RIGHT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.ALT_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.RIGHT_FUNCTION_KEY
+	);
+	this.addNextFunctionKeyData(
+		"ControlRight",
+		KeyButton.RIGHT_HAND,
+		KeyButton.NONE_FINGER,
+		Keyboard.CTRL_KEY_WIDTH_PX,
+		Keyboard.DEFAULT_KEY_SIZE_PX,
+		KeyButton.RIGHT_FUNCTION_KEY
+	);
 }
 
 

src/game/typing/practice/loading.js

@@ -1,17 +1,11 @@
-/////////////////////////////
+var Loading = {
-// Loading
 
-// var x = 32;
+	preload: function() {
-// var y = 80;
-
-class Loading {
-
-	preload() {
 		// this.game.load.image('loadingbar', './image/phaser.png');
-	}
+	},
 
-	create() {
+	create: function() {
-		// let userID = sessionStorage.getItem("UserID");
+		// var userID = sessionStorage.getItem("UserID");
 		// console.log("userID : " + userID);
 
 		// this.game.stage.backgroundColor = '#4d4d4d';
@@ -30,9 +24,9 @@ class Loading {
 		this.game.load.onLoadComplete.add(this.loadComplete, this);
 
 		this.startLoading();
-	}
+	},
 
-	startLoading() {
+	startLoading: function() {
 		this.game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
 
 		this.game.load.image('hand_palm',	'../../../resources/image/ui/hand_palm.png');
@@ -70,9 +64,9 @@ class Loading {
 		// this.game.load.image('medal_bronze', './image/medal_bronze.png');
 
 		this.game.load.start();
-	}
+	},
 
-	fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
 		// this.preloadBar.alpha = progress / 100;
 
 		// console.log('progress : ' + progress);
@@ -88,9 +82,9 @@ class Loading {
 		// 	x = 32;
 		// 	y += 332;
 		// }
-	}
+	},
 
-	loadComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
 		// this.preloadBar.alpha = 1;
 
 		if(isDebugMode()) {

src/game/typing/practice/stage_timer.js

@@ -1,67 +1,63 @@
-class StageTimer {
+function StageTimer(stageTimerSec, onTimeOver) {
+	this.stageTimerSec = stageTimerSec;
+	this.onTimeOver = onTimeOver;
 
-	constructor(stageTimerSec, onTimeOver) {
+	var fontStyle = StageTimer.DEFAULT_TEXT_FONT;
 
-		this.stageTimerSec = stageTimerSec;
+	fontStyle.align = "right";
-		this.onTimeOver = onTimeOver;
+	fontStyle.boundsAlignH = "right";
+	this.timerText = game.add.text(game.world.width - 300, 0, "", fontStyle)
+		.setTextBounds(0, 0, 200, StageTimer.FONT_HEIGHT_PX);
 
-		let fontStyle = StageTimer.DEFAULT_TEXT_FONT;
+	// var grd = this.label.context.createLinearGradient(0, 0, 0, StageTimer.FONT_HEIGHT_PX);
+	// grd.addColorStop(0, '#8ED6FF');
+	// grd.addColorStop(1, '#004CB3');
+	// this.label.fill = grd;
+	// this.scoreText.fill = grd;
 
-		fontStyle.align = "right";
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		fontStyle.boundsAlignH = "right";
+	// this.label.stroke = '#000';
-		this.timerText = game.add.text(game.world.width - 300, 0, "", fontStyle)
+	// this.label.strokeThickness = 3;
-			.setTextBounds(0, 0, 200, StageTimer.FONT_HEIGHT_PX);
 
-		// var grd = this.label.context.createLinearGradient(0, 0, 0, StageTimer.FONT_HEIGHT_PX);
+	this.timerEvent = null;
-		// grd.addColorStop(0, '#8ED6FF');
+};
-		// grd.addColorStop(1, '#004CB3');
-		// this.label.fill = grd;
-		// this.scoreText.fill = grd;
-
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// this.label.stroke = '#000';
-		// this.label.strokeThickness = 3;
-
-		this.timerEvent = null;
-	};
-
-	start() {
-		this.timeLeft = this.stageTimerSec;
-		this.printTime();
-		if(this.timerEvent === null)
-			this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this);
-	}
-
-	pause() {
-	}
-
-	stop() {
-		if(this.timerEvent)
-			this.removeTimer();
-		this.timerText.text = "시간 끝";
-	}
-
-	updateTimer() {
-		this.timeLeft--;
-		if(this.timeLeft === 0) {
-			this.stop();
-			this.onTimeOver();
-		} else {
-			this.printTime();
-		}
-	}
-
-	printTime() {
-		this.timerText.text = this.timeLeft.toString() + "초";
-	}
-
-	removeTimer() {
-		game.time.events.remove(this.timerEvent);
-		this.timerEvent = null;
-	}
 
+StageTimer.prototype.start = function() {
+	this.timeLeft = this.stageTimerSec;
+	this.printTime();
+	if(this.timerEvent === null)
+		this.timerEvent = game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this);
 }
 
+StageTimer.prototype.pause = function() {
+}
+
+StageTimer.prototype.stop = function() {
+	if(this.timerEvent)
+		this.removeTimer();
+	this.timerText.text = "시간 끝";
+}
+
+StageTimer.prototype.updateTimer = function() {
+	this.timeLeft--;
+	if(this.timeLeft === 0) {
+		this.stop();
+		this.onTimeOver();
+	} else {
+		this.printTime();
+	}
+}
+
+StageTimer.prototype.printTime = function() {
+	this.timerText.text = this.timeLeft.toString() + "초";
+}
+
+StageTimer.prototype.removeTimer = function() {
+	game.time.events.remove(this.timerEvent);
+	this.timerEvent = null;
+}
+
+
 StageTimer.FONT_HEIGHT_PX		= 70;
 
 StageTimer.DEFAULT_TEXT_FONT	= {

src/game/typing/practice/typing_score.js

@@ -1,57 +1,54 @@
-class TypingScore {
+function TypingScore() {
+	this.typingCount = 0;
 
-	constructor() {
+	var fontStyle = TypingScore.DEFAULT_TEXT_FONT;
-		this.typingCount = 0;
 
-		let fontStyle = TypingScore.DEFAULT_TEXT_FONT;
+	fontStyle.align = "right";
+	fontStyle.boundsAlignH = "right";
+	this.scoreTitleText = game.add.text(game.world.width / 2 - 40, TypingScore.SCORE_POS_Y, "연속 성공 타수 : ", fontStyle)
+	this.scoreTitleText.anchor.set(0.5);
 
-		fontStyle.align = "right";
+	fontStyle.align = "left";
-		fontStyle.boundsAlignH = "right";
+	fontStyle.boundsAlignH = "left";
-		this.scoreTitleText = game.add.text(game.world.width / 2 - 40, TypingScore.SCORE_POS_Y, "연속 성공 타수 : ", fontStyle)
+	this.scoreText = game.add.text(game.world.width / 2 + 100, TypingScore.SCORE_POS_Y, "0", fontStyle)
-		this.scoreTitleText.anchor.set(0.5);
+	this.scoreText.anchor.set(0.5);
 
-		fontStyle.align = "left";
+	// var grd = this.scoreText.context.createLinearGradient(0, 0, 0, TypingScore.SCORE_POS_Y);
-		fontStyle.boundsAlignH = "left";
+	// grd.addColorStop(0, '#8ED6FF');
-		this.scoreText = game.add.text(game.world.width / 2 + 100, TypingScore.SCORE_POS_Y, "0", fontStyle)
+	// grd.addColorStop(1, '#004CB3');
-		this.scoreText.anchor.set(0.5);
+	// this.scoreText.fill = grd;
+	// this.scoreText.fill = grd;
 
-		// var grd = this.scoreText.context.createLinearGradient(0, 0, 0, TypingScore.SCORE_POS_Y);
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// grd.addColorStop(0, '#8ED6FF');
+	// this.scoreText.stroke = '#000';
-		// grd.addColorStop(1, '#004CB3');
+	// this.scoreText.strokeThickness = 3;
-		// this.scoreText.fill = grd;
+};
-		// this.scoreText.fill = grd;
-
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// this.scoreText.stroke = '#000';
-		// this.scoreText.strokeThickness = 3;
-	};
-
-	score() {
-		return this.typingCount;
-	}
-
-	increase() {
-		this.typingCount++;
-		this.print(this.typingCount);
-	}
-
-	reset() {
-		this.typingCount = 0;
-		this.print(this.typingCount);
-	}
-
-	print(typingCount) {
-		this.scoreText.text = typingCount;
-	}
 
+TypingScore.prototype.score = function() {
+	return this.typingCount;
 }
 
+TypingScore.prototype.increase = function() {
+	this.typingCount++;
+	this.print(this.typingCount);
+}
+
+TypingScore.prototype.reset = function() {
+	this.typingCount = 0;
+	this.print(this.typingCount);
+}
+
+TypingScore.prototype.print = function(typingCount) {
+	this.scoreText.text = typingCount;
+}
+
+
 TypingScore.SCORE_POS_Y		= 35;
 
 TypingScore.DEFAULT_TEXT_FONT	= {
-	font: "38px Arial",
+font: "38px Arial",
-	align: "center",
+align: "center",
-	boundsAlignH: "center",		// left, center. right
+boundsAlignH: "center",		// left, center. right
-	boundsAlignV: "middle", 	// top, middle, bottom
+boundsAlignV: "middle", 	// top, middle, bottom
-	fill: "#fff"
+fill: "#fff"
 };

src/game/typing/test/average_typing_speed.js

@@ -1,35 +1,32 @@
-class AverageTypingSpeed {
+function AverageTypingSpeed() {
+	var fontStyle = AverageTypingSpeed.DEFAULT_TEXT_FONT;
 
-	constructor() {
+	fontStyle.align = "right";
-		let fontStyle = AverageTypingSpeed.DEFAULT_TEXT_FONT;
+	fontStyle.boundsAlignH = "right";
+	this.tytleSpeedText = game.add.text(game.world.width / 2 + 20, AverageTypingSpeed.FONT_HEIGHT_PX, "현재 타수 : ", fontStyle);
+	this.tytleSpeedText.anchor.set(1, 0.5);
 
-		fontStyle.align = "right";
+	fontStyle.align = "left";
-		fontStyle.boundsAlignH = "right";
+	fontStyle.boundsAlignH = "left";
-		this.tytleSpeedText = game.add.text(game.world.width / 2 + 20, AverageTypingSpeed.FONT_HEIGHT_PX, "현재 타수 : ", fontStyle);
+	this.typingSpeedText = game.add.text(game.world.width / 2 + 20, AverageTypingSpeed.FONT_HEIGHT_PX, "0", fontStyle);
-		this.tytleSpeedText.anchor.set(1, 0.5);
+	this.typingSpeedText.anchor.set(0, 0.5);
 
-		fontStyle.align = "left";
+	// var grd = this.label.context.createLinearGradient(0, 0, 0, AverageTypingSpeed.FONT_HEIGHT_PX);
-		fontStyle.boundsAlignH = "left";
+	// grd.addColorStop(0, '#8ED6FF');
-		this.typingSpeedText = game.add.text(game.world.width / 2 + 20, AverageTypingSpeed.FONT_HEIGHT_PX, "0", fontStyle);
+	// grd.addColorStop(1, '#004CB3');
-		this.typingSpeedText.anchor.set(0, 0.5);
+	// this.label.fill = grd;
+	// this.scoreText.fill = grd;
 
-		// var grd = this.label.context.createLinearGradient(0, 0, 0, AverageTypingSpeed.FONT_HEIGHT_PX);
+	// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// grd.addColorStop(0, '#8ED6FF');
+	// this.label.stroke = '#000';
-		// grd.addColorStop(1, '#004CB3');
+	// this.label.strokeThickness = 3;
-		// this.label.fill = grd;
+};
-		// this.scoreText.fill = grd;
-
-		// this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// this.label.stroke = '#000';
-		// this.label.strokeThickness = 3;
-	};
-
-	print(typingSpeed) {
-		this.typingSpeedText.text = typingSpeed;
-	}
 
+AverageTypingSpeed.prototype.print = function(typingSpeed) {
+	this.typingSpeedText.text = typingSpeed;
 }
 
+
 AverageTypingSpeed.FONT_HEIGHT_PX		= 30;
 
 AverageTypingSpeed.DEFAULT_TEXT_FONT	= {

src/game/typing/test/game.js

@@ -1,13 +1,10 @@
-/////////////////////////////
+var TypingTest = {
-// TypingTest
 
-class TypingTest {
+	create: function() {
-
-	create() {
 		self = this;
 
 		this.initTypingData();
-		sessionStorageManager.isNewBestRecrd = false;
+		sessionStorageManager.setIsNewBestRecord(false);
 
 		game.stage.backgroundColor = '#4d4d4d';
 
@@ -105,14 +102,14 @@ class TypingTest {
 
 		// bottom ui
 		let screenBottomUI = new ScreenBottomUI();
-		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.bestRecord);
+		screenBottomUI.printLeftTextWithBestRecord(sessionStorageManager.getBestRecord());
-		screenBottomUI.printCenterText(sessionStorageManager.playingAppKoreanName);
+		screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
-		screenBottomUI.printRightText(sessionStorageManager.playerName);
+		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
 		this.startGame();
 		// this.countDown();
-	}
+	},
 
 	/*
 	countDown() {
@@ -145,30 +142,30 @@ class TypingTest {
 	}
 	*/
 
-	startGame() {
+	startGame: function() {
 		this.averageTypingSpeedText.print(0);
 
 		this.showTypingTestContents();
 		this.showPlayingWordNumber();
-	}
+	},
 
-	gameOver() {
+	gameOver: function() {
 		let gameOverText = new GameOverText();
 
 		this.animalOnTitle.stopAnimation();
 
 		game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
-	}
+	},
 
-	goResult() {
+	goResult: function() {
-		sessionStorageManager.record = this.typingRecordTotal;
+		sessionStorageManager.setRecord(this.typingRecordTotal);
-		if(sessionStorageManager.record > sessionStorageManager.bestRecord)
+		if(sessionStorageManager.getRecord() > sessionStorageManager.getBestRecord())
-			sessionStorageManager.bestRecord = sessionStorageManager.record;
+			sessionStorageManager.setBestRecord(sessionStorageManager.record);
 
 		location.href = '../../web/client/result.html';
-	}
+	},
 
-	initTypingData() {
+	initTypingData: function() {
 		let typingTextMan = new TypingTextManager();
 
 		let typingPracticeContents = this.getTypingTestContents();
@@ -190,10 +187,10 @@ class TypingTest {
 
 		this.typingLetterCountTotal = 0;
 		this.typingRecordTotal = 0;
-	}
+	},
 
 
-	getTypingTestContents() {
+	getTypingTestContents: function() {
 		let typingTestContents = this.loadTestContent();
 		// console.log('playingStageData.language : ' + playingStageData.language);
 		// console.log('playingStageData.level : ' + playingStageData.level);
@@ -207,14 +204,14 @@ class TypingTest {
 		}
 
 		return typingTestContents;
-	}
+	},
 
-	loadTestContent() {
+	loadTestContent: function() {
 		let appName = "";
 		if(isTypingTestStage())
-			appName = sessionStorageManager.playingAppName.substring(5);
+			appName = sessionStorageManager.getPlayingAppName().substring(5);
 		else if(isTypingPracticeStage())
-			appName = sessionStorageManager.playingAppName.substring(9);
+			appName = sessionStorageManager.getPlayingAppName().substring(9);
 
 		let testContent = [];
 		switch(appName) {
@@ -276,9 +273,9 @@ class TypingTest {
 		}
 
 		return testContent;
-	}
+	},
 
-	showTypingTestContents() {
+	showTypingTestContents: function() {
 		for(let i = 0; i < TypingTest.TYPING_CONTENT_DONE_COUNT; i++) {
 			let doneIndex = this.typingIndex - i - 1;
 			if(doneIndex < 0) {
@@ -304,15 +301,15 @@ class TypingTest {
 			else
 				this.textTypingContentPreview[i].text = "";
 		}
-	}
+	},
 
-	resetTypingContent() {
+	resetTypingContent: function() {
 		this.textTypingContent.clearColors();
 		this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
 		this.inputTextContent.canvasInput.value('');
-	}
+	},
 
-	checkTypingContents(evnet) {
+	checkTypingContents: function(evnet) {
 		if(event.keyCode == Phaser.Keyboard.ENTER) {
 			// console.log("### enter ###");
 			let inputContent = this.inputTextContent.canvasInput.value();
@@ -336,9 +333,9 @@ class TypingTest {
 
 			this.showTypingContentHighlight();
 		}
-	}
+	},
 
-	showTypingContentHighlight() {
+	showTypingContentHighlight: function() {
 		let typingContent = this.typingRandomContents[this.typingIndex];
 		let inputContent = this.inputTextContent.canvasInput.value();
 
@@ -358,9 +355,9 @@ class TypingTest {
 				return;
 			}
 		}
-	}
+	},
 
-	calculateTypingRecord(typingContent) {
+	calculateTypingRecord: function(typingContent) {
 		// console.log('입력 단어 : ' + this.typingRandomContents[this.typingIndex]);
 
 		this.isTyping = false;
@@ -404,20 +401,20 @@ class TypingTest {
 		this.animalOnTitle.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE);
 		this.animalOnTitle.startAnimation();
 
-	}
+	},
 
-	playNextContent() {
+	playNextContent: function() {
 		this.typingIndex++;
 		this.showTypingTestContents();
 		this.showPlayingWordNumber();
 		this.resetTypingContent();
-	}
+	},
 
-	showPlayingWordNumber() {
+	showPlayingWordNumber: function() {
 		this.contentProgressText.print(this.typingIndex + 1, this.typingContentLength);
-	}
+	},
 
-	setTimeTypingStart() {
+	setTimeTypingStart: function() {
 		this.timeTypingStart = game.time.elapsedSince(0);
 		let timeGap = this.timeTypingStart - this.timeTypingEnd;
 

src/game/typing/test/loading.js

@@ -1,17 +1,11 @@
-/////////////////////////////
+var Loading = {
-// Loading
 
-// var x = 32;
+	preload: function() {
-// var y = 80;
-
-class Loading {
-
-	preload() {
 		// this.game.load.image('loadingbar', './image/phaser.png');
-	}
+	},
 
-	create() {
+	create: function() {
-		// let userID = sessionStorage.getItem("UserID");
+		// var userID = sessionStorage.getItem("UserID");
 		// console.log("userID : " + userID);
 
 		// this.game.stage.backgroundColor = '#4d4d4d';
@@ -30,9 +24,9 @@ class Loading {
 		this.game.load.onLoadComplete.add(this.loadComplete, this);
 
 		this.startLoading();
-	}
+	},
 
-	startLoading() {
+	startLoading: function() {
 		this.game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
 
 		Animal.loadResources();
@@ -61,9 +55,9 @@ class Loading {
 		// this.game.load.image('medal_bronze', './image/medal_bronze.png');
 
 		this.game.load.start();
-	}
+	},
 
-	fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
 		// this.preloadBar.alpha = progress / 100;
 
 		// console.log('progress : ' + progress);
@@ -79,9 +73,9 @@ class Loading {
 		// 	x = 32;
 		// 	y += 332;
 		// }
-	}
+	},
 
-	loadComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
 		// this.preloadBar.alpha = 1;
 
 		if(isDebugMode()) {
@@ -93,5 +87,5 @@ class Loading {
 		// this.startMenu();
 		// this.startTypingTestStage();
 		// this.startTypingTestResult();
-	}
+	},
 }