moar

html-client/.eslintrc.js

@@ -539,7 +539,7 @@ module.exports = {
         // require parens in arrow function arguments
         // https://eslint.org/docs/rules/arrow-parens
         'arrow-parens': ['error', 'as-needed', {
-          requireForBlockBody: true,
+          requireForBlockBody: false,
         }],
 
         // require space before/after arrow function's arrow

html-client/cryps.css

@@ -34,7 +34,20 @@ button:hover {
     margin-bottom: 1.5em;
 }
 
-.home-cryp {
+.menu-cryps {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.menu-cryp-ctr {
+    flex: 0 1 33%;
+    text-align: center;
+}
+
+.menu-cryp {
+    margin: 0.5em;
+    box-sizing: border-box;
+    border: 2px solid whitesmoke;
 }
 
 .background {
@@ -205,6 +218,11 @@ button:hover {
     margin: 0;
     flex-grow: 1;
     border: 1px solid whitesmoke;
+    text-align: center;
+}
+
+.cryp-box figure figcaption {
+    /*border-top: 1px solid whitesmoke;*/
 }
 
 .cryp-box .skills {

html-client/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "parcel index.html --port 40080 --no-hmr --no-source-maps",
+    "start": "parcel index.html --port 40080 --no-source-maps",
     "build": "rm -rf dist && parcel build index.html",
     "lint": "eslint --fix --ext .jsx src/",
     "test": "echo \"Error: no test specified\" && exit 1"

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,
 };