log panel

client/cryps.css

@@ -153,7 +153,7 @@ header {
 }
 
 .header-username {
-    letter-spacing: 0.25em;
+    letter-spacing: 0.05em;
     font-size: 2em;
     display: inline;
 }
@@ -485,10 +485,7 @@ header {
 }
 
 .logs {
-    padding-left: 2em;
+    flex: 0 0 100%;
-    display: flex;
-    flex-flow: row wrap;
-    flex: 0 0 20%;
 }
 
 .selected-skills {

client/src/actions.jsx

@@ -13,6 +13,9 @@ export const setInstance = value => ({ type: SET_INSTANCE, value });
 export const SET_GAME = 'SET_GAME';
 export const setGame = value => ({ type: SET_GAME, value });
 
+export const SET_SHOW_LOG = 'SET_SHOW_LOG';
+export const setShowLog = value => ({ type: SET_SHOW_LOG, value });
+
 export const SET_COMBINER = 'SET_COMBINER';
 export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });
 

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">
+            {header}
-                <button
-                    className="game-back-btn instance-btn instance-ui-btn left"
-                    onClick={quit}>
-                    Back
-                </button>
-                <div className="spacer">
-                    <div>&nbsp;</div>
-                </div>
-            </div>
             {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' },

client/src/main.jsx

@@ -21,6 +21,7 @@ const store = createStore(
         combiner: reducers.combinerReducer,
         cryps: reducers.crypsReducer,
         game: reducers.gameReducer,
+        showLog: reducers.showLogReducer,
         info: reducers.infoReducer,
         instance: reducers.instanceReducer,
         instances: reducers.instancesReducer,

client/src/reducers.jsx

@@ -80,6 +80,16 @@ function gameReducer(state = defaultGame, action) {
     }
 }
 
+const defaultShowLog = false;
+function showLogReducer(state = defaultShowLog, action) {
+    switch (action.type) {
+        case actions.SET_SHOW_LOG:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultReclaiming = false;
 function reclaimingReducer(state = defaultReclaiming, action) {
     switch (action.type) {
@@ -116,6 +126,7 @@ module.exports = {
     combinerReducer,
     crypsReducer,
     gameReducer,
+    showLogReducer,
     instanceReducer,
     instancesReducer,
     reclaimingReducer,

client/src/socket.jsx

@@ -260,7 +260,7 @@ function createSocket(events) {
 
             // if (!account) events.loginPrompt();
             if (process.env.NODE_ENV !== 'production') {
-                send({ method: 'account_login', params: { name: 'grepking', password: 'grepgrepgrep' } });
+                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
             }
 
             return true;

client/src/utils.jsx

@@ -61,7 +61,7 @@ const STATS = {
     redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
     blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
     blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
-    speed: { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
+    speed: { stat: 'speed', colour: '', svg: shapes.triangle },
 };
 
 module.exports = {