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,6 +35,11 @@ function renderBody(props) {
         return (
             <div>
                 <GameContainer />
+                <div className= "row">
+                    <div className="six columns" align="left">
+                        <Logs />
+                    </div>
+                    <div className="three columns"  align="left">
                         <button
                             className="button is-dark is-fullwidth"
                             type="submit"
@@ -42,6 +48,8 @@ function renderBody(props) {
                         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);