Add: JustOnTimer app

src/game/mouse/grilled_meat/loading.js

@@ -36,12 +36,15 @@ var Loading = {
 		game.load.image('meat1', '../../../resources/image/object/grilled_meat/meat1.png');
 		game.load.image('meat2', '../../../resources/image/object/grilled_meat/meat2.png');
 		game.load.image('meat3', '../../../resources/image/object/grilled_meat/meat3.png');
+		game.load.image('meatBonus', '../../../resources/image/object/grilled_meat/meat_bonus.png');
 		game.load.image('meatWellDone1', '../../../resources/image/object/grilled_meat/meat1_welldone.png');
 		game.load.image('meatWellDone2', '../../../resources/image/object/grilled_meat/meat2_welldone.png');
 		game.load.image('meatWellDone3', '../../../resources/image/object/grilled_meat/meat3_welldone.png');
+		game.load.image('meatBonusWellDone', '../../../resources/image/object/grilled_meat/meat_bonus_welldone.png');
 		game.load.image('meatBurn1', '../../../resources/image/object/grilled_meat/meat1_burn.png');
 		game.load.image('meatBurn2', '../../../resources/image/object/grilled_meat/meat2_burn.png');
 		game.load.image('meatBurn3', '../../../resources/image/object/grilled_meat/meat3_burn.png');
+		game.load.image('meatBonusBurn', '../../../resources/image/object/grilled_meat/meat_bonus_burn.png');
 
 		game.load.image('smoke', '../../../resources/image/ui/smoke.png');
 

src/game/mouse/just_on_time/just_on_time.js

@@ -0,0 +1,175 @@
+JustOnTime.prototype = Object.create(Phaser.State.prototype);
+JustOnTime.constructor = JustOnTime;
+
+function JustOnTime() {
+}
+
+JustOnTime.prototype.preload = function() {
+	game.load.image('icon_fullscreen',	'../../../resources/image/icon/fullscreen_white.png');
+
+	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
+}
+
+JustOnTime.prototype.create = function() {
+	this.dbConnectManager = new DBConnectManager();
+	sessionStorageManager.setRecord(0);
+
+	this.game.stage.backgroundColor = "#000000";	// '#4d4d4d';
+
+	sessionStorageManager.setIsNewAppHighestRecord(false);
+
+	var experienceAppTimer = new ExperienceAppTimer();
+	experienceAppTimer.setTimeOverListener(
+		(function() { this.timeOver(); }).bind(this)
+	);
+
+	// keyboard shortcut
+	this.keyboardShortcut = new KeyboardShortcut();
+	this.keyboardShortcut.addCallback(
+		Phaser.KeyCode.ESC,	// keyCode
+		null,	// keyDownHandler
+		(function() { this.back(); }).bind(this),	// keyUpHandler
+		"card matching"	// callerClassName
+	);
+
+	// top ui
+	var screenTopUI = new ScreenTopUI();
+	screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
+	screenTopUI.makeFullScreenButton();
+
+	this.scoreManager = new ScoreManager();
+	this.scoreBoard = new ScoreBoard();
+	this.scoreManager.addOnChangeScoreListener(
+		(function(score) {
+			sessionStorageManager.setRecord(score);
+			this.scoreBoard.printScore(NumberUtil.numberWithCommas(score));
+		}).bind(this)
+	);
+	this.scoreManager.addOnChangeHighScoreListener(
+		(function(highScore) {
+			// console.log(highScore);
+			// sessionStorageManager.setAppHighestRecord(highScore);
+			sessionStorageManager.setIsNewBestRecrd(true);
+			// this.screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
+		}).bind(this)
+	);
+
+	this.stageTimer = new StageTimer(
+		JustOnTime.GAME_TIME_SEC,
+		(function() {
+			this.setClickEnable(false);
+
+			this.timeOver();
+		}).bind(this)
+	);
+
+	this.initVariables();
+
+
+	// game stage
+	game.stage.backgroundColor = '#4d4d4d';
+	graphics = game.add.graphics(0, 0);
+
+
+	// bottom ui
+	var screenBottomUI = new ScreenBottomUI();
+	screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
+	screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
+	screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
+
+
+	// // this.countDown();
+}
+
+JustOnTime.prototype.initVariables = function() {
+}
+
+JustOnTime.prototype.fontLoaded = function() {
+
+	this.leftTimerStage = new TimerStage(
+		JustOnTime.TIMER_STAGE_POS_X, JustOnTime.TIMER_STAGE_POS_Y
+	);
+	this.rightTimerStage = new TimerStage(
+		GAME_SCREEN_SIZE.x - JustOnTime.TIMER_STAGE_POS_X, JustOnTime.TIMER_STAGE_POS_Y
+	);
+
+	// this.startGame();
+}
+
+JustOnTime.prototype.back = function() {
+	sessionStorageManager.resetPlayingAppData();
+	location.href = '../../web/client/main_menu.html';
+}
+
+/*
+JustOnTime.prototype.countDown = function() {
+	var style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
+	this.countDownText = game.add.text(0, 0, "", style);
+	this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
+	this.countDownText.stroke = "#333";
+	this.countDownText.strokeThickness = 50;
+
+	this.countDownNumber = 3;
+	if(isDebugMode())
+		this.countDownNumber = 1;
+	this.tweenCountDown();
+}
+
+JustOnTime.prototype.tweenCountDown = function() {
+	if(this.countDownNumber === 0) {
+		this.startGame();
+		return;
+	}
+
+	this.countDownText.text = this.countDownNumber.toString();
+	this.countDownText.alpha = 1;
+
+	var countDownTween = game.add.tween(this.countDownText);
+	countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
+	countDownTween.onComplete.add(this.tweenCountDown, this);
+
+	this.countDownNumber--;
+}
+*/
+
+JustOnTime.prototype.startGame = function() {
+	this.stageTimer.start();
+}
+
+
+
+JustOnTime.prototype.timeOver = function() {
+	var timeOverText = new TimeOverText();
+	if(!isExperienceMaestroAccount())
+		this.updateResultRecord();
+
+	// game.time.events.remove(this.timeEvent);
+
+	for(var i = 0; i < this.gameTimeEvents.length; i++) {
+		game.time.events.remove(this.gameTimeEvents[i]);
+	}
+	this.gameTimeEvents = [];
+
+	game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
+}
+
+JustOnTime.prototype.updateResultRecord = function() {
+	if(sessionStorageManager.getMaestroAccountType() < 100) {	// experience account
+		this.dbConnectManager.updateResultRecord(
+			sessionStorageManager.getMaestroID(),
+			sessionStorageManager.getPlayerID(),
+			sessionStorageManager.getPlayingAppID(),
+			sessionStorageManager.getRecord()
+		);
+	}
+}
+
+JustOnTime.prototype.goResult = function() {
+	location.href = '../../web/client/result.html';
+}
+
+
+
+JustOnTime.GAME_TIME_SEC		= 60;
+JustOnTime.TIMER_STAGE_POS_X	= 300;
+JustOnTime.TIMER_STAGE_POS_Y	= 200;

src/game/mouse/just_on_time/loading.js

@@ -0,0 +1,66 @@
+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.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('Game');
+			return;
+		}
+
+		this.state.start('Game');
+		// this.startMenu();
+		// this.startTypingTestStage();
+		// this.startTypingTestResult();
+	}
+}

