split out logs

html-client/src/components/body.component.jsx

@@ -8,6 +8,7 @@ const CrypSpawnContainer = require('./cryp.spawn.container');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');
+const Logs = require('./logs');
 
 const addState = connect(
     (state) => {
@@ -34,13 +35,20 @@ function renderBody(props) {
         return (
             <div>
                 <GameContainer />
-                <button
+                <div className= "row">
-                    className="button is-dark is-fullwidth"
+                    <div className="six columns" align="left">
-                    type="submit"
+                        <Logs />
-                    onClick={() => setGame(null)}
+                    </div>
-                >
+                    <div className="three columns"  align="left">
-                Back to instance
+                        <button
-                </button>
+                            className="button is-dark is-fullwidth"
+                            type="submit"
+                            onClick={() => setGame(null)}
+                        >
+                        Back to instance
+                        </button>
+                    </div>
+                </div>
             </div>
         );
     }

html-client/src/components/game.jsx

@@ -156,7 +156,6 @@ function GamePanel(props) {
                 </div>
             </div>
             <div className="row">
-                <div className="title is-4">{logs}</div>
             </div>
         </section>
     );

html-client/src/components/logs.jsx

@@ -0,0 +1,19 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+// const Logs = require('./logs');
+
+const addState = connect(
+    function receiveState(state) {
+        const { game } = state;
+        return { game };
+    }
+);
+
+function Logs(props) {
+    const { game } = props;
+    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
+    return (<div className="title is-4">{logs}</div>);
+}
+
+module.exports = addState(Logs);