refactor: hasGraphics, conditional entity container

packages/entity/traits/animated.js

@@ -35,6 +35,7 @@ class AnimatedBase extends Trait {
     this.frameSize = this.params.get('frameSize');
     this.image = this.params.get('image');
     this.frameCaret = this.frameRate;
+    this.loadSpriteImageIfPossible();
   }
 
   get frameRect() {
@@ -47,6 +48,17 @@ class AnimatedBase extends Trait {
     ];
   }
 
+  loadSpriteImageIfPossible() {
+    if (!('container' in this.entity)) {
+      return;
+    }
+    Image.load(this.image).then((image) => {
+      this.sprite = new Sprite(image);
+      this.entity.container.addChild(this.sprite);
+      this.updateFrameRect();
+    });
+  }
+
   updateFrameRect() {
     if (this.sprite) {
       this.sprite.sourceRectangle = this.frameRect;
@@ -76,14 +88,7 @@ class AnimatedBase extends Trait {
         if ('graphical' !== trait.constructor.type()) {
           return;
         }
-        if (!this.entity.container.isValid) {
+        this.loadSpriteImageIfPossible();
-          return;
-        }
-        Image.load(this.image).then((image) => {
-          this.sprite = new Sprite(image);
-          this.updateFrameRect();
-          this.entity.container.addChild(this.sprite);
-        });
       },
     };
   }

packages/entity/traits/graphical.js

@@ -1,5 +1,5 @@
 import {compose} from '@avocado/core';
-import {Container} from '@avocado/graphics';
+import {hasGraphics, Container} from '@avocado/graphics';
 
 import {simpleState, Trait} from '../trait';
 
@@ -20,7 +20,9 @@ class GraphicalBase extends Trait {
 
   constructor(...args) {
     super(...args);
-    this._container = new Container();
+    if (hasGraphics) {
+      this._container = new Container();
+    }
   }
 
   get container() {
@@ -30,17 +32,17 @@ class GraphicalBase extends Trait {
   listeners() {
     const listeners = {};
     const trackPosition = this.params.get('trackPosition');
-    if (trackPosition && this._container.isValid) {
+    if (trackPosition && hasGraphics) {
       listeners.traitAdded = (trait) => {
         if ('positioned' === trait.constructor.type()) {
-          this._container.position = this.entity.position;
+          this.entity.container.position = this.entity.position;
         }
       };
       listeners.xChanged = (x) => {
-        this._container.x = x;
+        this.entity.container.x = x;
       };
       listeners.yChanged = (y) => {
-        this._container.y = y;
+        this.entity.container.y = y;
       };
     }
     return listeners;

packages/graphics/index.js

@@ -5,3 +5,6 @@ export {Primitives} from './primitives';
 export {Renderable} from './renderable';
 export {Renderer} from './renderer';
 export {Sprite} from './sprite';
+
+const hasGraphics = 'undefined' !== typeof window;
+export {hasGraphics};

packages/graphics/renderable.js

@@ -8,10 +8,6 @@ export class Renderable {
     this.internal.alpha = alpha;
   }
 
-  get isValid() {
-    return !!this.internal;
-  }
-
   get position() {
     return [this.internal.x, this.internal.y];
   }