src/game/mouse/just_on_time/main.js

@@ -0,0 +1,39 @@
+/////////////////////////////
+// Main game
+
+var CONTENT_ID = "Just on time";
+
+var game = new Phaser.Game(
+	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
+	Phaser.CANVAS, CONTENT_ID,
+	this, false, false
+);
+
+WebFontConfig = {
+	//  'active' means all requested fonts have finished loading
+	//  We set a 1 second delay before calling 'createText'.
+	//  For some reason if we don't the browser cannot render the text the first time it's created.
+	active: function() { game.time.events.add(Phaser.Timer.SECOND * 0.1, fontLoaded, this); },
+
+	//  The Google Fonts we want to load (specify as many as you like in the array)
+	google: {
+		families: [
+			'Orbitron:800',
+			'Nanum Gothic:400, 700, 800',
+			'Nanum Gothic Coding:400, 700',
+			// 'Nanum Brush Script',
+			// 'Nanum Pen Script'
+		]
+		// families: ['Nanum Brush Script']
+	}
+};
+
+
+var justOnTime = new JustOnTime();
+
+game.state.add('JustOnTime', justOnTime);
+game.state.start('JustOnTime');
+
+function fontLoaded() {
+	justOnTime.fontLoaded();
+}

src/game/mouse/just_on_time/time_score_record.js

