Add: LicenseTimer - html, js

src/game/global/global_variables.js

@@ -43,9 +43,13 @@ var sessionStorageManager = new SessionStorageManager();
 
 function isLogin() {
 	var filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
-	// console.log(filename);
 
-	return filename === "login.html" ? true : false;
+	if(filename === "login.html")
+		return true;
+	else if(filename === "license_timer.html")
+		return true;
+
+	return false;
 }
 
 function goLogin() {

src/game/license_timer/game.js

@@ -0,0 +1,213 @@
+var LicenseTimer = {
+
+	create: function() {
+		game.stage.backgroundColor = '#4d4d4d';
+
+		this.initVariables();
+
+		// keyboard shortcut
+		this.keyboardShortcut = new KeyboardShortcut();
+		this.keyboardShortcut.addCallback(
+			Phaser.KeyCode.ESC,	// keyCode
+			null,	// keyDownHandler
+			(function() { this.back(); }).bind(this),	// keyUpHandler
+			"keyboard_test"	// callerClassName
+		);
+
+		// top ui
+		var screenTopUI = new ScreenTopUI();
+		screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
+		screenTopUI.makeFullScreenButton();
+
+		var titleTextStyle = { font: "36px Arial", fill: "#fff", align: "center"};
+		this.titleText = game.add.text(game.world.centerX, 35, "자격증 타이머", titleTextStyle);
+		this.titleText.anchor.set(0.5);
+
+		this.makeTimer();
+
+
+		// bottom ui
+		this.screenBottomUI = new ScreenBottomUI();
+		// screenBottomUI.printLeftText();
+		this.screenBottomUI.printCenterText("점수 등록은 선생님에게 부탁하세요.");
+		// screenBottomUI.printRightText();
+	},
+
+
+	initVariables: function() {
+		this.subject = "ITQ 파워포인트";
+
+		this.prevTime = null;
+
+		this.timeLeft = 0;
+		this.timeLeftHour = 0;
+		this.timeLeftMinute = 0;
+		this.timeLeftSecond = 0;
+
+		this.timerEvent = null;
+	},
+
+	makeTimer: function() {
+		// top
+		var bar = game.add.graphics();
+		bar.beginFill(0x000000, 0.2);
+		bar.drawRect(0, 60, GAME_SCREEN_SIZE.x, 180);
+
+		// Timer
+		var timerCenterX = game.world.centerX - 30;
+		var timerTextStyle = { font: "bold 120px Arial", fill: "#fff", align: "center"};
+		this.timerText = game.add.text(timerCenterX, 160, "00:00:00", timerTextStyle);
+		this.timerText.anchor.set(0.5);
+		// .setTextBounds(-200, 0, 400, 200)
+		this.timerText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		var watchPosY = 100;
+		var watchTextStyle = { font: "24px Arial", fill: "#555", align: "center"};
+		this.hourText = game.add.text(timerCenterX - 175, watchPosY, "시간", watchTextStyle);
+		this.hourText.anchor.set(0.5);
+
+		this.minText = game.add.text(timerCenterX, watchPosY, "분", watchTextStyle);
+		this.minText.anchor.set(0.5);
+
+		this.secText = game.add.text(timerCenterX + 170, watchPosY, "초", watchTextStyle);
+		this.secText.anchor.set(0.5);
+
+
+		var setting = new RoundRectButtonSetting(0, 0, 0, 0);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+
+		// set timer buttons
+		setting.x = 100;
+		setting.y = 150;
+		setting.width = 140;
+		setting.height = 140;
+		var set60SecButton = new RoundRectButton(
+			setting,
+			null, "1시간",
+			(function() { console.log("1 hour"); }).bind(this)
+		);
+
+		// modify timer buttons
+		setting.x = GAME_SCREEN_SIZE.x - 210;
+		setting.y = 120;
+		setting.width = 100;
+		setting.height = 50;
+		var plus10minButton = new RoundRectButton(
+			setting,
+			null, "+10분",
+			(function() { console.log("+10 min"); }).bind(this)
+		);
+
+		setting.x = GAME_SCREEN_SIZE.x - 80;
+		var plus1minButton = new RoundRectButton(
+			setting,
+			null, "+1분",
+			(function() { console.log("+1 min"); }).bind(this)
+		);
+
+		setting.x = GAME_SCREEN_SIZE.x - 210;
+		setting.y = 180;
+		var minus10minButton = new RoundRectButton(
+			setting,
+			null, "-10분",
+			(function() { console.log("-10 min"); }).bind(this)
+		);
+
+		setting.x = GAME_SCREEN_SIZE.x - 80;
+		var minus1minButton = new RoundRectButton(
+			setting,
+			null, "-1분",
+			(function() { console.log("-1 min"); }).bind(this)
+		);
+	},
+
+	makeStartButtonGroup: function() {
+
+	},
+
+	makePlayingButtonGroup: function() {
+
+	},
+
+	makePausedButtonGroup: function() {
+
+	},
+
+	makeStopedButtonGroup: function() {
+
+	},
+
+	back: function() {
+		sessionStorageManager.resetPlayingAppData();
+		// location.href = '../../web/client/menu_typing_test.html';
+		game.state.start('Login');
+	},
+
+
+	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);
+	},
+
+}
+
+
+LicenseTimer.TIME_DEFAULT_SEC	= 60 * 60;	// 60 min * 60 sec
+LicenseTimer.TIME_MILLISECONDS	= 1000;
+

