Fix: draw popup image and rectangle

src/game/license_simulator/itq/loading.js

@@ -32,14 +32,22 @@ var Loading = {
 
 		// SpriteIconTimer.loadResources();
 
-		game.load.image('windows_basic_koas', '../../../resources/image/license/itq/windows_basic_koas.png');
+		game.load.image('windows_wallpaper', '../../../resources/image/license/itq/windows_basic_koas.png');
-		game.load.image('pen', '../../../resources/image/confirm_tester_number.png');
+		game.load.image('wait_paper', '../../../resources/image/license/itq/wait_paper.png');
-		game.load.image('itq_itq_testsheet_small', '../../../resources/image/itq_itq_testsheet_small.png');
+
-		// game.load.image('register_tester_number', '../../../resources/image/register_tester_number.png');
+		game.load.image('pen', '../../../resources/image/license/itq/pen.png');
-		// game.load.image('register_version', '../../../resources/image/register_version.png');
+		game.load.image('itq_testsheet_id', '../../../resources/image/license/itq/itq_testsheet_id.png');
-		// game.load.image('send_file', '../../../resources/image/send_file.png');
+		game.load.image('itq_testsheet_small', '../../../resources/image/license/itq/itq_testsheet_small.png');
-		// game.load.image('wait_paper', '../../../resources/image/wait_paper.png');
+
-		// game.load.image('windows_basic_koas_execute', '../../../resources/image/windows_basic_koas_execute.png');
+		game.load.image('popup_check_info', '../../../resources/image/license/itq/popup_check_info.png');
+		game.load.image('popup_check_saved_file', '../../../resources/image/license/itq/popup_check_saved_file.png');
+		game.load.image('popup_check_success_transfer', '../../../resources/image/license/itq/popup_check_success_transfer.png');
+		game.load.image('popup_register', '../../../resources/image/license/itq/popup_register.png');
+		game.load.image('popup_save_filename', '../../../resources/image/license/itq/popup_save_filename.png');
+		game.load.image('popup_save_folder', '../../../resources/image/license/itq/popup_save_folder.png');
+		game.load.image('popup_select_version', '../../../resources/image/license/itq/popup_select_version.png');
+		game.load.image('program_control_center_after_transfer', '../../../resources/image/license/itq/program_control_center_after_transfer.png');
+		game.load.image('program_control_center', '../../../resources/image/license/itq/program_control_center.png');
 
 
 		game.load.start();

src/game/license_simulator/itq/simulator.js

@@ -1,25 +1,41 @@
-var GAME_SCREEN_SIZE = { x: 1024, y: 768 }
+var GAME_SCREEN_SIZE = { x: 1024, y: 768 };
+
+var BG_IMAGE_FILENAMES = [
+	"windows_wallpaper",
+	"wait_paper",
+];
+
+var POPUP_IMGE_FILENAMES = [
+	"pen",
+	"itq_testsheet_id",
+	"itq_testsheet_small",
+
+	"popup_check_info",
+	"popup_check_saved_file",
+	"popup_check_success_transfer",
+	"popup_register",
+	"popup_save_filename",
+	"popup_save_folder",
+	"popup_select_version",
+	"program_control_center_after_transfer",
+	"program_control_center",
+];
+
+var BUTTON_WIDTH = 80;
+var BUTTON_HEIGHT = 140;
+
 
 var Simulator = {
 
-	preload: function() {
-		// this.game.load.image('windows_basic_koas', '../../../resources/image/license/itq/windows_basic_koas.png');
-		// this.game.load.image('confirm_tester_number', './image/confirm_tester_number.png');
-		// this.game.load.image('control_center', './image/control_center.png');
-		// this.game.load.image('register_tester_number', './image/register_tester_number.png');
-		// this.game.load.image('register_version', './image/register_version.png');
-		// this.game.load.image('send_file', './image/send_file.png');
-		// this.game.load.image('wait_paper', './image/wait_paper.png');
-		// this.game.load.image('windows_basic_koas_execute', './image/windows_basic_koas_execute.png');
-	},
-
 	create: function() {
 		// game.stage.backgroundColor = "#4d4d4d";
 
-		this.bgImage = game.add.sprite(game.world.centerX, game.world.centerY, 'windows_basic_koas');
+		this.bgImage = game.add.sprite(game.world.centerX, game.world.centerY, 'windows_wallpaper');
 		this.bgImage.anchor.set(0.5);
 
 		this.initVariables();
+		this.loadPopupImages();
+
 
 		// keyboard shortcut
 		this.keyboardShortcut = new KeyboardShortcut();
@@ -33,6 +49,14 @@ var Simulator = {
 		this.fullscreenButton = new FullscreenButton();
 
 
+		// buttons
+		var buttonSetting = new RoundRectButtonSetting(50, game.world.centerY, BUTTON_WIDTH, BUTTON_HEIGHT, 20);
+		this.prevButton = new RoundRectButton(buttonSetting, null, "<", (function() { this.prev(); }).bind(this));
+
+		buttonSetting.x = game.world.width - BUTTON_WIDTH + 30;
+		this.nextButton = new RoundRectButton(buttonSetting, null, ">", (function() { this.next(); }).bind(this));
+
+
 		// tip
 		var textStyle = { font: "bold 40px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
 		this.tipText = game.add.text(game.world.centerX, game.world.height - 200, "Tip text", textStyle);
@@ -54,22 +78,28 @@ var Simulator = {
 				images: [
 					{
 						name: "pen",
-						x: 100,
+						x: 200,
 						y: 100
 					},
 					{
 						name: "itq_testsheet_small",
-						x: 900,
+						x: game.world.width / 2,
 						y: 100
 					},
 				],
 				rectangles: [
 					{
-						x: 0,
+						x: 100,
-						y: 0,
+						y: 200,
 						width: 300,
 						height: 300
 					},
+					{
+						x: 500,
+						y: 200,
+						width: 200,
+						height: 200
+					},
 				]
 			},
 			{
@@ -136,11 +166,32 @@ var Simulator = {
 				]
 			},
 		];
-		console.log(this.stageData);
 
+		this.popupImages = [];
+		this.shownImages = [];
 		this.rectangles = [];
 	},
 
+
+	loadPopupImages: function() {
+		this.popupImages = {};
+		var count = POPUP_IMGE_FILENAMES.length;
+		for(var i = 0; i < count; i++) {
+			if(POPUP_IMGE_FILENAMES[i].length > 0)
+				this.popupImages[POPUP_IMGE_FILENAMES[i]] = this.makePopupImage(POPUP_IMGE_FILENAMES[i]);
+		}
+	},
+
+	makePopupImage: function(filename) {
+		var popupImage = game.add.sprite(0, 0, filename);
+		popupImage.anchor.x = 0.5;
+		popupImage.alpha = 0;
+
+		return popupImage;
+	},
+
+
+
 	prev: function() {
 		this.stageIndex--;
 		if(this.stageIndex < 0)
@@ -160,23 +211,61 @@ var Simulator = {
 	printContents: function() {
 		// this.bgImage.loadTexture(this.images[this.stageIndex]);
 
-		this.removeRectangles();
-
 		var data = this.stageData[this.stageIndex];
 		this.tipText.text = data.tip;
-		if(data.textColor != undefined)
+		if(data.textColor === undefined)
+			this.tipText.addColor("red", 0);
+		else
 			this.tipText.addColor(data.textColor, 0);
+
+		this.hideAllShownImages();
+		var imageCount = data.images.length;
+		for(var i = 0; i < imageCount; i++) {
+			var imageData = data.images[i];
+			this.showImage(imageData.name, imageData.x, imageData.y);
+		}
+
+		this.removeRectangles();
+
+		if(this.stageIndex == 0) {
+			this.prevButton.setInputEnabled(false);
+			this.nextButton.setInputEnabled(true);
+		} else if(this.stageIndex == this.stageData.length - 1) {
+			this.prevButton.setInputEnabled(true);
+			this.nextButton.setInputEnabled(false);
+		} else {
+			this.prevButton.setInputEnabled(true);
+			this.nextButton.setInputEnabled(true);
+		}
+
+		var rectangleCount = data.rectangles.length;
+		for(var i = 0; i < rectangleCount; i++) {
+			var rectangle = data.rectangles[i];
+			this.drawRectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+		}
 	},
 
-	showImage: function(image, x, y) {
+
+
+	showImage: function(imageName, x, y) {
+		var image = this.popupImages[imageName];
 		image.x = x;
 		image.y = y;
+		image.alpha = 1;
+
+		this.shownImages.push(image);
 	},
 
-	hideImage: function(image) {
+	hideAllShownImages: function() {
-		image.y = 0;
+		var count = this.shownImages.length;
+		for(var i = 0; i < count; i++) {
+			var image = this.shownImages.pop();
+			image.alpha = 0;
+		}
 	},
 
+
+
 	removeRectangles: function() {
 		var count = this.rectangles.length;
 		for(var i = 0; i < count; i++)
@@ -186,9 +275,10 @@ var Simulator = {
 	drawRectangle: function(x, y, width, height) {
 		var index = this.rectangles.length;
 
-		graphics.lyneStyle(10, 0xff0000);
+		var graphics = game.add.graphics(0, 0);
+		graphics.lineStyle(4, 0xff0000);
 		graphics.drawRect(0, 0, width, height);
-		var rectSprite = game.add.sprite(x, y, graphcis.generateTexture());
+		var rectSprite = game.add.sprite(x, y, graphics.generateTexture());
 		graphics.destroy();
 
 		this.rectangles.push(rectSprite);