feat: text and textual trait

packages/graphics/index.js

@@ -12,6 +12,7 @@ export {Renderable} from './renderable';
 export {Renderer} from './renderer';
 export {Sprite} from './sprite';
 export {Stage} from './stage';
+export {Text} from './text';
 // Pixelly!
 settings.SCALE_MODE = SCALE_MODES.NEAREST;
 // Lil pixi manegement.

packages/graphics/text.js

@@ -0,0 +1,17 @@
+import {Text as PIXIText} from '@pixi/text';
+
+import {Renderable} from './renderable';
+
+export class Text extends Renderable {
+
+  constructor(text, style) {
+    super();
+    this.text = new PIXIText(text, style);
+    this.anchor = [0.5, 0.5];
+  }
+
+  get internal() {
+    return this.text;
+  }
+
+}

packages/graphics/traits/textual.trait.js

@@ -0,0 +1,61 @@
+import {compose} from '@avocado/core';
+import {StateProperty, Trait} from '@avocado/entity';
+import {Text} from '@avocado/graphics';
+
+const decorate = compose(
+  StateProperty('text', {
+    track: true,
+  }),
+)
+
+export class Textual extends decorate(Trait) {
+
+  static defaultState() {
+    return {
+      text: '',
+      textStyle: {},
+    };
+  }
+
+  static type() {
+    return 'textual';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this._text = undefined;
+  }
+
+  loadText() {
+    if (!this.entity.container) {
+      return;
+    }
+    if (this._text) {
+      this.entity.container.removeChild(this._text);
+    }
+    this._text = new Text(this.state.text, this.state.textStyle);
+    this._text.zIndex = 1000;
+    this.entity.container.addChild(this._text);
+  }
+
+  listeners() {
+    return {
+
+      textChanged: () => {
+        this.loadText();
+      },
+
+      traitAdded: (type) => {
+        if (-1 === [
+          'textual',
+          'visible',
+        ].indexOf(type)) {
+          return;
+        }
+        this.loadText();
+      },
+
+    };
+  }
+
+}