Merge branch 'return-of-react' of ssh://cryps.gg:40022/~/cryps into return-of-react

html-client/cryps.css

@@ -324,6 +324,11 @@ header {
     align-items: stretch;
 }
 
+.cryp-box .particle {
+    position: fixed;
+    z-index: -10;
+}
+
 .cryp-box figure {
     margin: 0;
     flex: 0 0 50%;

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

@@ -1,20 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypList = require('./cryp.list.component');
-const actions = require('./../actions');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, cryps, selectedCryps } = state;
-        return { cryps, selectedCryps };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setSelectedCryps(crypIds) {
-            dispatch(actions.setSelectedCryps(crypIds));
-        }
-        return { setSelectedCryps };
-    }
-);
-
-module.exports = addState(CrypList);

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

@@ -101,6 +101,7 @@ function GamePanel(props) {
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 className={`cryp-box ${ko}`} >
                 <div className="cryp-box-top">
+                    <div id={`particles-${cryp.id}`} className="particle"> </div>
                     <figure
                         className="img"
                         onClick={() => selectSkillTarget(cryp.id)} >

html-client/src/components/game.container.js

@@ -1,51 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Game = require('./game.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, game, account, activeSkill, activeIncoming } = state;
-
-        function selectSkillTarget(targetCrypId) {
-            if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
-            }
-            return false;
-        }
-
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
-        }
-
-        function selectIncomingTarget(crypId) {
-            if (activeIncoming) {
-                return ws.sendGameTarget(game.id, crypId, activeIncoming);
-            }
-            return false;
-        }
-
-        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setActiveSkill(crypId, skill) {
-            dispatch(actions.setActiveSkill(crypId, skill));
-        }
-
-        function setActiveIncoming(skillId) {
-            dispatch(actions.setActiveIncoming(skillId));
-        }
-
-        function quit() {
-            dispatch(actions.setGame(null));
-        }
-
-        return { setActiveSkill, setActiveIncoming, quit };
-    }
-
-);
-
-module.exports = addState(Game);

html-client/src/components/game.container.jsx

@@ -1,8 +1,13 @@
+import 'particles.js/particles';
+
 const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
 const Game = require('./game.component');
+const config = require('./particles.config');
+
+const particlesJS = window.particlesJS;
 
 const addState = connect(
     function receiveState(state) {
@@ -33,6 +38,7 @@ const addState = connect(
     function receiveDispatch(dispatch) {
         function setActiveSkill(crypId, skill) {
             dispatch(actions.setActiveSkill(crypId, skill));
+            particlesJS(`particles-${crypId}`, config);
         }
 
         function setActiveIncoming(skillId) {

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

@@ -1,7 +1,6 @@
 // eslint-disable-next-line
 const preact = require('preact');
 const LoginContainer = require('./login.container');
-const ParticleContainer = require('./particles.container');
 
 function renderHeader() {
     return (

html-client/src/components/particles.config.js

@@ -1,6 +1,6 @@
 const config = {
     particles: {
-        number: { value: 80, density: { enable: true, value_area: 800 } },
+        number: { value: 300, density: { enable: true, value_area: 800 } },
         color: { value: '#ffffff' },
         shape: {
             type: 'circle',
@@ -36,28 +36,6 @@ const config = {
             attract: { enable: false, rotateX: 600, rotateY: 1200 },
         },
     },
-    interactivity: {
-        detect_on: 'canvas',
-        events: {
-            onhover: { enable: true, mode: 'repulse' },
-            onclick: { enable: true, mode: 'push' },
-            resize: true,
-        },
-        modes: {
-            grab: { distance: 400, line_linked: { opacity: 1 } },
-            bubble: {
-                distance: 400,
-                size: 40,
-                duration: 2,
-                opacity: 8,
-                speed: 3,
-            },
-            repulse: { distance: 200, duration: 0.4 },
-            push: { particles_nb: 4 },
-            remove: { particles_nb: 2 },
-        },
-    },
-    retina_detect: true,
 };
 
 module.exports = config;

html-client/src/components/particles.container.jsx

@@ -1,19 +0,0 @@
-import 'particles.js/particles';
-
-const preact = require('preact');
-const config = require('./particles.config');
-
-const particlesJS = window.particlesJS;
-
-class ParticleContainer extends preact.Component {
-    componentDidMount() {
-        particlesJS('particles-js', config);
-    }
-
-    render() {
-        return (
-            <div id="particles-js"> </div>
-        );
-    }
-}
-module.exports = ParticleContainer;