moar

html-client/src/actions.jsx

@@ -14,7 +14,10 @@ export const SET_GAME = 'SET_GAME';
 export const setGame = value => ({ type: SET_GAME, value });
 
 export const SET_COMBINER = 'SET_COMBINER';
-export const setCombiner = value => ({ type: SET_COMBINER, value });
+export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });
+
+export const SET_SELECTED_CRYPS = 'SET_SELECTED_CRYPS';
+export const setSelectedCryps = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) });
 
 export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
 export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value });

html-client/src/components/cryp.list.container.js

@@ -1,26 +1,19 @@
 const { connect } = require('preact-redux');
 
 const CrypList = require('./cryp.list');
+const actions = require('./../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, cryps, activeItem } = state;
-        function sendGamePve(crypId) {
-            return ws.sendGamePve(crypId);
-        }
+        const { ws, cryps, selectedCryps } = state;
+        return { cryps, selectedCryps };
+    },
 
-        function sendGamePvp(crypIds) {
-            return ws.sendGamePvp(crypIds);
+    function receiveDispatch(dispatch) {
+        function setSelectedCryps(crypIds) {
+            dispatch(actions.setSelectedCryps(crypIds));
         }
-
-        function sendItemUse(targetId) {
-            if (activeItem) {
-                return ws.sendItemUse(activeItem, targetId);
-            }
-            return false;
-        }
-
-        return { cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse };
+        return { setSelectedCryps };
     }
 );
 

html-client/src/components/cryp.list.jsx

@@ -1,26 +1,54 @@
 const preact = require('preact');
 
 const { stringSort } = require('./../utils');
+const molecule = require('./molecule');
 
 const idSort = stringSort('id');
 
-function CrypList({ cryps, activeCryp, avatar }) {
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
     if (!cryps) return <div>not ready</div>;
 
-    const crypPanels = cryps.sort(idSort).map(cryp => (
-        <div key={cryp.id} className="home-cryp">
-            <h2>{cryp.name}</h2>
-            <div>{cryp.hp.value} HP</div>
-            <button
-                type="submit"
-                disabled={cryp.hp.value === 0}
-                onClick={() => activeCryp(cryp.id)}>
-                activate
-            </button>
-        </div>
-    ));
+    // redux limitation + suggested workaround
+    // so much for dumb components
+    function selectCryp(id) {
+        if (selectedCryps.length < 3) {
+            selectedCryps.push(id);
+            return setSelectedCryps(selectedCryps);
+        }
+        return false;
+    }
+
+    const crypPanels = cryps.sort(idSort).map(cryp => {
+        const colour = selectedCryps.indexOf(cryp.id);
+        const selected = colour > -1;
+
+        const borderColour = selected ? COLOURS[colour] : '#000000';
+
+        return (
+            <div
+                key={cryp.id}
+                className="menu-cryp-ctr">
+                <div
+                    className="menu-cryp"
+                    style={ { 'border-color': borderColour || 'whitesmoke' } }
+                    onClick={() => selectCryp(cryp.id)} >
+                    <figure className="img">
+                        {molecule}
+                    </figure>
+                    <h2>{cryp.name}</h2>
+                </div>
+            </div>
+        );
+    });
+
     return (
-        <div>
+        <div className="menu-cryps">
             {crypPanels}
         </div>
     );

html-client/src/components/instance.component.jsx

@@ -34,6 +34,7 @@ function Cryp(cryp) {
         <div className="cryp-box">
             <figure className="img">
                 {molecule}
+                <figcaption>{cryp.name}</figcaption>
             </figure>
             <div className="skills">
                 {skills}

html-client/src/components/instance.list.component.jsx

@@ -3,8 +3,17 @@ const preact = require('preact');
 
 const { NULL_UUID } = require('./../utils');
 
-function instanceList({ instances, setActiveInstance, sendCrypsSet }) {
+function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
     if (!instances) return <div>...</div>;
+
+    const instanceJoin = (
+        <button
+            className="instance-btn glow-btn"
+            onClick={() => sendInstanceJoin()}>
+            Join New Instance
+        </button>
+    );
+
     const instancePanels = instances.map((instance) => {
         const name = instance.instance === NULL_UUID
             ? 'Normal Mode'
@@ -23,6 +32,7 @@ function instanceList({ instances, setActiveInstance, sendCrypsSet }) {
     return (
         <section>
             <h2>Instances</h2>
+            {instanceJoin}
             {instancePanels}
         </section>
     );

html-client/src/components/instance.list.container.jsx

@@ -2,17 +2,25 @@ const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
-const InstanceList = require('./instance.list');
+const InstanceList = require('./instance.list.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, events, instances } = state;
-        function setCrypsSet() {
+        const { ws, selectedCryps, instances } = state;
+        function sendCrypsSet() {
             console.log('set crypos');
             // return ws.sendGamePvp(crypIds);
         }
 
-        return { instances, setCrypsSet };
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+
+        return { instances, sendCrypsSet, sendInstanceJoin };
     },
 
     function receiveDispatch(dispatch) {

html-client/src/main.jsx

@@ -21,6 +21,7 @@ const store = createStore(
         combiner: reducers.combinerReducer,
         game: reducers.gameReducer,
         cryps: reducers.crypsReducer,
+        selectedCryps: reducers.selectedCrypsReducer,
         instances: reducers.instancesReducer,
         instance: reducers.instanceReducer,
         ws: reducers.wsReducer,

html-client/src/reducers.jsx

@@ -50,6 +50,16 @@ function instanceReducer(state = defaultInstance, action) {
     }
 }
 
+const defaultSelectedCryps = [];
+function selectedCrypsReducer(state = defaultSelectedCryps, action) {
+    switch (action.type) {
+        case actions.SET_SELECTED_CRYPS:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultCombiner = [];
 function combinerReducer(state = defaultCombiner, action) {
     switch (action.type) {
@@ -88,5 +98,6 @@ module.exports = {
     gameReducer,
     instancesReducer,
     instanceReducer,
+    selectedCrypsReducer,
     wsReducer,
 };