Added Specs to cryp Instance box

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) });
 
@@ -26,7 +29,7 @@ export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
 export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
 
 export const SET_INFO = 'SET_INFO';
-export const setInfo = (type, value) => ({ type: SET_INFO, value: type ? { type, value } : null });
+export const setInfo = value => ({ type: SET_INFO, value });
 
 export const SET_RECLAIMING = 'SET_RECLAIMING';
 export const setReclaiming = value => ({ type: SET_RECLAIMING, 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

@@ -6,9 +6,10 @@ function Info(args) {
         info,
         sendUnequip,
     } = args;
-    if (!info) return (<div className="instance-info">&nbsp;</div>);
+    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
 
-    if (info.type === 'item') {
+    const [type, value] = info;
+    if (type === 'item') {
         return (
             <div className="instance-info">
                 {info.value} - what does it do?
@@ -16,34 +17,34 @@ function Info(args) {
         );
     }
 
-    if (info.type === 'skill') {
+    if (type === 'skill') {
         return (
             <div className="instance-info">
                 <div>
-                    <div> {info.value.skill} </div>
+                    <div> {value.skill} </div>
-                    <div> {SKILLS[info.value.skill].description} </div>
+                    <div> {SKILLS[value.skill].description} </div>
-                </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
-                <button onClick={() => sendUnequip(info.value.cryp.id, info.value.skill)}>
                     unequip
-                </button>
+                    </button>
+                </div>
             </div>
         );
     }
-    if (info.type === 'spec') {
+    if (type === 'spec') {
         return (
             <div className="instance-info">
                 <div>
-                    <div> {info.value.spec} </div>
+                    <div> {value.spec} </div>
-                    <div> {SPECS[info.value.spec].description} </div>
+                    <div> {SPECS[value.spec].description} </div>
                 </div>
-                <button onClick={() => sendUnequip(info.value.cryp.id, info.value.spec)}>
+                <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                     unequip
                 </button>
             </div>
         );
     }
 
-    if (info.type === 'cryp') {
+    if (type === 'cryp') {
         const stats = [
             { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
             { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
@@ -53,16 +54,30 @@ function Info(args) {
             { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
             { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
         ].map((s, i) => (
-            <div key={i}>{s.disp}: {info.value[s.stat].base} -> {info.value[s.stat].max}</div>
+            <div key={i}>{s.disp}: {value[s.stat].base} - {value[s.stat].max}</div>
         ));
+        const cryp = value;
+        const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
+            onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);
+
+        const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
+            onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);
+
         return (
             <div className="instance-info">
-                <h5> {info.value.name} </h5>
+                <h5>{cryp.name}</h5>
-                {stats}
+                <div className="info-stats">
+                    {stats}
+                </div>
+                <div className="info-skills">
+                    {skills}
+                </div>
+                <div className="info-specs">
+                    {specs}
+                </div>
             </div>
         );
     }
-
 }
 
 module.exports = Info;

client/src/components/instance.component.jsx

@@ -71,7 +71,7 @@ function InstanceComponent(args) {
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
+    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo));
 
     return (
         <main className="instance" >

client/src/components/instance.container.jsx

@@ -16,6 +16,8 @@ const addState = connect(
             return ws.sendVboxApply(instance.instance, crypId, i);
         }
 
+        console.log(instance, 'instaince')
+
         return { instance, account, sendInstanceReady, sendVboxApply };
     },
 
@@ -24,8 +26,8 @@ const addState = connect(
             dispatch(actions.setInstance(null));
         }
 
-        function setInfo(item, cryp) {
+        function setInfo(item, value) {
-            dispatch(actions.setInfo(item, cryp));
+            dispatch(actions.setInfo([item, value]));
         }
 
         return { quit, setInfo };

client/src/components/spawn.button.jsx

@@ -0,0 +1,59 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+class SpawnButton extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = { value: null, enabled: false };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.enable = this.enable.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ value: event.target.value });
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        this.props.spawn(this.state.value);
+        this.setState({ value: null, enabled: false });
+    }
+
+    enable() {
+        this.setState({ enabled: true });
+    }
+
+    render() {
+        return (
+            <div
+                key={this.props.i}
+                className="menu-cryp-ctr spawn-btn">
+                <div
+                    className="menu-cryp"
+                    onClick={() => this.enable()} >
+                    <h2>+</h2>
+                    <input
+                        className="login-input"
+                        type="text"
+                        disabled={!this.state.enabled}
+                        value={this.state.value}
+                        placeholder="name"
+                        onChange={this.handleChange}
+                    />
+                    <button
+                        className="login-btn"
+                        disabled={!this.state.enabled}
+                        onClick={this.handleSubmit}
+                        type="submit">
+                        spawn
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+module.exports = SpawnButton;

client/src/components/vbox.container.jsx

@@ -45,7 +45,7 @@ const addState = connect(
         }
 
         function setInfo(type, info) {
-            return dispatch(actions.setInfo(type, info));
+            return dispatch(actions.setInfo([type, info]));
         }
 
 

client/src/events.jsx

@@ -32,8 +32,8 @@ function registerEvents(store) {
         store.dispatch(actions.setActiveSkill(skill));
     }
 
-    function setInfo(info) {
+    function clearInfo(info) {
-        store.dispatch(actions.setInfo(info));
+        store.dispatch(actions.setInfo([]));
         console.log('event clear item');
     }
 
@@ -202,7 +202,7 @@ function registerEvents(store) {
         setCryps,
         setCrypList,
         setGame,
-        setInfo,
+        clearInfo,
         setMenu,
         setPlayer,
         setInstanceList,

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) {
@@ -100,7 +110,7 @@ function wsReducer(state = defaultWs, action) {
     }
 }
 
-const defaultInfo = null;
+const defaultInfo = [];
 function infoReducer(state = defaultInfo, action) {
     switch (action.type) {
         case actions.SET_INFO:
@@ -116,6 +126,7 @@ module.exports = {
     combinerReducer,
     crypsReducer,
     gameReducer,
+    showLogReducer,
     instanceReducer,
     instancesReducer,
     reclaimingReducer,

client/src/socket.jsx

@@ -95,7 +95,7 @@ function createSocket(events) {
 
     function sendVboxUnequip(instanceId, crypId, target) {
         send({ method: 'player_vbox_unequip', params: { instance_id: instanceId, cryp_id: crypId, target } });
-        events.setInfo(null);
+        events.clearInfo();
     }
 
     function sendVboxDiscard(instanceId) {
@@ -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 },
 };
 
 const SPECS = {

server/src/vbox.rs

@@ -638,6 +638,20 @@ pub fn vbox_unequip(params: VboxUnequipParams, tx: &mut Transaction, account: &A
         None => return Err(err_msg("var has no effect on cryps")),
     }
 
+    // now the var has been applied
+    // recalculate the stats of the whole team
+    let team_colours = player.cryps.iter().fold(Colours::new(), |tc, c| {
+        Colours {
+            red: tc.red + c.colours.red,
+            green: tc.green + c.colours.green,
+            blue: tc.blue + c.colours.blue
+        }
+    });
+
+    for cryp in player.cryps.iter_mut() {
+        cryp.apply_modifiers(&team_colours);
+    }
+
     player.vbox.bound.push(params.target);
     return player_update(tx, player, false);
 }