Fix: show typing speed and content progress

This commit is contained in:
2018-06-07 14:12:09 +09:00
parent 873b778960
commit 147f740622
6 changed files with 119 additions and 131 deletions
@@ -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"
};
+39
View File
@@ -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"
};
+31 -127
View File
@@ -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")
// textStyleBasic.font = "bold 48px Arial";
// else
// textStyleBasic.font = "bold 84px Arial";
if(this.isWordStage())
textStyleBasic.font = "bold 84px Arial";
else // Sentence stage
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;
// if(playingStageData.level == "10")
// scorePositionX = 740;
var scorePositionX = 780;
if(this.isWordStage())
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)
console.log(this.typingRandomContents);
this.wordCountForStage = Test.WORD_COUNT_FOR_STAGE;
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() {
var testContent = [];
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;
isWordStage() {
return ( (sessionStorageManager.playingAppID % 10) === 0 );
}
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() {
+1 -1
View File
@@ -42,7 +42,7 @@ var koreanSentenceList = [
"백지장도 맞들면 낫다",
"뱁새가 황새 따라가면 다리가 찢어진다",
"번데기 앞에서 주름잡기",
"부뚜막의 소금도 집어 넣야 짜다",
"부뚜막의 소금도 집어 넣야 짜다",
"비온 뒤 땅이 굳는다",
"빈 수레가 더 요란하다",
"빈대 잡다 초가삼간 태운다",
+2
View File
@@ -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>
+2
View File
@@ -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>