src/game/license_timer/loading.js

@@ -0,0 +1,85 @@
+var Loading = {
+
+	preload: function() {
+		// game.load.image('loadingbar', './image/phaser.png');
+	},
+
+	create: function() {
+		// var userID = sessionStorage.getItem("UserID");
+		// console.log("userID : " + userID);
+
+		// game.stage.backgroundColor = '#4d4d4d';
+
+		// //	Progress report
+  //   	this.textProgress = game.add.text(game.world.centerX, 100, '로딩중 . . .', textStyleBasic);
+		// this.textProgress.anchor.setTo(0.5, 0.4);
+		// this.textProgress.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// // Preload bar
+		// this.preloadBar = this.add.sprite(game.world.centerX, game.world.centerY, 'loadingbar');
+		// this.preloadBar.anchor.setTo(0.5);
+		// this.preloadBar.alpha = 0;
+
+		game.load.onFileComplete.add(this.fileComplete, this);
+		game.load.onLoadComplete.add(this.loadComplete, this);
+
+		this.startLoading();
+	},
+
+	startLoading: function() {
+		game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
+
+		// game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('d', '../../../resources/image/icon/fullscreen_white.png');
+		// game.load.image('a', './image/phaser.png');
+		// game.load.image('b', './image/phaser.png');
+		// game.load.image('c', './image/phaser.png');
+		// game.load.image('d', './image/phaser.png');
+		// game.load.image('e', './image/phaser.png');
+		// game.load.image('g', './image/phaser.png');
+		// game.load.image('e', './image/phaser.png');
+		// game.load.image('f', './image/phaser.png');
+		// game.load.image('g', './image/phaser.png');
+		// game.load.image('h', './image/phaser.png');
+
+		// game.load.image('phaser', './image/phaser.png');
+		// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
+		// game.load.image('star', './image/star_particle.png');
+		// game.load.image('medal_gold', './image/medal_gold.png');
+		// game.load.image('medal_silver', './image/medal_silver.png');
+		// game.load.image('medal_bronze', './image/medal_bronze.png');
+
+		game.load.start();
+	},
+
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		// this.preloadBar.alpha = progress / 100;
+
+		// console.log('progress : ' + progress);
+
+		// text.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
+
+		// var newImage = game.add.image(x, y, cacheKey);
+		// newImage.scale.set(0.3);
+
+		// x += newImage.width + 20;
+		// if (x > 700)
+		// {
+		// 	x = 32;
+		// 	y += 332;
+		// }
+	},
+
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		// this.preloadBar.alpha = 1;
+
+		// if(isDebugMode()) {
+		// 	this.state.start('Login');
+		// 	return;
+		// }
+
+		this.state.start('Login');
+	},
+}

src/game/license_timer/login.js

