Multiline messages

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":"",

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
   }
 }