UserInterface with TextMessages implemented.

2025-09-11 02:57:36 +02:00 · 2020-02-24 21:09:21 +01:00
parent 88d1c0db87
commit 479a150f9d
9 changed files with 167 additions and 41 deletions
--- a/js/ui/TextBox.js
+++ b/js/ui/TextBox.js
@@ -0,0 +1,118 @@
+import TextLine from "./TextLine.js";
+import TextAlignment from "./TextAlignment.js";
+import UserInterfaceElement from "./UserInterfaceElement.js";
+
+export default class TextBox extends UserInterfaceElement
+{
+    constructor(text, width, context)
+    {
+        super();
+        this.text = text;
+        this.width = width;
+        this.colorText = 'red';
+        this.colorShadow = 'black';
+        this.colorBorder = 'black';
+        this.hasShadow = true;
+        this.hasBorder = true;
+        this.font = 'Silkscreen';
+        this.textSize = 48;
+        this.alignment = TextAlignment.CENTER;
+        this.verticalAlignment = TextAlignment.BOTTOM;
+        this.lines = [];
+
+        this.updateLines(width, context);
+    }
+
+    updateLines(width, context)
+    {
+        context.font = this.textSize + 'px ' + this.font;
+        this.lines = this.getLinesForWidth(this.text, context, width)
+    }
+
+    animate(msForChar = 100, timeoutMilliseconds = 0)
+    {
+        let milliseconds = 0;
+
+        setTimeout(
+            () => {
+                for (let l = 0; l < this.lines.length; l++) {
+                    this.lines[l].chars = 0;
+                    setTimeout(
+                        () => {
+                            this.lines[l].animate(msForChar);
+                        }, milliseconds
+                    );
+
+                    milliseconds += this.lines[l].text.length * msForChar;
+                }
+            }, timeoutMilliseconds
+        );
+    }
+
+    draw(context, x = null, y = null)
+    {
+        if (x === null && y === null) {
+            x = this.position.x;
+            y = this.position.y;
+        }
+
+        if (this.verticalAlignment === TextAlignment.BOTTOM) {
+            let currentHeight = y;
+
+            for (let l = this.lines.length - 1; l >= 0; l--) {
+                if (this.lines[l].chars > 0) {
+                    this.lines[l].draw(context, x, currentHeight);
+                    currentHeight -= this.textSize;
+                }
+            }
+
+            return;
+        }
+
+        this.lines.forEach(
+            (line, index) => {
+                line.draw(context, x, y + this.textSize * index);
+            }
+        )
+    }
+
+    getLinesForWidth(text, context, width)
+    {
+        let words = text.split(' ');
+        let lines = [];
+        let buffer = words[0];
+
+        for (let w = 1; w < words.length; w++) {
+            let bufferNew = buffer === '' ? words[w] : buffer + ' ' + words[w];
+
+            if (context.measureText(bufferNew).width > width) {
+                lines.push(this.getLine(buffer));
+                bufferNew = words[w];
+            }
+
+            buffer = bufferNew;
+        }
+
+        if (buffer !== '') {
+            lines.push(this.getLine(buffer));
+        }
+
+        return lines;
+    }
+
+    getLine(text)
+    {
+        let line = new TextLine(text);
+
+        line.font = this.font;
+        line.size = this.textSize;
+        line.colorText = this.colorText;
+        line.colorShadow = this.colorShadow;
+        line.alignment = this.alignment;
+        line.hasShadow = this.hasShadow;
+        line.hasBorder = this.hasBorder;
+        line.colorBorder = this.colorBorder;
+
+        return line;
+    }
+}