jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: change inputText class

Browse Source
This commit is contained in:
Jisang Park
2019-09-15 01:10:06 +09:00
parent 41872447f3
commit 7eaf1b5301
5 changed files with 158 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/flat_button/typing_exam_button.js
-1
View File
@@ -45,7 +45,6 @@ function TypingExamButton(x, y) {
this.mainText.anchor.set(0, 0.5);
this.mainText.x = 100;
console.log(this.mainText.width);
// this.mainText.width = 100;
// this.setMainText("");
// this.addIcon("tile_choco");
src/game/typing/examination/game.js
+150 -27
View File
@@ -13,6 +13,10 @@ TypingExamination.prototype.preload = function() {
}
TypingExamination.prototype.create = function() {
Phaser.Device.whenReady(function () {
game.plugins.add(PhaserInput.Plugin);
});
this.dbService = new DBService();
this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
@@ -163,7 +167,6 @@ TypingExamination.prototype.makeInputlineText = function(x, y) {
this.textBackTextOnly.fontSize = TypingExamination.DEFAULT_FONT_SIZE;
this.textBackTextOnly.style.fill = TypingExamination.COLOR_NOT_INPUT_STRING;
this.textBackTextOnly.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
console.log(this.textBackTextOnly);
this.textNextLetterIndicator = this.makeDefaultText(x, y);
this.textNextLetterIndicator.fontSize = TypingExamination.DEFAULT_FONT_SIZE;
@@ -176,7 +179,6 @@ TypingExamination.prototype.makeInputlineText = function(x, y) {
this.textCorrectText.style.fill = TypingExamination.COLOR_CORRECT_INPUT_STRING;
this.textCorrectText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
this.textCorrectText.style.backgroundColor = TypingExamination.COLOR_CORRECT_INPUT_BACKGROUND_STRING;
console.log(this.textCorrectText);
var graphics = game.add.graphics(0, 0);
graphics.lineStyle(1, 0x303030, 1);
@@ -244,27 +246,67 @@ TypingExamination.prototype.makeTextContents = function() {
// input text
this.inputTextContent = new InputText(
TYPING_CONTENT_X - INPUT_TEXT_OFFSET_X,
TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y,
CONTENT_TEXT_WIDTH + INPUT_TEXT_OFFSET_X * 2,
50);
this.inputTextContent.anchor.set(0, 0.5);
this.inputTextContent.canvasInput.value('');
this.inputTextContent.canvasInput.focus();
this.inputTextContent.canvasInput.fontSize(TypingExamination.DEFAULT_FONT_SIZE);
// this.inputTextContent.canvasInput.fontWeight("");
this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding");
this.inputTextContent.canvasInput.placeHolder("");
// inputTextContent.canvasInput._onkeydown = this.checkInputText;
this.inputTextContent.canvasInput._onkeyup = (function() {
if(this.isGameOver)
var setting = {
// font: "26px Arial",
font: "26px Nanum Gothic Coding",
// fontSize: TypingExamination.DEFAULT_FONT_SIZE,
// fontFamily: "Nanum Gothic Coding",
fill: "#000000",
fillAlpha: 1,
fontWeight: "bold",
forceCase: "", // PhaserInput.ForceCase.upper,
width: 800,
max: 100,
padding: 8,
borderWidth: 1,
borderColor: "#000", // "#aaa",
borderRadius: 6,
placeHolder: "", // "입력이 없을 때 출력될 내용",
textAlign: "left", // "center",
zoom: true
};
this.inputText = game.add.inputField(
TYPING_CONTENT_X - INPUT_TEXT_OFFSET_X + 2,
TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y - 18,
// TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y - 100,
setting
);
this.inputText.keyListener = (function(evt) {
// onKeyDown x 2 (?)
// onKeyUp
this.value = this.getFormattedText(this.domElement.value);
// console.log(this.value + "|");
// if (evt.keyCode === 13) {
// if (this.focusOutOnEnter) {
// this.endFocus();
// }
// return;
// }
this.updateText();
this.updateCursor();
this.updateSelection();
if(typingExamination.isGameOver)
return;
this.onKeyUp(event);
// warning
// : onKeyUp is called onkeyup and onkeydown
}).bind(this);
// console.log(evt);
if(typeof evt.keyCode === "undefined"){
// console.log("undefined");
typingExamination.onKeyDown2(this.value);
} else {
// console.log(evt);
typingExamination.onKeyDown(evt, this.value);
}
evt.preventDefault();
});//.bind(this);
this.inputText.setText('');
this.inputText.blockInput = true;
this.inputText.startFocus();
this.loadExaminationContent();
}
@@ -505,7 +547,87 @@ TypingExamination.prototype.showTypingExaminationContents = function() {
TypingExamination.prototype.resetTypingContent = function() {
this.setCorrectText("");
this.inputTextContent.canvasInput.value('');
this.inputText.setText('');
}
TypingExamination.prototype.onKeyDown2 = function(inputTextValue) {
// console.log(inputTextValue);
if(this.isTyping === false) {
// console.log("isTyping is false");
this.startTyping();
}
if(this.isTypingLine === false) {
// console.log("isTyping is isTypingLine");
this.setTimeTypingStart();
}
//not trimmed contents
var notTrimmedInputContent = inputTextValue;
var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
// trimmed contents
// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
var inputContent = inputTextValue;
var trimmedInputContent = inputContent.trim();
var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
// console.log(notTrimmedInputContent + "]");
// console.log(notTrimmedTypingContent + "]");
// console.log(trimmedInputContent + "]");
// console.log(trimmedTypingContent + "]");
this.highlightTypingContent(notTrimmedInputContent, notTrimmedTypingContent);
this.updateCorrectUnicodeLetterCount();
this.updateTypingRecord();
var lastInputTextChar = "";
if(inputTextValue.length > 0)
lastInputTextChar = inputTextValue[inputTextValue.length - 1];
// console.log("[" + lastInputTextChar + "]");
if(trimmedInputContent === trimmedTypingContent && lastInputTextChar === " ") {
// console.log("last space");
this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
}
}
TypingExamination.prototype.onKeyDown = function(event, inputTextValue) {
// console.log(event);
// console.log(inputTextValue);
if(this.isTyping === false) {
// console.log("isTyping is false");
this.startTyping();
}
if(this.isTypingLine === false) {
// console.log("isTyping is isTypingLine");
this.setTimeTypingStart();
}
//not trimmed contents
var notTrimmedInputContent = inputTextValue;
var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
// trimmed contents
// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
var inputContent = inputTextValue;
var trimmedInputContent = inputContent.trim();
var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
this.highlightTypingContent(notTrimmedInputContent, notTrimmedTypingContent);
this.updateCorrectUnicodeLetterCount();
this.updateTypingRecord();
if(event.keyCode == Phaser.Keyboard.ENTER)
this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
if(event.keyCode == Phaser.Keyboard.SPACEBAR)
this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
// console.log(event.keyCode);
}
TypingExamination.prototype.onKeyUp = function(event) {
@@ -520,12 +642,12 @@ TypingExamination.prototype.onKeyUp = function(event) {
}
//not trimmed contents
var notTrimmedInputContent = this.inputTextContent.canvasInput.value();
var notTrimmedInputContent = this.inputText.value;
var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
// trimmed contents
// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
var inputContent = this.inputTextContent.canvasInput.value();
var inputContent = this.inputText.value;
var trimmedInputContent = inputContent.trim();
var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
@@ -543,7 +665,7 @@ TypingExamination.prototype.onKeyUp = function(event) {
}
TypingExamination.prototype.setTimeTypingStart = function() {
if(this.inputTextContent.canvasInput.value() == "")
if(this.inputText.value == "")
return;
this.isTypingLine = true;
@@ -581,7 +703,7 @@ TypingExamination.prototype.calculateTypingRecord = function(typingContent) {
TypingExamination.prototype.updateCorrectUnicodeLetterCount = function() {
var notTrimmedInputContent = this.inputTextContent.canvasInput.value();
var notTrimmedInputContent = this.inputText.value;
var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
var correctLetterCount = this.getCorrectLetterCount(notTrimmedInputContent, notTrimmedTypingContent);
@@ -721,6 +843,7 @@ TypingExamination.prototype.playNextContent = function() {
this.showTypingExaminationContents();
this.showPlayingWordNumber();
this.resetTypingContent();
this.inputText.startFocus();
}
TypingExamination.prototype.showPlayingWordNumber = function() {
@@ -729,7 +852,7 @@ TypingExamination.prototype.showPlayingWordNumber = function() {
}
TypingExamination.prototype.startTyping = function() {
if(this.inputTextContent.canvasInput.value() == "")
if(this.inputText.value == "")
return;
this.realtimeStageTimer.start();
src/web/client/typing_exam.html
+1
View File
@@ -33,6 +33,7 @@
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script src="../../../resources/js/phaser.min.js"></script>
<script type="text/javascript" src="../../util/phaser-input-master/build/phaser-input.min.js"></script>
<!-- global source files -->
<script src="../../game/lib/session_storage_manager.js"></script>