Basic graph display

client/src/components/body.component.jsx

@@ -8,28 +8,26 @@ const CrypSpawnContainer = require('./cryp.spawn.container');
 const GameJoinButton = require('./game.join.button');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
+const Passives = require('./passive.container');
 
 const addState = connect(
     (state) => {
-        const { game, ws } = state;
-
+        const { game, ws, account } = state;
         if (!game) {
-            console.log('out of game');
             ws.clearGameStateInterval();
         }
-
-        return { game };
+        return state;
     },
     (dispatch) => {
         function setGame(game) {
             dispatch(actions.setGame(game));
         }
         return { setGame };
-    },
+    }
 );
 
 function renderBody(props) {
-    const { game, setGame } = props;
+    const { game, setGame, account } = props;
     if (game) {
         return (
             <div>
@@ -44,26 +42,33 @@ function renderBody(props) {
             </div>
         );
     }
-    return (
-        <section className="columns">
-            <div className="column is-4">
-                <div className="column">
-                    <GameJoinButton />
-                    <CrypSpawnContainer />
-                </div>
-                <div className="column">
-                    <div className="columns">
-                        <div className="column is-8">
-                            <CrypListContainer />
-                        </div>
-                        <div className="column">
-                            <ItemListContainer />
+    if (account) {
+        return (
+            <section className="columns">
+                <div className="column is-4">
+                    <div className="column">
+                        <GameJoinButton />
+                        <CrypSpawnContainer />
+                    </div>
+                    <div className="column">
+                        <div className="columns">
+                            <div className="column is-8">
+                                <CrypListContainer />
+                            </div>
+                            <div className="column">
+                                <ItemListContainer />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </section>
-    );
+                <div className ="column">
+                    <Passives />
+                </div>
+            </section>
+        );
+    } else {
+        return <div>not ready</div>;
+    }
 }
 
 module.exports = addState(renderBody);

client/src/components/passive.container.jsx

@@ -0,0 +1,49 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+const Phaser = require('phaser');
+const PhaserPassives = require('./phaser.passives');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            game, activeSkill, activeIncoming, account,
+        } = state;
+        return {
+            game, activeSkill, activeIncoming, account,
+        };
+    }
+);
+
+class PhaserInstance extends preact.Component {
+    constructor(props) {
+        super(props);
+        this.props = props;
+    }
+
+    componentDidMount() {
+    // now mounted, can freely modify the DOM:
+        this.PhaserPassives = new PhaserPassives();
+        const config = {
+            type: Phaser.DOM.FILL,
+            width: 1200,
+            height: 900,
+            parent: 'passives',
+            physics: {
+                default: 'arcade',
+                arcade: {
+                    gravity: { y: 0 },
+                },
+            },
+            scene: this.PhaserPassives,
+        };
+        const game = new Phaser.Game(config);
+    }
+
+    render() {
+        return (
+            <div id="passives" style="overflow: hidden;">
+            </div>
+        );
+    }
+}
+module.exports = addState(PhaserInstance);

client/src/components/passive.node.js

@@ -0,0 +1,36 @@
+const Phaser = require('phaser');
+
+class PassiveNode extends Phaser.GameObjects.Sprite {
+    constructor(scene, x, y, id, alloc) {
+        super(scene, x, y);
+        this.setTexture('eye');
+
+        this.scene = scene;
+        this.alloc = alloc;
+        this.id = id;
+        this.setPosition(x, y);
+        this.setScale(0.25);
+
+        if (this.alloc) {
+            this.setTint(0xff0000);
+        }
+    }
+
+    allocate() {
+        if (this.alloc) {
+            this.clearTint();
+            this.alloc = false;
+        } else {
+            this.alloc = true;
+            this.setTint(0xff0000);
+        }
+        for (let i = 0; i < this.scene.passiveNodes.length; i += 1) {
+            if (this.scene.passiveNodes[i].id === this.id) {
+                this.scene.passiveNodes[i].alloc = this.alloc;
+            }
+        }
+        this.scene.drawPassiveEdges();
+    }
+}
+
+module.exports = PassiveNode;