@@ -0,0 +1,198 @@
+var Login = {
+
+	preload: function() {
+		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+		game.load.image('icon_home', '../../../resources/image/icon/home.png');
+	},
+
+	create: function() {
+		// sessionStorageManager.resetPlayingAppData();
+
+		this.game.stage.backgroundColor = '#4d4d4d';
+		this.textStyle = { font: "bold 32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "middle" };
+
+		// keyboard shortcut
+		this.keyboardShortcut = new KeyboardShortcut();
+		this.keyboardShortcut.addCallback(
+			Phaser.KeyCode.ESC,	// keyCode
+			null,	// keyDownHandler
+			(function() { this.back(); }).bind(this),	// keyUpHandler
+			"login"	// callerClassName
+		);
+		this.keyboardShortcut.addCallback(
+			Phaser.KeyCode.ENTER,	// keyCode
+			null,	// keyDownHandler
+			(function() { this.startMenu(); }).bind(this),	// keyUpHandler
+			"start"	// callerClassName
+		);
+
+		// top ui
+		var screenTopUI = new ScreenTopUI();
+		screenTopUI.makeHomeButton( (function() { this.back(); }).bind(this) );
+		screenTopUI.makeFullScreenButton();
+
+
+
+		var textX = this.game.world.centerX - 320;
+		this.makeMaestroNameText(textX, 200);
+		this.makeNameText(textX, 300);
+		this.makeEnterCodeText(textX, 360);
+		if(sessionStorageManager.getMaestroName() != null) {
+			this.inputTextMaestroName.canvasInput.value(sessionStorageManager.getMaestroName());
+		} else {
+			if(isDebugMode()) {
+				this.inputTextMaestroName.canvasInput.value("삼화초");
+				this.inputTextName.canvasInput.value("박지상");
+				this.inputTextEnterCode.canvasInput.value("760621");
+			}
+		}
+
+		if(sessionStorageManager.getMaestroID() === null)
+			this.inputTextMaestroName.canvasInput.focus();
+		else
+			this.inputTextName.canvasInput.focus();
+
+		this.makeStartButton(game.world.centerX, game.world.centerY + 100);
+
+		this.makeInfoText();
+
+
+		if(isDebugMode()) {
+			sessionStorageManager.setMaestroID(3);
+			sessionStorageManager.setMaestroAccountType(4);
+			sessionStorageManager.setPlayerID(35);
+			sessionStorageManager.setPlayerName("박지상");
+			sessionStorageManager.setPlayerAccountType(0);
+
+			game.state.start('LicenseTimer');
+		}
+	},
+
+	back: function() {
+		sessionStorageManager.clear();
+		location.href = '../../web/main/index.html';
+	},
+
+	makeMaestroNameText: function(x, y) {
+		this.makeTextField(x, y, "마에스트로 계정 :");
+		this.inputTextMaestroName = this.makeInputTypeText(x, y, "");
+		this.inputTextMaestroName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+	},
+
+	makeNameText: function(x, y) {
+		this.makeTextField(x, y, "이름 :");
+		this.inputTextName = this.makeInputTypeText(x, y, "");
+		this.inputTextName.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+	},
+
+	makeEnterCodeText: function(x, y) {
+		this.makeTextField(x, y, "입장번호 :");
+		this.inputTextEnterCode = this.makeInputTypeText(x, y, "");
+		this.inputTextEnterCode.canvasInput.placeHolder("입력 후 [ Tab ]키를 누르세요");
+	},
+
+	makeTextField: function(x, y, text) {
+		return game.add.text(x, y, text, this.textStyle)
+		.setTextBounds(0, 0, 200, 0)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+		.boundsAlignH = 'right';
+	},
+
+	makeInputTypeText: function(x, y, text) {
+		var inputText = new InputTypeText(x + 420, 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;
+	},
+
+	makeStartButton: function(x, y) {
+		var setting = new RoundRectButtonSetting(x, y, 200, 100);
+		setting.fontStyle.fontWeight = "bold";
+
+		var startButton = new RoundRectButton(
+			setting,
+			RoundRectButton.NONE_ICON, "시작",
+			(function() { this.startMenu(); }).bind(this)
+		);
+		startButton.addShortcutText("Enter");
+	},
+
+	makeInfoText: function(x, y) {
+		var textStyle = { font: "30px Arial", fill: "#faa" };
+		this.infoText = game.add.text(game.world.centerX, 640, "", textStyle);
+		this.infoText.anchor.set(0.5);
+		this.infoText.stroke = "#333";
+		this.infoText.strokeThickness = 3;
+	},
+
+
+	startMenu: function() {
+		var maestroName = this.inputTextMaestroName.canvasInput._value;
+		sessionStorageManager.setPlayerName(this.inputTextName.canvasInput._value);
+		var enterCode = this.inputTextEnterCode.canvasInput._value;
+
+		if(maestroName == "") {
+			this.infoText.text = "마에스트로 계정 이름을 입력해주세요";
+			this.inputTextMaestroName.canvasInput.focus();
+			return;
+		} else if(sessionStorageManager.getPlayerName() == "") {
+			this.infoText.text = "학생의 이름을 입력해주세요";
+			this.inputTextName.canvasInput.focus();
+			return;
+		} else if(enterCode == "") {
+			this.infoText.text = "학생의 입장번호를 입력해주세요";
+			this.inputTextEnterCode.canvasInput.focus();
+			return;
+		}
+
+		var dbConnectManager = new DBConnectManager();
+		dbConnectManager.requestCheckPlayerLogin(
+			maestroName,
+			sessionStorageManager.getPlayerName(),
+			enterCode,
+			(function(jsonData) {
+				this.loginSucceeded(jsonData);
+			}).bind(this),
+			(function(jsonData) {
+				this.loginFailed(jsonData);
+			}).bind(this)
+		);
+	},
+
+	loginSucceeded: function(jsonData) {
+		sessionStorageManager.setMaestroID(jsonData['MaestroID']);
+		sessionStorageManager.setMaestroAccountType(jsonData['MaestroAccountType']);
+		sessionStorageManager.setPlayerID(jsonData['PlayerID']);
+		sessionStorageManager.setPlayerName(jsonData['PlayerName']);
+		sessionStorageManager.setPlayerAccountType(jsonData['PlayerAccountType']);
+
+		sessionStorageManager.setPlayingAppName("menu");
+		// location.href = '../../web/client/menu_app.html';
+
+		console.log("===== after login =====");
+		console.log(sessionStorageManager.playerID);
+
+		game.state.start('LicenseTimer');
+	},
+
+	loginFailed: function(jsonData) {
+		sessionStorageManager.clear();
+
+		// show retry message
+		// console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
+
+		if(jsonData["error"] !== null) {
+			this.infoText.text = jsonData["error"];
+		}
+	}
+
+}

src/game/license_timer/main.js

@@ -0,0 +1,16 @@
+/////////////////////////////
+// Main game
+
+var CONTENT_ID = "LicenseTimer";
+
+var game = new Phaser.Game(
+	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
+	Phaser.CANVAS, CONTENT_ID,
+	this, false, false
+);
+
+game.state.add('Loading', Loading);
+game.state.add('Login', Login);
+game.state.add('LicenseTimer', LicenseTimer);
+
+game.state.start('Loading');

src/web/client/license_timer.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+		<meta charset="UTF-8">
+
+		<!-- Global site tag (gtag.js) - Google Analytics -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85912788-2"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag(){dataLayer.push(arguments);}
+			gtag('js', new Date());
+
+			gtag('config', 'UA-85912788-2');
+		</script>
+
+		<!-- Google Tag Manager -->
+		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+		})(window,document,'script','dataLayer','GTM-N8PB4F3');</script>
+		<!-- End Google Tag Manager -->
+
+		<title>타이머 | 초코마에</title>
+		<meta name="description" CONTENT="타이머 - 자격증 시험용 타이머 앱 | 초코마에 ‧ Timer - timer app for license test | ChocoMae">
+
+		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
+		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+
+		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
+		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script> -->
+		<script src="../../../resources/js/phaser.min.js"></script>
+
+		<!-- global source files -->
+		<script src="../../game/lib/session_storage_manager.js"></script>
+		<script src="../../game/global/global_variables.js"></script>
+
+		<!-- library source files -->
+		<script src="../../game/lib/keyboard_shortcut.js"></script>
+		<script src="../../game/lib/string_util.js"></script>
+		<script src="../../game/lib/number_util.js"></script>
+		<script src="../../game/lib/record_util.js"></script>
+		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/button/round_rect_button.js"></script>
+		<script src="../../game/lib/button/home_button.js"></script>
+		<script src="../../game/lib/button/back_button.js"></script>
+		<script src="../../game/lib/button/fullscreen_button.js"></script>
+		<script src="../../game/lib/button/game_app_button.js"></script>
+		<script src="../../game/lib/db_connect_manager.js"></script>
+		<script src="../../game/lib/screen_top_ui.js"></script>
+		<script src="../../game/lib/screen_bottom_ui.js"></script>
+
+
+		<!-- game : source files -->
+		<script src="../../game/license_timer/loading.js"></script>
+		<script src="../../game/license_timer/login.js"></script>
+		<script src="../../game/license_timer/game.js"></script>
+		<script src="../../game/license_timer/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="LicenseTimer" style="text-align:center;"></div>
+	</body>
+</html>