2018js13k/dialog.js

function Dialog(game, camera) {
	this.system = null;

	var speakers = [];
	this.textOffset = 150;
	this.textRowOffset = 24;
	this.profileCardBounds = {x: 0, y: -100, width: 150, height: 210};
	this.dialogBounds = {left: 30, right: 30};
	this.conversationIndex = 0;
	this.displayDialog = false;

	var conversation = [];

	this.init = function(systemObject, canvas) {
		this.system = systemObject;
		this.canvas = canvas;
		
	};

	this.beginConversation = function(text, subjects) {
		if(!this.displayDialog) {
			this.displayDialog = true;
			conversation = text;
			speakers = subjects;
			this.conversationIndex = 0;
		}
	};

	this.update = function(delta) {
		//this.conversationIndex = (this.conversationIndex + 1) % conversation.length;
	};

	this.draw = function(context) {
		if(!this.displayDialog) {
			return;
		}

		context.save();
		context.translate(this.dialogBounds.left, this.canvas.height - 150);

		context.globalAlpha = 0.6;
		context.beginPath();
		context.fillStyle = "white";
		context.rect(0, 0, this.canvas.width - (this.dialogBounds.left + this.dialogBounds.right), 120);
		context.fill();
		context.globalAlpha = 1;


		var message = conversation[this.conversationIndex];
		var subject = speakers[this.conversationIndex];

		context.font = "24px sans-serif";
		this.textRowOffset = 24;
		this.profileCardBounds = {x: 0, y: -100, width: 150, height: 210};
		this.dialogBounds = {left: 30, right: 30};
		this.textOffset = 0;
		if(subject == 0) {
			this.textOffset = this.profileCardBounds.width;
		}
		if(this.canvas.width < 768) {
			context.font = "12px sans-serif";
			this.textRowOffset = 12;
			this.profileCardBounds = {x: 0, y: -50, width: 75, height: 105};
			this.dialogBounds = {left: 10, right: 10};
			if(subject == 0) {
				this.textOffset = this.profileCardBounds.width;
			}
		}

		if(subject == 0) {
			context.beginPath();
			context.fillStyle = "crimson";
			context.rect(this.profileCardBounds.x + 10, this.profileCardBounds.y, this.profileCardBounds.width, this.profileCardBounds.height);
			context.fill();
		}

		if(subject == 1) {
			context.beginPath();
			context.fillStyle = "cornflowerblue";
			context.rect(this.canvas.width - (this.profileCardBounds.width + this.dialogBounds.right + this.dialogBounds.left + 10), this.profileCardBounds.y, this.profileCardBounds.width, this.profileCardBounds.height);
			context.fill();
		}
		
		message = message.split(" ");
		
		context.textAlign = "left";
		context.textBaseline = "hanging";
		context.fillStyle = "black";
		
		var displayText = [];
		var index = 0;
		var row = 0;
		while(message.length > 0) {
			var textMetrics = context.measureText(displayText.join(" ") + message[index]);
			if(textMetrics.width >= this.canvas.width - (this.profileCardBounds.width + this.dialogBounds.right + this.dialogBounds.left + 40)) {
				message.splice(0, index);
				index = 0;
				context.fillText(displayText.join(" "), this.textOffset + 20, (this.textRowOffset * row++) + 10);
				displayText = [];
			}
			displayText.push(message[index++]);
		}

		context.restore();
	};

	this.handleAdvance = function(button, x, y) {
		if(!this.displayDialog) {
			return false;
		}

		if(x > this.dialogBounds.left && x < this.canvas.width - this.dialogBounds.right) {
			if(y > this.canvas.height - 150 && y < this.canvas.height - 30) {
				if(button == 0) {
					this.conversationIndex++;
					if(this.conversationIndex > conversation.length - 1) {
						this.displayDialog = false;
					}
					return true;
				} else if (button == null) {
					return true;	
				}
			}
		}
		return false;
	}
};