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

Add: input_score

Browse Source
This commit is contained in:
Jisang Park
2018-12-10 08:21:43 +09:00
parent 13f59aee71
commit 364362618b
5 changed files with 228 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/license_timer/chart.js
+71 -21
View File
@@ -3,8 +3,9 @@ function Chart() {
this.printChartTitle();
this.printChartBaseLine();
this.records = [];
for(var i = 0; i < 7; i++)
new ChartRecord(i);
this.records.push(new ChartRecord(i));
}
Chart.prototype.printChartTitle = function() {
@@ -12,7 +13,7 @@ Chart.prototype.printChartTitle = function() {
var fontStyle = { font: "30px Arial", fill: "#fff", align: "center" };
Chart.drawText(Chart.DATE_POS_X, Chart.CHART_LINE_Y + offsetY, "날짜", fontStyle);
Chart.drawText(Chart.RECORD_POS_X, Chart.CHART_LINE_Y + offsetY, "점수", fontStyle);
Chart.drawText(Chart.SCORE_POS_X, Chart.CHART_LINE_Y + offsetY, "점수", fontStyle);
Chart.drawText(Chart.GRADE_POS_X, Chart.CHART_LINE_Y + offsetY, "등급", fontStyle);
Chart.drawText(Chart.SUBJECT_POS_X, Chart.CHART_LINE_Y + offsetY, "과목", fontStyle);
}
@@ -60,6 +61,18 @@ Chart.drawText = function(posX, posY, text, fontStyle) {
return textObject;
}
Chart.prototype.printContents = function() {
if(isDebugMode()) {
console.log("printContents : " + this.records.length);
for(var i = 0; i < this.records.length; i++) {
this.records[i].printDate("12/10");
this.records[i].printScore(360);
this.records[i].printGrade("B");
this.records[i].printSubject("ITQ 파워포인트");
}
}
}
Chart.CHART_COUNT = 7;
Chart.CHART_LINE_START_X = 230;
@@ -70,22 +83,40 @@ Chart.CHART_HEIGHT = 120;
Chart.CHART_GRAPH_OFFSET_X = 50;
Chart.CHART_DATE_OFFSET_Y = 20;
Chart.CHART_RECORD_OFFSET_Y = 30;
Chart.CHART_SCORE_OFFSET_Y = 30;
Chart.DATE_POS_X = Chart.CHART_LINE_START_X + 50;
Chart.RECORD_POS_X = Chart.DATE_POS_X + 100;
Chart.SCORE_POS_X = Chart.DATE_POS_X + 100;
Chart.GRADE_POS_X = Chart.DATE_POS_X + 200;
Chart.SUBJECT_POS_X = Chart.DATE_POS_X + 400;
function ChartRecord(index) {
this.date = new DateData(index);
this.record = new RecordData(index);
this.grade = new GradeData(index);
this.subject = new SubjectData(index);
function ChartRecord(indexRow) {
this.date = new DateData(indexRow);
this.score = new ScoreData(indexRow);
this.grade = new GradeData(indexRow);
this.subject = new SubjectData(indexRow);
return this;
}
ChartRecord.prototype.printDate = function(date) {
this.date.text = date;
}
ChartRecord.prototype.printScore = function(score) {
this.score.text = score;
}
ChartRecord.prototype.printGrade = function(grade) {
this.grade.text = grade;
}
ChartRecord.prototype.printSubject = function(subject) {
this.subject.text = subject;
}
ChartRecord.getPosX = function(columnName) {
var posX = Chart.CHART_LINE_START_X;
switch(columnName) {
@@ -93,8 +124,8 @@ ChartRecord.getPosX = function(columnName) {
posX = Chart.DATE_POS_X;
break;
case "record":
posX = Chart.RECORD_POS_X;
case "score":
posX = Chart.SCORE_POS_X;
break;
case "grade":
@@ -114,27 +145,46 @@ ChartRecord.getPosY = function(rowIndex) {
return Chart.CHART_LINE_Y + offsetY + ChartRecord.GAP_RECORD_Y * rowIndex;
}
ChartRecord.getDefaultFontStyle = function() {
return { font: "28px Arial", fill: "#fff", align: "center" };
}
ChartRecord.GAP_RECORD_Y = 40;
function DateData(index) {
var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" };
this.dateText = Chart.drawText(ChartRecord.getPosX("date"), ChartRecord.getPosY(index), "월/일", fontStyle);
this.dateText = Chart.drawText(
ChartRecord.getPosX("date"), ChartRecord.getPosY(index),
"-", ChartRecord.getDefaultFontStyle()
);
return this.dateText;
}
function RecordData(index) {
var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" };
this.dateText = Chart.drawText(ChartRecord.getPosX("record"), ChartRecord.getPosY(index), "350 점", fontStyle);
function ScoreData(index) {
this.scoreText = Chart.drawText(
ChartRecord.getPosX("score"), ChartRecord.getPosY(index),
"-", ChartRecord.getDefaultFontStyle()
);
return this.scoreText;
}
function GradeData(index) {
var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" };
this.dateText = Chart.drawText(ChartRecord.getPosX("grade"), ChartRecord.getPosY(index), "B", fontStyle);
this.gradeText = Chart.drawText(
ChartRecord.getPosX("grade"), ChartRecord.getPosY(index),
"-", ChartRecord.getDefaultFontStyle()
);
return this.gradeText;
}
function SubjectData(index) {
var fontStyle = { font: "28px Arial", fill: "#fff", align: "center" };
this.dateText = Chart.drawText(ChartRecord.getPosX("subject"), ChartRecord.getPosY(index), "ITQ 파워포인트", fontStyle);
}
this.subjectText = Chart.drawText(
ChartRecord.getPosX("subject"), ChartRecord.getPosY(index),
"-", ChartRecord.getDefaultFontStyle()
);
return this.subjectText;
}
src/game/license_timer/game.js
+3 -133
View File
@@ -1,10 +1,6 @@
var LicenseTimer = {
create: function() {
Phaser.Device.whenReady(function () {
game.plugins.add(PhaserInput.Plugin);
  });
game.stage.backgroundColor = "#4d4d4d";
this.initVariables();
@@ -30,109 +26,14 @@ var LicenseTimer = {
// this.fullscreenButton = new FullscreenButton();
this.timer = new Timer();
this.chart = new Chart();
this.chart.printContents();
this.makeInputScoreGroup();
this.inputScore = new InputScore(this.chart);
},
initVariables: function() {
this.subject = "ITQ 파워포인트";
this.recentRecord = 500;
this.prevTime = null;
this.timeLeft = 0;
this.timeLeftHour = 0;
this.timeLeftMinute = 0;
this.timeLeftSecond = 0;
this.timerEvent = null;
},
makeTimer: function() {
},
makeInputScoreGroup: function() {
var InputScoreGruopPosY = GAME_SCREEN_SIZE.y - LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y;
// bar
var bar = game.add.graphics();
bar.beginFill(0x303030); //, 0.2);
bar.drawRect(0, InputScoreGruopPosY, GAME_SCREEN_SIZE.x, 70);
var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력");
this.subjectText = this.makeInputText(20, InputScoreGruopPosY + 10, subjectTextSetting);
this.subjectText.setText(this.subject);
var setting = new RoundRectButtonSetting(0, 0, 0, 0);
setting.fontStyle.boundsAlignH = "left"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
var titleTextStyle = { font: "36px Arial", fill: "#fff", align: "center"};
this.titleText = game.add.text(350, InputScoreGruopPosY + 40, "과목", titleTextStyle);
this.titleText.anchor.set(0, 0.5);
// subject input text
// var inputTextSetting = this.makeInputTextSetting(200, "점수 입력");
var recordTextSetting = this.makeInputTextSetting(150, "점수 입력");
this.recordText = this.makeInputText(game.world.centerX - 50, InputScoreGruopPosY + 10, recordTextSetting);
// this.subjectText.setText(this.subject);
this.titleText = game.add.text(640, InputScoreGruopPosY + 40, "점", titleTextStyle);
this.titleText.anchor.set(0, 0.5);
var passwordTextSetting = this.makeInputTextSetting(150, "비밀번호");
passwordTextSetting.type = PhaserInput.InputType.password;
this.passwordText = this.makeInputText(GAME_SCREEN_SIZE.x - 330, InputScoreGruopPosY + 10, passwordTextSetting);
// set timer buttons
setting.x = GAME_SCREEN_SIZE.x - 80;
setting.y = InputScoreGruopPosY + 35;
setting.width = 100;
setting.height = 50;
var set60SecButton = new RoundRectButton(
setting,
null, "저장",
(function() { console.log(this.subjectText.value); console.log("save score"); }).bind(this)
);
},
setInputTextWidth(inputText, width) {
inputText.canvasInput.width = width;
inputText.canvasInput._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
inputText.canvasInput._hiddenInput.style.width = self._width + 'px';
inputText.canvasInput._width = width;
inputText.canvasInput._calcWH();
inputText.canvasInput._updateCanvasWH();
inputText.canvasInput.render();
},
makeInputTypeText: function(x, y, text) {
var inputText = new InputTypeText(x, y);
inputText.anchor.set(0.5);
inputText.canvasInput.value('');
if(isDebugMode()) {
inputText.canvasInput.value(text);
}
inputText.canvasInput._onkeyup = (function() {
if(event.keyCode == Phaser.Keyboard.ENTER) {
this.startMenu();
}
}).bind(this);
return inputText;
},
@@ -142,35 +43,4 @@ var LicenseTimer = {
game.state.start('Login');
},
makeInputTextSetting(width, placeHolder) {
return {
font: "32px Arial",
fill: "#000000",
fillAlpha: 1,
fontWeight: "bold",
forceCase: "", // PhaserInput.ForceCase.upper,
width: width,
max: 100,
padding: 8,
borderWidth: 1,
borderColor: "#aaa",
borderRadius: 6,
placeHolder: placeHolder,
textAlign: "center",
zoom: true
}
},
makeInputText(x, y, setting) {
var inputText = game.add.inputField(x, y, setting);
inputText.setText('');
inputText.blockInput = false;
return inputText;
},
}
LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y = 70;
}
src/game/license_timer/input_score.js
+94
View File
@@ -0,0 +1,94 @@
function InputScore(chart) {
this.chart = chart;
this.initVariables();
Phaser.Device.whenReady(function () {
game.plugins.add(PhaserInput.Plugin);
});
var inputScorePosY = GAME_SCREEN_SIZE.y - InputScore.INPUT_SCORE_GROUP_OFFSET_Y;
// bar
var bar = game.add.graphics();
bar.beginFill(0x303030); //, 0.2);
bar.drawRect(0, inputScorePosY, GAME_SCREEN_SIZE.x, 70);
var subjectTextSetting = this.makeInputTextSetting(300, "과목 입력");
this.subjectText = this.makeInputText(20, inputScorePosY + 10, subjectTextSetting);
this.subjectText.setText(this.subject);
var setting = new RoundRectButtonSetting(0, 0, 0, 0);
setting.fontStyle.boundsAlignH = "left"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
var titleTextStyle = { font: "36px Arial", fill: "#fff", align: "center"};
this.titleText = game.add.text(350, inputScorePosY + 40, "과목", titleTextStyle);
this.titleText.anchor.set(0, 0.5);
// subject input text
// var inputTextSetting = this.makeInputTextSetting(200, "점수 입력");
var recordTextSetting = this.makeInputTextSetting(150, "점수 입력");
this.recordText = this.makeInputText(game.world.centerX - 50, inputScorePosY + 10, recordTextSetting);
// this.subjectText.setText(this.subject);
this.titleText = game.add.text(640, inputScorePosY + 40, "점", titleTextStyle);
this.titleText.anchor.set(0, 0.5);
var passwordTextSetting = this.makeInputTextSetting(150, "비밀번호");
passwordTextSetting.type = PhaserInput.InputType.password;
this.passwordText = this.makeInputText(GAME_SCREEN_SIZE.x - 330, inputScorePosY + 10, passwordTextSetting);
// set timer buttons
setting.x = GAME_SCREEN_SIZE.x - 80;
setting.y = inputScorePosY + 35;
setting.width = 100;
setting.height = 50;
var set60SecButton = new RoundRectButton(
setting,
null, "저장",
(function() { console.log(this.subjectText.value); console.log("save score"); }).bind(this)
);
}
InputScore.prototype.initVariables = function() {
this.subject = "ITQ 파워포인트";
this.recentSubject = this.subject;
}
InputScore.prototype.makeInputTextSetting = function(width, placeHolder) {
return {
font: "32px Arial",
fill: "#000000",
fillAlpha: 1,
fontWeight: "bold",
forceCase: "", // PhaserInput.ForceCase.upper,
width: width,
max: 100,
padding: 8,
borderWidth: 1,
borderColor: "#aaa",
borderRadius: 6,
placeHolder: placeHolder,
textAlign: "center",
zoom: true
}
}
InputScore.prototype.makeInputText = function(x, y, setting) {
var inputText = game.add.inputField(x, y, setting);
inputText.setText('');
inputText.blockInput = false;
return inputText;
}
InputScore.INPUT_SCORE_GROUP_OFFSET_Y = 70;
src/game/license_timer/timer.js
+59 -46
View File
@@ -1,63 +1,76 @@
function Timer() {
// bar
var bar = game.add.graphics();
bar.beginFill(0x202020);
bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240);
this.initVariables();
// Timer
var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
var timerCenterY = 183;
// bar
var bar = game.add.graphics();
bar.beginFill(0x202020);
bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240);
this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00");
this.makeTimerTextContent(timerCenterX - 120, timerCenterY, 160, ":");
this.timeMinuteText = this.makeTimerTextContent(timerCenterX, timerCenterY, 160, "00");
this.makeTimerTextContent(timerCenterX + 110, timerCenterY + 20, 100, ":");
this.timeSecondText = this.makeTimerTextContent(timerCenterX + 190, timerCenterY + 20, 100, "00");
// Timer
var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
var timerCenterY = 183;
// buttons
var hour10PosX = timerCenterX - 285;
var hour1PosX = timerCenterX - 195;
this.timeHourText = this.makeTimerTextContent(timerCenterX - 240, timerCenterY, 160, "00");
this.makeTimerTextContent(timerCenterX - 120, timerCenterY, 160, ":");
this.timeMinuteText = this.makeTimerTextContent(timerCenterX, timerCenterY, 160, "00");
this.makeTimerTextContent(timerCenterX + 110, timerCenterY + 20, 100, ":");
this.timeSecondText = this.makeTimerTextContent(timerCenterX + 190, timerCenterY + 20, 100, "00");
var minute10PosX = timerCenterX - 45;
var minute1PosX = timerCenterX + 45;
// buttons
var hour10PosX = timerCenterX - 285;
var hour1PosX = timerCenterX - 195;
var plusPosY = timerCenterY - 82;
var minusPosY = timerCenterY + 75;
var minute10PosX = timerCenterX - 45;
var minute1PosX = timerCenterX + 45;
// hour button
this.hourPlus10Button = this.makeTimePlusButton(hour10PosX, plusPosY, "▲",
(function() { this.timePlus(10, "hour"); }).bind(this)
);
// this.hourPlus10Button.setInputEnabled(false);
this.hourMinus10Button = this.makeTimeMinusButton(hour10PosX, minusPosY, "▼",
(function() { this.timeMinus(-10, "hour"); }).bind(this)
);
var plusPosY = timerCenterY - 82;
var minusPosY = timerCenterY + 75;
this.hourPlus1Button = this.makeTimePlusButton(hour1PosX, plusPosY, "▲",
(function() { this.timePlus(1, "hour"); }).bind(this)
);
this.hourMinus1Button = this.makeTimeMinusButton(hour1PosX, minusPosY, "▼",
(function() { this.timeMinus(-1, "hour"); }).bind(this)
);
// hour button
this.hourPlus10Button = this.makeTimePlusButton(hour10PosX, plusPosY, "▲",
(function() { this.timePlus(10, "hour"); }).bind(this)
);
// this.hourPlus10Button.setInputEnabled(false);
this.hourMinus10Button = this.makeTimeMinusButton(hour10PosX, minusPosY, "▼",
(function() { this.timeMinus(-10, "hour"); }).bind(this)
);
// minute button
this.minutePlus10Button = this.makeTimePlusButton(minute10PosX, plusPosY, "▲",
(function() { this.timePlus(10, "minute"); }).bind(this)
);
this.minuteMinus10Button = this.makeTimeMinusButton(minute10PosX, minusPosY, "▼",
(function() { this.timeMinus(-10, "minute"); }).bind(this)
);
this.hourPlus1Button = this.makeTimePlusButton(hour1PosX, plusPosY, "▲",
(function() { this.timePlus(1, "hour"); }).bind(this)
);
this.hourMinus1Button = this.makeTimeMinusButton(hour1PosX, minusPosY, "▼",
(function() { this.timeMinus(-1, "hour"); }).bind(this)
);
this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲",
(function() { this.timePlus(1, "minute"); }).bind(this)
);
this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼",
(function() { this.timeMinus(-1, "minute"); }).bind(this)
);
// minute button
this.minutePlus10Button = this.makeTimePlusButton(minute10PosX, plusPosY, "▲",
(function() { this.timePlus(10, "minute"); }).bind(this)
);
this.minuteMinus10Button = this.makeTimeMinusButton(minute10PosX, minusPosY, "▼",
(function() { this.timeMinus(-10, "minute"); }).bind(this)
);
this.minutePlus1Button = this.makeTimePlusButton(minute1PosX, plusPosY, "▲",
(function() { this.timePlus(1, "minute"); }).bind(this)
);
this.minuteMinus1Button = this.makeTimeMinusButton(minute1PosX, minusPosY, "▼",
(function() { this.timeMinus(-1, "minute"); }).bind(this)
);
}
Timer.prototype.initVariables = function() {
this.prevTime = null;
this.timeLeft = 0;
this.timeLeftHour = 0;
this.timeLeftMinute = 0;
this.timeLeftSecond = 0;
this.timerEvent = null;
}
Timer.prototype.makeTimerTextContent = function(x, y, sizePx, content) {
// style setting
var timerTextStyle = { font: "bold 160px Arial", fill: "#fff", align: "right"};
src/web/client/license_timer.html
+1
View File
@@ -58,6 +58,7 @@
<script src="../../game/license_timer/login.js"></script>
<script src="../../game/license_timer/timer.js"></script>
<script src="../../game/license_timer/chart.js"></script>
<script src="../../game/license_timer/input_score.js"></script>
<script src="../../game/license_timer/game.js"></script>
<script src="../../game/license_timer/main.js"></script>