@@ -0,0 +1,37 @@
+TimeScoreRecord.prototype = Object.create(Phaser.State.prototype);
+TimeScoreRecord.constructor = TimeScoreRecord;
+
+function TimeScoreRecord(x, y) {
+	this.timeText = new TimerText(x + TimeScoreRecord.TIMER_OFFSET_X, y, 30);
+	this.scoreText = this.makeScoreText(x + TimeScoreRecord.SCORE_OFFSET_X, y);
+
+	return this;
+}
+
+
+TimeScoreRecord.prototype.makeScoreText = function(x, y) {
+	var scoreText = game.add.text(x, y, "");
+	scoreText.anchor.set(0, 0.5);
+	// scoreText.font = "Orbitron";
+	scoreText.fontSize = 30;
+	scoreText.fontWeight = "bold";	// "normal";
+	scoreText.style.fill = "white";
+	scoreText.stroke = "#000000";
+	scoreText.strokeThickness = 6;
+	scoreText.text = "3";
+
+	return scoreText;
+}
+
+TimeScoreRecord.prototype.setContent = function(time, score) {
+	this.timeText.setText(time);
+	this.scoreText.text = score;
+}
+
+TimeScoreRecord.prototype.setTextColorString = function(colorString) {
+	this.timeText.setTextColorString(colorString);
+	this.scoreText.style.fill = colorString;
+}
+
+TimeScoreRecord.TIMER_OFFSET_X	= -50;
+TimeScoreRecord.SCORE_OFFSET_X	= 90;

src/game/mouse/just_on_time/timer_stage.js

@@ -0,0 +1,48 @@
+TimerStage.prototype = Object.create(Phaser.State.prototype);
+TimerStage.constructor = TimerStage;
+
+function TimerStage(x, y) {
+	this.posX = x;
+	this.posY = y;
+
+	this.mainTimerText = new TimerText(x, y, 60);
+	this.timerButton = this.makeTimeStopButton(x, y + TimerStage.BUTTON_OFFSET_Y);
+	this.timeScoreRecordArray = new Array();
+
+	this.makeTimeScoreRecordArray();
+
+	return this;
+}
+
+
+TimerStage.prototype.makeTimeStopButton = function(x, y) {
+	var setting = new RoundRectButtonSetting(x, y, 200, 100);
+	setting.fontStyle.fontWeight = "bold";
+
+	var timerButton = new RoundRectButton(
+		setting,
+		RoundRectButton.NONE_ICON, "시작",
+		(function() { this.buttonClicked(); }).bind(this)
+	);
+	return timerButton;
+}
+
+TimerStage.prototype.buttonClicked = function() {
+	this.mainTimerText.setText("02.00");
+}
+
+TimerStage.prototype.makeTimeScoreRecordArray = function() {
+	for(var i = 0; i < TimerStage.RECORD_COUNT; i++) {
+		var timeScoreRecord = new TimeScoreRecord(
+			this.posX,
+			this.posY + TimerStage.RECORD_OFFSET_Y + TimerStage.RECORD_GAP_Y * i
+		);
+		this.timeScoreRecordArray.push(timeScoreRecord);
+	}
+}
+
+TimerStage.BUTTON_OFFSET_Y		= 100;
+
+TimerStage.RECORD_OFFSET_Y		= 200;
+TimerStage.RECORD_GAP_Y			= 50;
+TimerStage.RECORD_COUNT			= 5;

