specs in info

client/src/components/info.component.jsx

@@ -6,9 +6,7 @@ function Info(args) {
         info,
         sendUnequip,
     } = args;
-    if (!info) return (<div className="instance-info">&nbsp;</div>);
-
-    console.log(info);
+    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
 
     const [type, value] = info;
 
@@ -29,24 +27,24 @@ function Info(args) {
 
     if (type === 'cryp') {
         const cryp = value;
-        const stats = [
-            { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
-            { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
-            { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
-            { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
-            { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
-            { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
-        ].map((s, i) => (
-            <div key={i}>{s.disp}: {cryp[s.stat].max}</div>
-        ));
-        const skills = cryp.skills.map((s, i) => <button key={s.skill} onClick={() => sendUnequip(cryp.id, s.skill)}> {s.skill} </button>);
+        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> {cryp.name} </h5>
-                {stats}
-                {skills}
+                <h5>{cryp.name}</h5>
+                <div className="info-skills">
+                    {skills}
+                </div>
+                <div className="info-specs">
+                    {specs}
+                </div>
+
             </div>
         );
     }

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/reducers.jsx

@@ -110,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:

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.setInfo([]);
     }
 
     function sendVboxDiscard(instanceId) {