log panel

client/src/components/cryp.list.component.jsx

@@ -1,9 +1,9 @@
 const preact = require('preact');
-const { Component } = require('preact');
 const range = require('lodash/range');
 
 const { stringSort } = require('./../utils');
 const molecule = require('./molecule');
+const SpawnButton = require('./spawn.button');
 
 const idSort = stringSort('id');
 
@@ -13,40 +13,6 @@ const COLOURS = [
     '#3498db',
 ];
 
-class SpawnButton extends Component {
-    toggle(e) {
-        this.setState({ enabled: e });
-    }
-
-    render({ spawn }, { enabled }) {
-        let spawnName = null;
-        return (
-            <div
-                className="menu-cryp-ctr spawn-btn">
-                <div
-                    className="menu-cryp"
-                    onClick={() => this.toggle(!this.enabled)} >
-                    <h2>+</h2>
-                    <input
-                        className="login-input"
-                        type="text"
-                        disabled={!enabled}
-                        placeholder="name"
-                        onChange={e => spawnName = e.target.value}
-                    />
-                    <button
-                        className="login-btn"
-                        disabled={!enabled}
-                        onClick={() => spawn(spawnName)}
-                        type="submit">
-                        spawn
-                    </button>
-                </div>
-            </div>
-        );
-    }
-}
-
 function CrypList(args) {
     const {
         cryps,
@@ -79,6 +45,7 @@ function CrypList(args) {
     const instanceJoin = (
         <button
             className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
+            disabled={instanceJoinHidden}
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
@@ -113,7 +80,7 @@ function CrypList(args) {
         : 1;
 
     const spawnButtons = range(spawnButtonsNum)
-        .map(() => <SpawnButton key={Date.now()} spawn={name => sendCrypSpawn(name)} />);
+        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
 
     return (
         <div className="menu-cryps">

client/src/components/game.component.jsx

@@ -16,11 +16,43 @@ function GamePanel(props) {
         setActiveSkill,
         selectSkillTarget,
         account,
+        showLog,
+        toggleLog,
         quit,
     } = props;
 
     if (!game) return <div>...</div>;
 
+    const header = (
+        <div className="instance-hdr">
+            <button
+                className="game-back-btn instance-btn instance-ui-btn left"
+                onClick={quit}>
+                Back
+            </button>
+            <div className="spacer">
+                <div>&nbsp;</div>
+            </div>
+            <button
+                className="game-back-btn instance-btn instance-ui-btn left"
+                onClick={() => toggleLog(!showLog)}>
+                {showLog ? 'Game' : 'Log'}
+            </button>
+        </div>
+    );
+
+    if (showLog) {
+        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
+        return (
+            <main>
+                {header}
+                <div className="logs">
+                    {logs}
+                </div>
+            </main>
+        );
+    }
+
     function findCryp(id) {
         const team = game.teams.find(t => t.cryps.find(c => c.id === id));
         if (team) return team.cryps.find(c => c.id === id);
@@ -166,20 +198,10 @@ function GamePanel(props) {
 
     const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
 
-    const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
 
     return (
         <main>
-            <div className="instance-hdr">
-                <button
-                    className="game-back-btn instance-btn instance-ui-btn left"
-                    onClick={quit}>
-                    Back
-                </button>
-                <div className="spacer">
-                    <div>&nbsp;</div>
-                </div>
-            </div>
+            {header}
             {PlayerTeam(playerTeam, setActiveSkill)}
             <div className="selected-skills">
                 {selectedSkills}
@@ -187,9 +209,6 @@ function GamePanel(props) {
             <div className="team-opponent">
                 {otherTeams.map(OpponentTeam)}
             </div>
-            <div className="logs">
-                {logs}
-            </div>
         </main>
     );
 }

client/src/components/game.container.jsx

@@ -11,7 +11,7 @@ const particlesJS = window.particlesJS;
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, game, account, activeSkill, activeIncoming } = state;
+        const { ws, game, account, showLog, activeSkill, activeIncoming } = state;
 
         function selectSkillTarget(targetCrypId) {
             if (activeSkill) {
@@ -32,7 +32,7 @@ const addState = connect(
             return false;
         }
 
-        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
+        return { game, showLog, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
     },
 
     function receiveDispatch(dispatch) {
@@ -49,7 +49,12 @@ const addState = connect(
             dispatch(actions.setGame(null));
         }
 
-        return { setActiveSkill, setActiveIncoming, quit };
+        function toggleLog(v) {
+            dispatch(actions.setShowLog(v));
+        }
+
+
+        return { setActiveSkill, setActiveIncoming, quit, toggleLog };
     }
 
 );

client/src/components/info.component.jsx

@@ -22,6 +22,7 @@ function Info(args) {
             </div>
         );
     }
+
     if (info.type === 'cryp') {
         const stats = [
             { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },