Add: timer for LicenseTimer

src/game/license_timer/game.js

@@ -29,7 +29,7 @@ var LicenseTimer = {
 
 		// this.fullscreenButton = new FullscreenButton();
 
-		this.makeTimer();
+		this.timer = new Timer();
 
 		this.chart = new Chart();
 
@@ -53,167 +53,7 @@ var LicenseTimer = {
 		this.timerEvent = null;
 	},
 
-	makeTimerTextContent(x, y, sizePx, content) {
-		// style setting
-		var timerTextStyle = { font: "bold 160px Arial", fill: "#fff", align: "right"};
-		timerTextStyle.fontSize = sizePx;
-
-		// text
-		var timerText = game.add.text(x, y, content, timerTextStyle);
-		timerText.anchor.set(0.5);
-		timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		return timerText;
-	},
-
-	makeTimePlusButton(x, y, buttonText, eventHandler) {
-		var setting = this.makeTimerButtonSetting(x, y);
-		setting.setStrokeColor(
-			0xffffff,
-			0xeeeeff,
-			0xccccdd,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xeeeeff,
-			0xddddee,
-			0xccccdd,
-			0x666666
-		);
-		setting.setTextColor(
-			"#66c",
-			"#66c",
-			"#66c",
-			"#333"
-		);
-
-		return this.makeTimeButton(setting, buttonText, eventHandler);
-	},
-
-	makeTimeMinusButton(x, y, buttonText, eventHandler) {
-		var setting = this.makeTimerButtonSetting(x, y);
-		setting.setStrokeColor(
-			0xffffff,
-			0xffeeee,
-			0xddcccc,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xffeeee,
-			0xeedddd,
-			0xddcccc,
-			0x666666
-		);
-		setting.setTextColor(
-			"#a66",
-			"#a66",
-			"#a66",
-			"#333"
-		);
-
-		return this.makeTimeButton(setting, buttonText, eventHandler);
-	},
-
-	makeTimerButtonSetting(x, y) {
-		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
-		// setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		// setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 3;
-		setting.roundAmount = 1;
-		setting.x = x;
-		setting.y = y;
-		setting.width = 70;
-		setting.height = 25;
-
-		return setting;
-	},
-
-	makeTimeButton(setting, buttonText, eventHandler) {
-		var button = new RoundRectButton(setting, null, buttonText, eventHandler);
-		button.text.fontSize = 18;
-
-		return button;
-	},
-
 	makeTimer: function() {
-		// bar
-		var bar = game.add.graphics();
-		bar.beginFill(0x202020);
-		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240);
-
-		// Timer
-		var timerCenterX = game.world.centerX + LicenseTimer.Timer_CENTER_OFFSET_X;
-		var timerCenterY = 183;
-
-		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");
-
-		// buttons
-		var hour10PosX = timerCenterX - 285;
-		var hour1PosX = timerCenterX - 195;
-
-		var minute10PosX = timerCenterX - 45;
-		var minute1PosX = timerCenterX + 45;
-
-		var plusPosY = timerCenterY - 82;
-		var minusPosY = timerCenterY + 75;
-
-		// 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)
-		);
-
-		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)
-		);
-
-		// 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)
-		);
-	},
-
-	timePlus(amount, type) {
-		console.log(amount + type);
-
-		// if(type == "hour")
-		this.timeLeft += amount * 60;
-		this.updateTimeText();
-		this.sendTimeLeftToServer();
-	},
-
-	timeMinus(amount, type) {
-		console.log(amount + type);
-
-		// if(type == "hour") {
-		// 	var totalMinusMinute = amount * LicenseTimer.TIME_MINUTES_FOR_HOUR;
-		// 	if(totalMinusMinute - )
-		// }
-		this.timeLeft -= amount * 60;
-		if(this.timeLeft < 0)
-			this.timeLeft = 0;
-		this.updateTimeText();
-		this.sendTimeLeftToServer();
 	},
 
 	makeInputScoreGroup: function() {
@@ -303,64 +143,6 @@ var LicenseTimer = {
 	},
 
 
-	setTime: function(sec) {
-		// console.log("time up : " + min);
-
-		this.timeLeft += sec;
-		this.updateTimeText();
-	},
-
-	timeUp: function(sec) {
-		// console.log("time up : " + sec);
-
-		this.timeLeft += sec;
-		this.updateTimeText();
-		// this.sendTimeLeftToServer();
-	},
-
-	timeDown: function(sec) {
-		// console.log("time down : " + sec);
-
-		this.timeLeft -= sec;
-		if(this.timeLeft < 0)
-			this.timeLeft = 0;
-		this.updateTimeText();
-		// this.sendTimeLeftToServer();
-	},
-
-	updateTimeVariables: function() {
-		this.timeLeftHour = parseInt(this.timeLeft / (60 * 60));
-		this.timeLeftMinute = parseInt((this.timeLeft % (60 * 60)) / 60);
-		this.timeLeftSecond = this.timeLeft % 60;
-	},
-
-	updateTimeText: function() {
-		this.updateTimeVariables();
-		this.timerText.text = this.getTimeWithTimeFormat();
-	},
-
-	getTwoDigitNumber: function(value) {
-		var absValue = value;
-		if(absValue < 0)
-			absValue *= -1;
-
-		if(absValue < 10)
-			return "0" + absValue;
-		else
-			return absValue;
-	},
-
-	getTimeWithTimeFormat: function() {
-		if(this.timeLeft > 0)
-			return this.getTwoDigitNumber(this.timeLeftHour)
-				+ ":" + this.getTwoDigitNumber(this.timeLeftMinute)
-			  	+ ":" + this.getTwoDigitNumber(this.timeLeftSecond);
-		else
-			return "-" + this.getTwoDigitNumber(this.timeLeftHour)
-				+ ":" + this.getTwoDigitNumber(this.timeLeftMinute)
-			  	+ ":" + this.getTwoDigitNumber(this.timeLeftSecond);
-	},
-
 	makeInputTextSetting(width, placeHolder) {
 		return {
 			font: "32px Arial",
@@ -391,13 +173,4 @@ var LicenseTimer = {
 }
 
 
-LicenseTimer.Timer_CENTER_OFFSET_X		= 40;
+LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y	= 70;
-LicenseTimer.INPUT_SCORE_GROUP_OFFSET_Y	= 70;
-
-LicenseTimer.TIME_MILLISECONDS			= 1000;
-
-LicenseTimer.TIME_MINUTES_FOR_HOUR		= 60;
-LicenseTimer.TIME_SECONDS_FOR_MINUTE	= 60;
-
-LicenseTimer.TIME_DEFAULT_SEC
-	= LicenseTimer.TIME_MINUTES_FOR_HOUR * LicenseTimer.TIME_SECONDS_FOR_MINUTE;	// 60 min * 60 sec

src/game/license_timer/timer.js

@@ -0,0 +1,248 @@
+function Timer() {
+		// bar
+		var bar = game.add.graphics();
+		bar.beginFill(0x202020);
+		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 240);
+
+		// Timer
+		var timerCenterX = game.world.centerX + Timer.Timer_CENTER_OFFSET_X;
+		var timerCenterY = 183;
+
+		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");
+
+		// buttons
+		var hour10PosX = timerCenterX - 285;
+		var hour1PosX = timerCenterX - 195;
+
+		var minute10PosX = timerCenterX - 45;
+		var minute1PosX = timerCenterX + 45;
+
+		var plusPosY = timerCenterY - 82;
+		var minusPosY = timerCenterY + 75;
+
+		// 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)
+		);
+
+		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)
+		);
+
+		// 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.makeTimerTextContent = function(x, y, sizePx, content) {
+	// style setting
+	var timerTextStyle = { font: "bold 160px Arial", fill: "#fff", align: "right"};
+	timerTextStyle.fontSize = sizePx;
+
+	// text
+	var timerText = game.add.text(x, y, content, timerTextStyle);
+	timerText.anchor.set(0.5);
+	timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+	return timerText;
+}
+
+Timer.prototype.makeTimePlusButton = function(x, y, buttonText, eventHandler) {
+	var setting = this.makeTimerButtonSetting(x, y);
+	setting.setStrokeColor(
+		0xffffff,
+		0xeeeeff,
+		0xccccdd,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xeeeeff,
+		0xddddee,
+		0xccccdd,
+		0x666666
+	);
+	setting.setTextColor(
+		"#66c",
+		"#66c",
+		"#66c",
+		"#333"
+	);
+
+	return this.makeTimeButton(setting, buttonText, eventHandler);
+}
+
+Timer.prototype.makeTimeMinusButton = function(x, y, buttonText, eventHandler) {
+	var setting = this.makeTimerButtonSetting(x, y);
+	setting.setStrokeColor(
+		0xffffff,
+		0xffeeee,
+		0xddcccc,
+		0x333333
+	);
+	setting.setButtonColor(
+		0xffeeee,
+		0xeedddd,
+		0xddcccc,
+		0x666666
+	);
+	setting.setTextColor(
+		"#a66",
+		"#a66",
+		"#a66",
+		"#333"
+	);
+
+	return this.makeTimeButton(setting, buttonText, eventHandler);
+}
+
+Timer.prototype.makeTimerButtonSetting = function(x, y) {
+	var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+	// setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	// setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.strokeWidthPx = 3;
+	setting.roundAmount = 1;
+	setting.x = x;
+	setting.y = y;
+	setting.width = 70;
+	setting.height = 25;
+
+	return setting;
+}
+
+Timer.prototype.makeTimeButton = function(setting, buttonText, eventHandler) {
+	var button = new RoundRectButton(setting, null, buttonText, eventHandler);
+	button.text.fontSize = 18;
+
+	return button;
+}
+
+Timer.prototype.timePlus = function(amount, type) {
+	console.log(amount + type);
+
+	// if(type == "hour")
+	this.timeLeft += amount * 60;
+	this.updateTimeText();
+	this.sendTimeLeftToServer();
+}
+
+Timer.prototype.timeMinus = function(amount, type) {
+	console.log(amount + type);
+
+	// if(type == "hour") {
+	// 	var totalMinusMinute = amount * Timer.TIME_MINUTES_FOR_HOUR;
+	// 	if(totalMinusMinute - )
+	// }
+	this.timeLeft -= amount * 60;
+	if(this.timeLeft < 0)
+		this.timeLeft = 0;
+	this.updateTimeText();
+	this.sendTimeLeftToServer();
+}
+
+
+Timer.prototype.setTime =function(sec) {
+	// console.log("time up : " + min);
+
+	this.timeLeft += sec;
+	this.updateTimeText();
+}
+
+Timer.prototype.timeUp = function(sec) {
+	// console.log("time up : " + sec);
+
+	this.timeLeft += sec;
+	this.updateTimeText();
+	// this.sendTimeLeftToServer();
+}
+
+Timer.prototype.timeDown = function(sec) {
+	// console.log("time down : " + sec);
+
+	this.timeLeft -= sec;
+	if(this.timeLeft < 0)
+		this.timeLeft = 0;
+	this.updateTimeText();
+	// this.sendTimeLeftToServer();
+}
+
+Timer.prototype.updateTimeVariables = function() {
+	this.timeLeftHour = parseInt(this.timeLeft / (60 * 60));
+	this.timeLeftMinute = parseInt((this.timeLeft % (60 * 60)) / 60);
+	this.timeLeftSecond = this.timeLeft % 60;
+}
+
+Timer.prototype.updateTimeText = function() {
+	// this.updateTimeVariables();
+	// this.timerText.text = this.getTimeWithTimeFormat();
+}
+
+Timer.prototype.getTwoDigitNumber = function(value) {
+	var absValue = value;
+	if(absValue < 0)
+		absValue *= -1;
+
+	if(absValue < 10)
+		return "0" + absValue;
+	else
+		return absValue;
+}
+
+Timer.prototype.getTimeWithTimeFormat = function() {
+	if(this.timeLeft > 0)
+		return this.getTwoDigitNumber(this.timeLeftHour)
+			+ ":" + this.getTwoDigitNumber(this.timeLeftMinute)
+		  	+ ":" + this.getTwoDigitNumber(this.timeLeftSecond);
+	else
+		return "-" + this.getTwoDigitNumber(this.timeLeftHour)
+			+ ":" + this.getTwoDigitNumber(this.timeLeftMinute)
+		  	+ ":" + this.getTwoDigitNumber(this.timeLeftSecond);
+}
+
+Timer.prototype.sendTimeLeftToServer = function() {
+	return;
+
+	// console.log(this.timeLeft);
+	// console.log(playerUserID);
+
+	xhr = new XMLHttpRequest();
+	xhr.open('POST', 'make_last_timestamp.php', true);
+	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+	var param = 'UserID=' + playerUserID + '&Time=' + this.timeLeft;
+	xhr.send(param);
+},
+
+
+
+Timer.Timer_CENTER_OFFSET_X		= 40;
+
+Timer.TIME_MILLISECONDS			= 1000;
+
+Timer.TIME_MINUTES_FOR_HOUR		= 60;
+Timer.TIME_SECONDS_FOR_MINUTE	= 60;
+
+Timer.TIME_DEFAULT_SEC
+	= Timer.TIME_MINUTES_FOR_HOUR * Timer.TIME_SECONDS_FOR_MINUTE;	// 60 min * 60 sec

src/web/client/license_timer.html

@@ -56,6 +56,7 @@
 		<!-- game : source files -->
 		<script src="../../game/license_timer/loading.js"></script>
 		<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/game.js"></script>
 		<script src="../../game/license_timer/main.js"></script>