From d800d41313795a1c3a319a085ddf657245f11470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Fri, 21 Jun 2019 23:20:17 +0900 Subject: [PATCH] Fix: font, font family --- src/game/lib/text/input_type_text.js | 32 ++++++++++++++++++++ src/game/typing/examination/game.js | 35 +++++++++++++--------- src/game/typing/examination/loading.js | 1 - src/game/typing/lib/typing_text_manager.js | 28 +++++++++++++++-- test/tdd.js | 21 ++++++++----- 5 files changed, 92 insertions(+), 25 deletions(-) diff --git a/src/game/lib/text/input_type_text.js b/src/game/lib/text/input_type_text.js index 0df1ba1..1534158 100644 --- a/src/game/lib/text/input_type_text.js +++ b/src/game/lib/text/input_type_text.js @@ -1,3 +1,35 @@ +function InputText(x, y, width, height) { + var bmd = game.add.bitmapData(width, height); + var myInput = game.add.sprite(x, y, bmd); + + var contentWidth = width - 20; + myInput.canvasInput = new CanvasInput({ + canvas: bmd.canvas, + fontSize: 30, + fontFamily: 'Arial', + fontColor: '#212121', + fontWeight: 'bold', + width: contentWidth, + 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 + ); + + return myInput; +} + function InputTypeText(x, y) { var bmd = game.add.bitmapData(420, 50); var myInput = game.add.sprite(x, y, bmd); diff --git a/src/game/typing/examination/game.js b/src/game/typing/examination/game.js index 866237d..278c31d 100644 --- a/src/game/typing/examination/game.js +++ b/src/game/typing/examination/game.js @@ -74,10 +74,9 @@ var TypingExamination = { var TYPING_CONTENT_X = 60; var TYPING_CONTENT_Y = 340; - var RECORD_POSITION_X = 900; + var RECORD_POSITION_X = 960; - var FONT_SIZE = 24; - var BIG_FONT_SIZE = 32; + var FONT_SIZE = 32; var TYPING_TEXT_OFFSET_HEIGHT = 40; // textStyleBasic.font = "bold 38px Arial"; @@ -85,6 +84,7 @@ var TypingExamination = { // current text + textStyleBasic.font = "38px Courier New"; this.textTypingContent = game.add.text( TYPING_CONTENT_X, TYPING_CONTENT_Y, "", textStyleBasic @@ -92,31 +92,33 @@ var TypingExamination = { .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0); this.textTypingContent.anchor.set(0, 0.5); - this.textTypingContent.fontSize = BIG_FONT_SIZE; + this.textTypingContent.fontSize = FONT_SIZE; + textStyleBasic.font = "38px Arial"; textStyleBasic.backgroundColor = null; this.textTypingLine = game.add.text( RECORD_POSITION_X, TYPING_CONTENT_Y, "", textStyleBasic ) - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); // .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0); - this.textTypingLine.anchor.set(0.5); + this.textTypingLine.anchor.set(1, 0.5); var TYPING_OFFSET_Y = 70; var TYPING_PREVIEW_OFFSET_Y = 70; - textStyleBasic.font = "38px Arial"; + // textStyleBasic.font = "38px Arial"; textStyleBasic.backgroundColor = null; // done text - // var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ]; - var textDoneColor = [ '#dddd4d', '#dddd4d', '#dddd4d', '#dddd4d' ]; + var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ]; + // var textDoneColor = [ '#99994d', '#99994d', '#99994d', '#99994d' ]; this.textTypingContentsDone = []; this.textTypingRecordsDone = []; for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) { + textStyleBasic.font = "38px Courier New"; this.textTypingContentsDone[i] = game.add.text( TYPING_CONTENT_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT, "", textStyleBasic @@ -126,21 +128,23 @@ var TypingExamination = { this.textTypingContentsDone[i].anchor.set(0, 0.5); this.textTypingContentsDone[i].fontSize = FONT_SIZE; + textStyleBasic.font = "38px Arial"; this.textTypingRecordsDone[i] = game.add.text( RECORD_POSITION_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT, "", textStyleBasic ) .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(textDoneColor[i], 0); - this.textTypingRecordsDone[i].anchor.set(0.5); + this.textTypingRecordsDone[i].anchor.set(1, 0.5); this.textTypingRecordsDone[i].fontSize = FONT_SIZE; } // preview text - // var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ]; - var textPreviewColor = [ '#dddddd', '#dddddd', '#dddddd', '#dddddd' ]; + var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ]; + // var textPreviewColor = [ '#999999', '#999999', '#999999', '#999999' ]; this.textTypingContentPreview = []; for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) { + textStyleBasic.font = "38px Courier New"; this.textTypingContentPreview[i] = game.add.text( TYPING_CONTENT_X, TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT, @@ -154,11 +158,14 @@ var TypingExamination = { // input text - this.inputTextContent = new InputTypeText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70); + this.inputTextContent = new InputText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70, 800, 50); this.inputTextContent.anchor.set(0, 0.5); this.inputTextContent.canvasInput.value(''); this.inputTextContent.canvasInput.focus(); - this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE); + this.inputTextContent.canvasInput.fontSize(FONT_SIZE); + // this.inputTextContent.canvasInput.fontWeight(""); + this.inputTextContent.canvasInput.fontFamily("Courier New"); + // this.inputTextContent.canvasInput.fontFamily("Courier New"); this.inputTextContent.canvasInput.placeHolder(""); // inputTextContent.canvasInput._onkeydown = this.checkInputText; // inputTextContent.canvasInput._onkeyup = function() { diff --git a/src/game/typing/examination/loading.js b/src/game/typing/examination/loading.js index 83cb793..5c60482 100644 --- a/src/game/typing/examination/loading.js +++ b/src/game/typing/examination/loading.js @@ -31,7 +31,6 @@ var Loading = { // Hand.loadResources(); Animal.loadResources(); - // game.load.text("literature", "./../../game/typing/literature_list/korean_national_anthem.txt"); // game.load.image('a', '../../../resources/image/icon/fullscreen_white.png'); diff --git a/src/game/typing/lib/typing_text_manager.js b/src/game/typing/lib/typing_text_manager.js index b08ed9e..1cd1717 100644 --- a/src/game/typing/lib/typing_text_manager.js +++ b/src/game/typing/lib/typing_text_manager.js @@ -128,7 +128,31 @@ TypingTextManager.prototype.makeShortSentences = function(sentence) { for(var i = 0; i < wordCount; i++) { // console.log(words[i]); // console.log(shortSentences[sentenceIndex].length); - // console.log(words[i]); + + + + var wordLength = words[i].length; + if(wordLength > TypingTextManager.SENTENCE_MAX_CHARACTER) { + console.log(words[i]); + if(shortSentences[sentenceIndex].legnth > 0) + sentenceIndex++; + + var loopCount = Math.ceil(wordLength / TypingTextManager.SENTENCE_MAX_CHARACTER); + + for(var j = 0; j < loopCount; j++) { + var startIndex = j * TypingTextManager.SENTENCE_MAX_CHARACTER; + var endIndex = (j + 1) * TypingTextManager.SENTENCE_MAX_CHARACTER; + var partialText = words[i].substring(startIndex, endIndex); + // console.log(partialText); + shortSentences[sentenceIndex] = partialText; + sentenceIndex++; + } + + continue; + } + + + if(shortSentences[sentenceIndex].length + words[i].length < TypingTextManager.SENTENCE_MAX_CHARACTER) if(i < wordCount - 1) shortSentences[sentenceIndex] = shortSentences[sentenceIndex].concat(words[i], " "); @@ -181,4 +205,4 @@ TypingTextManager.ENGLISH_LETTER_RIGHT = [ ]; -TypingTextManager.SENTENCE_MAX_CHARACTER = 35; // 27; \ No newline at end of file +TypingTextManager.SENTENCE_MAX_CHARACTER = 28; \ No newline at end of file diff --git a/test/tdd.js b/test/tdd.js index a76ebb8..1966ccb 100644 --- a/test/tdd.js +++ b/test/tdd.js @@ -310,19 +310,24 @@ QUnit.test( "TypingTextManager - makeExaminationContents", function( assert ) { var sentences = [ "냉면 / 김남천", "", - "'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 아니한다." + "'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 아니한다.", + "가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하" ]; typingTextMan.init(); typingTextMan.makeExaminationContents(sentences); let contents = typingTextMan.getContents(); - assert.equal(contents[0], "냉면 / 김남천", "addTextArray - 1st line"); - assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 ", "addTextArray - 2nd line"); - assert.equal(contents[2], "어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 ", "addTextArray - 3rd line"); - assert.equal(contents[3], "음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 ", "addTextArray - 4th line"); - assert.equal(contents[4], "냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 ", "addTextArray - 5th line"); - assert.equal(contents[5], "되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 ", "addTextArray - 6th line"); - assert.equal(contents[6], "아니한다.", "addTextArray - 7th line"); + assert.equal(contents[0], "냉면 / 김남천", "addTextArray - line #1"); + assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 ", "addTextArray - line #2"); + assert.equal(contents[2], "'평양냉면'이라야 비로소 어울리는 격에 맞는 말이 ", "addTextArray - line #3"); + assert.equal(contents[3], "되듯이 냉면은 평양에 있어 대표적인 음식이다. ", "addTextArray - line #4"); + assert.equal(contents[4], "언제부터 이 냉면이 평양에 들어왔으며 언제부터 ", "addTextArray - line #5"); + assert.equal(contents[5], "냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 ", "addTextArray - line #6"); + assert.equal(contents[6], "음식물이 되었는지는 나 같은 무식쟁이에게는 알 ", "addTextArray - line #7"); + assert.equal(contents[7], "수도 없고 또 알려고도 아니한다.", "addTextArray - line #8"); + assert.equal(contents[8], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #9"); + assert.equal(contents[9], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #10"); + assert.equal(contents[10], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #11"); }); QUnit.test( "TypingTextManager - add", function( assert ) {