Added particles.js

html-client/package.json

@@ -21,6 +21,7 @@
     "keymaster": "^1.6.2",
     "lodash": "^4.17.11",
     "parcel": "^1.12.3",
+    "particles.js": "^2.0.0",
     "phaser": "^3.15.1",
     "preact": "^8.3.1",
     "preact-redux": "^2.0.3",

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

@@ -0,0 +1,20 @@
+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.container.js

@@ -0,0 +1,51 @@
+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/header.component.jsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line
 const preact = require('preact');
-
 const LoginContainer = require('./login.container');
+const ParticleContainer = require('./particles.container');
 
 function renderHeader() {
     return (
@@ -10,8 +10,10 @@ function renderHeader() {
                 cryps.gg
             </h1>
             <LoginContainer />
+            <ParticleContainer />
         </header>
     );
 }
 
+
 module.exports = renderHeader;

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

@@ -0,0 +1,63 @@
+const config = {
+    particles: {
+        number: { value: 80, density: { enable: true, value_area: 800 } },
+        color: { value: '#ffffff' },
+        shape: {
+            type: 'circle',
+            stroke: { width: 0, color: '#000000' },
+            polygon: { nb_sides: 5 },
+            image: { src: 'img/github.svg', width: 100, height: 100 }
+        },
+        opacity: {
+            value: 0.5,
+            random: false,
+            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
+        },
+        size: {
+            value: 3,
+            random: true,
+            anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
+        },
+        line_linked: {
+            enable: true,
+            distance: 150,
+            color: '#ffffff',
+            opacity: 0.4,
+            width: 1,
+        },
+        move: {
+            enable: true,
+            speed: 6,
+            direction: 'none',
+            random: false,
+            straight: false,
+            out_mode: 'out',
+            bounce: false,
+            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

@@ -0,0 +1,19 @@
+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;