diff --git a/rooms/sample.tmj b/rooms/sample.tmj index cf54ceb..6264914 100644 --- a/rooms/sample.tmj +++ b/rooms/sample.tmj @@ -100,7 +100,7 @@ { "name":"messageText", "type":"string", - "value":"I'm just a humble box!" + "value":"I'm just a humble box!\nIt's possible to say more than one thing you know." }], "rotation":0, "type":"", diff --git a/src/message.js b/src/message.js index ea68330..34a1142 100644 --- a/src/message.js +++ b/src/message.js @@ -1,7 +1,8 @@ export default class Message { constructor(game, text) { this.game = game - this.text = text + this.text = text.split("\n") + this.currentText = this.text.shift() this.textColor = "white" this.backgroundColor = "black" this.textIndex = 0 @@ -19,8 +20,12 @@ export default class Message { if (ijp) { if (this.messageComplete()) { this.game.closeMessage(this) + } else if (this.lineComplete()) { + this.currentText = this.text.shift() + this.textProgress = 0.0 + this.textIndex = 0 } else { - this.textProgress = this.text.length + this.textProgress = this.currentText.length } } } @@ -31,17 +36,29 @@ export default class Message { ctx.font = `bold ${this.textSize}px sans-serif` ctx.textBaseline = "top" ctx.fillStyle = this.textColor - ctx.fillText(this.text.substring(0, this.textIndex), 5, 5) + ctx.fillText(this.currentText.substring(0, this.textIndex), 5, 5) if (this.messageComplete()) { ctx.fillRect( ctx.canvas.width - 20, this.backgroundHeight - 20, 10, 10 ) + } else if (this.lineComplete()) { + ctx.beginPath() + ctx.moveTo(ctx.canvas.width - 20, this.backgroundHeight - 20) + ctx.lineTo(ctx.canvas.width - 20, this.backgroundHeight - 10) + ctx.lineTo(ctx.canvas.width - 15, this.backgroundHeight - 15) + ctx.lineTo(ctx.canvas.width - 20, this.backgroundHeight - 20) + ctx.fill() + ctx.closePath() } } + lineComplete() { + return this.textIndex >= this.currentText.length + 3 + } + messageComplete() { - return this.textIndex >= this.text.length + 3 + return this.lineComplete() && !this.text.length } }