src/game/mouse/just_on_time/timer_text.js

@@ -0,0 +1,32 @@
+TimerText.prototype = Object.create(Phaser.State.prototype);
+TimerText.constructor = TimerText;
+
+function TimerText(x, y, fontSize) {
+	this.digitText = this.makeTimerText(x, y, fontSize);
+	console.log(this.digitText);
+
+	return this;
+}
+
+
+TimerText.prototype.makeTimerText = function(x, y, fontSize) {
+	var digitText = game.add.text(x, y, "");
+	digitText.anchor.set(0.5, 0.5);
+	digitText.font = "Orbitron";
+	digitText.fontSize = fontSize;
+	digitText.fontWeight = "bold";	// "normal";
+	digitText.style.fill = "white";
+	digitText.stroke = "#000000";
+	digitText.strokeThickness = 6;
+	digitText.text = "03.00";
+
+	return digitText;
+}
+
+TimerText.prototype.setText = function(contents) {
+	this.digitText.text = contents;
+}
+
+TimerText.prototype.setTextColorString = function(colorString) {
+	this.digitText.style.fill = colorString;
+}

src/web/client/just_on_time.html

@@ -0,0 +1,98 @@
+<!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="시간을 맞춰라 - 마우스 클릭 연습 앱 | 초코마에 ‧ Just on time - Mouse click practice app | ChocoMae">
+
+		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
+		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+
+		<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
+		<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+		<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.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/lib/score_manager.js"></script>
+		<script src="../../game/lib/heart_manager.js"></script>
+		<script src="../../game/lib/global/global_variables.js"></script>
+
+		<!-- library source files -->
+		<script src="../../game/lib/util/number_util.js"></script>
+		<script src="../../game/lib/util/record_util.js"></script>
+
+		<script src="../../game/lib/text/combo_text.js"></script>
+		<script src="../../game/lib/text/input_type_text.js"></script>
+		<script src="../../game/lib/text/time_over_text.js"></script>
+		<script src="../../game/lib/text/score_board.js"></script>
+		<script src="../../game/lib/text/score_text.js"></script>
+		<script src="../../game/lib/text/screen_top_ui.js"></script>
+		<script src="../../game/lib/text/screen_bottom_ui.js"></script>
+
+		<script src="../../game/lib/keyboard_shortcut.js"></script>
+		<script src="../../game/lib/history_record_manager.js"></script>
+		<script src="../../game/lib/heart_gauge.js"></script>
+		<script src="../../game/lib/button/round_rect_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/db_connect_manager.js"></script>
+		<script src="../../game/lib/experience_app_timer.js"></script>
+		<script src="../../game/lib/stage_timer.js"></script>
+
+		<!-- Card matching : source files -->
+		<script src="../../game/mouse/just_on_time/timer_text.js"></script>
+		<script src="../../game/mouse/just_on_time/time_score_record.js"></script>
+		<script src="../../game/mouse/just_on_time/timer_stage.js"></script>
+
+		<script src="../../game/mouse/just_on_time/just_on_time.js"></script>
+		<script src="../../game/mouse/just_on_time/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+
+
+		<script>
+			$(document).ready(function() {
+				$('#client_refresh').load("./../module/client_refresh.html");
+			});
+		</script>
+
+	</head>
+
+	<body>
+		<div id="Just on time" style="text-align:center;"></div>
+		<div id="client_refresh"></div>
+	</body>
+</html>