Fix: show typing speed and content progress

src/game/typing/test/average_typing_speed.js

@@ -0,0 +1,41 @@
+class AverageTypingSpeed {
+
+	constructor() {
+		let fontStyle = AverageTypingSpeed.DEFAULT_TEXT_FONT;
+
+		fontStyle.align = "right";
+		fontStyle.boundsAlignH = "right";
+		this.label = game.add.text(0, 0, "현재 타수 : ", fontStyle)
+			.setTextBounds(0, 0, game.world.width / 2, AverageTypingSpeed.FONT_HEIGHT_PX);
+
+		fontStyle.align = "left";
+		fontStyle.boundsAlignH = "left";
+		this.typingSpeedText = game.add.text(game.world.width / 2, 0, "0", fontStyle)
+			.setTextBounds(0, 0, game.world.width / 2, AverageTypingSpeed.FONT_HEIGHT_PX);
+
+		// var grd = this.label.context.createLinearGradient(0, 0, 0, AverageTypingSpeed.FONT_HEIGHT_PX);
+		// 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;
+	};
+
+	print(typingSpeed) {
+		this.typingSpeedText.text = typingSpeed;
+	}
+
+}
+
+AverageTypingSpeed.FONT_HEIGHT_PX		= 70;
+
+AverageTypingSpeed.DEFAULT_TEXT_FONT	= {
+	font: "38px Arial",
+	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};

src/game/typing/test/content_progress.js

@@ -0,0 +1,39 @@
+class ContentProgress {
+
+	constructor() {
+		let fontStyle = ContentProgress.DEFAULT_TEXT_FONT;
+
+		fontStyle.align = "right";
+		fontStyle.boundsAlignH = "right";
+		this.typingSpeedText = game.add.text(game.world.width - 300, 0, "", fontStyle)
+			.setTextBounds(0, 0, 200, ContentProgress.FONT_HEIGHT_PX);
+
+		// var grd = this.label.context.createLinearGradient(0, 0, 0, ContentProgress.FONT_HEIGHT_PX);
+		// 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;
+	};
+
+	print(playingNumber, totalCount) {
+		if(playingNumber > totalCount)
+			return;
+
+		this.typingSpeedText.text = playingNumber + " / " + totalCount;
+	}
+
+}
+
+ContentProgress.FONT_HEIGHT_PX		= 70;
+
+ContentProgress.DEFAULT_TEXT_FONT	= {
+	font: "38px Arial",
+	align: "center",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff"
+};

src/game/typing/test/game.js

@@ -6,44 +6,38 @@ class Test {
 	create() {
 		self = this;
 
-		this.game.stage.backgroundColor = '#4d4d4d';
+		this.initTypingData();
-
 		sessionStorageManager.isNewBestRecrd = false;
 
+		this.game.stage.backgroundColor = '#4d4d4d';
+
 		// top
 		let backButton = new BackButton( () => {
 			sessionStorageManager.resetPlayingAppData();
 			location.href = '../../web/client/menu_app.html';
 		});
 
+		this.averageTypingSpeedText = new AverageTypingSpeed();
+		this.contentProgressText = new ContentProgress();
+
+		// var scoreboardAreaPositionY = 2;
+		// this.textPlayingWordNumber = game.add.text(900, scoreboardAreaPositionY, "0", textStyleBasic)
+		// .setTextBounds(0, 0, 300, 80)
+		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
 		let fullscreenButton = new FullscreenButton(this.game);
 
 
-		// record
-		var scoreboardAreaPositionY = 2;
-		game.add.text(340 - Test.OFFSET_RIGHT_ALIGN, scoreboardAreaPositionY, "현재 타수 :", textStyleBasic)
-		.setTextBounds(0, 0, 200, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		this.textTypingRecordTotal = game.add.text(540, scoreboardAreaPositionY, "", textStyleBasic)
-		.setTextBounds(0, 0, 200, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		this.textPlayingWordNumber = game.add.text(900, scoreboardAreaPositionY, "0", textStyleBasic)
-		.setTextBounds(0, 0, 300, 80)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-
 		// typing content
 		var typingAreaPositionY = 260;
 		var bar = game.add.graphics();
 		bar.beginFill(0x000000, 0.2);
 		bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120);
 
-		// if(playingStageData.level == "10")
+		if(this.isWordStage())
-		// 	textStyleBasic.font = "bold 48px Arial";
+			textStyleBasic.font = "bold 84px Arial";
-		// else
+		else 	// Sentence stage
-		// 	textStyleBasic.font = "bold 84px Arial";
+			textStyleBasic.font = "bold 48px Arial";
 
 		this.textTypingContent = game.add.text(0, 2, "test", textStyleBasic)
 		.setTextBounds(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120)
@@ -61,9 +55,9 @@ class Test {
 				.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 				.addColor(textDoneColor[i], 0);
 
-			var scorePositionX = 600;
+			var scorePositionX = 780;
-			// if(playingStageData.level == "10")
+			if(this.isWordStage())
-			// 	scorePositionX = 740;
+				scorePositionX = 600;
 
 			this.textTypingRecordsDone[i] = game.add.text(0, 2, "", textStyleBasic)
 				.setTextBounds(scorePositionX, typingAreaPositionY - 50 - i * 50, 200, 40)
@@ -106,9 +100,6 @@ class Test {
 		// this.countDown();
 	}
 
-	initListeners() {
-	}
-
 	/*
 	countDown() {
 		const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
@@ -141,8 +132,6 @@ class Test {
 	*/
 
 	startGame() {
-		this.initTypingData();
-
 		this.initStage();
 
 		this.showTypingTestContents();
@@ -162,8 +151,10 @@ class Test {
 	initTypingData() {
 		this.typingTestContents = this.getTypingTestContents();
 		var randomContents = Phaser.ArrayUtils.shuffle(this.typingTestContents);
-		this.typingRandomContents = randomContents.slice(1, Test.WORD_COUNT_FOR_STAGE + 1);	// start Num, end Num (not index)
+		this.wordCountForStage = Test.WORD_COUNT_FOR_STAGE;
-		console.log(this.typingRandomContents);
+		if(isDebugMode())
+			this.wordCountForStage = 3;
+		this.typingRandomContents = randomContents.slice(1, this.wordCountForStage + 1);	// start Num, end Num (not index)
 		this.typingContentLength = this.typingTestContents.length;
 		this.typingIndex = 0;
 
@@ -172,14 +163,11 @@ class Test {
 		this.timeTypingEnd = 0;
 
 		this.typingLetterCountTotal = 0;
-
-		// this.typingRecordTotal = 0;
-		// bestRecord = 0;
 	}
 
 	initStage() {
 		// this.textBestRecord.text = Math.floor(sessionStorageManager.bestRecord);
-		this.textTypingRecordTotal.text = 0;
+		this.averageTypingSpeedText.print(0);
 	}
 
 	getTypingTestContents() {
@@ -216,96 +204,10 @@ class Test {
 		}
 
 		return testContent;
-
-		// if(playingStageData.language == LANGUAGE_KOREAN)
-		// 	return this.loadKoreanTestContent();
-		// else
-		// 	return this.loadEnglishTestContent();
 	}
 
-	loadKoreanTestContent() {
+	isWordStage() {
-		var testContent = [];
+		return ( (sessionStorageManager.playingAppID % 10) === 0 );
-		switch(Number(playingStageData.level)) {
-			case 1:
-			testContent = koreanBasicWordList;
-			break;
-			case 2:
-			testContent = koreanLeftUpperWordList;
-			break;
-			case 3:
-			testContent = koreanSecondFingerWordList;
-			break;
-			case 4:
-			testContent = koreanRightUpperWordList;
-			break;
-			case 5:
-			testContent = koreanLeftLowerWordList;
-			break;
-			case 6:
-			testContent = koreanRightLowerWordList;
-			break;
-			case 7:
-			testContent = koreanLeftUpperDoubleWordList;
-			break;
-			case 8:
-			testContent = koreanRightUpperDoubleWordList;
-			break;
-			case 9:
-			testContent = koreanWordList;
-			break;
-			case 10:
-			testContent = koreanSentenceList;
-			break;
-			default:
-			testContent = koreanBasicWordList;
-		}
-
-		return testContent;
-	}
-
-	loadEnglishTestContent() {
-
-		/*
-		var testContent  = [
-			"보리밭 사잇길로 걸어가면",
-			"뉘 부르는 소리 있어",
-			"입에 들어가는 밥술도 제가",
-			"떠 넣어야 한다",
-			"큰 방죽도 개미 구멍으로 무너진다.",
-		];
-		*/
-
-		var testContent = [];
-		switch(Number(playingStageData.level)) {
-			case 1:
-			testContent = englishBasicWordList;
-			break;
-			case 2:
-			testContent = englishLeftUpperWordList;
-			break;
-			case 3:
-			testContent = englishSecondFingerWordList;
-			break;
-			case 4:
-			testContent = englishRightUpperWordList;
-			break;
-			case 5:
-			testContent = englishLeftLowerWordList;
-			break;
-			case 6:
-			testContent = englishRightLowerWordList;
-			break;
-			case 9:
-			testContent = englishWordList;
-			break;
-			case 10:
-			testContent = englishSentenceList;
-			break;
-			default:
-			testContent = englishBasicWordList;
-		}
-
-		return testContent;
 	}
 
 	showTypingTestContents() {
@@ -320,7 +222,7 @@ class Test {
 			}
 		}
 
-		if(this.typingIndex == Test.WORD_COUNT_FOR_STAGE) {
+		if(this.typingIndex == this.wordCountForStage) {
 			this.textTypingContent.text = "";
 			return;
 		}
@@ -352,7 +254,7 @@ class Test {
 				this.calculateTypingRecord(typingContent);
 				this.playNextContent();
 
-				if(this.typingIndex == Test.WORD_COUNT_FOR_STAGE)
+				if(this.typingIndex == this.wordCountForStage)
 					this.state.start('TypingTestResult');
 			}
 		}
@@ -419,7 +321,8 @@ class Test {
 		console.log(this.typingLetterCountTotal);
 		console.log(typingElapsedTimeTotal);
 		console.log(typingRecordTotal);
-		this.textTypingRecordTotal.text = Math.floor(typingRecordTotal);
+		// this.textTypingRecordTotal.text = Math.floor(typingRecordTotal);
+		this.averageTypingSpeedText.print(Math.floor(typingRecordTotal));
 		// console.log('-------------- total --------------');
 		// console.log('typingLetterCountTotal : ' + this.typingLetterCountTotal);
 		// console.log('typingElapsedTimeTotal : ' + typingElapsedTimeTotal);
@@ -435,7 +338,8 @@ class Test {
 	}
 
 	showPlayingWordNumber() {
-		this.textPlayingWordNumber.text = (this.typingIndex + 1) + " / " + Test.WORD_COUNT_FOR_STAGE;
+		// this.textPlayingWordNumber.text = (this.typingIndex + 1) + " / " + this.wordCountForStage;
+		this.contentProgressText.print(this.typingIndex + 1, this.wordCountForStage);
 	}
 
 	setTimeTypingStart() {
@@ -457,7 +361,7 @@ class Test {
 
 Test.TYPING_CONTENT_PREVIEW_COUNT	= 3;
 Test.TYPING_CONTENT_DONE_COUNT		= 3;
-Test.TYPING_COUNT_PLUS_ENTER			= 1;
+Test.TYPING_COUNT_PLUS_ENTER		= 1;
 
 Test.OFFSET_RIGHT_ALIGN				= 10;
 
@@ -465,7 +369,7 @@ Test.WORD_COUNT_FOR_STAGE			= 10;
 // if(isDebugMode())
 // 	WORD_COUNT_FOR_STAGE			= 3;
 
-Test.COLOR_CONTENT_WRONG				= "#aaaaaa";
+Test.COLOR_CONTENT_WRONG			= "#aaaaaa";
-Test.COLOR_CONTENT_RIGHT				= "#ffff4d";
+Test.COLOR_CONTENT_RIGHT			= "#ffff4d";
 
 

src/game/typing/word_list/korean_sentence.js

@@ -42,7 +42,7 @@ var koreanSentenceList = [
 	"백지장도 맞들면 낫다",
 	"뱁새가 황새 따라가면 다리가 찢어진다",
 	"번데기 앞에서 주름잡기",
-	"부뚜막의 소금도 집어 넣아야 짜다",
+	"부뚜막의 소금도 집어 넣어야 짜다",
 	"비온 뒤 땅이 굳는다",
 	"빈 수레가 더 요란하다",
 	"빈대 잡다 초가삼간 태운다",

src/web/client/korean_sentence.html

@@ -54,6 +54,8 @@
 		<script src="../../game/typing/word_list/english_word.js"></script>
 
 		<!-- Space Invaders : source files -->
+		<script src="../../game/typing/test/content_progress.js"></script>
+		<script src="../../game/typing/test/average_typing_speed.js"></script>
 		<script src="../../game/typing/test/define_variables.js"></script>
 		<script src="../../game/typing/test/loading.js"></script>
 		<script src="../../game/typing/test/game.js"></script>

src/web/client/korean_word.html

@@ -54,8 +54,10 @@
 		<script src="../../game/typing/word_list/english_word.js"></script>
 
 		<!-- Space Invaders : source files -->
+		<script src="../../game/typing/test/content_progress.js"></script>
 		<script src="../../game/typing/test/define_variables.js"></script>
 		<script src="../../game/typing/test/loading.js"></script>
+		<script src="../../game/typing/test/average_typing_speed.js"></script>
 		<script src="../../game/typing/test/game.js"></script>
 		<script src="../../game/typing/test/main.js"></script>